/* FLUID CALCULATIONS FOR SPACING & TYPE ----------------------------------------- BASED ON VIEWPORTS: 375px to 1680px ----------------------------------------- FORMULA font-size = calc(ZZ + ((1vw - XX) * YY)) Where XX = min_viewport / 100 YY = 100 * (max_font_size - min_font_size) / (max_viewport - min_viewport) = 100 * font_size_difference / viewport_difference ZZ = Minimum font-size stated in REM 1 REM = 10px * safari fix min-height: 0vw ---------------------------------------- 5px to 10px calc(0.5rem + ((1vw - 3.75px) * 0.3831)) ----------------------------------------- 8px to 15px calc(0.8rem + ((1vw - 3.75px) * 0.5364)) ----------------------------------------- 15px to 30px calc(1.5rem + ((1vw - 3.75px) * 1.1494)) ----------------------------------------- 20px to 40px calc(2rem + ((1vw - 3.75px) * 1.5326)) ----------------------------------------- 30px to 60px calc(3rem + ((1vw - 3.75px) * 2.2989)) ----------------------------------------- 40px to 80px calc(4rem + ((1vw - 3.75px) * 3.0651)) ----------------------------------------- 70px to 100px calc(7rem + ((1vw - 3.75px) * 2.2989)) ----------------------------------------- 100px to 200px calc(10rem + ((1vw - 3.75px) * 7.6628)) ----------------------------------------- 100px to 150px calc(10rem + ((1vw - 3.75px) * 3.8314)) ----------------------------------------- 150px to 250px calc(15rem + ((1vw - 3.75px) * 7.6628)) ----------------------------------------- 345px to 520px calc(34.5rem + ((1vw - 3.75px) * 13.41)) ----------------------------------------- 345px to 745px calc(34.5rem + ((1vw - 3.75px) * 30.6513)) ----------------------------------------- 345px to 795px calc(34.5rem + ((1vw - 3.75px) * 34.4828)) ----------------------------------------- 345px to 1070px calc(34.5rem + ((1vw - 3.75px) * 55.5556)) ----------------------------------------- 345px to 1140px calc(34.5rem + ((1vw - 3.75px) * 60.9195)) ----------------------------------------- 345px to 1345px calc(34.5rem + ((1vw - 3.75px) * 76.6284)) ----------------------------------------- */ /*html:not(.no-js) [datafadein] {opacity: 0; transition: opacity .5s ease-in;}*/ /*********/ /* FONTS */ /*********/ @font-face { font-family: 'Brown'; font-weight: 400; src: url("//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/fonts/BrownStd-Regular.woff") format('woff'), url("//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/fonts/BrownStd-Regular.ttf") format('truetype');} @font-face { font-family: 'Brown'; font-weight: 700; src: url("//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/fonts/BrownStd-Bold.woff") format('woff'), url("//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/fonts/BrownStd-Bold.ttf") format('truetype');} @font-face { font-family: 'BrownMono'; font-weight: 400; src: url("//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/fonts/BrownMonoLLWebTrial-Regular.woff") format('woff');} /* * Legal Disclaimer for Web licence * * Licence to use self-hosted webfonts for displaying dynamic text on specified website domains. Our package includes WOFF and WOFF2 font formats. * * Should the license page views limit be exceeded the license holder will be required to contact Lineto.com for an upgrade. * * It is strictly prohibited to rename the font and to download or use these fonts in any other media. * * These Web fonts are licensed exclusively for the use on the following domain(s) and their subdomains: * * www.cambridgecoaching.com (monthly pageviews: <50K) * */ /* complete */ /* CAMEO */ @font-face { font-family: "BrownCameoLLVIPWeb"; font-weight: 400; src: url('//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/fonts/BrownCameoLLVIPWeb-Regular.woff') format("woff"), url('//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/fonts/BrownCameoLLVIPWeb-Regular.woff2') format("woff2"); } @font-face { font-family: "BrownCameoLLWeb"; font-weight: 400; src: url('//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/fonts/BrownCameoLLWeb-Regular.woff') format("woff"), url('//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/fonts/BrownCameoLLWeb-Regular.woff2') format("woff2"); } /* SHADED */ @font-face { font-family: "BrownShadedLLWeb"; font-weight: 400; src: url('//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/fonts/BrownShadedLLWeb-Regular.woff') format("woff"), url('//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/fonts/BrownShadedLLWeb-Regular.woff2') format("woff2"); } /* INLINE */ @font-face { font-family: "BrownInlineLLWeb"; font-weight: 200; src: url('//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/fonts/BrownInlineLLWeb-Light.woff') format("woff"), url('//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/fonts/BrownInlineLLWeb-Light.woff2') format("woff2"); } @font-face { font-family: "BrownInlineLLWeb"; font-weight: 400; src: url('//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/fonts/BrownInlineLLWeb-Regular.woff') format("woff"), url('//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/fonts/BrownInlineLLWeb-Regular.woff2') format("woff2"); } @font-face { font-family: "BrownInlineLLWeb"; font-weight: 500; src: url('//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/fonts/BrownInlineLLWeb-Medium.woff') format("woff"), url('//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/fonts/BrownInlineLLWeb-Medium.woff2') format("woff2"); } @font-face { font-family: "BrownInlineLLWeb"; font-weight: 700; src: url('//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/fonts/BrownInlineLLWeb-Bold.woff') format("woff"), url('//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/fonts/BrownInlineLLWeb-Bold.woff2') format("woff2"); } /* subset */ @font-face { font-family: "BrownCameoLLVIPSub"; font-weight: 400; src: url('//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/fonts/BrownCameoLLVIPSub-Regular.woff') format("woff"), url('//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/fonts/BrownCameoLLVIPSub-Regular.woff2') format("woff2"); } @font-face { font-family: "BrownCameoLLSub"; font-weight: 400; src: url('//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/fonts/BrownCameoLLSub-Regular.woff') format("woff"),url('//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/fonts/BrownCameoLLSub-Regular.woff2') format("woff2"); } @font-face { font-family: "BrownInlineLLSub"; font-weight: 700; src: url('//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/fonts/BrownInlineLLSub-Bold.woff') format("woff"), url('//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/fonts/BrownInlineLLSub-Bold.woff2') format("woff2"); } @font-face { font-family: "BrownCameoLLSub"; font-weight: 400; src: url('//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/fonts/BrownCameoLLSub-Regular.woff') format("woff"), url('//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/fonts/BrownCameoLLSub-Regular.woff2') format("woff2"); } @font-face { font-family: "BrownInlineLLSub"; font-weight: 500; src: url('//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/fonts/BrownInlineLLSub-Medium.woff') format("woff"), url('//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/fonts/BrownInlineLLSub-Medium.woff2') format("woff2"); } @font-face { font-family: "BrownInlineLLSub"; font-weight: 500; src: url('//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/fonts/BrownInlineLLSub-Medium.woff') format("woff"), url('//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/fonts/BrownInlineLLSub-Medium.woff2') format("woff2"); } @font-face { font-family: "BrownShadedLLSub"; font-weight: 400; src: url('//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/fonts/BrownShadedLLSub-Regular.woff') format("woff"), url('//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/fonts/BrownShadedLLSub-Regular.woff2') format("woff2"); } @font-face { font-family: "BrownInlineLLSub"; font-weight: 700; src: url('//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/fonts/BrownInlineLLSub-Bold.woff') format("woff"), url('//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/fonts/BrownInlineLLSub-Bold.woff2') format("woff2"); } @font-face { font-family: "BrownInlineLLSub"; font-weight: 200; src: url('//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/fonts/BrownInlineLLSub-Light.woff') format("woff"), url('//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/fonts/BrownInlineLLSub-Light.woff2') format("woff2"); } @font-face { font-family: "BrownInlineLLSub"; font-weight: 400; src: url('//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/fonts/BrownInlineLLSub-Regular.woff') format("woff"), url('//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/fonts/BrownInlineLLSub-Regular.woff2') format("woff2"); } /* * Webfonts served by typotheque.com * * To make the font files as small as possible, * most glyphs and OpenType features were removed. * To edit the fonts, add more language support, * log it to your Typotheque account: * http://www.typotheque.com/my_account/webfonts * * The Typotheque Font Software is protected under domestic * and international trademark and copyright law. * Modifying, reverse engineering or otherwise copying * of Typotheque Font Software is illegal. * http://www.typotheque.com/licensing/ * * (c) 2021, Typotheque * Generated: 2021-07-07 18:22:16 */ @font-face { font-family: "William"; font-weight: 400; font-style: normal; src: url("https://s3.amazonaws.com/fonts.typotheque.com/WF-030602-011674-001369-0c396adaf3dd394a1a7cdf1fb92bff72.woff2") format("woff2"), url("https://s3.amazonaws.com/fonts.typotheque.com/WF-030602-011674-001369-0c396adaf3dd394a1a7cdf1fb92bff72.woff") format("woff"); font-display: auto; } @font-face { font-family: "William"; font-weight: 700; font-style: normal; src: url("https://s3.amazonaws.com/fonts.typotheque.com/WF-030602-011674-001371-2f4390381e204fb7cb965a2b4628c2f4.woff2") format("woff2"), url("https://s3.amazonaws.com/fonts.typotheque.com/WF-030602-011674-001371-2f4390381e204fb7cb965a2b4628c2f4.woff") format("woff"); font-display: auto; } @font-face { font-family: "William"; font-style: italic; font-weight: 700; src: url("https://s3.amazonaws.com/fonts.typotheque.com/WF-030602-011674-001372-ccd27074342583759b4bbf77ba2b5265.woff2") format("woff2"), url("https://s3.amazonaws.com/fonts.typotheque.com/WF-030602-011674-001372-ccd27074342583759b4bbf77ba2b5265.woff") format("woff"); font-display: auto; } @font-face { font-family: "William"; font-style: italic; font-weight: 400; src: url("https://s3.amazonaws.com/fonts.typotheque.com/WF-030602-011674-001370-98a5b1d8e12505ac8a4b1bd34f16fcca.woff2") format("woff2"), url("https://s3.amazonaws.com/fonts.typotheque.com/WF-030602-011674-001370-98a5b1d8e12505ac8a4b1bd34f16fcca.woff") format("woff"); font-display: auto; } @font-face { font-family: "William Ornaments"; src: url("https://s3.amazonaws.com/fonts.typotheque.com/WF-030602-011674-001764-3478c555d8fd6926458b25b0335300f4.woff2") format("woff2"), url("https://s3.amazonaws.com/fonts.typotheque.com/WF-030602-011674-001764-3478c555d8fd6926458b25b0335300f4.woff") format("woff"); font-display: auto; } /*********/ /* RESET */ /*********/ html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, button, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video{margin:0;padding:0;border:none;background:none;text-decoration:none;font-size:100%;font:inherit;vertical-align:baseline;} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block;} ol, ul{list-style:none;} blockquote:before, blockquote:after,q:before, q:after{content:'';content:none;} table{border-collapse:collapse;border-spacing:0;} p em {font-style: italic;} p strong {font-weight: bold;} /* FLUID CALCULATIONS FOR SPACING & TYPE ----------------------------------------- BASED ON VIEWPORTS: 375px to 1680px ----------------------------------------- FORMULA font-size = calc(ZZ + ((1vw - XX) * YY)) Where XX = min_viewport / 100 YY = 100 * (max_font_size - min_font_size) / (max_viewport - min_viewport) = 100 * font_size_difference / viewport_difference ZZ = Minimum font-size stated in REM 1 REM = 10px * safari fix min-height: 0vw ---------------------------------------- 5px to 10px calc(0.5rem + ((1vw - 3.75px) * 0.3831)) ----------------------------------------- 8px to 15px calc(0.8rem + ((1vw - 3.75px) * 0.5364)) ----------------------------------------- 15px to 30px calc(1.5rem + ((1vw - 3.75px) * 1.1494)) ----------------------------------------- 20px to 40px calc(2rem + ((1vw - 3.75px) * 1.5326)) ----------------------------------------- 30px to 60px calc(3rem + ((1vw - 3.75px) * 2.2989)) ----------------------------------------- 40px to 80px calc(4rem + ((1vw - 3.75px) * 3.0651)) ----------------------------------------- 70px to 100px calc(7rem + ((1vw - 3.75px) * 2.2989)) ----------------------------------------- 100px to 200px calc(10rem + ((1vw - 3.75px) * 7.6628)) ----------------------------------------- 100px to 150px calc(10rem + ((1vw - 3.75px) * 3.8314)) ----------------------------------------- 150px to 250px calc(15rem + ((1vw - 3.75px) * 7.6628)) ----------------------------------------- 345px to 520px calc(34.5rem + ((1vw - 3.75px) * 13.41)) ----------------------------------------- 345px to 745px calc(34.5rem + ((1vw - 3.75px) * 30.6513)) ----------------------------------------- 345px to 795px calc(34.5rem + ((1vw - 3.75px) * 34.4828)) ----------------------------------------- 345px to 1070px calc(34.5rem + ((1vw - 3.75px) * 55.5556)) ----------------------------------------- 345px to 1140px calc(34.5rem + ((1vw - 3.75px) * 60.9195)) ----------------------------------------- 345px to 1345px calc(34.5rem + ((1vw - 3.75px) * 76.6284)) ----------------------------------------- */ /*html:not(.no-js) [datafadein] {opacity: 0; transition: opacity .5s ease-in;}*/ /******************/ /* ROOT VARIABLES */ /******************/ :root { /* space/width variables */ --s-15: calc(0.8rem + ( 7 ) * ((100vw - 375px) / 1305)); --s-30: calc(1.5rem + ( 15 ) * ((100vw - 375px) / 1305)); --s-40: calc(2.0rem + ( 20 ) * ((100vw - 375px) / 1305)); --s-60: calc(3.0rem + ( 30 ) * ((100vw - 375px) / 1305)); --s-80: calc(4.0rem + ( 40 ) * ((100vw - 375px) / 1305)); --s-100: calc(7.0rem + ( 30 ) * ((100vw - 375px) / 1305)); --s-150: calc(10.0rem + ( 50 ) * ((100vw - 375px) / 1305)); --s-200: calc(10.0rem + ( 100 ) * ((100vw - 375px) / 1305)); --s-250: calc(15.0rem + ( 100 ) * ((100vw - 375px) / 1305)); --w-520: calc(34.5rem + ( 175 ) * ((100vw - 375px) / 1305)); --w-745: calc(34.5rem + ( 400 ) * ((100vw - 375px) / 1305)); --w-795: calc(34.5rem + ( 450 ) * ((100vw - 375px) / 1305)); --w-1070: calc(34.5rem + ( 725 ) * ((100vw - 375px) / 1305)); --w-1140: calc(34.5rem + ( 795 ) * ((100vw - 375px) / 1305)); --w-1345: calc(34.5rem + ( 1000 ) * ((100vw - 375px) / 1305)); --s-10: calc(0.5rem + ( 5 ) * ((100vw - 375px) / 1305)); --s-20: calc(1.0rem + ( 10 ) * ((100vw - 375px) / 1305)); --s-5: calc(0.25rem + ( 2.5 ) * ((100vw - 375px) / 1305)); --w-1620: calc(34.5rem + ( 1275 ) * ((100vw - 375px) / 1305)); --s-50: calc(2.5rem + ( 25 ) * ((100vw - 375px) / 1305)); /* color variables */ --color-orange: #FD865D; --color-brown: #C24B25; --color-dark-blue: #002479; --color-red: #E54B59; --color-black: #000000; --color-light-grey: #edece8; --color-white: #ffffff; --color-dark-grey: #1D1C1C; --color-orange-tint: #FFF3EE; --color-green: #285A39; --color-purple: #7C5D8F; --color-light-blue: #60B7D9; --color-blue: #4650F7; --color-yellow: #EBBF65; --color-light-purple: #CDC1D4; --color-pink: #FFA1C5; --color-lighter-blue: #9CD9F1; --color-darker-orange: #E86B4F; --color-grey: #DBDBDB; } /************/ /* DEFAULTS */ /************/ * {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; min-height: 0vw;} html { font-size: 62.5%; overflow-y: auto; } /* set root font size to 10px */ body { font-family: Brown, sans-serif; font-size: 1.8rem; margin: 0; padding: 0; background-color: white; } body.overlaytray, body.blogtray, body.overlaymenu, body.pricing--lightbox--active, body.has-lightbox, body.lb-active-testimonial, body.lb-active-ctaservice, body.main-lightbox-active { overflow: hidden; } img { display: block; max-width: 100%; width: auto; height: auto } button {font-family: Brown, sans-serif; box-shadow: none;} button, a {text-decoration: none; color: inherit; cursor: pointer; font-weight: bold; letter-spacing: 0rem;} main { position: relative; } main.servicecontainer {width: calc(100% - 34rem); padding-left: 34rem; padding-top: 7.9rem;} body:not(.generalform-template) > main.resourcecontainer { padding-top: 8rem; min-height: calc(100vh - 13.9rem); } body.generalform-template > main.resourcecontainer { padding-top: 2rem; } main.tutorscontainer { width: calc(100% - 34rem); height: 100%; padding-left: 34rem; padding-top: 7.9rem; background-color: #FFF2ED; min-height: calc(100vh - 7.9rem); } section { position: relative;} .inner {width: auto; margin: auto 3rem; padding: 7.5rem 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 15.0rem; padding-top: calc(7.5rem + (150 - 75) * ((100vw - 375px) / 1305)); padding-bottom: 15.0rem; padding-bottom: calc(7.5rem + (150 - 75) * ((100vw - 375px) / 1305)); } .inner.leftalign {align-items: flex-start;} @media only screen and (max-width: 1200px) { main { padding-top: 0rem;} main.servicecontainer, main.resourcecontainer, main.tutorscontainer { width: 100%; padding-left: 0rem; } } @media only screen and (max-width: 750px) { main { padding-top: 0rem;} main.servicecontainer, main.resourcecontainer, main.tutorscontainer { padding-top: 6.7rem; } body > main.resourcecontainer { padding-top: 7rem; } } /**************/ /* TYPOGRAPHY */ /**************/ /* FLUID CALCULATIONS FOR SPACING & TYPE ----------------------------------------- BASED ON VIEWPORTS: 375px to 1680px ----------------------------------------- FORMULA font-size = calc(ZZ + ((1vw - XX) * YY)) Where XX = min_viewport / 100 YY = 100 * (max_font_size - min_font_size) / (max_viewport - min_viewport) = 100 * font_size_difference / viewport_difference ZZ = Minimum font-size stated in REM 1 REM = 10px * safari fix min-height: 0vw ---------------------------------------- 5px to 10px calc(0.5rem + ((1vw - 3.75px) * 0.3831)) ----------------------------------------- 8px to 15px calc(0.8rem + ((1vw - 3.75px) * 0.5364)) ----------------------------------------- 15px to 30px calc(1.5rem + ((1vw - 3.75px) * 1.1494)) ----------------------------------------- 20px to 40px calc(2rem + ((1vw - 3.75px) * 1.5326)) ----------------------------------------- 30px to 60px calc(3rem + ((1vw - 3.75px) * 2.2989)) ----------------------------------------- 40px to 80px calc(4rem + ((1vw - 3.75px) * 3.0651)) ----------------------------------------- 70px to 100px calc(7rem + ((1vw - 3.75px) * 2.2989)) ----------------------------------------- 100px to 200px calc(10rem + ((1vw - 3.75px) * 7.6628)) ----------------------------------------- 100px to 150px calc(10rem + ((1vw - 3.75px) * 3.8314)) ----------------------------------------- 150px to 250px calc(15rem + ((1vw - 3.75px) * 7.6628)) ----------------------------------------- 345px to 520px calc(34.5rem + ((1vw - 3.75px) * 13.41)) ----------------------------------------- 345px to 745px calc(34.5rem + ((1vw - 3.75px) * 30.6513)) ----------------------------------------- 345px to 795px calc(34.5rem + ((1vw - 3.75px) * 34.4828)) ----------------------------------------- 345px to 1070px calc(34.5rem + ((1vw - 3.75px) * 55.5556)) ----------------------------------------- 345px to 1140px calc(34.5rem + ((1vw - 3.75px) * 60.9195)) ----------------------------------------- 345px to 1345px calc(34.5rem + ((1vw - 3.75px) * 76.6284)) ----------------------------------------- */ /*html:not(.no-js) [datafadein] {opacity: 0; transition: opacity .5s ease-in;}*/.h-1 {font-size: 75px; font-size: calc(5.0rem + (75 - 50) * ((100vw - 375px) / 1305));line-height: 111%;font-family: William;font-weight: 400; } /*fallback*/ @media screen and (max-width: 480px) { .h-1 {font-size: 50px;font-size: calc(5.0rem + (75 - 50) * ((100vw - 375px) / 1305)); } } /*fallback*/ @media screen and (min-width: 480px) and (max-width: 960px) { .h-1 {font-size: 62.5px; font-size: calc(5.0rem + (75 - 50) * ((100vw - 375px) / 1305)); } } .h-1-tutor {font-size: 110px; font-size: calc(4.0rem + (110 - 40) * ((100vw - 375px) / 1305));line-height: 100%;font-family: Brown;font-weight: 700; } /*fallback*/ @media screen and (max-width: 480px) { .h-1-tutor {font-size: 40px;font-size: calc(4.0rem + (110 - 40) * ((100vw - 375px) / 1305)); } } /*fallback*/ @media screen and (min-width: 480px) and (max-width: 960px) { .h-1-tutor {font-size: 75.0px; font-size: calc(4.0rem + (110 - 40) * ((100vw - 375px) / 1305)); } } .h-1-blog {font-size: 120px; font-size: calc(6.0rem + (120 - 60) * ((100vw - 375px) / 1305));line-height: 105%;font-family: William;font-weight: 400; } /*fallback*/ @media screen and (max-width: 480px) { .h-1-blog {font-size: 60px;font-size: calc(6.0rem + (120 - 60) * ((100vw - 375px) / 1305)); } } /*fallback*/ @media screen and (min-width: 480px) and (max-width: 960px) { .h-1-blog {font-size: 90.0px; font-size: calc(6.0rem + (120 - 60) * ((100vw - 375px) / 1305)); } } .h-2 {font-size: 90px; font-size: calc(6.0rem + (90 - 60) * ((100vw - 375px) / 1305));line-height: 100%;font-family: Brown;font-weight: 700; } /*fallback*/ @media screen and (max-width: 480px) { .h-2 {font-size: 60px;font-size: calc(6.0rem + (90 - 60) * ((100vw - 375px) / 1305)); } } /*fallback*/ @media screen and (min-width: 480px) and (max-width: 960px) { .h-2 {font-size: 75.0px; font-size: calc(6.0rem + (90 - 60) * ((100vw - 375px) / 1305)); } } .h-3 {font-size: 65px; font-size: calc(3.5rem + (65 - 35) * ((100vw - 375px) / 1305));line-height: 115%;font-family: Brown;font-weight: 700; } /*fallback*/ @media screen and (max-width: 480px) { .h-3 {font-size: 35px;font-size: calc(3.5rem + (65 - 35) * ((100vw - 375px) / 1305)); } } /*fallback*/ @media screen and (min-width: 480px) and (max-width: 960px) { .h-3 {font-size: 50.0px; font-size: calc(3.5rem + (65 - 35) * ((100vw - 375px) / 1305)); } } .h-3-variant {font-size: 50px; font-size: calc(2.5rem + (50 - 25) * ((100vw - 375px) / 1305));line-height: 105%;font-family: William;font-weight: 400; } /*fallback*/ @media screen and (max-width: 480px) { .h-3-variant {font-size: 25px;font-size: calc(2.5rem + (50 - 25) * ((100vw - 375px) / 1305)); } } /*fallback*/ @media screen and (min-width: 480px) and (max-width: 960px) { .h-3-variant {font-size: 37.5px; font-size: calc(2.5rem + (50 - 25) * ((100vw - 375px) / 1305)); } } .h-5 {font-size: 40px; font-size: calc(3.0rem + (40 - 30) * ((100vw - 375px) / 1305));line-height: 137.5%;font-family: Brown;font-weight: 700; } /*fallback*/ @media screen and (max-width: 480px) { .h-5 {font-size: 30px;font-size: calc(3.0rem + (40 - 30) * ((100vw - 375px) / 1305)); } } /*fallback*/ @media screen and (min-width: 480px) and (max-width: 960px) { .h-5 {font-size: 35.0px; font-size: calc(3.0rem + (40 - 30) * ((100vw - 375px) / 1305)); } } .h-6 {font-size: 30px; font-size: calc(2.2rem + (30 - 22) * ((100vw - 375px) / 1305));line-height: 133%;font-family: Brown;font-weight: 400; } /*fallback*/ @media screen and (max-width: 480px) { .h-6 {font-size: 22px;font-size: calc(2.2rem + (30 - 22) * ((100vw - 375px) / 1305)); } } /*fallback*/ @media screen and (min-width: 480px) and (max-width: 960px) { .h-6 {font-size: 26.0px; font-size: calc(2.2rem + (30 - 22) * ((100vw - 375px) / 1305)); } } .h-4 {font-size: 50px; font-size: calc(3.5rem + (50 - 35) * ((100vw - 375px) / 1305));line-height: 115%;font-family: Brown;font-weight: 700; } /*fallback*/ @media screen and (max-width: 480px) { .h-4 {font-size: 35px;font-size: calc(3.5rem + (50 - 35) * ((100vw - 375px) / 1305)); } } /*fallback*/ @media screen and (min-width: 480px) and (max-width: 960px) { .h-4 {font-size: 42.5px; font-size: calc(3.5rem + (50 - 35) * ((100vw - 375px) / 1305)); } } .h-4-variant {font-size: 50px; font-size: calc(2.5rem + (50 - 25) * ((100vw - 375px) / 1305));line-height: 120%;font-family: William;font-weight: 700; } /*fallback*/ @media screen and (max-width: 480px) { .h-4-variant {font-size: 25px;font-size: calc(2.5rem + (50 - 25) * ((100vw - 375px) / 1305)); } } /*fallback*/ @media screen and (min-width: 480px) and (max-width: 960px) { .h-4-variant {font-size: 37.5px; font-size: calc(2.5rem + (50 - 25) * ((100vw - 375px) / 1305)); } } .h-5-variant {font-size: 40px; font-size: calc(3.0rem + (40 - 30) * ((100vw - 375px) / 1305));line-height: 137.5%;font-family: Brown;font-weight: 400; } /*fallback*/ @media screen and (max-width: 480px) { .h-5-variant {font-size: 30px;font-size: calc(3.0rem + (40 - 30) * ((100vw - 375px) / 1305)); } } /*fallback*/ @media screen and (min-width: 480px) and (max-width: 960px) { .h-5-variant {font-size: 35.0px; font-size: calc(3.0rem + (40 - 30) * ((100vw - 375px) / 1305)); } } .text-attribute {font-size: 18px; font-size: calc(1.4rem + (18 - 14) * ((100vw - 375px) / 1305));line-height: 137.5%;font-family: Brown;font-weight: 400; } /*fallback*/ @media screen and (max-width: 480px) { .text-attribute {font-size: 14px;font-size: calc(1.4rem + (18 - 14) * ((100vw - 375px) / 1305)); } } /*fallback*/ @media screen and (min-width: 480px) and (max-width: 960px) { .text-attribute {font-size: 16.0px; font-size: calc(1.4rem + (18 - 14) * ((100vw - 375px) / 1305)); } } .text-attribute-bold {font-size: 14px; font-size: calc(1.4rem + (14 - 14) * ((100vw - 375px) / 1305));line-height: 137.5%;font-family: Brown;font-weight: 700; } /*fallback*/ @media screen and (max-width: 480px) { .text-attribute-bold {font-size: 14px;font-size: calc(1.4rem + (14 - 14) * ((100vw - 375px) / 1305)); } } /*fallback*/ @media screen and (min-width: 480px) and (max-width: 960px) { .text-attribute-bold {font-size: 14.0px; font-size: calc(1.4rem + (14 - 14) * ((100vw - 375px) / 1305)); } } .text-testimonial {font-size: 45px; font-size: calc(2.0rem + (45 - 20) * ((100vw - 375px) / 1305));line-height: 135%;font-family: William;font-weight: 400; } /*fallback*/ @media screen and (max-width: 480px) { .text-testimonial {font-size: 20px;font-size: calc(2.0rem + (45 - 20) * ((100vw - 375px) / 1305)); } } /*fallback*/ @media screen and (min-width: 480px) and (max-width: 960px) { .text-testimonial {font-size: 32.5px; font-size: calc(2.0rem + (45 - 20) * ((100vw - 375px) / 1305)); } } .text-testimonial-smaller {font-size: 35px; font-size: calc(1.8rem + (35 - 18) * ((100vw - 375px) / 1305));line-height: 130%;font-family: William;font-weight: 400; } /*fallback*/ @media screen and (max-width: 480px) { .text-testimonial-smaller {font-size: 18px;font-size: calc(1.8rem + (35 - 18) * ((100vw - 375px) / 1305)); } } /*fallback*/ @media screen and (min-width: 480px) and (max-width: 960px) { .text-testimonial-smaller {font-size: 26.5px; font-size: calc(1.8rem + (35 - 18) * ((100vw - 375px) / 1305)); } } .text-header {font-size: 40px; font-size: calc(2.0rem + (40 - 20) * ((100vw - 375px) / 1305));line-height: 137.5%;font-family: Brown;font-weight: 700; } /*fallback*/ @media screen and (max-width: 480px) { .text-header {font-size: 20px;font-size: calc(2.0rem + (40 - 20) * ((100vw - 375px) / 1305)); } } /*fallback*/ @media screen and (min-width: 480px) and (max-width: 960px) { .text-header {font-size: 30.0px; font-size: calc(2.0rem + (40 - 20) * ((100vw - 375px) / 1305)); } } .text-small-serif {font-size: 25px; font-size: calc(2.0rem + (25 - 20) * ((100vw - 375px) / 1305));line-height: 140%;font-family: William;font-weight: 400; } /*fallback*/ @media screen and (max-width: 480px) { .text-small-serif {font-size: 20px;font-size: calc(2.0rem + (25 - 20) * ((100vw - 375px) / 1305)); } } /*fallback*/ @media screen and (min-width: 480px) and (max-width: 960px) { .text-small-serif {font-size: 22.5px; font-size: calc(2.0rem + (25 - 20) * ((100vw - 375px) / 1305)); } } .text-small-sans {font-size: 25px; font-size: calc(2.0rem + (25 - 20) * ((100vw - 375px) / 1305));line-height: 140%;font-family: Brown;font-weight: 400; } /*fallback*/ @media screen and (max-width: 480px) { .text-small-sans {font-size: 20px;font-size: calc(2.0rem + (25 - 20) * ((100vw - 375px) / 1305)); } } /*fallback*/ @media screen and (min-width: 480px) and (max-width: 960px) { .text-small-sans {font-size: 22.5px; font-size: calc(2.0rem + (25 - 20) * ((100vw - 375px) / 1305)); } } .text-medium {font-size: 35px; font-size: calc(2.0rem + (35 - 20) * ((100vw - 375px) / 1305));line-height: 130%;font-family: Brown;font-weight: 400; } /*fallback*/ @media screen and (max-width: 480px) { .text-medium {font-size: 20px;font-size: calc(2.0rem + (35 - 20) * ((100vw - 375px) / 1305)); } } /*fallback*/ @media screen and (min-width: 480px) and (max-width: 960px) { .text-medium {font-size: 27.5px; font-size: calc(2.0rem + (35 - 20) * ((100vw - 375px) / 1305)); } } .text-medium-serif {font-size: 35px; font-size: calc(2.0rem + (35 - 20) * ((100vw - 375px) / 1305));line-height: 130%;font-family: William;font-weight: 400; } /*fallback*/ @media screen and (max-width: 480px) { .text-medium-serif {font-size: 20px;font-size: calc(2.0rem + (35 - 20) * ((100vw - 375px) / 1305)); } } /*fallback*/ @media screen and (min-width: 480px) and (max-width: 960px) { .text-medium-serif {font-size: 27.5px; font-size: calc(2.0rem + (35 - 20) * ((100vw - 375px) / 1305)); } } .text-body {font-size: 22px; font-size: calc(1.6rem + (22 - 16) * ((100vw - 375px) / 1305));line-height: 150%;font-family: Brown;font-weight: 400; } /*fallback*/ @media screen and (max-width: 480px) { .text-body {font-size: 16px;font-size: calc(1.6rem + (22 - 16) * ((100vw - 375px) / 1305)); } } /*fallback*/ @media screen and (min-width: 480px) and (max-width: 960px) { .text-body {font-size: 19.0px; font-size: calc(1.6rem + (22 - 16) * ((100vw - 375px) / 1305)); } } .text-body-serif {font-size: 22px; font-size: calc(1.6rem + (22 - 16) * ((100vw - 375px) / 1305));line-height: 150%;font-family: William;font-weight: 400; } /*fallback*/ @media screen and (max-width: 480px) { .text-body-serif {font-size: 16px;font-size: calc(1.6rem + (22 - 16) * ((100vw - 375px) / 1305)); } } /*fallback*/ @media screen and (min-width: 480px) and (max-width: 960px) { .text-body-serif {font-size: 19.0px; font-size: calc(1.6rem + (22 - 16) * ((100vw - 375px) / 1305)); } } .text-body-small {font-size: 18px; font-size: calc(1.4rem + (18 - 14) * ((100vw - 375px) / 1305));line-height: 155%;font-family: Brown;font-weight: 400; } /*fallback*/ @media screen and (max-width: 480px) { .text-body-small {font-size: 14px;font-size: calc(1.4rem + (18 - 14) * ((100vw - 375px) / 1305)); } } /*fallback*/ @media screen and (min-width: 480px) and (max-width: 960px) { .text-body-small {font-size: 16.0px; font-size: calc(1.4rem + (18 - 14) * ((100vw - 375px) / 1305)); } } .text-body-x-small {font-size: 16px; font-size: calc(1.2rem + (16 - 12) * ((100vw - 375px) / 1305));line-height: 155%;font-family: Brown;font-weight: 400; } /*fallback*/ @media screen and (max-width: 480px) { .text-body-x-small {font-size: 12px;font-size: calc(1.2rem + (16 - 12) * ((100vw - 375px) / 1305)); } } /*fallback*/ @media screen and (min-width: 480px) and (max-width: 960px) { .text-body-x-small {font-size: 14.0px; font-size: calc(1.2rem + (16 - 12) * ((100vw - 375px) / 1305)); } } .nav-item {font-size: 45px; font-size: calc(2.5rem + (45 - 25) * ((100vw - 375px) / 1305));line-height: 145%;font-family: Brown;font-weight: 700; } /*fallback*/ @media screen and (max-width: 480px) { .nav-item {font-size: 25px;font-size: calc(2.5rem + (45 - 25) * ((100vw - 375px) / 1305)); } } /*fallback*/ @media screen and (min-width: 480px) and (max-width: 960px) { .nav-item {font-size: 35.0px; font-size: calc(2.5rem + (45 - 25) * ((100vw - 375px) / 1305)); } } .mono-16 {font-size: 16px; font-size: calc(1.4rem + (16 - 14) * ((100vw - 375px) / 1305));line-height: 150%;font-family: BrownMono;font-weight: 400; } /*fallback*/ @media screen and (max-width: 480px) { .mono-16 {font-size: 14px;font-size: calc(1.4rem + (16 - 14) * ((100vw - 375px) / 1305)); } } /*fallback*/ @media screen and (min-width: 480px) and (max-width: 960px) { .mono-16 {font-size: 15.0px; font-size: calc(1.4rem + (16 - 14) * ((100vw - 375px) / 1305)); } } /* type defaults */ .extra-small {font-size: 1.4rem; text-transform: uppercase; font-weight: 700;} .bold {font-weight: 700;} .william {font-family: William;} .ltr-spacing {letter-spacing: calc(0.05rem + ( 0.5 ) * ((100vw - 375px) / 1305));} .uppercase {text-transform: uppercase;} .txt-center {text-align: center;} /**********/ /* COLORS */ /**********/.orange { background-color: #FD865D; color: #FFFFFF; } .orange-text { color: #FD865D; border-color: #FD865D;} .orange-text .linkbutton { background-color: #FD865D; color: #FFFFFF;} .brown { background-color: #C24B25; color: #000000; } .brown-text { color: #C24B25; border-color: #C24B25;} .brown-text .linkbutton { background-color: #C24B25; color: #000000;} .dark-blue { background-color: #002479; color: #FFFFFF; } .dark-blue-text { color: #002479; border-color: #002479;} .dark-blue-text .linkbutton { background-color: #002479; color: #FFFFFF;} .red { background-color: #E54B59; color: #FFFFFF; } .red-text { color: #E54B59; border-color: #E54B59;} .red-text .linkbutton { background-color: #E54B59; color: #FFFFFF;} .black { background-color: #000000; color: #FFFFFF; } .black-text { color: #000000; border-color: #000000;} .black-text .linkbutton { background-color: #000000; color: #FFFFFF;} .light-grey { background-color: #edece8; color: #000000; } .light-grey-text { color: #edece8; border-color: #edece8;} .light-grey-text .linkbutton { background-color: #edece8; color: #000000;} .white { background-color: #ffffff; color: #000000; } .white-text { color: #ffffff; border-color: #ffffff;} .white-text .linkbutton { background-color: #ffffff; color: #000000;} .dark-grey { background-color: #1D1C1C; color: #ffffff; } .dark-grey-text { color: #1D1C1C; border-color: #1D1C1C;} .dark-grey-text .linkbutton { background-color: #1D1C1C; color: #ffffff;} .orange-tint { background-color: #FFF3EE; color: #000000; } .orange-tint-text { color: #FFF3EE; border-color: #FFF3EE;} .orange-tint-text .linkbutton { background-color: #FFF3EE; color: #000000;} .green { background-color: #285A39; color: #ffffff; } .green-text { color: #285A39; border-color: #285A39;} .green-text .linkbutton { background-color: #285A39; color: #ffffff;} .purple { background-color: #7C5D8F; color: #ffffff; } .purple-text { color: #7C5D8F; border-color: #7C5D8F;} .purple-text .linkbutton { background-color: #7C5D8F; color: #ffffff;} .light-blue { background-color: #60B7D9; color: #ffffff; } .light-blue-text { color: #60B7D9; border-color: #60B7D9;} .light-blue-text .linkbutton { background-color: #60B7D9; color: #ffffff;} .blue { background-color: #4650F7; color: #ffffff; } .blue-text { color: #4650F7; border-color: #4650F7;} .blue-text .linkbutton { background-color: #4650F7; color: #ffffff;} .yellow { background-color: #EBBF65; color: #ffffff; } .yellow-text { color: #EBBF65; border-color: #EBBF65;} .yellow-text .linkbutton { background-color: #EBBF65; color: #ffffff;} .light-purple { background-color: #CDC1D4; color: #000000; } .light-purple-text { color: #CDC1D4; border-color: #CDC1D4;} .light-purple-text .linkbutton { background-color: #CDC1D4; color: #000000;} .pink { background-color: #FFA1C5; color: #ffffff; } .pink-text { color: #FFA1C5; border-color: #FFA1C5;} .pink-text .linkbutton { background-color: #FFA1C5; color: #ffffff;} .lighter-blue { background-color: #9CD9F1; color: #ffffff; } .lighter-blue-text { color: #9CD9F1; border-color: #9CD9F1;} .lighter-blue-text .linkbutton { background-color: #9CD9F1; color: #ffffff;} .darker-orange { background-color: #E86B4F; color: #ffffff; } .darker-orange-text { color: #E86B4F; border-color: #E86B4F;} .darker-orange-text .linkbutton { background-color: #E86B4F; color: #ffffff;} .grey { background-color: #DBDBDB; color: #000000; } .grey-text { color: #DBDBDB; border-color: #DBDBDB;} .grey-text .linkbutton { background-color: #DBDBDB; color: #000000;} .brown { color: white; } .orange-tint { color: #000000; } .light-blue .linkbutton, .light-purple .linkbutton { background-color: white; color: black; } .green .linkbutton { background-color: white; color: var(--color-green); } .red .linkbutton { background-color: white; color: var(--color-red); } .purple .linkbutton { background-color: white; color: var(--color-purple); } .yellow .linkbutton { background-color: white; color: var(--color-yellow); } .pink .linkbutton { background-color: white; color: var(--color-pink); } .light-blue .linkbutton { background-color: white; } .lighter-blue .linkbutton { background-color: white; color: var(--color-lighter-blue); } /*******************/ /* LINKS / BUTTONS */ /*******************/ .text-body-small, .text-body-small a { letter-spacing: 0.05rem; letter-spacing: calc(0.025rem + (0.5 - 0.25) * ((100vw - 375px) / 1305)); } .text-body-small a { color: black; font-weight: 400; transition: opacity 0.3s ease, borer-color .3s ease; } .text-body-small a:hover { box-shadow: 0 .2rem 0 0 #000; } .s-button { display: inline-block; padding-left: 1.7rem; padding-right: 1.7rem; padding-top: 0.9rem; padding-bottom: 0.9rem; background-color: var(--color-orange-tint); border-radius: 3rem; line-height: 110%; font-weight: 400; transition: color .2s ease; letter-spacing: 0.09rem; letter-spacing: calc(0.06rem + (.9 - .6) * ((100vw - 375px) / 1305)); font-size: 1.8rem; font-size: calc(1.5rem + (18 - 15) * ((100vw - 375px) / 1305)); } .s-button .material-icons { transition: color .2s ease; } .s-button:hover, .s-button:hover .material-icons { color: var(--color-orange); } .linkbutton, .hs-submit input { display: inline-flex; background-color: var(--color-orange); color: #ffffff; align-items: center; padding: 0; transition: opacity 0.3s ease; border: none; line-height: 120%; padding-left: 2rem; padding-right: 2rem; padding-top: 1.5rem; padding-bottom: 1.5rem; min-height: 2rem; border-radius: 2.5rem; margin-left: auto; margin-right: auto; font-size: 1.8rem; letter-spacing: 1.3px; } .linkbutton.white { background-color: white; color: var(--color-orange); } .linkbutton:hover, .hs-submit input:hover { opacity: 0.75 !important; } .hs-submit input { font-family: 'Brown'; font-weight: 700; padding-top: 0; padding-bottom: 0; font-size: 2.2rem; font-size: calc(1.8rem + (22 - 18) * ((100vw - 375px) / 1305)); margin-top: 4.0rem; margin-top: calc(2.0rem + (40 - 20) * ((100vw - 375px) / 1305)); } .linkbutton.large { text-transform: uppercase; margin: auto; min-height: 0vw; line-height: 170%; border-radius: 5.0rem; border-radius: calc(3.7rem + (50 - 37) * ((100vw - 375px) / 1305)); padding-top: 3.0rem; padding-top: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); padding-bottom: 3.0rem; padding-bottom: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); padding-left: 3.0rem; padding-left: calc(2.0rem + (30 - 20) * ((100vw - 375px) / 1305)); padding-right: 3.0rem; padding-right: calc(2.0rem + (30 - 20) * ((100vw - 375px) / 1305)); } .linkbutton.large.fixed { font-size: 1.8rem; letter-spacing: 1.3px; padding: 3rem; border-radius: 5rem; } .orange .linkbutton { background-color: black; color: white; } @media only screen and (max-width: 750px) { .linkbutton { text-align: center; } .linkbutton.large.fixed { padding: 1.5rem 2rem; border-radius: 5rem; font-size: 1.6rem; letter-spacing: 1.15px; } } .button-outline-w-icon { min-width: 33rem; border-radius: 5rem; padding: 1.6rem 2.8rem 1.6rem 3.5rem; display: inline-grid; grid-template-columns: auto auto; grid-column-gap: 1.5rem; justify-content: center; box-shadow: inset 0 0 0 1px var(--color-orange); align-items: center; justify-content: flex-start; background-color: #fff; transition: color .3s ease; width: auto; box-sizing: border-box; min-height: 8.0rem; min-height: calc(6.0rem + (80 - 60) * ((100vw - 375px) / 1305)); font-size: 1.8rem; font-size: calc(1.4rem + (18 - 14) * ((100vw - 375px) / 1305)); } .button-outline-w-icon:hover { color: var(--color-orange); } .button-outline-w-icon > span:first-of-type { font-size: 2.4rem; color: var(--color-orange); } .button-outline-w-icon > div { display: flex; flex-direction: column; align-items: flex-start; } .button-full { display: inline-block; background-color: #D8D9FF; color: var(--color-blue); transition: opacity .3s ease; line-height: 100%; margin-top: 5.0rem; margin-top: calc(2.5rem + (50 - 25) * ((100vw - 375px) / 1305)); border-radius: 6.0rem; border-radius: calc(3.0rem + (60 - 30) * ((100vw - 375px) / 1305)); padding: 3.0rem; padding: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); padding-top: 1.5rem; padding-top: calc(0.75rem + (15 - 7.5) * ((100vw - 375px) / 1305)); padding-bottom: 1.5rem; padding-bottom: calc(0.75rem + (15 - 7.5) * ((100vw - 375px) / 1305)); font-size: 5.0rem; font-size: calc(3.5rem + (50 - 35) * ((100vw - 375px) / 1305)); } .button-full:not(.active):hover { opacity: .7; } .linkone {font-size: calc(1.8rem + ((1vw - 3.75px) * 1.6858)); border-bottom: 0.4rem solid; min-height: 0vw; transition: opacity 0.3s ease;} .linkone:hover {opacity: 0.5;} .linktwo { text-transform: uppercase; text-decoration: none; display: inline-block; font-size: calc(1.4rem + ((1vw - 3.75px) * 0.3065)); border-bottom: 0 solid; min-height: 0vw; transition: opacity 0.3s ease; position: relative; color: var(--color-orange); letter-spacing: 0.13rem; letter-spacing: calc(0.065rem + (1.3 - 0.65) * ((100vw - 375px) / 1305)); font-size: 1.8rem; font-size: calc(1.4rem + (18 - 14) * ((100vw - 375px) / 1305)); } .linktwo:hover { opacity: 0.75; } .linktwo .material-icons.external { font-size: calc(1.4rem + ((1vw - 3.75px) * 0.3065)); color: var(--color-orange); position: absolute;} /* image/text columns */ .columns { display: flex; flex-direction: row; width: auto; height: 100%; padding: 0; align-items: initial;} .columns > div { width: 100%; box-sizing: border-box;} .sidebar .textcolumn {align-self: center;} .imagecolumn {display: flex;} .imagecolumn img {display: block; width: 100%; margin: auto;} /*******************/ /* MODULES STYLING */ /*******************/ /* homepage header */ .homepage-body.nav-floating nav > .nav-bar, .landingpage-body.nav-floating nav > .nav-bar { background-color: var(--color-orange); } .bbb-logo { max-height: 5rem; position: absolute; bottom: 6rem; right: 3.0rem; right: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .homepage-body:not(.nav-floating,.overlaymenu) .nav-button { color: black; background-color: rgba(255, 255, 255, 0.5); } .generalform-template nav > .nav-bar .nav-button, .generalform-template nav > .nav-bar .nav-button:hover{ color: black; background-color: var(--color-orange-tint); } section.homepageheader, section.homepageheader .inner { margin: 0; padding: 0; } section.homepageheader .inner { display: block; } .homepage-image { width: 100%; height: 100%; } .homepage-image img, .homepage-image .img { min-height: 100vh; width: 100%; height: 100%; object-fit: cover; object-position: top; } .homepage-content { width: 100%; height: auto; position: absolute; display: flex; flex-direction: column; justify-content: left; align-items: flex-start; left: 50%; transform: translateX(-50%); max-width: 100%; top: 12rem; box-sizing: border-box; padding: 0 3rem; } .debug-image-colors { position: absolute; bottom: 1.5rem; right: 1.5rem; background: white; opacity: 0; padding: 0.4rem 0.95rem; border-radius: 1.1rem; display: grid; grid-template-columns: auto auto auto; grid-column-gap: 1rem; transition: opacity .3s ease; } .debug-image-colors button { color: #777; } .debug-image-colors button.active { color: #000; } .debug-image-colors:hover { opacity: .75; } .homepage-content h2 { width: auto; line-height: 115%; font-family: 'Brown'; font-weight: 700; font-size: 4rem; margin-bottom: 2rem; font-size: 4rem; max-width: 34rem; } .homepage-content .linkbutton { margin: 0; background-color: #F2F2F2; color: black; line-height: 115%; } .mobileimg { display: none; } /* @media only screen and (max-height: 40vw) { .homepage-content { min-height: auto; top: 30%; transform: translateX(-50%) translateY(-30%); } } */ @media only screen and (max-width: 750px) { .homepage-content { top: 8.8rem; padding: 0 1.5rem; } /* .notmobileimg { display: none; } */ /* .mobileimg { display: block; } */ .homepage-content h2 { font-size: 3rem; } .bbb-logo { bottom: 3rem; right: auto; left: 3.0rem; left: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } } @media only screen and (max-width: 550px) { /* .homepage-image { background-color: #48A353; } */ .homepage-image img { /* min-height: -webkit-fill-available; */ } } /* hublinks */ .hublinks .inner { padding: 0; margin: 0 auto; text-align: center; width: 100%: margin-top: 9.0rem; margin-top: calc(4.5rem + (90 - 45) * ((100vw - 375px) / 1305)); margin-bottom: 9.0rem; margin-bottom: calc(4.5rem + (90 - 45) * ((100vw - 375px) / 1305)); max-width: 134.5rem; max-width: calc(34.5rem + (1345 - 345) * ((100vw - 375px) / 1305)); } .hublinks h2 { margin-bottom: 8rem; font-weight: 400; text-transform: uppercase; } .hublinks-list { display: grid; width: 100%; grid-template-columns: 1fr 1fr; grid-column-gap: 9.0rem; grid-column-gap: calc(1.5rem + (90 - 15) * ((100vw - 375px) / 1305)); grid-row-gap: 4.0rem; grid-row-gap: calc(2.0rem + (40 - 20) * ((100vw - 375px) / 1305)); } .hublinks-list .text-header { padding-left: 2.0rem; padding-left: calc(1.0rem + (20 - 10) * ((100vw - 375px) / 1305)); padding-right: 2.0rem; padding-right: calc(1.0rem + (20 - 10) * ((100vw - 375px) / 1305)); } .hublinks-list > div:last-of-type { grid-area: 4 / 1 / 5 / 3; left: 50%; transform: translateX(-50%;) } .hublinks-list > div:last-of-type > a { margin: auto; } .hublinks-item { display: block; text-align: center; width: 100%; max-width: 68rem; border-radius: 3.0rem; border-radius: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); max-width: 68.0rem; max-width: calc(15.8rem + (680 - 158) * ((100vw - 375px) / 1305)); border-radius: 3.0rem; border-radius: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); padding-bottom: 3.0rem; padding-bottom: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); grid-row-gap: 3.0rem; grid-row-gap: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .hublinks-item-img { width: 100%; padding-bottom: 71%; background-size: contain; background-position: center; background-repeat: no-repeat; margin-bottom: 3.0rem; margin-bottom: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .hublinks-item .hublinks-item-img { overflow: hidden; border-radius: 6rem; transition: border-radius cubic-bezier(0.4, 0, 0.2, 1) 250ms; border-radius: 6.0rem; border-radius: calc(2.0rem + (60 - 20) * ((100vw - 375px) / 1305)); } .hublinks-item:active { background-color: #f1f1f1; } .hublinks-item:hover .hublinks-item-img { border-radius: 3.0rem; border-radius: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } /* hubheader */ .hubheader .inner { text-align: center; margin: auto; padding-top: 0; padding-left: 3.0rem; padding-left: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); padding-right: 3.0rem; padding-right: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); padding-bottom: 25.0rem; padding-bottom: calc(12.5rem + (250 - 125) * ((100vw - 375px) / 1305)); } .hubheader h1 { max-width: var(--w-795); margin-bottom: 0.5rem; margin-bottom: calc(0.25rem + (5 - 2.5) * ((100vw - 375px) / 1305)); } .hubheader img { height: auto; max-height: 75vw; width: 100%; margin-top: 2rem; margin-bottom: 15.0rem; margin-bottom: calc(7.5rem + (150 - 75) * ((100vw - 375px) / 1305)); max-width: 107.0rem; max-width: calc(34.5rem + (1070 - 345) * ((100vw - 375px) / 1305)); } .hubheader p:first-of-type { margin-bottom: 6.0rem; margin-bottom: calc(3.0rem + (60 - 30) * ((100vw - 375px) / 1305)); max-width: 107.0rem; max-width: calc(34.5rem + (1070 - 345) * ((100vw - 375px) / 1305)); } .hubheader h1 + span { font-family: 'William'; font-style: italic; font-size: 5.0rem; font-size: calc(3.0rem + (50 - 30) * ((100vw - 375px) / 1305)); } .hubheader .innerheader { display: flex; justify-content: space-around; align-items: center; flex-direction: column; min-height: calc( 100vh - calc(8.0rem + ( 40 ) * ((100vw - 375px) / 1305)) ); padding-top: 12.0rem; padding-top: calc(8.0rem + (120 - 80) * ((100vw - 375px) / 1305)); } .hubheader .hubheaderbuttons { display: flex; } .hubheader .hubheaderbuttons a { margin: 0 0.5rem; } .hubheader .text-header { color: black; } @media only screen and (max-width: 750px) { .hubheader .hubheaderbuttons { display: block; } .hubheader .hubheaderbuttons a { text-align: center; margin-bottom: 2.0rem; margin-bottom: calc(1.0rem + (20 - 10) * ((100vw - 375px) / 1305)); } } @media only screen and (max-width: 475px) { .hublinks-list { display: block; } .hublinks-item { max-width: 100%; } } /* Avoid Chrome to see Safari hack */ @supports (-webkit-touch-callout: none) { .hubheader .innerheader { /* The hack for Safari */ min-height: -webkit-fill-available; } } /* service header */ .serviceheader { display: flex; height: 100%;} .servicecontainer .serviceheader .inner {min-height: calc(100vh - 7.9rem);} .serviceheader .inner { width:100%; height: 100%; min-height: 100vh; position: relative; margin: auto; padding: 0; max-width: 107.0rem; max-width: calc(34.5rem + (1070 - 345) * ((100vw - 375px) / 1305)); } .serviceheader .inner .moreinfo { position: absolute; bottom: 3.0rem; bottom: calc(2.0rem + (30 - 20) * ((100vw - 375px) / 1305)); } .serviceheader .arrowdown { display: block; width: calc(3.3rem + ( 14 ) * ((100vw - 375px) / 1305)); height: calc(3.3rem + ( 14 ) * ((100vw - 375px) / 1305)); margin: var(--s-60) auto 0 auto; background-size: contain; background-image: url(//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/images/arrow-down.svg); min-height: 0vw;} .serviceheader .arrowdown:hover {opacity: 0.75;} .serviceheader .container {width: 100%;} .serviceheader .moreinfo a { font-weight: 700; color: var(--color-orange); } .serviceheader .moreinfo a:hover { box-shadow: 0 2px 0 0 var(--color-orange); } @media only screen and (max-width: 1200px) { .servicecontainer .serviceheader .inner { max-width: calc(34.5rem + ((1vw - 3.75px) * 76.6284)); min-height: calc(100vh - 6.7rem); } } /* sub header */ .subheader .columns { min-height: 100vh; } .subheader .columns > div:first-of-type { margin:0; padding-left: 8.0rem; padding-left: calc(1.5rem + (80 - 15) * ((100vw - 375px) / 1305)); padding-top: 10.0rem; padding-top: calc(5.0rem + (100 - 50) * ((100vw - 375px) / 1305)); } main.sub .subheader .textcolumn {margin-top: 7.9rem;} .subheader .imagecolumn { display: flex; align-items: center;} .subheader .imagecolumn img { width: auto; max-width: 75%;} .subheader h1 {margin-bottom: var(--s-15);} .subheader .textcolumn p {max-width: 75%;} .subheader a { margin-top: 3.0rem; margin-top: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .subheader .blue a { background-color: white; color: var(--color-blue); } .subheader .orange a { background-color: white; color: var(--color-orange); } .subheader .inner { margin: auto; text-align: center; padding: var(--s-100) 0; max-width: 107.0rem; max-width: calc(34.5rem + (1070 - 345) * ((100vw - 375px) / 1305)); } @media only screen and (max-width: 750px) { .subheader {height: 100%;} .subheader .columns { flex-direction: column;} .subheader .columns > div { max-width: var(--w-1345); margin: auto; width: 100%; padding: var(--s-80) 0;} .subheader .textcolumn, .subheader .imagecolumn {padding-right: 0; padding-left: 0; margin: var(--s-30) 0;} .subheader .imagecolumn img {height: 50vh; object-fit: contain;} .subheader .textcolumn p {max-width: 100%;} } /* webinar header */ .subheader .columns { min-height: calc(100vh - 8rem); } .webinarheader .columns>div{ max-width: 50%; } .webinarheader .imagecolumn img { max-width: 90%; } .webinarheader .inner { text-align: left; } @media only screen and (max-width: 960px) { .webinarheader .columns>div{ max-width: 100%; } .webinarheader .columns > div { max-width: var(--w-1345); margin: auto; width: 100%; padding: var(--s-80) 0;} } /* cta general */ .ctageneral { min-height: calc(100vh - 7.9rem); display: flex;} .ctageneral .inner {text-align: center; margin: auto;} .ctageneral img { margin-bottom: 3rem; max-height: 10.0rem; max-height: calc(7.0rem + (100 - 70) * ((100vw - 375px) / 1305)); } .ctageneral h2 { max-width: calc(var(--w-1070) / 1.1); font-size: 9.0rem; font-size: calc(5.0rem + (90 - 50) * ((100vw - 375px) / 1305)); margin-bottom: 6.0rem; margin-bottom: calc(3.0rem + (60 - 30) * ((100vw - 375px) / 1305)); } @media only screen and (max-width: 750px) { .ctageneral { min-height: calc(100vh - 6.7rem); } } /* cta service */ .ctaservice h2 { margin-bottom: var(--s-30); max-width: 90%; } .ctaservice .inner { text-align:center; padding: var(--s-200) 0; } /* page-footer-container */ .page-footer-container { padding: 1.8rem 3rem; line-height: 2.4rem; color: #B3B2B1; background-color: white; padding-left: 3.0rem; padding-left: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); padding-right: 3.0rem; padding-right: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .servicecontainer + .page-footer-container { background-color: var(--color-orange-tint); } .servicecontainer + .page-footer-container, .hs-blog-listing .page-footer-container, .hs-blog-post .page-footer-container, .hs-bloghub-page .page-footer-container, .tutorscontainer + .page-footer-container { width: 100%; padding-left: 37rem; box-sizing: border-box; } @media only screen and (max-width: 1200px) { .servicecontainer + .page-footer-container, .hs-blog-listing .page-footer-container, .hs-blog-post .page-footer-container, .hs-bloghub-page .page-footer-container, .tutorscontainer + .page-footer-container { width: calc(100% - 6rem); padding: 1.8rem 1.5rem; } } /* sidebar cta and header */ .mainmodules .sidebar { height: calc(100vh - 5.1rem); } .sidebar { height: calc(100vh); min-height: 0vw; } .sidebar .columns { align-items: center; max-width: var(--w-1345); min-height: 0vw; margin: auto; display: grid; grid-template-columns: 1fr 1fr; column-gap: 3.0rem; column-gap: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .servicecontainer .sidebar .columns, .blogcontainer .sidebar .columns { max-width: 107.0rem; max-width: calc(34.5rem + (1070 - 345) * ((100vw - 375px) / 1305)); } .sidebar .imagecolumn img { max-width: 100%; } .sidebar a { margin-top: 3.0rem; margin-top: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } /* sidebar, process, offerings, .... */ .sidebar p:first-of-type, .process .header p:first-of-type, .s-offerings .header p:first-of-type { margin-top: var(--s-15); margin-bottom: var(--s-30); } @media only screen and (max-width: 1200px) { .servicecontainer .sidebar .columns, .blogcontainer .sidebar .columns { max-width: var(--w-1345); } } @media only screen and (max-width: 750px) { .sidebar {height: 100%; padding: var(--s-80) 0;} .sidebar .columns { flex-direction: column; grid-template-columns: 1fr;} .sidebar .columns > div { width: 100%;} .sidebar .textcolumn, .sidebar .imagecolumn {padding-right: 0; padding-left: 0; margin: var(--s-30) 0;} .sidebar .imagecolumn img {height: 50vh; object-fit: contain;} } /* process module */ .process { padding: var(--s-100) 0; min-height: 0vw; } .process .inner { padding: 0; margin: auto; min-height: 0vw; max-width: 113.4rem; max-width: calc(34.5rem + (1134 - 345) * ((100vw - 375px) / 1305)); } .servicecontainer .process .inner { max-width: 107.0rem; max-width: calc(34.5rem + (1070 - 345) * ((100vw - 375px) / 1305)); } .process.white .inner.header {border-top: .4rem solid var(--color-orange); padding-top: var(--s-30);} .process .inner.header {margin-bottom: var(--s-100);} .process .stepcontainer {display: block; padding: 0; margin: auto; min-height: 0vw;} .process .mask {display: flex; align-items: center; justify-content: center;width: auto;background-color: var(--color-orange); position: relative; padding-bottom: 60%; margin-bottom: var(--s-30); min-height: 0vw;} .process .mask img {position: absolute; width: 90%; height: 90%; object-fit: contain; top: 5%;} .process .step { display: flex; align-items: baseline; margin-bottom: var(--s-60); border-top: 0.1rem solid var(--color-orange); padding-top: 3.0rem; padding-top: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .process .stepcontainer { border-bottom: .1rem solid var(--color-orange); } .process .step > div { width: 100%; display: block;} .process .step > div:first-child { margin-right: var(--s-15); display: flex; max-width: 90%;} .process .step > div:last-child { margin-left: var(--s-15);} .process .step h2 {margin-bottom: var(--s-10); min-height: 0vw;} .process .step ul, .hs_cos_wrapper_type_rich_text ul { list-style: outside; } .process .step ol, .hs_cos_wrapper_type_rich_text ol { list-style: decimal; } .process .step ul li, .hs_cos_wrapper_type_rich_text ul li { margin-left: 1.8rem; } .process .step ol li, .hs_cos_wrapper_type_rich_text ol li { margin-left: 2.8rem; } .process .step .s-button { margin-top: 2.0rem; margin-top: calc(1.0rem + (20 - 10) * ((100vw - 375px) / 1305)); } .process .step .s-button .material-icons { font-size: 1.8rem; margin-top: -2px; position: relative; top: 3px; } .process .step > div:first-child span { margin-right: var(--s-30); min-height: 0vw;} /* .process .step a[target="_blank"]::after { display: inline-block; margin-left: 0.5rem; content: "open_in_new"; font-family: "Material Icons";} */ @media only screen and (max-width: 1200px) { .servicecontainer .process .inner {max-width: var(--w-1345);} } @media only screen and (max-width: 750px) { .process .step { flex-direction: column;} .process .step > div:first-child { margin-right: 0; margin-bottom: var(--s-30);} .process .step > div:last-child { margin-left: 0;} } /* resource guide module */ .rguide { padding-top: 8.0rem; padding-top: calc(4.0rem + (80 - 40) * ((100vw - 375px) / 1305)); padding-bottom: 8.0rem; padding-bottom: calc(4.0rem + (80 - 40) * ((100vw - 375px) / 1305)); } .rguide .inner { padding: 0; margin: auto; min-height: 0vw; max-width: 113.4rem; max-width: calc(34.5rem + (1134 - 345) * ((100vw - 375px) / 1305)); } .rguide .header p { color: #999999; text-transform: uppercase; } .rguide .header h2 { margin-bottom: 8.0rem; margin-bottom: calc(4.0rem + (80 - 40) * ((100vw - 375px) / 1305)); } .rguide .step { display: flex; align-items: flex-start; margin-bottom: var(--s-60); border-top: 0.1rem solid var(--color-blue); padding-top: 3.0rem; padding-top: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .rguide .step > div:first-of-type { margin-right: 8.0rem; margin-right: calc(4.0rem + (80 - 40) * ((100vw - 375px) / 1305)); } .rguide .step > div:first-of-type > span { display: inline-flex; align-items: center; justify-content: center; color: white; background-color: var(--color-blue); width: 8.0rem; width: calc(6.0rem + (80 - 60) * ((100vw - 375px) / 1305)); height: 8.0rem; height: calc(6.0rem + (80 - 60) * ((100vw - 375px) / 1305)); border-radius: 4.0rem; border-radius: calc(3.0rem + (40 - 30) * ((100vw - 375px) / 1305)); } .rguide .step div:last-of-type h3 u { /* display: inline-block; border-radius: 10rem; background-color: #EEEFFF; box-shadow: 0.7rem 0.1rem 0 0.2rem #eeefff, -0.7rem 0.1rem 0 0.2rem #eeefff; margin-left: 0.7rem; margin-right: 0.7rem; */ color: var(--color-blue); } .rguide-content { } .rguide .step > div:last-of-type { display: grid; row-gap: 3.0rem; row-gap: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); margin-bottom: 6.0rem; margin-bottom: calc(3.0rem + (60 - 30) * ((100vw - 375px) / 1305)); } /* hub offerings */ .offerings .headerthreevariant { line-height: 120%; } .offerings h2 { position: absolute; left: 50%; transform: translateX(-50%); width: 100%; text-align: center; top: 9.0rem; top: calc(6.0rem + (90 - 60) * ((100vw - 375px) / 1305)); } .offerings h2, .offerings span { color: var(--color-orange); } .offerings ul { width: 100%; } .offerings li a.text-body-small { display: inline-block; } .offerings li { position: relative; transition: color .2s ease; margin-bottom: 1.5rem; margin-bottom: calc(0.75rem + (15 - 7.5) * ((100vw - 375px) / 1305)); } .offerings .h-3-variant { line-height: 120%; } .list-header-level { margin-bottom: 3.0rem; margin-bottom: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .resources-links { display: grid; grid-template-columns: auto; grid-template-rows: auto auto; } .offerings .list-header-level span.attribute { text-transform: uppercase; } .offerings .listcontainer .list-header-level { margin-bottom: 6.0rem; margin-bottom: calc(2.5rem + (60 - 25) * ((100vw - 375px) / 1305)); } .offerings ul:not(:first-of-type) li .attribute { margin-top: var(--s-80); min-height: 0vw; margin-bottom: 2.0rem; margin-bottom: calc(1.0rem + (20 - 10) * ((100vw - 375px) / 1305)); } .offerings .extraservices { width: 50%; overflow: hidden; padding-right: 8.0rem; padding-right: calc(4.0rem + (80 - 40) * ((100vw - 375px) / 1305)); } .offerings .extraservices ul li a:not(.button-outline-w-icon) { font-weight: 700; font-size: 1.8rem; margin-top: 0; } .offerings .extraservices ul:not(:first-of-type) li a { display: inline-block; margin-bottom: 2.0rem; margin-bottom: calc(1.0rem + (20 - 10) * ((100vw - 375px) / 1305)); } .offerings .inner { max-width: 100%; padding: 0; margin: auto; min-height: 0vw; padding-top: 20.0rem; padding-top: calc(10.0rem + (200 - 100) * ((100vw - 375px) / 1305)); padding-bottom: 8.0rem; padding-bottom: calc(6.0rem + (80 - 60) * ((100vw - 375px) / 1305)); padding-left: 8.0rem; padding-left: calc(3.0rem + (80 - 30) * ((100vw - 375px) / 1305)); padding-right: 8.0rem; padding-right: calc(3.0rem + (80 - 30) * ((100vw - 375px) / 1305)); } .offerings .listcontainer { position: relative; display: flex; width: 100%; /* margin-bottom: -20%; */ } .offerings .listcontainer ul:first-child { /* display: flex; flex-flow: column wrap; */ } .offerings .listcontainer ul:first-child > li, .offerings .listcontainer .grid-sizer { width: 50%; max-width: 50%; box-sizing: border-box; } .offerings .listcontainer ul:first-child > li:nth-child(2n+1) { /* order: 1; */ padding-right: 1.5rem; padding-right: calc(0.75rem + (15 - 7.5) * ((100vw - 375px) / 1305)); } .offerings .listcontainer ul:first-child > li:nth-child(2n+2) { /* order: 2; */ padding-left: 1.5rem; padding-left: calc(0.75rem + (15 - 7.5) * ((100vw - 375px) / 1305)); } /* Force new columns */ /* .offerings .listcontainer ul:first-child::before, .offerings .listcontainer ul:first-child::after { content: ""; flex-basis: 100%; width: 0; order: 2; } */ .offerings .listcontainer li:not(.list-header-level) a { transition: color .3s ease; } .offerings .listcontainer li:not(.list-header-level) a:hover { color: var(--color-orange); } .offerings ul.extraservices li:not(:first-of-type) .attribute { display: block; margin-top: 0; margin-bottom: 1.0rem; margin-bottom: calc(0.5rem + (10 - 5) * ((100vw - 375px) / 1305)); } .offerings .attribute { display: inline-block; margin-bottom: 1.0rem; margin-bottom: calc(0.5rem + (10 - 5) * ((100vw - 375px) / 1305)); letter-spacing: 0.06999999999999999rem; letter-spacing: calc(0.036rem + (0.7 - 0.36) * ((100vw - 375px) / 1305)); font-size: 1.8rem; font-size: calc(1.4rem + (18 - 14) * ((100vw - 375px) / 1305)); } .offerings ul.extraservices li:first-of-type .attribute { margin-top: 0; } .resources-links img { max-width: 90%; margin: auto; } @media only screen and (max-width: 750px) { .offerings .listcontainer ul:first-child > li { width: 100%; max-width: 100%; } .offerings .listcontainer ul:first-child > li:nth-child(2n+2), .offerings .listcontainer ul:first-child > li:nth-child(2n+1) { padding-left: 0; padding-right: 0; } .offerings .listcontainer ul:first-child::before { margin-top: 0%; } .offerings .listcontainer > ul { padding-top: 0; } .offerings .listcontainer { display: flex; flex-direction: column; padding-top: 10.0rem; padding-top: calc(5.0rem + (100 - 50) * ((100vw - 375px) / 1305)); } .offerings .listcontainer > ul:first-child { padding-right: 0; padding-bottom: 0; } .offerings .extraservices { width: auto; display: flex; flex-direction: column; } .offerings .listcontainer .extraservices .list-header-level:first-of-type { margin-top: 4.0rem; margin-top: calc(2.0rem + (40 - 20) * ((100vw - 375px) / 1305)); margin-bottom: 3.0rem; margin-bottom: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } } /* service offerings */ .s-offerings { min-height: calc(100vh - 7.8rem); } .s-offerings.minimize { min-height: 100%; padding-top: 6.0rem; padding-top: calc(3.0rem + (60 - 30) * ((100vw - 375px) / 1305)); } .s-offerings.minimize > div { color: white; background-color: var(--color-orange); } .s-offerings.minimize > div:first-of-type { border-top-left-radius: 2.0rem; border-top-left-radius: calc(1.0rem + (20 - 10) * ((100vw - 375px) / 1305)); border-top-right-radius: 2.0rem; border-top-right-radius: calc(1.0rem + (20 - 10) * ((100vw - 375px) / 1305)); } .s-offerings.minimize > div:last-of-type { border-bottom-left-radius: 2.0rem; border-bottom-left-radius: calc(1.0rem + (20 - 10) * ((100vw - 375px) / 1305)); border-bottom-right-radius: 2.0rem; border-bottom-right-radius: calc(1.0rem + (20 - 10) * ((100vw - 375px) / 1305)); } .s-offerings .inner { margin: auto; padding-left: var(--s-40); max-width: 107.0rem; max-width: calc(34.5rem + (1070 - 345) * ((100vw - 375px) / 1305)); } .s-offerings .header { padding-top: var(--s-80); padding-bottom: 0; } .s-offerings.minimize .header { padding-top: 4.0rem; padding-top: calc(2.0rem + (40 - 20) * ((100vw - 375px) / 1305)); } .s-offerings .content { padding-bottom: var(--s-80); padding-top: 0; } .s-offerings.minimize .content { padding-bottom: 4.0rem; padding-bottom: calc(2.0rem + (40 - 20) * ((100vw - 375px) / 1305)); } .s-offerings .gridwrapper { display: block; column-count: 2; width: 100%; padding: var(--s-80) 0; } .s-offerings .moreinfo-snippet { position: absolute; bottom: 4.0rem; bottom: calc(2.0rem + (40 - 20) * ((100vw - 375px) / 1305)); } .s-offerings.minimize .gridwrapper { padding-top: 3.0rem; padding-top: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); padding-bottom: 3.0rem; padding-bottom: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .s-offerings a { box-shadow: 0 2px 0 0 white; } .s-offerings.orange a, .s-offerings.minimize a { color: white; border-color: white; } .s-offerings.orange span { color: white !important; } .s-offerings .gridwrapper.singlesection { column-count: 1; } .s-offerings .gridwrapper.singlesection > div { column-count: 2; } .s-offerings .gridwrapper > div { width: 100%; line-height: 170%; margin-bottom: 1.5rem; margin-bottom: calc(0.75rem + (15 - 7.5) * ((100vw - 375px) / 1305)); font-size: 2.0rem; font-size: calc(1.6rem + (20 - 16) * ((100vw - 375px) / 1305)); } .s-offerings .gridwrapper > div:nth-child(2) { display: inline-block; } .s-offerings .inner .moreinfo { position: relative; display: flex; color: #999; line-height: 150%; background-color: rgba(238, 238, 238, 0.5); padding: 3.0rem; padding: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); border-radius: 3.5rem; border-radius: calc(1.75rem + (35 - 17.5) * ((100vw - 375px) / 1305)); font-size: 2.0rem; font-size: calc(1.6rem + (20 - 16) * ((100vw - 375px) / 1305)); } .s-offerings.orange .inner .moreinfo { background-color: rgba(255, 255, 255, 0.2); color: white; } .s-offerings .moreinfo span.material-icons { color: var(--color-orange); font-size: 4.8rem; font-size: calc(3.6rem + (48 - 36) * ((100vw - 375px) / 1305)); margin-right: 3.0rem; margin-right: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .s-offerings.orange .moreinfo span.material-icons { color: white; } .s-offerings .gridwrapper ul { margin-top: var(--s-15); } .s-offerings .gridwrapper h3 { font-size: 1.4rem; margin-bottom: var(--s-5); } .s-offerings.orange .moreinfo a, .s-offerings.orange .text-body-small a { color: white !important; } .s-offerings.orange .text-body-small a:hover { border-color: white !important; opacity: .7; } .s-offerings.white h2, .s-offerings.white h3 { color: var(--color-orange); } @media only screen and (max-width: 500px) { .s-offerings .gridwrapper { column-count: 1; } .s-offerings .inner { padding-right: var(--s-40); } } /* two column module */ .twocolumn { padding-top: 5.0rem; padding-top: calc(2.5rem + (50 - 25) * ((100vw - 375px) / 1305)); } .twocolumn.linetop { padding-top: 10.0rem; padding-top: calc(5.0rem + (100 - 50) * ((100vw - 375px) / 1305)); } body.hubspot-disable-focus-styles .twocolumn.is_lightbox { padding-top: 0; } .twocolumn .inner{ padding: var(--s-100) 0; margin: auto; min-height: 0vw; width: 100%; max-width: 107.0rem; max-width: calc(34.5rem + (1070 - 345) * ((100vw - 375px) / 1305)); } .twocolumn .inner:first-child { padding: var(--s-30) 0; margin-bottom: var(--s-60); } .twocolumn.linetop .inner:first-child { border-top: 0.4rem solid var(--color-orange); color: var(--color-orange); } .twocolumn .inner:first-child p { width: 90%; } .twocolumn .content { padding: 0 0 var(--s-100) 0; } .servicecontainer .twocolumn .inner { max-width: 107.0rem; max-width: calc(34.5rem + (1070 - 345) * ((100vw - 375px) / 1305)); } .tutorscontainer .twocolumn .inner { max-width: 86.0rem; max-width: calc(34.5rem + (860 - 345) * ((100vw - 375px) / 1305)); } .twocolumn .columns { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr; border-top: 0.1rem solid var(--color-orange); padding: var(--s-30) 0 var(--s-80) 0; min-height: 20rem; grid-column-gap: 3.0rem; grid-column-gap: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .twocolumn.orange .columns { border-color: white; } .twocolumn ul.rowcontainer div.hidden { display: none; } .twocolumn .columns .linkbutton { margin-top: var(--s-20); background-color: var(--color-orange); color: white; } .twocolumn.orange .columns .linkbutton { background-color: white; color: var(--color-orange); } .twocolumn p a { font-weight: 700; color: var(--color-orange); border-color: var(--color-orange); } .twocolumn.orange p a { color: white; border-color: white; } .twocolumn .viewoption { color: var(--color-orange); min-height: 0vw; margin-top: 3.0rem; margin-top: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .twocolumn.orange .viewoption { color: white; } .twocolumn .showless { display: none; } .twocolumn .rowcontainer .columns:last-of-type,.twocolumn .columns.last-visible { border-bottom: 0.1rem solid var(--color-orange); } .twocolumn.orange .rowcontainer .columns:last-of-type,.twocolumn.orange .columns.last-visible { border-color: white; } .twocolumn .rowcontainer { width: 100%; } .twocolumn .columns div > div { margin-top: var(--s-40); min-height: 0vw; } .twocolumn .columns div > div:first-of-type { margin-top: var(--s-5); } button.twocolumn.is_lightbox { line-height: 150%; color: var(--color-orange); font-weight: bold; display: flex; flex-direction: column; justify-content: center; align-items: center; border: .2rem solid var(--color-orange); margin: auto; width: 100%; transition: all .2s ease; border-radius: 2.0rem; border-radius: calc(1.0rem + (20 - 10) * ((100vw - 375px) / 1305)); margin-top: 12.5rem; margin-top: calc(5.5rem + (125 - 55) * ((100vw - 375px) / 1305)); margin-bottom: 20.0rem; margin-bottom: calc(10.0rem + (200 - 100) * ((100vw - 375px) / 1305)); max-width: 107.0rem; max-width: calc(34.5rem + (1070 - 345) * ((100vw - 375px) / 1305)); padding-top: 8.0rem; padding-top: calc(4.0rem + (80 - 40) * ((100vw - 375px) / 1305)); padding-bottom: 8.0rem; padding-bottom: calc(4.0rem + (80 - 40) * ((100vw - 375px) / 1305)); } button.twocolumn.is_lightbox:hover { background-color: var(--color-orange); color: white; } button.twocolumn.is_lightbox span { color: black; font-weight: 400; } button.twocolumn.is_lightbox + section.twocolumn, body.hubspot-disable-focus-styles button.twocolumn.is_lightbox { display: none; } body.hubspot-disable-focus-styles button.twocolumn.is_lightbox + section.twocolumn { display: block; } @media only screen and (max-width: 1200px) { .servicecontainer .twocolumn .inner, .blogcontainer .twocolumn .inner { max-width: var(--w-1345); } } @media only screen and (max-width: 750px) { .twocolumn h3 { margin-bottom: var(--s-30); min-height: 0vw; } .twocolumn .columns { grid-template-columns: repeat(1, 1fr); } } /* one column module */ .onecolumn.is-lightbox {position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: scroll; z-index: 99999;} .onecolumn .closebutton {display: none; position: fixed; right: var(--s-30); top: var(--s-30);} .onecolumn.is-lightbox .closebutton {display: block;} .onecolumn .inner { padding: var(--s-100) 0 var(--s-30) 0; margin: auto; max-width: 107.0rem; max-width: calc(34.5rem + (1070 - 345) * ((100vw - 375px) / 1305)); } .onecolumn.white, .onecolumn.orange-tint {padding: var(--s-100) 0;} .onecolumn.white .inner:first-child, .onecolumn.orange-tint .inner:first-child {padding: var(--s-30) 0; border-top: 0.4rem solid;} .onecolumn.white .inner:first-child p {width: 90%;} .onecolumn .content {padding: 0 0 var(--s-100) 0;} .onecolumn.is-lightbox .content {margin-bottom: var(--s-100);} .onecolumn ul.rowcontainer { width: 100%; } .servicecontainer .onecolumn .inner { max-width: 107.0rem; max-width: calc(34.5rem + (1070 - 345) * ((100vw - 375px) / 1305)); } .tutorscontainer .onecolumn .inner { max-width: 86.0rem; max-width: calc(34.5rem + (860 - 345) * ((100vw - 375px) / 1305)); } .onecolumn .column { border-top: 0.1rem solid; padding: 0; padding-top: 3.5rem; padding-top: calc(1.75rem + (35 - 17.5) * ((100vw - 375px) / 1305)); padding-bottom: 4.0rem; padding-bottom: calc(2.0rem + (40 - 20) * ((100vw - 375px) / 1305)); } .onecolumn .column:first-of-type {border-top: none;} .onecolumn.tint .attribute {color: var(--color-orange);} .onecolumn.orange-tint .column, .onecolumn.orange-tint .inner {border-color: var(--color-orange) !important;} .onecolumn.orange-tint h2 { color: var(--color-orange); } .onecolumn .rowcontainer .column:last-of-type { border-bottom: 0.1rem solid; } .onecolumn .column div > div {margin-bottom: var(--s-30);} .onecolumn .column p span { display: block; margin-top: 0.5rem; margin-top: calc(0.25rem + (5 - 2.5) * ((100vw - 375px) / 1305)); } .onecolumn.is-lightbox .readmore {display: none;} .onecolumn .readmore {display: block; font-size: 1.4rem; text-transform: uppercase; margin-top: 3.0rem; margin-top: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .onecolumn li.hide {display: none;} .onecolumn.is-lightbox li.hide {display: block;} @media only screen and (max-width: 1200px) { .servicecontainer .onecolumn .inner {max-width: var(--w-1345);} } @media only screen and (max-width: 750px) { .onecolumn h3 {margin-bottom: var(--s-30);} .onecolumn .column {grid-template-columns: repeat(1, 1fr);} } /* resources module */ .resources.light-blue {background-color: #9CD9F1;} .resources .inner { padding: var(--s-100) 0; margin: auto; min-height: 0vw; max-width: 107.0rem; max-width: calc(34.5rem + (1070 - 345) * ((100vw - 375px) / 1305)); } .servicecontainer .resources .inner { max-width: 107.0rem; max-width: calc(34.5rem + (1070 - 345) * ((100vw - 375px) / 1305)); } .resources .header h2 {margin-bottom: var(--s-15);} .resources .content {display: grid; padding: 0 0 var(--s-200) 0; grid-template-columns: repeat(2, 1fr); row-gap: var(--s-30);} .resources .resource-item {display: flex; align-items: center;} .resources .resource-item > div {margin-left: var(--s-30);} .resources .icon {display: block; text-align: center; font-size: calc(3.0rem + ( 30 ) * ((100vw - 375px) / 1305)); line-height: calc(5.0rem + ( 50 ) * ((100vw - 375px) / 1305)); width: calc(5.0rem + ( 50 ) * ((100vw - 375px) / 1305)); height: calc(5.0rem + ( 50 ) * ((100vw - 375px) / 1305));border-radius: calc(1.25rem + ( 12.5 ) * ((100vw - 375px) / 1305)); background-color: white;} @media only screen and (max-width: 1200px) { .servicecontainer .resources .inner {max-width: var(--w-1345);} } @media only screen and (max-width: 750px) { .resources h3 {margin-bottom: var(--s-30); min-height: 0vw;} .resources .columns {grid-template-columns: repeat(1, 1fr);} } /* resource links */ .resource-links { background-color: #8FD9D6; } .resource-links .inner { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 3.0rem; grid-column-gap: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .resource-links .inner > h2 { display: none; } .resource-links h2 { display: flex; align-items: center; font-weight: 700; margin-bottom: 3.0rem; margin-bottom: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .resource-links .inner p { margin-bottom: 3.0rem; margin-bottom: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .resource-links h2 span { margin-right: 3.0rem; margin-right: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .splitscreen .resource-link-list, .resource-links .resource-link-list { width: 100%; display: flex; flex-direction: column; border-top: 1px solid black; } .resource-links .inner > div { max-width: 52.0rem; max-width: calc(34.5rem + (520 - 345) * ((100vw - 375px) / 1305)); } .resource-links .resource-link-list a, .splitscreen .resource-link-list a { display: flex; flex-direction: row; align-items: center; justify-content: space-between; border-bottom: 1px solid black; line-height: 160%; padding-bottom: 1.5rem; padding-bottom: calc(0.75rem + (15 - 7.5) * ((100vw - 375px) / 1305)); padding-top: 1.5rem; padding-top: calc(0.75rem + (15 - 7.5) * ((100vw - 375px) / 1305)); } @media only screen and (max-width: 750px) { .resource-links .inner { grid-template-columns: 1fr; } .resource-links .inner > div > h2 { display: none; } .resource-links .inner > h2 { display: block; text-align: center; } } /* tutor tiers */ .tutorstiers {text-align: center;} .tutorstiers .header {margin: 0 auto; max-width: var(--w-745);padding: var(--s-30) 0; min-height: 0vw;} .tutorstiers .header h2 {margin-bottom: var(--s-30); min-height: 0vw;} .tutorstiers .content { margin: 0 auto; padding: 0 var(--s-30); padding: 3.0rem; padding: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); padding-top: 0; } .tutorstiers .inner > ul {background-color: transparent; border: 1px solid #fff; border-radius: 3.5rem; border-radius: calc(1.725rem + (35 - 17.25) * ((100vw - 375px) / 1305)); } .tutorstiers ul {width: 100%; display: grid; grid-template-columns: repeat(4, 1fr);} .tutorstiers ul ul {flex-direction: column;} .tutorstiers li {list-style-type: none; width: 100%} .tutorstiers .inner > ul > li:not(:last-child) {border-right: 0.15rem solid #fff;} .tutorstiers li {position: relative; padding-top: 85%;} .tutorstiers li > div {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; flex-direction: column;} .tutorstiers h3 {margin-bottom: var(--s-10);} @media only screen and (max-width: 900px) { .tutorstiers ul {grid-template-columns: repeat(2, 1fr);} .tutorstiers .inner > ul > li:not(:last-child) {border-right: none;} .tutorstiers .inner > ul > li:nth-child(odd) {border-right: 0.15rem solid #FD865D;} .tutorstiers .inner > ul > li:nth-child(-n+2) {border-bottom:0.15rem solid #FD865D;} } @media only screen and (max-width: 500px) { .tutorstiers ul {grid-template-columns: repeat(1, 1fr);} .tutorstiers .inner > ul > li:nth-child(odd) {border-right: none;} .tutorstiers .inner > ul > li:not(:last-child) {border-bottom:0.15rem solid #FD865D;} } /* blog */ .bloglist {padding: var(--s-100) 0; } .bloglist .linkbutton { display: block; margin: 0; } .bloglist .header {padding: var(--s-30) 0;} .bloglist .inner { width:100%; margin: auto; min-height: 0vw; max-width: 107.0rem; max-width: calc(34.5rem + (1070 - 345) * ((100vw - 375px) / 1305)); } @media only screen and (max-width: 1200px) { .bloglist .inner {max-width: var(--w-1345);} } .tutorscontainer .bloglist .inner { max-width: 86.0rem; max-width: calc(34.5rem + (860 - 345) * ((100vw - 375px) / 1305)); } .bloglist .inner:first-child { display: flex; flex-direction: row; align-items: flex-start; border-top: 0.4rem solid; justify-content: space-between; } .bloglist .content { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; grid-column-gap: var(--s-30); grid-row-gap: var(--s-30); padding: 0; } .bloglist .item { border-radius: var(--s-30); height: 100%; position: relative; min-height: 0vw; height: 24.5rem; height: calc(17.5rem + (245 - 175) * ((100vw - 375px) / 1305)); } .bloglist .item > div { padding: var(--s-30); } .bloglist .item h3 { font-weight: 600; } .bloglist .item span { margin-top: 3.0rem; margin-top: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .bloglist .item:hover { opacity: 0.75; } @media only screen and (max-width: 900px) { .bloglist .content { grid-template-columns: repeat(1, 1fr);} } /* analytics */ .analytics { text-align: center; min-height: 0vw; padding-top: 12.0rem; padding-top: calc(6.0rem + (120 - 60) * ((100vw - 375px) / 1305)); padding-bottom: 16.0rem; padding-bottom: calc(8.0rem + (160 - 80) * ((100vw - 375px) / 1305)); } .analytics .inner { margin: auto; max-width: var(--w-1345); color: var(--color-orange);} .analytics .header {padding: var(--s-30) 0;} .analytics .content {padding: var(--s-40) 0;} .analytics.linetop .header {border-top-width: .4rem; border-top-style: solid; border-color: var(--color-orange);} .analytics .content > div { display: grid; grid-auto-flow: column; width: auto; min-height: 0vw;} .analytics .inner > div#p-2 { grid-column-gap: 15.0rem; grid-column-gap: calc(7.5rem + (150 - 75) * ((100vw - 375px) / 1305)); } .analytics .inner > div#p-3 {grid-column-gap: var(--s-10);} .analytics .white, .analytics .white h2 {color: var(--color-orange);} .linetop .piecontainer {color: var(--color-black)} .analytics .pie, .piecontainer, .piecontainer strong {margin-bottom: var(--s-30);} .analytics.orange .piecontainer {color: #ffffff;} .analytics .piecontainer {display: flex; flex-direction: column; align-items: center; max-width: 38.3rem; max-width: calc(26.2rem + (383 - 262) * ((100vw - 375px) / 1305)); } .analytics .pie{position:relative;width:100%;max-width: calc(26.2rem + ( 121 ) * ((100vw - 375px) / 1305));border-radius:50%; background: #d8d8d8; background-image:linear-gradient(to right, transparent 50%, #655 0);color:transparent;text-align:center; min-height: 0vw;} .analytics .pie:after{content:"";display:block;padding-bottom:100%;} .analytics .piecontainer:nth-of-type(odd) .pie{background-image:linear-gradient(to right, transparent 50%, var(--color-orange) 0); color: var(--color-orange);} .analytics .piecontainer:nth-of-type(even) .pie {background-image:linear-gradient(to right, transparent 50%, var(--color-blue) 0); color: var(--color-blue) ;} .analytics .pie::before{content:'';position:absolute;top:0;left:50%;width:50%;height:100%;border-radius:0 100% 100% 0 / 50%;background-color:inherit;transform-origin:left;} .analytics .piecontainer:nth-of-type(odd) .pie::before{animation:spin 50s linear infinite, bggreen 100s step-end infinite;animation-play-state:paused;animation-delay:inherit;} .analytics .piecontainer:nth-of-type(even) .pie::before{animation:spin 50s linear infinite, bgblue 100s step-end infinite;animation-play-state:paused;animation-delay:inherit;} .analytics .donut{position:absolute;display:flex;justify-content:center;align-items:center;top:50%;left:50%;width:100%;height:100%;border-radius:100%;background-color:white; max-width: calc(16.6rem + ( 77 ) * ((100vw - 375px) / 1305)); max-height: calc(16.6rem + ( 77 ) * ((100vw - 375px) / 1305));transform: translate(-50%, -50%); min-height: 0vw;} .analytics .piecontainer .text-body { line-height: 160%; } @keyframes spin{to{transform:rotate(.5turn);}} @keyframes bggreen{50%{background:var(--color-orange);}} @keyframes bgblue{50%{background:var(--color-blue);}} @media only screen and (max-width: 750px) { .analytics .inner.content > div { grid-auto-flow: row; grid-row-gap: var(--s-30);} .analytics .pie {transform: scale(0.9); overflow: hidden;} } /* team module */ .teammodule {display: grid; grid-template-columns: repeat(3, 1fr); grid-row-gap: var(--s-150); padding-top: var(--s-60); padding-bottom: var(--s-200);} .teammodule .member { display: flex; flex-direction: column; align-items: center; text-align: center;} .teammodule .member img { position: absolute; width: 100%; height: 100%; object-fit: contain; object-position: bottom;} .teammodule .member .mask {position: relative; padding-bottom: 110%; background-color: #DAE1E8; width: 100%; margin-bottom: var(--s-40); min-height: 0vw;} .teammodule .member:last-of-type { } @media screen and (max-width: 700px) { .teammodule { grid-template-columns: repeat(2, 1fr);} .teammodule .member:last-of-type { display: none; } } /* pricing table */ .pricingtable .inner { width: 100%; margin: auto; padding: 0; padding-top: 15.0rem; padding-top: calc(7.5rem + (150 - 75) * ((100vw - 375px) / 1305)); padding-bottom: 15.0rem; padding-bottom: calc(7.5rem + (150 - 75) * ((100vw - 375px) / 1305)); max-width: 107.0rem; max-width: calc(34.5rem + (1070 - 345) * ((100vw - 375px) / 1305)); } .pricingtable .header, .pricingtable .tablinks {display: flex; flex-direction: row; align-items: center;} .pricingtable .header > div {width: 100%;} .pricingtable .header > div:first-of-type {margin-right: var(--s-30);} .pricingtable .header > div:last-of-type { display: flex; flex-direction: column; align-items: flex-end; margin-left: 3.0rem; margin-left: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .pricingtable .content {padding-top: 0; padding-bottom: var(--s-150);} .pricingtable .inner > div { width: 100%; } .pricingtable .tablinks {margin-top: var(--s-20);} .pricingtable .tablinks a {margin-right: .5rem;} .pricingtable .tablinks a:not(.active--tab) {background-color: #EDE0D8; color: var(--color-darkgrey);} .pricingtable .header-links button:first-of-type { margin-bottom: 2.0rem; margin-bottom: calc(1.0rem + (20 - 10) * ((100vw - 375px) / 1305)); } .pricingtable .package-container { width: 100%; margin-top: 3.0rem; margin-top: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .pricingtable .pricing-panel {text-align: right;} .pricingtable .info-panel p {max-width: 75%;} @media screen and (max-width: 700px) { .pricingtable .info-panel p {max-width: 100%;} } .pricingtable .info-panel, .pricingtable .pricing-panel { padding-top: 3.0rem; padding-top: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); padding-bottom: 4.0rem; padding-bottom: calc(2.0rem + (40 - 20) * ((100vw - 375px) / 1305)); } .pricingtable .package-item { display: flex; margin-bottom: -0.2rem; border-width: 0; border-color: var(--color-darkgrey); border-style: solid; border-bottom-width: 0.2rem; border-top-width: 0.2rem;} .pricingtable .package-item > div { width: 100%;} .pricingtable .package-item > div:last-child { border-color: var(--color-darkgrey); border-width: 0; border-left-width: 0.2rem; border-style: solid; width: 25%;} .pricingtable .package-header {display: flex; flex-direction: row; justify-content: left; align-items: baseline; margin-bottom: 3.0rem; margin-bottom: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .pricingtable .package-header * { margin-right: 3.0rem; margin-right: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .pricingtable .pricing-panel .price-tag:not(.active--price) {display: none;} .pricingtable .discount {background-color: var(--color-orange); padding: var(--s-5) var(--s-10); color: white; border-radius: 3rem;} .pricingtable .price-tag span {display: block;} .tier-breakdown { min-height: calc(100vh - calc(3.0rem + ( 30 ) * ((100vw - 375px) / 1305))); background-color: var(--color-orange); color: white; } @media screen and (max-width: 1200px) { .pricingtable .package-header { display: block; margin-bottom: 6.0rem; margin-bottom: calc(3.0rem + (60 - 30) * ((100vw - 375px) / 1305)); } .pricingtable .package-header h3 { margin-bottom: 1.5rem; margin-bottom: calc(0.75rem + (15 - 7.5) * ((100vw - 375px) / 1305)); } .pricingtable .package-item > div:last-child { border-left-width: 0; } } @media screen and (max-width: 700px) { .pricingtable .header > div:first-of-type { margin-right: 0; margin-bottom: 3.0rem; margin-bottom: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .pricingtable .header > div:last-of-type { margin-left: 0; align-items: flex-start; justify-content: stretch; } .pricingtable .header-links > button { width: 100%; min-width: auto; } .pricingtable .package-item > div:last-child { position: absolute; right: 0; } .pricingtable .discount { display: inline-block; } .pricingtable .header { flex-direction: column; } .pricingtable .package-container { margin-top: 18.0rem; margin-top: calc(9.0rem + (180 - 90) * ((100vw - 375px) / 1305)); } .pricingtable .tablinks { position: absolute; left: 0; right: 0; width: 100%; overflow-x: scroll; } .pricingtable .price-tag span { margin-top: 1.8rem; margin-top: calc(0.9rem + (18 - 9) * ((100vw - 375px) / 1305)); } .tablinks .linkbutton { font-size: 1.6rem; line-height: 3.7rem; padding: 0 1.4rem; } } /* how it works */ .howitworks .inner { padding: 0; margin: auto 0; } section.howitworks > div { position: relative; } .howitworks .inner.header { text-align: center; padding-top: 12.0rem; padding-top: calc(6.0rem + (120 - 60) * ((100vw - 375px) / 1305)); padding-bottom: 7.0rem; padding-bottom: calc(3.5rem + (70 - 35) * ((100vw - 375px) / 1305)); } .howitworks .inner.header h1 { margin-bottom: 3.0rem; margin-bottom: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .howitworks .inner.header h2 { font-weight: 400; max-width: 72.0rem; max-width: calc(34.5rem + (720 - 345) * ((100vw - 375px) / 1305)); } .howitworks .inner.content { min-height: 100vh; align-items: flex-start; justify-content: flex-start; margin: auto; max-width: 100%; } .howitworks-item { display: flex; width: 100%; } .howitworks-content { width: 100%; max-width: 66.0rem; max-width: calc(30.0rem + (660 - 300) * ((100vw - 375px) / 1305)); } .howitworks-image { opacity: 0; position: absolute; top: 50%; right: 0; max-width: 50%; transform: translateY(-50%); height: 100%; transition: opacity .3s ease; display: flex; justify-content: center; align-items: center; box-sizing: border-box; padding-left: 5.0rem; padding-left: calc(2.5rem + (50 - 25) * ((100vw - 375px) / 1305)); padding-right: 5.0rem; padding-right: calc(2.5rem + (50 - 25) * ((100vw - 375px) / 1305)); } .howitworks-image img { box-sizing: border-box; } .howitworks-image.active-state { opacity: 1; } .howitworks-accordion { width: auto; max-width: 50%; box-sizing: border-box; padding-left: 9.0rem; padding-left: calc(1.5rem + (90 - 15) * ((100vw - 375px) / 1305)); padding-right: 9.0rem; padding-right: calc(1.5rem + (90 - 15) * ((100vw - 375px) / 1305)); padding-top: 3.0rem; padding-top: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); padding-bottom: 6.0rem; padding-bottom: calc(3.0rem + (60 - 30) * ((100vw - 375px) / 1305)); } [lightboxContainerInner] .howitworks-accordion { padding-left: 3.0rem; padding-left: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .howitworks button span { margin-right: 3.0rem; margin-right: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .howitworks-accordion-content { padding-bottom: 4.0rem; padding-bottom: calc(2.0rem + (40 - 20) * ((100vw - 375px) / 1305)); } .howitworks-accordion-content a { margin-top: 2.0rem; margin-top: calc(1.0rem + (20 - 10) * ((100vw - 375px) / 1305)); } @media only screen and (max-width: 900px) { .howitworks-accordion { max-width: 100%; } .howitworks-images { display: none; } .howitworks-accordion button { margin: 0; } } /* splitscreen */ .splitscreen h2 { position: absolute; left: var(--s-30); z-index: 2; transition: all .5s ease; color: white; line-height: 137.5%; font-family: Brown; font-weight: 700; margin-top: 3.0rem; margin-top: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .splitactive .splitscreen h2 { margin-top: 10.8rem; } .splitactive.hidenavbar .splitscreen h2 { margin-top: 3.0rem; margin-top: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } body[data-aos-delay="100"] .splitscreen h2.aos-animate {transition-delay: 0s;} .splitscreen .columns {padding: 0; margin: 0; position: relative;} .splitscreen .imagecolumn {background-color: #edece8;} .splitscreen .textcolumn, .splitscreen .imagecolumn {display: flex;flex-direction: column;justify-content: center;align-items: center;width: 50%;padding: 0;} .splitscreen .textcolumn{align-items: flex-start;float: right;right: 0;} .splitscreen .imagecolumn {position: absolute;transition: opacity 500ms ease;left: 0;height: 100vh;} .splitscreen .imagecolumn img {max-width: 80%; width: auto;} .splitscreen .trigger{position: relative;width: 50%;left: 0;height: 100vh;} .splitscreen .textcolumn {align-items: flex-start; padding: 9%;} .splitscreen .textcolumn h3 {color: #FF875C; margin-bottom: var(--s-30); min-height: 0vw; display: flex;align-items: baseline; padding-right: var(--s-60);} .splitscreen .index {position: relative; display: inline-block; color: var(--color-orange); line-height: calc(3.3rem + ((1vw - 3.75px) * 1.0728)); margin-right: var(--s-30); text-align: center; min-height: 0vw;} .splitscreen .textcolumn img { display: none; max-width: 85%; } @media only screen and (max-width: 900px) { .splitscreen .imagecolumn img {display: none;} .splitscreen .textcolumn img {display: block;} .splitscreen .textcolumn { background-color: transparent; align-items: center; padding: 3.0rem; padding: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .splitscreen .textcolumn, .splitscreen .imagecolumn {width: 100%; max-width: 100%; height: 100%;} .splitscreen .textcolumn {z-index: 1;} .splitscreen h2 { left: 50%; transform: translateX(-50%) !important; position: absolute !important; margin-top: 14.0rem; margin-top: calc(7.0rem + (140 - 70) * ((100vw - 375px) / 1305)); } .splitactive .splitscreen h2, .splitactive.hidenavbar .splitscreen h2 { margin-top: 14.0rem; margin-top: calc(7.0rem + (140 - 70) * ((100vw - 375px) / 1305)); } .splitscreen .textcolumn { color: white; } .splitscreen .trigger { width: 0; } .splitscreen .textcolumn h3 { padding-right: 0; text-align: center; color: white; } .splitscreen .trigger, .splitscreen .imagecolumn { min-height: 100vh; } .splitscreen .columns:first-of-type .trigger { min-height: 110vh; } } /* Coaches Spotlight */ .spotlight { margin: auto; min-height: 0vw; overflow: hidden; padding: auto 0; padding-top: 14.0rem; padding-top: calc(7.0rem + (140 - 70) * ((100vw - 375px) / 1305)); padding-bottom: 14.0rem; padding-bottom: calc(7.0rem + (140 - 70) * ((100vw - 375px) / 1305)); } .spotlight .header { min-height: 0vw; flex-direction: row; justify-content: space-between; /* border-top: 0.4rem solid #f98e66; */ padding-top: 3.0rem; padding-top: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); padding-bottom: 3.0rem; padding-bottom: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); margin-left: 3.0rem; margin-left: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); margin-right: 3.0rem; margin-right: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .spotlight .header p { display: none; } .spotlight .header .linkbutton { margin: 0; } .spotlight .swiper-container {overflow: visible;} .spotlight .swiper-wrapper {width: auto; padding: calc(3rem + ((1vw - 3.75px) * 2.2989)) 0 calc(1.5rem + ((1vw - 3.75px) * 1.1494)) 0; overflow: visible; height: 100%; margin: auto; padding-top: 3.0rem; padding-top: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .servicecontainer .spotlight .header, .proposal-page .spotlight .header, .resourcecontainer .spotlight .header { max-width: calc(34.5rem + ((1vw - 3.75px) * 55.5556)); margin: auto; } .servicecontainer .spotlight .swiper-container, .proposal-page .spotlight .swiper-container, .resourcecontainer .spotlight .swiper-container { padding: 0; max-width: calc(34.5rem + ((1vw - 3.75px) * 55.5556)); min-height: 0vw; } .hub-container .spotlight .swiper-container { padding-left: 3.0rem; padding-left: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } /* slides */ .spotlight .swiper-slide { height: auto; margin-left: 3.0rem; margin-left: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .spotlight .swiper-slide:first-child { min-height: 0vw; margin-left: 0; width: 52.0rem; width: calc(34.5rem + (520 - 345) * ((100vw - 375px) / 1305)); } .spotlight .swiper-slide:last-child { margin-right: 3.0rem; margin-right: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .servicecontainer .spotlight .swiper-slide:first-child {margin-left: 0;} .servicecontainer .spotlight .swiper-slide:last-child {margin-right: 0;} /* card slides */ .spotlight .swiper-slide.card { position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; border: 1px solid var(--color-orange); border-radius: 1rem; transition: background-color 600ms ease; width: 35.0rem; width: calc(26.0rem + (350 - 260) * ((100vw - 375px) / 1305)); padding-top: 4.0rem; padding-top: calc(2.0rem + (40 - 20) * ((100vw - 375px) / 1305)); padding-bottom: 4.0rem; padding-bottom: calc(2.0rem + (40 - 20) * ((100vw - 375px) / 1305)); } .spotlight .swiper-slide.card h3 { margin-bottom: 2.0rem; margin-bottom: calc(1.0rem + (20 - 10) * ((100vw - 375px) / 1305)); } .spotlight .card .mask {max-width: 12rem; height: 12rem; border-radius: 120rem; position: relative; display: block; width: 100%; margin-bottom: calc(1.5rem + ((1vw - 3.75px) * 1.1494)); min-height: 0vw; overflow: hidden;} .spotlight .card img, .spotlight .card .img--placeholder {position: absolute; display: block; width: 100%;height: 100%;object-fit: cover;} .spotlight img::before{ content: "account_circle"; font-size: 12rem; display: block; font-family: 'Material Icons'; color: black; letter-spacing: 0; line-height: 100%; } .spotlight .card .img--placeholder {background-color: #e3e3e3;} .spotlight .card .text-attribute {text-transform: uppercase; margin-bottom: var(--s-15); margin-top: var(--s-10); min-height: 0vw;} .spotlight .swiper-slide.card > div:nth-child(2) {padding: 0 auto; display: flex; justify-content: center; flex-direction: column; align-items: center; padding-left: 4.0rem; padding-left: calc(3.0rem + (40 - 30) * ((100vw - 375px) / 1305)); padding-right: 4.0rem; padding-right: calc(3.0rem + (40 - 30) * ((100vw - 375px) / 1305)); } .spotlight .card:hover {background-color: #fff;} @media only screen and (max-width: 1200px) { .spotlight .card:hover {background-color: transparent;} } /* buttons */ .spotlight .buttoncontainer { position: relative; display: flex; width: 100%; justify-content: space-between; margin: 0 calc(1.5rem + ((1vw - 3.75px) * 1.1494)); min-height: 0vw;} .spotlight .swiper-button { position: relative; background-color: transparent;width: calc(3.5rem + ((1vw - 3.75px) * 2.682));height: calc(3.5rem + ((1vw - 3.75px) * 2.682)); transform: none; top: auto; min-height: 0vw; opacity: 1; transition: opacity 250ms ease; cursor: pointer;} .spotlight .swiper-button:hover {opacity: 0.75;} .spotlight .swiper-button.prev {left: calc(1.5rem + ((1vw - 3.75px) * 1.1494)); transform: rotate(180deg); min-height: 0vw;} .spotlight .swiper-button.next {right: calc(1.5rem + ((1vw - 3.75px) * 1.1494)); min-height: 0vw;} .spotlight .swiper-button-disabled {opacity: 0 !important; cursor: default;} .servicecontainer .spotlight .buttoncontainer {margin: 0;} .spotlight .swiper-container .linkbutton { display: none; } @media only screen and (max-width: 1200px) { .servicecontainer .spotlight .header {max-width: 100%; margin: 0 calc(1.5rem + ((1vw - 3.75px) * 1.1494));} .servicecontainer .spotlight .swiper-container {max-width: 100%; padding: calc(3rem + ((1vw - 3.75px) * 2.2989)) 0 calc(1.5rem + ((1vw - 3.75px) * 1.1494)) 0;} .servicecontainer .spotlight .swiper-slide:first-child {margin-left: calc(1.5rem + ((1vw - 3.75px) * 1.1494));} .servicecontainer .spotlight .swiper-slide:last-child {margin-right: calc(1.5rem + ((1vw - 3.75px) * 1.1494));} .servicecontainer .spotlight .buttoncontainer {margin: 0 calc(1.5rem + ((1vw - 3.75px) * 1.1494));} } @media only screen and (max-width: 600px) { .spotlight .header {flex-direction: column; align-items: baseline;} .spotlight .header p, .spotlight .swiper-container .linkbutton {display: block;} .spotlight .header a {display: inline-flex; margin-top: calc(1.5rem + ((1vw - 3.75px) * 1.1494));} .spotlight .swiper-slide:first-child {display: none;} .spotlight .header h2, .spotlight .buttoncontainer { margin: auto; margin-bottom: 3rem; } .spotlight .header .linkbutton, .spotlight .swiper-button { display: none; } .spotlight .swiper-slide:first-child + .card { margin-left: 3.0rem; margin-left: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } } @media only screen and (max-width: 400px) { .spotlight > a { text-align: center; display: block; margin: 0 calc(1.5rem + ((1vw - 3.75px) * 1.1494));} } /* testimonials */ .testimonials {display: flex;} .testimonials .inner { position: relative; display: flex; flex-direction: column; justify-content: center; width: 100%; height: auto; margin: 0 auto; padding: auto 0; min-height: 0vw; padding-top: 15.0rem; padding-top: calc(7.5rem + (150 - 75) * ((100vw - 375px) / 1305)); padding-bottom: 15.0rem; padding-bottom: calc(7.5rem + (150 - 75) * ((100vw - 375px) / 1305)); } .testimonials .swiper-container { position: relative; margin: 0 auto; text-align: center; width: 100%; padding: var(--s-60) 0; min-height: 0vw; } .testimonials .controls-container { position: relative; width: 100%; margin: 0 auto; max-width: 107.0rem; max-width: calc(34.5rem + (1070 - 345) * ((100vw - 375px) / 1305)); } .controls-container button { position: absolute; left: 0; } .testimonials .swiper-wrapper {width: 100%; height: 100%; display: flex; align-items: center;} .testimonials:not(.orange, .testimonials--box) h2 {color: var(--color-orange);} .testimonials .inner > div:last-child {display: flex; align-items: center; justify-content: center; width: 100%; position: relative;} .testimonials blockquote { display: flex; flex-direction: column; justify-content: center; align-items: center; margin: auto; max-width: 107.0rem; max-width: calc(34.5rem + (1070 - 345) * ((100vw - 375px) / 1305)); } .testimonials.testimonials--full blockquote { background-color: white; } .testimonials.testimonials--box blockquote { border-radius: var(--s-20); padding: var(--s-60) var(--s-40) var(--s-40) var(--s-40); } .testimonials.orange blockquote {background-color: var(--color-orange); color: black;} .testimonials .text-testimonials.swiper-slide {opacity: 0;} .testimonials blockquote.swiper-slide.swiper-slide-active {opacity: 1 !important;} .blockquote-container blockquote footer, .testimonials blockquote footer { margin-top: 3.0rem; margin-top: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); min-height:0vw; display: block; line-height: 175%; } .blockquote-container blockquote footer span, .testimonials blockquote footer span { color: #979797; display: block; } .testimonials.orange blockquote footer span {color: white;} .testimonials .dotcontainer {display: flex; align-items: center; justify-content: center; position: relative; z-index: auto;} .testimonials .bullet { cursor: pointer; outline: 0; height: var(--s-30); width: var(--s-30); margin: 0 var(--s-20); border-radius: calc( var(--s-30) / 2); display: inline-block; transition: opacity 0.3s ease; min-height: 0vw; box-shadow: inset 0px 0 0 2px var(--color-orange); } .testimonials.orange .bullet { box-shadow: inset 0px 0 0 2px #fff; } .testimonials .bullet:hover {opacity: 0.75;} .testimonials .bullet.active { background-color: var(--color-orange) !important; } .testimonials.orange .bullet.active { background-color: #fff !important; } .testimonials .linkbutton {position: absolute; left: auto; right: 3.0rem; right: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .testimonials.orange .linkbutton {background-color: #000000;color: #ffffff;} .testimonials .blockquote-container { display: flex; flex-direction: column; max-width: 107.0rem; max-width: calc(34.5rem + (1070 - 345) * ((100vw - 375px) / 1305)); } .testimonials-lightbox { display: flex; flex-direction: column; align-items: center; margin: auto; text-align: center; padding: auto 0; max-width: 107.0rem; max-width: calc(34.5rem + (1070 - 345) * ((100vw - 375px) / 1305)); padding-top: 15.0rem; padding-top: calc(7.5rem + (150 - 75) * ((100vw - 375px) / 1305)); padding-bottom: 15.0rem; padding-bottom: calc(7.5rem + (150 - 75) * ((100vw - 375px) / 1305)); } .contenthighlight-lightbox { top: 50%; position: absolute; width: 80%; left: 50%; transform: translate(-50%, -50%); border-radius: 1.5rem; overflow: hidden; } @media only screen and (max-width: 600px) { .contenthighlight-lightbox { width: 100%; border-radius: 0; } } .testimonials-lightbox h2 { margin-bottom: 12.0rem; margin-bottom: calc(6.0rem + (120 - 60) * ((100vw - 375px) / 1305)); } .testimonials-lightbox blockquote { margin-bottom: 24.0rem; margin-bottom: calc(12.0rem + (240 - 120) * ((100vw - 375px) / 1305)); } .round-button-w-icon { display:inline-block; margin-left:5px; background-color: #000000; transition:color 200ms ease, filter 200ms ease, background-color 200ms ease, opacity 200ms ease; color:#fff; font-weight:700; text-align:center; cursor:pointer; position: absolute; top: 1.5rem; z-index: 1; min-width: 5.0rem; min-width: calc(3.7rem + (50 - 37) * ((100vw - 375px) / 1305)); height: 5.0rem; height: calc(3.7rem + (50 - 37) * ((100vw - 375px) / 1305)); border-radius: 2.5rem; border-radius: calc(1.85rem + (25 - 18.5) * ((100vw - 375px) / 1305)); right: 4.0rem; right: calc(2.0rem + (40 - 20) * ((100vw - 375px) / 1305)); top: 4.0rem; top: calc(2.0rem + (40 - 20) * ((100vw - 375px) / 1305)); font-size: 3.6rem; font-size: calc(3.0rem + (36 - 30) * ((100vw - 375px) / 1305)); line-height: 5.0rem; line-height: calc(3.7rem + (50 - 37) * ((100vw - 375px) / 1305)); } .round-button-w-icon:hover { background-color: #555555; } body.lb-active-testimonial [lightboxContainer="testimonial"], body.lb-active-ctaservice [lightboxContainer="ctaservice"], body.main-lightbox-active [lightboxContainer="main"], [lightboxContainer].active { left: 0; opacity: 1; z-index: 9999; background-color: rgba(255, 255, 255, 1); transition: background-color .3s ease .3s, opacity 0s linear; } [lightboxcontainer="entry-form"] > [lightboxcontainerinner] { overflow-y: auto; } body.lb-active-testimonial [lightboxContainerInner], body.lb-active-ctaservice [lightboxContainerInner], body.main-lightbox-active [lightboxContainer="main"] [lightboxContainerInner], [lightboxContainer].active [lightboxContainerInner] { top: 0; opacity: 1; } body.lb-active-testimonial [lightboxContainer="testimonial"] [lightboxContainerButton], body.lb-active-ctaservice [lightboxContainer="ctaservice"] [lightboxContainerButton], body.main-lightbox-active [lightboxContainer="main"] [lightboxContainerButton] { display: block; } [lightboxContainer] [lightboxContainerButton], [lightboxContainerContent] { display: none; } [lightboxContainer] { opacity: 0; position: fixed; left: -100%; top: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0); z-index: -1; transition: background-color .3s ease .0s, opacity 0s linear .3s; box-sizing: border-box; padding-left: 3.0rem; padding-left: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); padding-right: 3.0rem; padding-right: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .hs-inline-edit [lightboxcontainer] { position: relative; margin-top: 2rem; display: none; } [lightboxContainerInner] { margin: auto; width: 100%; max-width: 100%; min-height: 75vh; background-color: #ffffff; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; top: 50%; opacity: 0; position: relative; overflow: hidden; transition: top .3s ease, opacity .3s ease; box-shadow: 4px 4px 11px 6px rgba(0, 0, 0, 0.1); height: calc( 100vh - calc(3.0rem + ( 30 ) * ((100vw - 375px) / 1305))); margin-top: 3.0rem; margin-top: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); margin-bottom: 3.0rem; margin-bottom: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); border-radius: 5.0rem; border-radius: calc(2.5rem + (50 - 25) * ((100vw - 375px) / 1305)); } [lightboxcontainerinner] > div, [lightboxcontainerinner] > main { overflow-y: auto; height: 100%; border-radius: 5.0rem; border-radius: calc(2.5rem + (50 - 25) * ((100vw - 375px) / 1305)); } [lightboxcontainerinner] > div, [lightboxcontainerinner] > main { width: 100%; } [lightboxContainer="testimonial"] h2 { margin-bottom: 6.0rem; margin-bottom: calc(3.0rem + (60 - 30) * ((100vw - 375px) / 1305)); } [lightboxContainer="testimonial"] .blockquote-container { display: grid; row-gap: 12.0rem; row-gap: calc(6.0rem + (120 - 60) * ((100vw - 375px) / 1305)); } [lightboxContainer="testimonial"] blockquote { opacity: 1 !important; color: black; max-width: 107.0rem; max-width: calc(34.5rem + (1070 - 345) * ((100vw - 375px) / 1305)); } @media only screen and (max-width: 750px) { .testimonials .inner > div:last-child {display: flex; flex-direction: column-reverse;} .testimonials .linkbutton {position: relative; right: auto; left: auto; margin-top: 6.0rem; margin-top: calc(3.0rem + (60 - 30) * ((100vw - 375px) / 1305)); ;} [lightboxContainerInner] { max-width: 100%; box-shadow: none; margin: 0 auto; } [lightboxContainer] { padding-left: 0; padding-right: 0; } } .hs-inline-edit [data-aos] {opacity: 1 !important;} /* main blog header */ .tutor-main-header { margin: auto; max-width: 92.0rem; max-width: calc(34.5rem + (920 - 345) * ((100vw - 375px) / 1305)); margin-top: 6.0rem; margin-top: calc(3.0rem + (60 - 30) * ((100vw - 375px) / 1305)); margin-bottom: 6.0rem; margin-bottom: calc(3.0rem + (60 - 30) * ((100vw - 375px) / 1305)); } .tutor-main-header h1 { margin-bottom: 2.0rem; margin-bottom: calc(1.0rem + (20 - 10) * ((100vw - 375px) / 1305)); } .tutor-main-header p { font-weight: 700; color: var(--color-orange); } /* Tutor Cards */ .tutor-cards{ position:relative; display:block; margin: auto; display: flex; flex-direction: column; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-row-gap: 3.0rem; grid-row-gap: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); grid-column-gap: 3.0rem; grid-column-gap: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); padding-top: 6.0rem; padding-top: calc(3.0rem + (60 - 30) * ((100vw - 375px) / 1305)); max-width: 92.0rem; max-width: calc(34.5rem + (920 - 345) * ((100vw - 375px) / 1305)); } .tutorscontainer .search-result-length-container { text-align: center; display: inline-block; margin-left: 50%; margin-right: auto; transform: translateX(-50%); margin-top: 4.0rem; margin-top: calc(2.0rem + (40 - 20) * ((100vw - 375px) / 1305)); max-width: 92.0rem; max-width: calc(34.5rem + (920 - 345) * ((100vw - 375px) / 1305)); } @media only screen and (max-width: 1200px) { .tutor-cards{ grid-template-columns: 1fr 1fr 1fr; } } @media only screen and (max-width: 540px) { .tutor-cards{ grid-template-columns: 1fr 1fr; } } .tutor-card{ height: 100%; background-color:white; border-radius:1.5rem; margin:auto; width: 100%; transition: box-shadow .15s ease; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; text-align: center; box-sizing: border-box; padding: 3.0rem; padding: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); padding-left: 2.0rem; padding-left: calc(1.0rem + (20 - 10) * ((100vw - 375px) / 1305)); padding-right: 2.0rem; padding-right: calc(1.0rem + (20 - 10) * ((100vw - 375px) / 1305)); } .tutor-card:hover { box-shadow: 0 0 0 1px var(--color-orange); } .filter-nav .tutor-cards { padding: 1.5rem; } .tutor-card-preview { display: block; border: 0.1rem solid #979797; background-color: rgba(249, 142, 102, 0.0432419); border-radius: 1rem; padding: 1.5rem; padding: calc(0.75rem + (15 - 7.5) * ((100vw - 375px) / 1305)); padding-bottom: 2.0rem; padding-bottom: calc(1.0rem + (20 - 10) * ((100vw - 375px) / 1305)); margin-bottom: 2.0rem; margin-bottom: calc(1.0rem + (20 - 10) * ((100vw - 375px) / 1305)); } .tutor-card-preview:last-of-type { margin-bottom: 3.0rem; margin-bottom: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .tutor-card-preview > div { display: grid; grid-template-columns: auto 1fr; flex-direction: row; justify-content: flex-start; align-items: center; margin-bottom: 1.5rem; margin-bottom: calc(0.75rem + (15 - 7.5) * ((100vw - 375px) / 1305)); } .tutor-card-preview > div p { font-weight: 700; font-size: 1.8rem; font-size: calc(1.6rem + (18 - 16) * ((100vw - 375px) / 1305)); } .tutor-card-preview > div > .tutor-profile-img { border-radius: 100%; width: 3.5rem; width: calc(3.5rem + (35 - 35) * ((100vw - 375px) / 1305)); height: 3.5rem; height: calc(3.5rem + (35 - 35) * ((100vw - 375px) / 1305)); margin-right: 1.5rem; margin-right: calc(0.75rem + (15 - 7.5) * ((100vw - 375px) / 1305)); } .tutor-card-preview .tutor-profile-img.material-icons { font-size: 3.5rem; font-size: calc(3.5rem + (35 - 35) * ((100vw - 375px) / 1305)); } .tutor-card-preview ul { font-weight: 400; font-size: 1.4rem; line-height: 150%; } .tutor-card-preview ul li::before { content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a bullet */ color: #B3B2B1; /* Change the color */ font-weight: bold; /* If you want it to be bold */ display: inline-block; /* Needed to add space between the bullet and the text */ width: 1em; /* Also needed for space (tweak if needed) */ margin-left: -1em; /* Also needed for space (tweak if needed) */ } .tutor-card-divider { height: 1px; background-color: var(--color-orange); margin-left: 3.0rem; margin-left: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); margin-right: 3.0rem; margin-right: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .tutor-card-header{ display:flex; justify-content:space-between; align-items: center; padding: 3.0rem; padding: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .tutor-card-headaer > div { width: 100%;} .tutor-card-header > div:nth-child(1){display:flex;align-items:center;} .tutor-card-content { display: flex; flex-direction: column; padding: 3.0rem; padding: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .tutor-card-content .text-body-x-small {align-self: center; text-transform: uppercase; color: #FD865D;} .tutor-profile-img{ overflow: hidden; object-fit:cover; border-radius:4rem; display:inline-block; height: 8.0rem; height: calc(4.0rem + (80 - 40) * ((100vw - 375px) / 1305)); width: 8.0rem; width: calc(4.0rem + (80 - 40) * ((100vw - 375px) / 1305)); border-radius: 4.0rem; border-radius: calc(2.0rem + (40 - 20) * ((100vw - 375px) / 1305)); } .tutor-card .tutor-profile-img { height: 9.0rem; height: calc(4.5rem + (90 - 45) * ((100vw - 375px) / 1305)); width: 9.0rem; width: calc(4.5rem + (90 - 45) * ((100vw - 375px) / 1305)); border-radius: 4.5rem; border-radius: calc(2.25rem + (45 - 22.5) * ((100vw - 375px) / 1305)); margin-bottom: 1.0rem; margin-bottom: calc(0.5rem + (10 - 5) * ((100vw - 375px) / 1305)); } .tutor-card h3 { margin-bottom: 1.0rem; margin-bottom: calc(0.5rem + (10 - 5) * ((100vw - 375px) / 1305)); } .tutor-profile-img.material-icons { font-size: 8.0rem; font-size: calc(4.0rem + (80 - 40) * ((100vw - 375px) / 1305)); } .tutor-highlight-meta p {display: flex; align-items: center; justify-content: flex-start;} .tutor-highlight-meta p:not(last) { margin-bottom: .5rem; } .tutor-highlight-meta p span { margin-right: 1.0rem; margin-right: calc(0.5rem + (10 - 5) * ((100vw - 375px) / 1305)); } .specialties-container { margin-bottom: 3.0rem; margin-bottom: calc(2.0rem + (30 - 20) * ((100vw - 375px) / 1305)); margin-top: 3.0rem; margin-top: calc(2.0rem + (30 - 20) * ((100vw - 375px) / 1305)); } .specialties-container .text-attribute { line-height: 200%; text-transform: uppercase; color: #B3B2B1; } /* pagination container */ .list-pagination-container { display: block; text-align: center; padding: 3.0rem; padding: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); padding-bottom: 6.0rem; padding-bottom: calc(3.0rem + (60 - 30) * ((100vw - 375px) / 1305)); } /* Filter Tutor */ .filter-nav .clear-filter { text-transform: uppercase; color: #FD865D; font-weight: 400; font-size: 1.2rem; letter-spacing: 0.06rem; position: absolute; top: 2rem; right: 1.5rem; display: flex; min-height: 2.4rem; align-items: center; } .filter-nav .show-results { left: 1.5rem; right: auto; } .filter-header {height: 6rem; display: flex; align-items: center; font-weight: 700; position: relative; cursor: pointer;} .filter-header:not(.no-dropdown):hover {opacity: .7;} .filter-header:not(.no-dropdown)::after {content: 'expand_more'; font-size: 2.2rem; font-family: 'Material Icons'; position: absolute; right: 0;} .filter-header span {margin-right: 1.7rem; font-weight: 400;} .filter .form-control { background-color: #F1F1F1; border: 0; margin: 0; outline: none; text-align: center; font-family: 'Brown', sans-serif; border-radius: 2.5rem; height: 5rem; padding: 0 3rem; font-size: 1.6rem; } .filter .form-control::placeholder { color: #B3B2B1; } .dropdown-menu .items .dropdown-item label { background-color: #f1f1f1; padding: 0rem 3rem; min-height: 5rem; font-size: 1.6rem; border-radius: 2.5rem; line-height: 130%; display: flex; align-items: center; } .dropdown-menu .items { background-color: #f1f1f1; overflow: scroll; z-index: 5; max-height: 30rem; position: relative; max-width: 30rem; width: 100%; box-shadow: 0 -2.5rem #f1f1f1; border-bottom-left-radius: 2rem; border-bottom-right-radius: 2rem; border-bottom-right-radius: 2.0rem; border-bottom-right-radius: calc(1.0rem + (20 - 10) * ((100vw - 375px) / 1305)); border-bottom-left-radius: 2.0rem; border-bottom-left-radius: calc(1.0rem + (20 - 10) * ((100vw - 375px) / 1305)); } .dropdown-menu div.dropdown-item:first-of-type { position: relative; z-index: 7; } .selected-items {display: none;} .filter-multi-checkbox a, input.flexdatalist-alias, .flexdatalist-results li, .filter-multi-select .selected-items .item {padding:1.5rem;background-color:#F1F1F1;width:auto;text-align:center;display:block;border-radius:3rem;margin-bottom:1rem;font-size:1.6rem; transition: filter .3s ease, opacity .3s ease; cursor: pointer;} .filter-multi-checkbox a.active, .filter-multi-checkbox a:hover { filter:invert(); } .flexdatalist-results li {display: inline-block;} .filter-nav .search-by-container{z-index: 1; position:fixed;bottom:0;left:0;width:34rem;display:flex;align-items:center;height:9rem;} .filter-nav #search-by{padding:0;margin:0;border:0;display:flex;line-height:100%;background-color:#FEEFE9;font-size:1.8rem;font-weight:700;color:#FD865D;font-family:'Brown', sans-serif;height:100%;width:100%; padding-left: 6.0rem; padding-left: calc(3.0rem + (60 - 30) * ((100vw - 375px) / 1305)); } .filter-nav #search-by::placeholder {color: #FD865D;} .filter-nav #submit-button {display: none;} .filter-nav #submit-button-label {position: absolute; color: #FD865D; left: 1.5rem; left: calc(0.75rem + (15 - 7.5) * ((100vw - 375px) / 1305)); } .flexdatalist-multiple{display:flex;flex-direction:column-reverse;justify-content:flex-start;align-items:baseline; border: 0 !important;} .flexdatalist-multiple li.value{display:inline-block;padding:2px 25px 2px 7px;background:#efefef;border-radius:3px;color:#444;line-height:20px;float:none;} .flexdatalist-multiple-value {width: 100%; display: flex;} input.flexdatalist-alias {width: 100%; border: 0; font-family: Brown, sans-serif;} .listing-sidenav { position: relative; box-sizing: border-box; } .listing-sidenav > .filter-nav:first-child { left: -34rem; } .tutor-filter--editing .listing-sidenav > .filter-nav:first-child, .listing-sidenav > .filter-nav:last-child { left: 0; } .tutor-filter--editing .listing-sidenav > .filter-nav:last-child { left: 34rem; } /* tutor page */ .tutor-page-close-button { position: absolute; right: 0; top: 0; color: var(--color-orange); font-size: 4.0rem; font-size: calc(2.0rem + (40 - 20) * ((100vw - 375px) / 1305)); } .readmore-button { font-weight: 700; text-transform: uppercase; color: var(--color-orange); margin-top: 1.5rem; margin-top: calc(0.75rem + (15 - 7.5) * ((100vw - 375px) / 1305)); } .tutor-bio-meta p { margin-bottom: 2.0rem; margin-bottom: calc(1.0rem + (20 - 10) * ((100vw - 375px) / 1305)); } .tutor-container .readmorehide, .onecolumn .readmorehide { max-height: 0; transition: max-height .3s ease; overflow: hidden; } .tutor-container { margin: auto; max-width: 86.0rem; max-width: calc(34.5rem + (860 - 345) * ((100vw - 375px) / 1305)); padding: 3.0rem; padding: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); padding-left: 0; padding-right: 0; } .tutor-profile-img.large { margin-bottom: 3.0rem; margin-bottom: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); height: 22.0rem; height: calc(11.0rem + (220 - 110) * ((100vw - 375px) / 1305)); width: 22.0rem; width: calc(11.0rem + (220 - 110) * ((100vw - 375px) / 1305)); border-radius: 11.0rem; border-radius: calc(5.5rem + (110 - 55) * ((100vw - 375px) / 1305)); } .tutor-header { position: relative; display: flex; flex-direction: column; align-items: center; border-bottom: solid #FD865D; border-width: 0.6rem; border-width: calc(0.3rem + (6 - 3) * ((100vw - 375px) / 1305)); padding-top: 5.0rem; padding-top: calc(2.5rem + (50 - 25) * ((100vw - 375px) / 1305)); padding-bottom: 3.0rem; padding-bottom: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .tutor-header .tutor-highlight-meta { position: absolute; top: 0; left: 0; } .tutor-header .tutor-highlight-meta p span { color: #FD865D; } .tutor-header .tutor-highlight-meta p:nth-child(1) span { color: #0ABF23; } .tutor-header .h-1-tutor { text-align: center; margin-bottom: 3.0rem; margin-bottom: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .tutor-content { padding-bottom: 6.0rem; padding-bottom: calc(3.0rem + (60 - 30) * ((100vw - 375px) / 1305)); padding-top: 3.0rem; padding-top: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .tutor-meta { display: grid; grid-template-columns: 1fr 1fr; font-weight: 700; margin-bottom: 6.0rem; margin-bottom: calc(3.0rem + (60 - 30) * ((100vw - 375px) / 1305)); column-gap: 3.0rem; column-gap: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .tutor-meta > div { width: 100%;} .tutor-meta .text-attribute-bold { text-transform: uppercase; color: #FD865D; } .tutor-meta > div > p { max-width: 100%; letter-spacing: .05vw; margin-bottom: 1.0rem; margin-bottom: calc(0.5rem + (10 - 5) * ((100vw - 375px) / 1305)); } .tutor-meta div.text-body-small { margin-bottom: 2.0rem; margin-bottom: calc(1.0rem + (20 - 10) * ((100vw - 375px) / 1305)); } .tutor-meta > div > div > p { max-width: 100%; font-weight: 700; margin-bottom: 1.0rem; margin-bottom: calc(0.5rem + (10 - 5) * ((100vw - 375px) / 1305)); } .tutor-video { position: relative; background-color: white; border-radius: 7.5rem; position: relative; padding-bottom: 50%; width: 100%; margin-top: 5.0rem; margin-top: calc(2.5rem + (50 - 25) * ((100vw - 375px) / 1305)); } .tutor-video span { color: #FD865D; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 15rem;} @media only screen and (max-width: 1200px) { .tutor-cards, .tutor-container { max-width: 100%; padding-left: 3.0rem; padding-left: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); padding-right: 3.0rem; padding-right: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .tutor-main-header { max-width: 100%; } .tutor-main-header { padding-left: 3.0rem; padding-left: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); padding-right: 3.0rem; padding-right: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } } /* search results page */ .hs-search-page .nav-bar, .nav-overlay .nav-bar { background-color: transparent; } .searchresult-container { background-color: #1d1c1c; } /* subscribe button */ .nav-button.subscribe-button { padding-left: var(--s-30); padding-right: var(--s-30); } .subscribe-button { min-width: calc(23rem + (40 - 23) * ((100vw - 375px) / 1305)); transition: min-width 400ms ease, opacity 400ms ease; text-align: center; } .subscribe-button .form-title { display: none; } .subscribe-button .hs-email { position: relative; } .subscribe-button .hs-input { border: 0; margin: 0; padding: 0; outline: none; background: none; width: 100%; font-family: 'Brown', sans-serif; } .nav-button.subscribe-button input { font-size: 1.8rem; } .button-full.subscribe-button, .button-full.subscribe-button input { font-weight: 600; font-size: 5.0rem; font-size: calc(3.5rem + (50 - 35) * ((100vw - 375px) / 1305)); } .subscribe-button .hs-error-msgs { position: absolute; bottom: 0; display: none !important; } .subscribe-button .input, .subscribe-button .hs-submit { position: absolute; top: 50%; transform: translateY(-50%); } .subscribe-button .hs-submit { right: 0; } .subscribe-button form { position: relative; } .subscribe-button input[type="submit"] { margin: 0; padding: 0; background: 0; border: none; font-family: Material Icons; font-size: 3.3rem; } .button-full.subscribe-button input[type="submit"] { font-size: 5.0rem; font-size: calc(3.5rem + (50 - 35) * ((100vw - 375px) / 1305)); } .subscribe-button .hs-form-required { display: none; } /* subscribe button active state */ .subscribe-button.active { min-width: calc(100% - 3rem); } .nav-button.subscribe-button.active { background-color: white; color: black; } .subscribe-button .hs-email .input, .subscribe-button .hs-submit, .subscribe-button.active .hs-email label { opacity: 0; transition: opacity 200ms ease; } .subscribe-button.active .hs-email .input, .subscribe-button.active .hs-submit, .subscribe-button .hs-email label { display: flex; opacity: 1; transition: opacity 200ms ease 400ms; justify-content: center; } .hs-submit .actions { display: flex; } /* resourceheader module */ .resourceheader h1 { font-weight: 400; max-width: 60%; text-align: center; display: block; margin: auto; color: var(--color-dark-blue); } .resourceheader h1.inner.header { margin:auto; } .resourcecontainer:not(.webinar-template) .resourceheader .inner.content { background-color: var(--color-dark-blue); color: white; border-radius: 2rem; margin: auto; max-width: 1164px; align-items: flex-start; padding: 4.0rem; padding: calc(2.0rem + (40 - 20) * ((100vw - 375px) / 1305)); padding-left: 1.5rem; padding-left: calc(0.75rem + (15 - 7.5) * ((100vw - 375px) / 1305)); padding-right: 1.5rem; padding-right: calc(0.75rem + (15 - 7.5) * ((100vw - 375px) / 1305)); max-width: 110.0rem; max-width: calc(35.5rem + (1100 - 355) * ((100vw - 375px) / 1305)); } .webinar-template .resourceheader .inner.content { margin: auto; max-width: 1164px; align-items: flex-start; padding: 4.0rem; padding: calc(2.0rem + (40 - 20) * ((100vw - 375px) / 1305)); padding-left: 1.5rem; padding-left: calc(0.75rem + (15 - 7.5) * ((100vw - 375px) / 1305)); padding-right: 1.5rem; padding-right: calc(0.75rem + (15 - 7.5) * ((100vw - 375px) / 1305)); max-width: 110.0rem; max-width: calc(35.5rem + (1100 - 355) * ((100vw - 375px) / 1305)); } .webinar-template .resourceheader .inner.content p { font-weight: 400; } .customized .resourceheader h1 + div { max-width: 100%; } .customized .resourceheader h1 + div p:not(:last-child) { margin-bottom: 3.0rem; margin-bottom: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .resourceheader .inner.content > div { padding: 0; width: 100%; box-sizing: border-box; padding-left: 1.5rem; padding-left: calc(0.75rem + (15 - 7.5) * ((100vw - 375px) / 1305)); padding-right: 1.5rem; padding-right: calc(0.75rem + (15 - 7.5) * ((100vw - 375px) / 1305)); } .resourceheader > .inner:first-of-type { padding-bottom: 11.0rem; padding-bottom: calc(5.5rem + (110 - 55) * ((100vw - 375px) / 1305)); } .resourceheader .accordion-panel a::after { content: 'open_in_new'; font-family: 'Material Icons'; position: absolute; font-size: 2.4rem; top: 50%; transform: translateY(-50%); right: 3.0rem; right: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .resourceheader .inner.content > div > p, .customized .resourceheader h1 + div p { text-align: left; margin: auto; width: 100%; max-width: 107.0rem; max-width: calc(33.5rem + (1070 - 335) * ((100vw - 375px) / 1305)); } .resourceheader .accordion-panel, .howitworks button + div { max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; border-bottom: .1rem solid #d1d1d1; } .resourceheader .accordion-panel { border: none; } .resourceheader .accordion-panel a { display: flex; flex-direction: column; padding: 1.5rem 2rem; border-radius: 2rem; position: relative; transition: background-color .3s ease; padding: 1.5rem; padding: calc(0.75rem + (15 - 7.5) * ((100vw - 375px) / 1305)); padding-left: 2.0rem; padding-left: calc(1.0rem + (20 - 10) * ((100vw - 375px) / 1305)); padding-right: 2.0rem; padding-right: calc(1.0rem + (20 - 10) * ((100vw - 375px) / 1305)); } .resourceheader .accordion-panel a span { font-weight: 700; font-size: 1.5rem; } .resourceheader .accordion-panel a span { font-weight: 400; font-size: 1.5rem; } .resourceheader .accordion-panel a:hover { background-color: #161962; } .resourceheader .acc-container { margin-top: 5.0rem; margin-top: calc(2.5rem + (50 - 25) * ((100vw - 375px) / 1305)); } .resourceheader .accordion-button, .howitworks-accordion button { font-weight: 700; text-transform: uppercase; width: 100%; display: flex; justify-content: space-between; border-top: 1px solid #4B50C0; margin: auto; transition: color .3s ease; padding-top: 3.0rem; padding-top: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); padding-bottom: 3.0rem; padding-bottom: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); max-width: 107.0rem; max-width: calc(33.5rem + (1070 - 335) * ((100vw - 375px) / 1305)); font-size: 2.2rem; font-size: calc(1.8rem + (22 - 18) * ((100vw - 375px) / 1305)); letter-spacing: 0.13rem; letter-spacing: calc(0.065rem + (1.3 - 0.65) * ((100vw - 375px) / 1305)); } .howitworks-accordion button { text-transform: none; color: var(--color-orange); border-top: none; justify-content: flex-start; text-align: left; position: relative; padding-right: 3.0rem; padding-right: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .resourceheader .accordion-button:hover { color: rgba(255, 255, 255, 0.6); } .resourceheader .accordion-panel:last-of-type { border-bottom: 1px solid #4B50C0; } .resourceheader .accordion-button:after, .howitworks-accordion button::after { content: "expand_more"; /* Unicode character for "plus" sign (+) */ font-family: Material Icons; color: white; float: right; font-weight: 400; text-transform: lowercase; font-size: 2.4rem; font-size: calc(2.0rem + (24 - 20) * ((100vw - 375px) / 1305)); } .howitworks-accordion button::after { color: #979797; } .resourceheader .accordion-button.acc-active:after, .howitworks-accordion button.active-state:after { content: "expand_less"; /* Unicode character for "minus" sign (-) */ } .howitworks-accordion button::after { position: absolute; right: 0; } /* converted resource template */ /* fast facts */ .factsmodule .inner { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; margin: auto; padding: 0; padding-top: 9.0rem; padding-top: calc(4.5rem + (90 - 45) * ((100vw - 375px) / 1305)); padding-bottom: 9.0rem; padding-bottom: calc(4.5rem + (90 - 45) * ((100vw - 375px) / 1305)); max-width: 107.0rem; max-width: calc(34.5rem + (1070 - 345) * ((100vw - 375px) / 1305)); } .factsmodule .largefact-container { display: grid; grid-template-columns: 1fr 1fr; background-color: #FFE4DA; width: 100%; box-sizing: border-box; padding-left: 3.0rem; padding-left: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); padding-right: 3.0rem; padding-right: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); border-radius: 2.5rem; border-radius: calc(1.25rem + (25 - 12.5) * ((100vw - 375px) / 1305)); margin-top: 3.0rem; margin-top: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); margin-bottom: 6.0rem; margin-bottom: calc(3.0rem + (60 - 30) * ((100vw - 375px) / 1305)); } .factsmodule .largefact-container img { height: 25rem; object-fit: contain; width: auto; } .factsmodule .largefact-container > div { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; } .factlist-container { display: grid; grid-template-columns: auto auto auto auto; column-gap: 3rem; column-gap: 3.0rem; column-gap: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .factsmodule .factlist-container .facticon { position: relative; background-color: var(--color-orange); display: flex; justify-content: center; align-items: center; width: 8.0rem; width: calc(7.0rem + (80 - 70) * ((100vw - 375px) / 1305)); height: 8.0rem; height: calc(7.0rem + (80 - 70) * ((100vw - 375px) / 1305)); border-radius: 1.5rem; border-radius: calc(1.0rem + (15 - 10) * ((100vw - 375px) / 1305)); margin-bottom: 2.0rem; margin-bottom: calc(1.0rem + (20 - 10) * ((100vw - 375px) / 1305)); } @media only screen and (max-width: 1200px) { .factlist-container { grid-template-columns: auto auto; } } @media only screen and (max-width: 700px) { .factsmodule .largefact-container { grid-template-columns: 1fr; padding-bottom: 6.0rem; padding-bottom: calc(3.0rem + (60 - 30) * ((100vw - 375px) / 1305)); } .resourceheader h1 { max-width: 100%; } } @media only screen and (max-width: 550px) { .factlist-container { grid-template-columns: auto; } .factlist-container > div { display: grid; grid-template-columns: auto 1fr; grid-column-gap: 1.5rem; justify-content: center; align-items: center; margin-bottom: 6.0rem; margin-bottom: calc(3.0rem + (60 - 30) * ((100vw - 375px) / 1305)); } .factsmodule .factlist-container .facticon { margin-bottom: 0; } } /* proposal form */ .proposal-form .inner { display: flex; flex-direction: row; justify-content: center; align-items: center; margin: auto; padding: 0; min-height: calc(100vh - 7.9rem);3 padding-top: 9.0rem; padding-top: calc(4.5rem + (90 - 45) * ((100vw - 375px) / 1305)); padding-bottom: 9.0rem; padding-bottom: calc(4.5rem + (90 - 45) * ((100vw - 375px) / 1305)); max-width: 107.0rem; max-width: calc(34.5rem + (1070 - 345) * ((100vw - 375px) / 1305)); } .proposal-form h2 { margin-bottom: 5.0rem; margin-bottom: calc(2.5rem + (50 - 25) * ((100vw - 375px) / 1305)); } .proposal-form .inner > div { width: 100%; } .proposal-form .inner > div:last-of-type { width: 75%; } .proposal-form .formcontainer { display: grid; grid-row-gap: 2.0rem; grid-row-gap: calc(1.0rem + (20 - 10) * ((100vw - 375px) / 1305)); } .proposal-form .formcontainer .radiolabel input, .proposal-form .formcontainer .radiolabel ~ input, .proposal-form .formcontainer .radiolabel ~ [customSelect], .proposal-form .formcontainer .hs-form-field, .hs-form-radio input { display: none; } .proposal-form .radiolabel, .hs-form-radio label { display: inline-block; cursor: pointer; } .proposal-form .radiolabel span { display: grid; justify-content: center; align-items: center; grid-template-columns: auto 1fr; font-weight: 700; font-size: 2.2rem; font-size: calc(1.8rem + (22 - 18) * ((100vw - 375px) / 1305)); grid-column-gap: 1.5rem; grid-column-gap: calc(0.75rem + (15 - 7.5) * ((100vw - 375px) / 1305)); } .proposal-form .radiolabel span::before { content: ""; display: inline-block; background-color: #eee; transition: background-color .3s ease; width: 3.6rem; width: calc(1.9rem + (36 - 19) * ((100vw - 375px) / 1305)); height: 3.6rem; height: calc(1.9rem + (36 - 19) * ((100vw - 375px) / 1305)); border-radius: 3.6rem; border-radius: calc(1.9rem + (36 - 19) * ((100vw - 375px) / 1305)); } .proposal-form .radiolabel:hover span::before { background-color: #c1c1c1; } .proposal-form .radiolabel input:checked + span::before { background-color: var(--color-orange); } .proposal-form .hs-button[type="submit"] { border: none; box-shadow: none; color: white; background-color: var(--color-orange); } .proposal-form .formcontainer input[type="text"] { font-family: 'Brown'; color: black; border: none; padding: 0; margin: 0; width: auto; border-bottom: 1px solid var(--color-orange); line-height: 180%; margin-left: 5.1rem; margin-left: calc(2.65rem + (51 - 26.5) * ((100vw - 375px) / 1305)); font-size: 2.2rem; font-size: calc(1.8rem + (22 - 18) * ((100vw - 375px) / 1305)); } .proposal-form .formcontainer input[type="text"]::placeholder { color: #000000; } .proposal-form .formcontainer input[type="text"]:focus { outline: none; box-shadow: none; } @media only screen and (max-width: 700px) { .proposal-form .inner { display: flex; flex-direction: column-reverse; padding-bottom: 15.0rem; padding-bottom: calc(7.5rem + (150 - 75) * ((100vw - 375px) / 1305)); } .proposal-form h2 { position: absolute; top: 15.0rem; top: calc(7.5rem + (150 - 75) * ((100vw - 375px) / 1305)); } .proposal-form .inner > div { padding-top: 12.0rem; padding-top: calc(9.0rem + (120 - 90) * ((100vw - 375px) / 1305)); } .proposal-form .inner > div:first-of-type { padding-top: 12.0rem; padding-top: calc(6.0rem + (120 - 60) * ((100vw - 375px) / 1305)); } .proposal-form .hs-button[type="submit"] { margin-left: auto; margin-right: auto; } } /* The container must be positioned relative: */ [customSelect] { width: auto; max-width: 34rem; position: relative; font-family: 'Brown'; font-weight: 700; user-select: none; font-size: 2.2rem; font-size: calc(1.8rem + (22 - 18) * ((100vw - 375px) / 1305)); margin-left: 5.1rem; margin-left: calc(2.65rem + (51 - 26.5) * ((100vw - 375px) / 1305)); } [customSelect] select { display: none; /*hide original SELECT element: */ } .select-selected, .select-items div, .hs-submit input { display: flex; align-items: center; background-color: var(--color-orange-tint); color: black; cursor: pointer; transition: background-color .3s ease, color .3s ease; border-radius: 3.0rem; border-radius: calc(2.5rem + (30 - 25) * ((100vw - 375px) / 1305)); padding-left: 3.0rem; padding-left: calc(2.25rem + (30 - 22.5) * ((100vw - 375px) / 1305)); padding-right: 3.0rem; padding-right: calc(2.25rem + (30 - 22.5) * ((100vw - 375px) / 1305)); min-height: 6.0rem; min-height: calc(5.0rem + (60 - 50) * ((100vw - 375px) / 1305)); } .select-selected.select-arrow-active { border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.15); } /* Style the arrow inside the select element: */ .select-selected:after { position: absolute; content: "arrow_drop_down"; font-family: 'Material Icons'; font-size: 2.4rem; top: 50%; transform: translateY(-50%); right: 1.5rem; right: calc(0.75rem + (15 - 7.5) * ((100vw - 375px) / 1305)); } /* Point the arrow upwards when the select box is open (active): */ .select-selected.select-arrow-active:after { transform: translateY(-50%) rotate(180deg); } /* Style items (options): */ .select-items { position: absolute; top: 100%; left: 0; right: 0; z-index: 99; background-color: var(--color-orange-tint); overflow: hidden; box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.15); border-bottom-left-radius: 3.0rem; border-bottom-left-radius: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); border-bottom-right-radius: 3.0rem; border-bottom-right-radius: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } /* Hide the items when the select box is closed: */ .select-hide { display: none; } .select-items div:hover, .same-as-selected { background-color: rgba(249, 142, 102, 0.5); } /* system pages */ .servicenav {display: none;} .body-container-wrapper { display: flex; flex-direction: column; width: 100%; min-height: calc(100vh - 6rem); justify-content: center; margin: auto; align-items: center; width:calc(34.5rem + ((1vw - 3.75px) * 60.9195)); } .systems-page form { display: grid; justify-content: center; align-items: center; row-gap: 1.0rem; row-gap: calc(0.5rem + (10 - 5) * ((100vw - 375px) / 1305)); margin-bottom: 3.0rem; margin-bottom: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .systems-page h2 { text-align: center; margin-bottom: 6.0rem; margin-bottom: calc(3.0rem + (60 - 30) * ((100vw - 375px) / 1305)); } .systems-page .hs-form-field > label { display: none; } .systems-page #hs-register-widget-email { margin-bottom: 3.0rem; margin-bottom: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .systems-page .hs-form-field { position: relative; } .systems-page .hs-register-widget-show-password { font-size: 0; position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .systems-page .hs-register-widget-show-password::before { content: "visibility"; font-family: "Material Icons"; display: inline-block; font-size: 2.4rem; } .systems-page input.hs-input[type="password"], .systems-page input.hs-input[type="text"], .systems-page input.hs-input[type="email"] { font-family: 'Brown'; color: black; border: none; padding: 0; margin: 0; width: 100%; border-bottom: 1px solid var(--color-orange); line-height: 180%; font-size: 2.2rem; font-size: calc(1.8rem + (22 - 18) * ((100vw - 375px) / 1305)); } /* form module */ .form-module h2, .form-module h1 { color: var(--color-orange); margin-left: auto; margin-right: auto; } .form-module .hs-richtext h2 { text-align: center; font-weight: bold; line-height: 130%; font-size: 3.0rem; font-size: calc(2.2rem + (30 - 22) * ((100vw - 375px) / 1305)); margin-bottom: 8.0rem; margin-bottom: calc(4.0rem + (80 - 40) * ((100vw - 375px) / 1305)); } .form-title { text-align: left; font-weight: 700; margin: auto; max-width: 80%; font-size: 3.0rem; font-size: calc(2.2rem + (30 - 22) * ((100vw - 375px) / 1305)); margin-bottom: 3.0rem; margin-bottom: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .form-module .inner { align-items: flex-start; padding: 0; margin: 0 auto; text-align: center; width: 100%; margin-top: 9.0rem; margin-top: calc(4.5rem + (90 - 45) * ((100vw - 375px) / 1305)); margin-bottom: 9.0rem; margin-bottom: calc(4.5rem + (90 - 45) * ((100vw - 375px) / 1305)); max-width: 107.0rem; max-width: calc(34.5rem + (1070 - 345) * ((100vw - 375px) / 1305)); } .legacy-content { width: 100%; margin: auto; display: flex; padding-top: 9.0rem; padding-top: calc(4.5rem + (90 - 45) * ((100vw - 375px) / 1305)); padding-bottom: 9.0rem; padding-bottom: calc(4.5rem + (90 - 45) * ((100vw - 375px) / 1305)); max-width: 107.0rem; max-width: calc(34.5rem + (1070 - 345) * ((100vw - 375px) / 1305)); } .legacy-content .resourceheader h1 { padding-bottom: 3.0rem; padding-bottom: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .form-module .inner.add-header { align-items: center; } .form-module .add-header img { max-width: 30rem; } .form-module-container { width: 100%; margin-top: 4.0rem; margin-top: calc(2.0rem + (40 - 20) * ((100vw - 375px) / 1305)); } /* input fields for cc-custom-form */ form.cc-custom-form fieldset { max-width: 100% !important; } .cc-custom-form { width: 100%; display: grid; } .cc-custom-form input::placeholder { color: transparent; } .cc-custom-form .hs-fieldtype-date input::placeholder { color: #999; } .cc-custom-form .hs-form-field { display: inline-block; position: relative; width: 100%; margin-bottom: 10px; } form.cc-custom-form .hs-form-field.hs-fieldtype-file { width: auto !important; margin-right: 1rem; float: none; } .cc-custom-form .hs-fieldtype-text label, .cc-custom-form .hs-fieldtype-phonenumber label, .cc-custom-form .hs-fieldtype-textarea label { position: absolute; top: 50%; font-weight: 700; transform: translateY(-50%); color: #999999; transition: font-size .2s ease, top .2s ease, color .2s ease; z-index: 1; text-align:left; left: 3.5rem; left: calc(1.75rem + (35 - 17.5) * ((100vw - 375px) / 1305)); right: 3.5rem; right: calc(1.75rem + (35 - 17.5) * ((100vw - 375px) / 1305)); font-size: 1.8rem; font-size: calc(1.4rem + (18 - 14) * ((100vw - 375px) / 1305)); } .cc-custom-form .hs-fieldtype-textarea label { transform: none; top: 3.0rem; top: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .cc-custom-form input:focus, .cc-custom-form input:focus-visible { outline: none; } .cc-custom-form .not-empty:not(.hs-fieldtype-textarea) label, .cc-custom-form .hs-form-field.selected:not(.hs-fieldtype-textarea) label, .cc-custom-form input:focus label, .cc-custom-form input:focus-visible label { color: var(--color-orange); top: 25%; font-size: 1.4rem; font-size: calc(1.0rem + (14 - 10) * ((100vw - 375px) / 1305)); } .cc-custom-form .hs-form-field.selected.hs-fieldtype-textarea label, .cc-custom-form .not-empty.hs-fieldtype-textarea label{ color: var(--color-orange); top: 1.5rem; top: calc(0.75rem + (15 - 7.5) * ((100vw - 375px) / 1305)); font-size: 1.4rem; font-size: calc(1.0rem + (14 - 10) * ((100vw - 375px) / 1305)); } .cc-custom-form .not-empty:not(.hs-fieldtype-textarea) label, .cc-custom-form .selected:not(.hs-fieldtype-textarea) label { color: var(--color-orange); top: 25%; font-size: 1.4rem; font-size: calc(1.0rem + (14 - 10) * ((100vw - 375px) / 1305)); } .cc-custom-form .inputs-list { display: grid; grid-row-gap: 1rem; } .cc-custom-form .hs-fieldtype-textarea textarea { outline: none; border: none; background-color: #eee; min-height: 19rem; resize: none; width: 100% !important; box-shadow: none; box-sizing: border-box; font-family: Brown; font-weight: 700; font-size: 2.2rem; font-size: calc(1.8rem + (22 - 18) * ((100vw - 375px) / 1305)); padding: 3.5rem; padding: calc(2.0rem + (35 - 20) * ((100vw - 375px) / 1305)); border-radius: 3.0rem; border-radius: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .cc-custom-form .hs-fieldtype-textarea textarea::placeholder { transition: padding-top .2s ease; padding-top: 2.5rem; padding-top: calc(1.5rem + (25 - 15) * ((100vw - 375px) / 1305)); } .cc-custom-form .hs-fieldtype-textarea.selected textarea::placeholder { padding-top: 0; } /* checkbox & radio & select */ .cc-custom-form .hs-form-checkbox, .cc-custom-form .hs-form-radio, .cc-custom-form .hs-form-select { display: flex; } .cc-custom-form .hs-fieldtype-select, .cc-custom-form .hs-fieldtype-radio, .cc-custom-form .hs-fieldtype-checkbox:not(.cc-searchmulti), .cc-custom-form .hs-fieldtype-date, .cc-custom-form .hs-fieldtype-file { margin-top: 5.0rem; margin-top: calc(2.5rem + (50 - 25) * ((100vw - 375px) / 1305)); } .hs-dependent-field { margin-bottom: 7.0rem; margin-bottom: calc(3.5rem + (70 - 35) * ((100vw - 375px) / 1305)); } .hs-dependent-field + .hs-form-field { margin-top: -3.5rem; margin-top: calc(-1.75rem + (-35 - -17.5) * ((100vw - 375px) / 1305)); } .cc-custom-form .hs-form-field + .hs-dependent-field .hs-fieldtype-radio { /* margin-top: 0; */ } .cc-custom-form .hs-form-checkbox label, .cc-custom-form .hs-form-radio label, .cc-custom-form .hs-fieldtype-select, .cc-custom-form .hs-fieldtype-date, .searchmulti-input { cursor: pointer; font-weight: 700; font-size: 1.8rem; font-size: calc(1.4rem + (18 - 14) * ((100vw - 375px) / 1305)); } .cc-custom-form .hs-form-checkbox input, .cc-custom-form .hs-form-radio input, .cc-custom-form .hs-fieldtype-select select { display: none; } .cc-custom-form .hs-form-checkbox span, .cc-custom-form .hs-form-radio span { display: flex; align-items: center; } .cc-custom-form .hs-form-checkbox span::before, .cc-custom-form .hs-form-radio span::before { color: #979797; display: inline-block; font-family: 'Material Icons Outlined'; content: "check_box_outline_blank"; transition: color .2s ease; font-weight: 400; margin-right: 2.0rem; margin-right: calc(1.0rem + (20 - 10) * ((100vw - 375px) / 1305)); font-size: 4.0rem; font-size: calc(3.0rem + (40 - 30) * ((100vw - 375px) / 1305)); } .cc-custom-form .hs-form-radio span::before { content: "radio_button_unchecked"; } .cc-custom-form .hs-form-checkbox label:hover span::before, .cc-custom-form .hs-form-radio label:hover span::before { color: var(--color-orange); } .cc-custom-form .hs-form-checkbox input:checked + span::before, .cc-custom-form .hs-form-radio input:checked + span::before { content: "check_box"; color: var(--color-orange); } .cc-custom-form .hs-form-radio input:checked + span::before { content: "radio_button_checked"; } .hs-fieldtype-checkbox .hs-field-desc, .hs-fieldtype-radio .hs-field-desc, .hs-fieldtype-select .hs-field-desc { font-size: 1.9rem; color: #979797; padding-left: 0; text-align: left; } .hs-fieldtype-checkbox > label, .hs-fieldtype-radio > label, .hs-fieldtype-select > label, .cc-custom-form .hs-fieldtype-date > label, .hs-fieldtype-file > label { color: var(--color-orange); font-weight: 700; text-align: left; display: block; margin-bottom: 2.0rem; margin-bottom: calc(1.0rem + (20 - 10) * ((100vw - 375px) / 1305)); font-size: 1.8rem; font-size: calc(1.4rem + (18 - 14) * ((100vw - 375px) / 1305)); } .form-pilot > .inner > .tab > div:first-of-type { margin-bottom: 3.0rem; margin-bottom: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .cc-custom-form .hs-richtext { line-height: 120%; color: var(--color-orange); text-align: left; font-weight: 400; padding-left: 2.5rem; padding-left: calc(1.8rem + (25 - 18) * ((100vw - 375px) / 1305)); font-size: 2.5rem; font-size: calc(1.8rem + (25 - 18) * ((100vw - 375px) / 1305)); margin-top: 7.0rem; margin-top: calc(3.5rem + (70 - 35) * ((100vw - 375px) / 1305)); } .cc-custom-form .hs-dateinput input { border: none; width: 100% !important; position: relative; display: inline-block; min-width: 32rem; padding: 0; background-color: var(--color-orange-tint); font-weight: 700; box-sizing: border-box; font-family: Brown; height: 7.0rem; height: calc(5.0rem + (70 - 50) * ((100vw - 375px) / 1305)); border-radius: 3.5rem; border-radius: calc(2.5rem + (35 - 25) * ((100vw - 375px) / 1305)); padding-left: 4.5rem; padding-left: calc(2.5rem + (45 - 25) * ((100vw - 375px) / 1305)); font-size: 2.2rem; font-size: calc(2.0rem + (22 - 20) * ((100vw - 375px) / 1305)); } /* hs datepicker */ .cc-custom-form .hs-dateinput input::placeholder { font-size: 1.8rem; font-size: calc(1.4rem + (18 - 14) * ((100vw - 375px) / 1305)); } .cc-custom-form .hs-datepicker { width: 100%; border-radius: 3rem; overflow: hidden; box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.19); z-index: 2 !important; } .cc-custom-form .fn-date-picker .pika-lendar { width: 100% !important; margin: 0; padding: 16px 5%; box-sizing: border-box; } .cc-custom-form .pika-single.fn-date-picker.is-bound { border: none; } .cc-custom-form .fn-date-picker .pika-table th { background: none; font-family: 'Brown'; } .cc-custom-form .fn-date-picker .pika-button { background: none; text-align: center; border-radius: 5rem !important; height: 3.4rem; color: black; font-size: 1.6rem; font-family: 'Brown'; } .cc-custom-form .fn-date-picker .pika-button:hover { border-radius: 5rem !important; } .cc-custom-form .fn-date-picker .is-selected .pika-button { background-color: var(--color-orange); box-shadow: none; } .cc-custom-form .fn-date-picker .pika-button:hover { color: #fff!important; background: var(--color-orange) !important; box-shadow: none!important; } .cc-custom-form .fn-date-picker .is-today .pika-button { color: var(--color-orange); } .cc-custom-form .hs-submit input { background-color: var(--color-orange); color: white; } /* .cc-custom-form .hs-dateinput::before { color: black; content: "Select a date"; display: inline-block; position: absolute; z-index: 1; top: 52.5%; transform: translateY(-47.5%); font-size: 2.2rem; font-size: calc(2.0rem + (22 - 20) * ((100vw - 375px) / 1305)); left: 4.5rem; left: calc(2.5rem + (45 - 25) * ((100vw - 375px) / 1305)); } */ .cc-custom-form .hs-dateinput::after { color: black; content: "calendar_today"; font-family: 'Material Icons'; position: absolute; z-index: 1; top: 52.5%; transform: translateY(-47.5%); font-size: 2.4rem; font-size: calc(2.0rem + (24 - 20) * ((100vw - 375px) / 1305)); right: 3.0rem; right: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .cc-custom-form .hs-fieldtype-date .input { margin-right: 0 !important; } /* @import url('http://example.com/example_style.css'); */ /* FLUID CALCULATIONS FOR SPACING & TYPE ----------------------------------------- BASED ON VIEWPORTS: 375px to 1680px ----------------------------------------- FORMULA font-size = calc(ZZ + ((1vw - XX) * YY)) Where XX = min_viewport / 100 YY = 100 * (max_font_size - min_font_size) / (max_viewport - min_viewport) = 100 * font_size_difference / viewport_difference ZZ = Minimum font-size stated in REM 1 REM = 10px * safari fix min-height: 0vw ---------------------------------------- 5px to 10px calc(0.5rem + ((1vw - 3.75px) * 0.3831)) ----------------------------------------- 8px to 15px calc(0.8rem + ((1vw - 3.75px) * 0.5364)) ----------------------------------------- 15px to 30px calc(1.5rem + ((1vw - 3.75px) * 1.1494)) ----------------------------------------- 20px to 40px calc(2rem + ((1vw - 3.75px) * 1.5326)) ----------------------------------------- 30px to 60px calc(3rem + ((1vw - 3.75px) * 2.2989)) ----------------------------------------- 40px to 80px calc(4rem + ((1vw - 3.75px) * 3.0651)) ----------------------------------------- 70px to 100px calc(7rem + ((1vw - 3.75px) * 2.2989)) ----------------------------------------- 100px to 200px calc(10rem + ((1vw - 3.75px) * 7.6628)) ----------------------------------------- 100px to 150px calc(10rem + ((1vw - 3.75px) * 3.8314)) ----------------------------------------- 150px to 250px calc(15rem + ((1vw - 3.75px) * 7.6628)) ----------------------------------------- 345px to 520px calc(34.5rem + ((1vw - 3.75px) * 13.41)) ----------------------------------------- 345px to 745px calc(34.5rem + ((1vw - 3.75px) * 30.6513)) ----------------------------------------- 345px to 795px calc(34.5rem + ((1vw - 3.75px) * 34.4828)) ----------------------------------------- 345px to 1070px calc(34.5rem + ((1vw - 3.75px) * 55.5556)) ----------------------------------------- 345px to 1140px calc(34.5rem + ((1vw - 3.75px) * 60.9195)) ----------------------------------------- 345px to 1345px calc(34.5rem + ((1vw - 3.75px) * 76.6284)) ----------------------------------------- */ /*html:not(.no-js) [datafadein] {opacity: 0; transition: opacity .5s ease-in;}*/ /***********************************************/ /* CSS @imports must be at the top of the file */ /* Add them above this section */ /***********************************************/ /*****************************************/ /* Start your style declarations here */ /*****************************************/ .intake-form-module .form-container-target { margin-top: 3.0rem; margin-top: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .intake-form-module .meetings-iframe-container { width: 100%; margin-top: 3.0rem; margin-top: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .meetings-iframe-container iframe { width: 100% !important; min-width: 100% !important; } .cc-custom-form.intake-form fieldset.parentfield_table_choice, .cc-custom-form.intake-form fieldset.field_table_choice { border-radius: 11px; overflow: hidden; } .cc-custom-form.intake-form .field_table_choice { display: flex; margin: 0; width: 100%; border-radius: 11px; overflow: hidden; flex-direction: column; } .cc-custom-form.intake-form .field_table_choice:not(.field) > div, .cc-custom-form.intake-form .field.field_table_choice { margin: 0; display: grid; grid-template-columns: 0.8fr 1fr; align-items: center; } .cc-custom-form.intake-form .field_table_choice > label { width: 100%; margin: 0; color: black; box-sizing: border-box; padding-left: 3.0rem; padding-left: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); padding-right: 3.0rem; padding-right: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .cc-custom-form.intake-form .field_table_choice .hs-fieldtype-checkbox > label, .cc-custom-form.intake-form .field_table_choice .hs-fieldtype-radio > label{ margin: 0; color: black; margin-left: 2.0rem; margin-left: calc(1.0rem + (20 - 10) * ((100vw - 375px) / 1305)); } .intake-form .step h2 { text-align: left; } .steps-wrapper { background-color: #EDECE8; color: #999999; font-weight: 700; font-size: 18px; border-radius: 50px; width: auto; padding: 0.5rem 1rem; display: grid; column-gap: .5rem; grid-template-columns: auto auto auto; align-self: flex-start; } .intake-form fieldset.form-columns-2 .hs-form-field { width: 100% !important; } .cc-custom-form.intake-form .hs-dependent-field.field_table_choice>div:not(:nth-child(1)) .input { margin-bottom: 1.5rem; } .form-module-top-container { position: relative; display: flex; width: 100%; align-items: center; justify-content: center; margin-bottom: 2.0rem; margin-bottom: calc(1.0rem + (20 - 10) * ((100vw - 375px) / 1305)); } .form-module-top-container p { color: #999; } .form-module-top-container button { position: absolute; left: 0; display: flex; align-items: center; } .form-module.intake-form-module .inner { margin-bottom: 20.0rem; margin-bottom: calc(10.0rem + (200 - 100) * ((100vw - 375px) / 1305)); } .form-module.intake-form-module .form-container-target { margin-bottom: 4.0rem; margin-bottom: calc(2.0rem + (40 - 20) * ((100vw - 375px) / 1305)); } .form-module.intake-form-module [data-submit-message] { margin-bottom: 4.0rem; margin-bottom: calc(2.0rem + (40 - 20) * ((100vw - 375px) / 1305)); } ul.options-list { display: grid; grid-template-columns: 2.4fr 1fr 1fr 1fr; color: #999999; font-weight: 700; padding: 2rem 0; position: sticky; top: 79.9px; background-color: white; z-index: 2; border-bottom-right-radius: 11px; border-bottom-left-radius: 11px; box-shadow: 0px 4px 4px -4px #00000014; transition: top 500ms ease; } @media only screen and (max-width: 750px) { ul.options-list { top: 69.9px; } } ul.options-list li:nth-child(1) { text-align: left; margin-left: 2.0rem; margin-left: calc(1.0rem + (20 - 10) * ((100vw - 375px) / 1305)); } .hidenavbar ul.options-list { top: -1px; } .intake-form .bucket-container { margin-bottom: 10.0rem; margin-bottom: calc(5.0rem + (100 - 50) * ((100vw - 375px) / 1305)); } .intake-form .bucket-container h2 { margin-bottom: 2.0rem; margin-bottom: calc(1.0rem + (20 - 10) * ((100vw - 375px) / 1305)); } .grid-column-2 ul.options-list { grid-template-columns: 1.6fr 1fr 1fr; } .grid-column-1 ul.options-list { grid-template-columns: 1.6fr 1fr; } /* ul.options-list::before { content: ' '; } */ .cc-custom-form.intake-form .grid-column-3 .field_table_choice .input ul { display: grid; grid-template-columns: repeat(3, auto); grid-row-gap: 0; } .cc-custom-form.intake-form .grid-column-2 .field_table_choice .input ul { display: grid; grid-template-columns: repeat(2, auto); grid-row-gap: 0; } .cc-custom-form.intake-form .grid-column-1 .field_table_choice .input ul { display: grid; grid-template-columns: repeat(1, auto); grid-row-gap: 0; } .cc-custom-form.intake-form .field_table_choice .input ul li { width: 100%; display: flex; justify-content: center; padding: 1.2rem 0; box-shadow: -1px 0px 0 0 var(--color-orange); } .cc-custom-form.intake-form .field_table_choice .input ul li { width: 100%; display: flex; justify-content: center; } .cc-custom-form.intake-form .field_table_choice .hs-form-checkbox span, .cc-custom-form.intake-form .field_table_choice .hs-form-radio span{ font-size: 0; } .cc-custom-form.intake-form .field_table_choice .hs-form-checkbox span::before, .cc-custom-form.intake-form .field_table_choice .hs-form-radio span::before{ margin: 0; content: 'radio_button_unchecked' } .cc-custom-form.intake-form .field_table_choice .hs-form-checkbox input:checked+span::before, .cc-custom-form.intake-form .field_table_choice .hs-form-radio input:checked+span::before{ color: var(--color-orange); content: 'radio_button_checked' } fieldset.field_table_choice:nth-child(odd), fieldset.parentfield_table_choice:nth-child(odd) { background-color: var(--color-orange-tint) } input.searchmulti-input::placeholder { color: black; } .intake-checkbox-wrapper ul { grid-template-columns: auto auto; text-align: left; } .intake-checkbox-wrapper li { margin-right: 1.5rem; margin-right: calc(0.75rem + (15 - 7.5) * ((100vw - 375px) / 1305)); } .cc-custom-form .select-selected.select-arrow-active input::placeholder { opacity: 0; } .cc-custom-form .cc-searchmulti .select-selected { box-sizing: border-box; width: auto; text-align: left; display: block; padding-top: 1.0rem; padding-top: calc(0.5rem + (10 - 5) * ((100vw - 375px) / 1305)); padding-left: 1.5rem; padding-left: calc(0.75rem + (15 - 7.5) * ((100vw - 375px) / 1305)); } legend.hs-field-desc { display: none !important; position: absolute; font-size: 1.3rem; right: 0; text-align: left; z-index: 99; background: white; border-radius: 3rem; padding: 2rem; box-shadow: 0px 1px 3px #0000002b; max-width: 100%; box-sizing: border-box; top: 100%; } .cc-custom-form [selectvalue], input.searchmulti-input{ background-color: var(--color-orange); white-space: pre; font-size: 16px; color: white; font-weight: 700; align-items: center; transition: opacity .3s ease; width: auto; display: inline-flex; box-sizing: border-box; margin-right: 0.5rem; margin-right: calc(0.25rem + (5 - 2.5) * ((100vw - 375px) / 1305)); margin-bottom: 1.0rem; margin-bottom: calc(0.5rem + (10 - 5) * ((100vw - 375px) / 1305)); padding-top: 1.0rem; padding-top: calc(0.5rem + (10 - 5) * ((100vw - 375px) / 1305)); padding-bottom: 1.0rem; padding-bottom: calc(0.5rem + (10 - 5) * ((100vw - 375px) / 1305)); padding-left: 1.5rem; padding-left: calc(0.75rem + (15 - 7.5) * ((100vw - 375px) / 1305)); padding-right: 1.5rem; padding-right: calc(0.75rem + (15 - 7.5) * ((100vw - 375px) / 1305)); border-radius: 10.0rem; border-radius: calc(5.0rem + (100 - 50) * ((100vw - 375px) / 1305)); min-height: 5.5rem; min-height: calc(3.75rem + (55 - 37.5) * ((100vw - 375px) / 1305)); } .intake-form .cc-custom-form .cc-searchmulti li { padding-left: 1.5rem; padding-left: calc(0.75rem + (15 - 7.5) * ((100vw - 375px) / 1305)); } input.searchmulti-input { color: black; background: none; border: none; margin: 0; padding: 0; height: 100%; font-family: 'Brown'; width: auto; background-color: transparent; padding-left: 3.0rem; padding-left: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .intake-form .cc-multiselect--no-result-found ~ ul::after { content: "No results were found"; padding: 1.5rem; padding: calc(0.75rem + (15 - 7.5) * ((100vw - 375px) / 1305)); padding-left: 3.0rem; padding-left: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); padding-left: 3.0rem; padding-left: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .cc-custom-form [selectvalue]::after { content: "close"; font-family: 'Material Icons'; font-size: 18px; margin-left: 10px; margin-left: 1.0rem; margin-left: calc(0.5rem + (10 - 5) * ((100vw - 375px) / 1305)); } .cc-custom-form [selectvalue]:hover { opacity: .7; } .cc-custom-form.intake-form .hs-dependent-field.field_table_choice > div:not(:nth-child(1)) { display: grid; flex-direction: column; align-items: flex-start; box-sizing: border-box; grid-template-columns: 0.8fr .5fr .5fr; grid-template-rows: auto auto; } .cc-custom-form.intake-form .hs-dependent-field.field_table_choice > div:not(:nth-child(1)) label { color: var(--color-orange); text-align: left; margin-bottom: 0; font-weight: 400; padding-left: 2.0rem; padding-left: calc(1.0rem + (20 - 10) * ((100vw - 375px) / 1305)); } .cc-custom-form.intake-form .hs-dependent-field.field_table_choice > div:not(:nth-child(1)) input, .cc-custom-form.intake-form .hs-dependent-field.field_table_choice > div:not(:nth-child(1)) textarea{ width: 100%; border: 1px solid var(--color-orange); margin: 0; box-sizing: border-box; background: none; font-size: 1.6rem; font-weight: 700; font-family: Brown; border-radius: 1.0rem; border-radius: calc(0.5rem + (10 - 5) * ((100vw - 375px) / 1305)); padding: 1.5rem; padding: calc(0.75rem + (15 - 7.5) * ((100vw - 375px) / 1305)); margin-left: 2.0rem; margin-left: calc(1.0rem + (20 - 10) * ((100vw - 375px) / 1305)); margin-right: 2.0rem; margin-right: calc(1.0rem + (20 - 10) * ((100vw - 375px) / 1305)); margin-top: 1.0rem; margin-top: calc(0.5rem + (10 - 5) * ((100vw - 375px) / 1305)); margin-bottom: 1.0rem; margin-bottom: calc(0.5rem + (10 - 5) * ((100vw - 375px) / 1305)); } .intake-form .input { margin-right: 0px !important; } .cc-custom-form.intake-form .hs-dependent-field.field_table_choice>div:not(:nth-child(1)) .input { grid-row: 2; display: flex; } .cc-custom-form.intake-form .hs-dependent-field.field_table_choice>div:not(:nth-child(1))::after, .cc-custom-form.intake-form .hs-dependent-field.field_table_choice>div:not(:nth-child(1))::before { content: " "; position: absolute; height: 100%; width: 1px; left: 44.45%; box-shadow: -1px 0px 0 0 var(--color-orange); } .cc-custom-form.intake-form .hs-dependent-field.field_table_choice>div:not(:nth-child(1))::before { left: 72.2%; height: 200%; bottom: 0; } .cc-custom-form.intake-form .grid-column-1 .field_table_choice:not(.field)>div, .cc-custom-form.intake-form .grid-column-1 .hs-dependent-field.field_table_choice>div:not(:nth-child(1)){ grid-template-columns: 1.6fr 1fr; } .cc-custom-form.intake-form .grid-column-1 .hs-dependent-field.field_table_choice>div:not(:nth-child(1))::after { left: 61.55%; } .cc-custom-form.intake-form .grid-column-1 .hs-dependent-field.field_table_choice>div:not(:nth-child(1))::before { display: none; } /* form pilot */ .form-pilot .inner { margin: auto; padding: 0; } .form-pilot-button-container { display: flex; text-align: center; justify-content: center; } .form-pilot-button input, .hs-fieldtype-date label{ display: none; } .form-pilot-button { display: inline-block; width: auto; margin-left: 1.0rem; margin-left: calc(0.5rem + (10 - 5) * ((100vw - 375px) / 1305)); margin-right: 1.0rem; margin-right: calc(0.5rem + (10 - 5) * ((100vw - 375px) / 1305)); } .form-pilot-button span { align-self: center; position: relative; display: block; opacity: 0; font-weight: 400; transition: opacity .3s ease; font-size: 1.6rem; letter-spacing: .5px; } .form-pilot-button:hover span, .form-pilot-button :checked + label span { opacity: 1; } .form-pilot-button label { display: grid; width: 100%; grid-template-rows: auto 1fr; text-align: center; transition: background-color .2s ease; cursor: pointer; font-weight: 700; max-width: 23rem; box-sizing: border-box; height: 100%; grid-row-gap: 1.5rem; grid-row-gap: calc(0.75rem + (15 - 7.5) * ((100vw - 375px) / 1305)); padding: 2.0rem; padding: calc(1.0rem + (20 - 10) * ((100vw - 375px) / 1305)); padding-top: 3.5rem; padding-top: calc(1.75rem + (35 - 17.5) * ((100vw - 375px) / 1305)); padding-bottom: 3.0rem; padding-bottom: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); border-radius: 4.0rem; border-radius: calc(2.5rem + (40 - 25) * ((100vw - 375px) / 1305)); } .form-container-target { width: 100%; margin: auto; margin-top: 8.0rem; margin-top: calc(4.0rem + (80 - 40) * ((100vw - 375px) / 1305)); margin-bottom: 8.0rem; margin-bottom: calc(4.0rem + (80 - 40) * ((100vw - 375px) / 1305)); } .tab.step-2 { max-width: 107.0rem; max-width: calc(34.5rem + (1070 - 345) * ((100vw - 375px) / 1305)); } .form-pilot-button :checked + label { box-shadow: inset 0 0 0 .1rem var(--color-orange); background-color: var(--color-orange-tint); } .form-pilot-button:hover label { background-color: var(--color-orange-tint); } .form-pilot h1 { margin-bottom: 1rem; } .form-pilot-button img { margin-bottom: 2rem; } .form-contact-footer { width: 100%; display: grid; grid-template-columns: auto 2fr 1fr; color: #626262; justify-content: space-between; align-items: center; max-width: 79rem; background-color: #f6f6f6; box-sizing: border-box; padding: 1.5rem; margin-top: 3.0rem; margin-top: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); padding-left: 3.0rem; padding-left: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); padding-right: 3.0rem; padding-right: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); border-radius: 3.5rem; border-radius: calc(1.75rem + (35 - 17.5) * ((100vw - 375px) / 1305)); } .form-contact-footer > div{ width: 100%; box-sizing: border-box; padding-top: 1.5rem; padding-top: calc(0.75rem + (15 - 7.5) * ((100vw - 375px) / 1305)); padding-bottom: 1.5rem; padding-bottom: calc(0.75rem + (15 - 7.5) * ((100vw - 375px) / 1305)); } .form-contact-footer > div:first-of-type, .form-contact-footer > div:nth-child(3) { width: 100%; padding-right: 4.0rem; padding-right: calc(1.5rem + (40 - 15) * ((100vw - 375px) / 1305)); } .form-contact-footer > div:nth-child(3) { padding-right: 0; } .form-contact-footer > div:nth-child(4) { padding-left: 3.0rem; padding-left: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .form-contact-footer > div:nth-child(4) { display: inline-flex; border-left: 1px solid #dadada; justify-content: flex-end; width: auto; } .form-contact-footer span.material-icons { color: var(--color-orange); font-size: 5.0rem; font-size: calc(4.0rem + (50 - 40) * ((100vw - 375px) / 1305)); margin-right: 3.0rem; margin-right: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } /* Main footer */ .form-contact-footer.main-footer { display: flex; padding: 4.0rem; padding: calc(2.0rem + (40 - 20) * ((100vw - 375px) / 1305)); width: 100%; background: none; margin: auto; max-width: var(--w-1345); color: #000; } .form-contact-footer.main-footer > div:nth-child(4) { border-color: var(--color-orange); } .form-contact-footer.main-footer .nav-button.social, .form-contact-footer.main-footer .nav-button.social:hover { background-color: var(--color-orange); filter: none; } .form-contact-footer.main-footer .nav-button.social:hover { opacity: 0.6; } .form-pilot .next-button { width: auto; color: white; padding: 0; background-color: var(--color-orange); transition: opacity .2s ease; display: inline-flex; align-items: center; font-size: 2.2rem; font-size: calc(1.8rem + (22 - 18) * ((100vw - 375px) / 1305)); border-radius: 3.0rem; border-radius: calc(2.5rem + (30 - 25) * ((100vw - 375px) / 1305)); padding-left: 3.0rem; padding-left: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); padding-right: 3.0rem; padding-right: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); height: 6.0rem; height: calc(5.0rem + (60 - 50) * ((100vw - 375px) / 1305)); } .form-contact-footer .nav-button { background-color: #a4a4a4; height: 5.0rem; height: calc(3.7rem + (50 - 37) * ((100vw - 375px) / 1305)); width: 5.0rem; width: calc(3.7rem + (50 - 37) * ((100vw - 375px) / 1305)); } .form-pilot .next-button.not-active { display: none; } .form-pilot-button img { max-width: 160px; width: 100%; margin-left: auto; margin-right: auto; } .form-pilot .step-2 .next-button { display: none; } .form-pilot .step-2.has-dependent-field .next-button { display: inline-block; } .form-pilot .tab { display: none; flex-direction: column; align-items: center; box-sizing: border-box; width: 100%; padding: 0; position: relative; opacity: 0; transition: opacity .3s ease; margin-bottom: 12rem; padding-top: 9rem; padding-left: 5.0rem; padding-left: calc(2.0rem + (50 - 20) * ((100vw - 375px) / 1305)); padding-right: 5.0rem; padding-right: calc(2.0rem + (50 - 20) * ((100vw - 375px) / 1305)); } .form-pilot .tab.active { display: flex; opacity: 1; } .form-pilot .tab.active.animate-off { opacity: 0; } .form-pilot .tab.active.animate-on { opacity: 1; } .form-pilot .tab > div { width: 100%; } .form-pilot-header { text-align: center; } .form-pilot-header p { max-width: 70rem; margin: auto; } .form-pilot .back-button { align-self: flex-start; display: inline-flex; align-items: center; position: absolute; left: 5.0rem; left: calc(2.0rem + (50 - 20) * ((100vw - 375px) / 1305)); top: 7.0rem; top: calc(5.0rem + (70 - 50) * ((100vw - 375px) / 1305)); } .form-pilot .back-button span { margin-right: 1rem; } .form-pilot .back-button.disabled { display: none; } .form-pilot-header img { max-width: 30rem; margin: auto; } .first-section .hs-dependent-field > div:not(:first-of-type), .first-section .hs-submit, .second-section .hs-dependent-field > div:first-of-type, /* hides first input inside dependent div */ .second-section > fieldset > div.hs-form-field:not(.hs-depdendent-field) /* hides input fields outside dependent div */ { display: none !important; } .second-section .hs-dependent-field > div:not(:first-of-type), .second-section .hs-submit { display: block !important; } .cc-custom-form fieldset.form-columns-1 > div > .input { margin-right: 0; margin-left: 0; } .cc-custom-form fieldset.form-columns-2 > div:nth-child(2n) > .input { margin-right: 0; margin-left: 1.0rem; margin-left: calc(0.5rem + (10 - 5) * ((100vw - 375px) / 1305)); } .cc-custom-form fieldset.form-columns-2 > div:nth-child(n) > .input { margin-left: 0; margin-right: 1.0rem; margin-right: calc(0.5rem + (10 - 5) * ((100vw - 375px) / 1305)); } @media only screen and (max-width: 890px) { .form-pilot-button-container { display: block; } .form-contact-footer, .form-contact-footer.main-footer { display: block; } .form-contact-footer span.material-icons { transform: translateX(-3px); } .form-contact-footer > div:last-of-type { border-left: none; justify-content: flex-start; padding-left: 0; margin-top: 1.5rem; margin-bottom: 3rem; } .form-pilot-button { margin-bottom: 1.0rem; margin-bottom: calc(0.5rem + (10 - 5) * ((100vw - 375px) / 1305)); } .form-pilot .social.twitter { margin-left: 0; } } /* select */ .cc-custon-form .hs-dependent-field { display: flex; flex-direction: column; } .cc-custom-form .hs-fieldtype-select, .cc-custom-form .hs-fieldtype-date { max-width: auto; width: auto; float: left; } .cc-custom-form .hs-fieldtype-select { width: 100%; } .hs_pre_intake___request_time_zone.hs-pre_intake___request_time_zone.hs-fieldtype-select.field.hs-form-field { min-width: 100%; } .cc-custom-form .select-selected, .cc-custom-form .select-items div, .cc-custom-form .cc-searchmulti li { display: flex; align-items: center; background-color: var(--color-orange-tint); color: black; cursor: pointer; transition: background-color .3s ease, color .3s ease; position: relative; padding: 0; border-radius: 3.25rem; border-radius: calc(2.5rem + (32.5 - 25) * ((100vw - 375px) / 1305)); padding-left: 4.5rem; padding-left: calc(2.25rem + (45 - 22.5) * ((100vw - 375px) / 1305)); padding-right: 4.5rem; padding-right: calc(2.25rem + (45 - 22.5) * ((100vw - 375px) / 1305)); min-height: 7.0rem; min-height: calc(5.0rem + (70 - 50) * ((100vw - 375px) / 1305)); } .cc-custom-form .select-items div, .cc-custom-form .cc-searchmulti li { height: auto; box-sizing: border-box; padding-top: 1.0rem; padding-top: calc(0.5rem + (10 - 5) * ((100vw - 375px) / 1305)); padding-bottom: 1.0rem; padding-bottom: calc(0.5rem + (10 - 5) * ((100vw - 375px) / 1305)); } .cc-custom-form .select-selected { padding-right: 9.0rem; padding-right: calc(4.5rem + (90 - 45) * ((100vw - 375px) / 1305)); } .cc-custom-form .select-selected.select-arrow-active { border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.15); } /* Style the arrow inside the select element: */ .cc-custom-form .select-selected:after { position: absolute; content: "arrow_drop_down"; font-family: 'Material Icons'; top: 50%; transform: translateY(-50%); font-size: 2.4rem; font-size: calc(1.8rem + (24 - 18) * ((100vw - 375px) / 1305)); right: 3.0rem; right: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } /* Point the arrow upwards when the select box is open (active): */ .cc-custom-form .select-selected.select-arrow-active:after { transform: translateY(-50%) rotate(180deg); } /* Style items (options): */ .cc-custom-form .select-items { position: absolute; background-color: var(--color-orange-tint); overflow: hidden; box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.15); text-align: left; max-height: 300px; overflow-y: auto; border-bottom-left-radius: 3.0rem; border-bottom-left-radius: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); border-bottom-right-radius: 3.0rem; border-bottom-right-radius: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } /* Hide the items when the select box is closed: */ .cc-custom-form .select-hide { display: none; } .cc-custom-form .select-items div:hover { background-color: rgba(249, 142, 102, 0.5); } .cc-custom-form .select-items div.same-as-selected { background-color: var(--color-orange); color: white; } /*********/ /* FILE INPUT */ .cc-custom-form .hs-fieldtype-file .input label { padding: 0; display: grid; grid-template-columns: auto auto 1fr; justify-items: end; align-items: center; justify-content: space-between; min-width: 25rem; max-width: 100%; float: left; width: auto; background-color: var(--color-orange-tint); color: black; padding-left: 3.0rem; padding-left: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); padding-right: 3.0rem; padding-right: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); height: 6.0rem; height: calc(5.0rem + (60 - 50) * ((100vw - 375px) / 1305)); border-radius: 3.0rem; border-radius: calc(2.5rem + (30 - 25) * ((100vw - 375px) / 1305)); } .cc-custom-form .hs-fieldtype-file .input label::after { content: "upload_file"; font-family: Material Icons; float: right; position: relative; font-weight: 400; color: var(--color-orange); font-size: 2.4rem; font-size: calc(2.0rem + (24 - 20) * ((100vw - 375px) / 1305)); } .cc-custom-form .hs-fieldtype-file input { display: none; } .cc-custom-form .form-small-title-with-border { border-top: 0.2rem solid var(--color-orange); padding-top: 1.0rem; padding-top: calc(0.5rem + (10 - 5) * ((100vw - 375px) / 1305)); margin-left: -2.5rem; margin-left: calc(-1.8rem + (-25 - -18) * ((100vw - 375px) / 1305)); margin-bottom: -4.0rem; margin-bottom: calc(-2.0rem + (-40 - -20) * ((100vw - 375px) / 1305)); font-size: 1.8rem; font-size: calc(1.4rem + (18 - 14) * ((100vw - 375px) / 1305)); } .cc-custom-form .form-footer-message { position: relative; display: flex; color: #999; line-height: 150%; background-color: rgba(238, 238, 238, 0.5); margin-left: -2.5rem; margin-left: calc(-1.8rem + (-25 - -18) * ((100vw - 375px) / 1305)); padding: 3.0rem; padding: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); padding-right: 3.0rem; padding-right: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); border-radius: 3.5rem; border-radius: calc(1.75rem + (35 - 17.5) * ((100vw - 375px) / 1305)); font-size: 2.0rem; font-size: calc(1.6rem + (20 - 16) * ((100vw - 375px) / 1305)); } .cc-custom-form .form-footer-message::before { content: "help"; font-family: 'Material Icons'; color: var(--color-orange); display: block; font-size: 4.0rem; font-size: calc(3.0rem + (40 - 30) * ((100vw - 375px) / 1305)); margin-right: 2.5rem; margin-right: calc(1.0rem + (25 - 10) * ((100vw - 375px) / 1305)); } .cc-custom-form .form-footer-message::after { content: " "; background-color: var(--color-orange); display: block; height: 2px; width: 100%; position: absolute; left: 0; top: -5.0rem; top: calc(-2.5rem + (-50 - -25) * ((100vw - 375px) / 1305)); } .cc-custom-form .hs-fieldtype-file label { color: black; font-weight: 700; font-size: 1.8rem; font-size: calc(1.4rem + (18 - 14) * ((100vw - 375px) / 1305)); } .cc-custom-form .hs-input.error { box-shadow: inset 0 0 0 .1rem red; } .cc-custom-form .no-list.hs-error-msgs.inputs-list { position: relative; left: 0; top: calc(100% + 1rem); } .cc-custom-form .hs-form-field .hs-error-msgs { display: none !important; } .cc-custom-form .input { position: relative; margin: 0; } .cc-custom-form .form-columns-0 { margin-bottom: 1.5rem } .cc-custom-form .hs-fieldtype-text .hs-input, .cc-custom-form .hs-fieldtype-phonenumber .hs-input { border: none; background-color: #EEEEEE; margin: 0; line-height: 170%; font-family: 'Brown'; font-weight: 700; width: 100% !important; box-sizing: border-box; padding-top: 2.8rem; padding-top: calc(1.4rem + (28 - 14) * ((100vw - 375px) / 1305)); padding-bottom: 0.8rem; padding-bottom: calc(0.4rem + (8 - 4) * ((100vw - 375px) / 1305)); padding-left: 3.5rem; padding-left: calc(1.75rem + (35 - 17.5) * ((100vw - 375px) / 1305)); padding-right: 3.5rem; padding-right: calc(1.75rem + (35 - 17.5) * ((100vw - 375px) / 1305)); border-radius: 3.5rem; border-radius: calc(2.5rem + (35 - 25) * ((100vw - 375px) / 1305)); height: 7.0rem; height: calc(5.0rem + (70 - 50) * ((100vw - 375px) / 1305)); font-size: 2.2rem; font-size: calc(1.8rem + (22 - 18) * ((100vw - 375px) / 1305)); } .cc-custom-form input.hs-input:-webkit-autofill, .cc-custom-form input.hs-input:-webkit-autofill:hover, .cc-custom-form input.hs-input:-webkit-autofill:focus, .cc-custom-form input.hs-input.valid-input:-webkit-autofill { -webkit-box-shadow: inset 0 0 0px 9999px #EEEEEE; } @media only screen and (max-width: 700px) { .cc-custom-form .form-columns-2 .hs-form-field { width: 100% !important; margin-bottom: 3.0rem; margin-bottom: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } } /* superform */ .superform { position: fixed; top: 100%; right: 0; left: 0; opacity: 0; background-color: white; z-index: -1; height: 100vh; transition: opacity .3s ease, top .0s ease .3s, z-index 0s linear .3s; } .superform.active { top: 0px; opacity: 1; z-index: 99999; transition: opacity .3s ease, top .0s ease 0s, z-index 0s linear .0s; } .superform .round-button-w-icon { top: 0; right: 0; display: flex; align-items: center; justify-content: center; z-index: 9; margin: 3.0rem; margin: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } /* Style the form */ .superform #regForm { background-color: #ffffff; width: 100%; height: 100%; position: relative; } .superform .tab > div, .superform .tab > form { width: 100%; height: 100%; } .superform .tab > div:last-of-type { background-color: var(--color-orange-tint); } .superform .tab.not-tab > div:last-of-type { background-color: var(--color-purple); } .superform .tab.not-tab button:first-of-type { margin-top: 3rem; margin-right: 3rem; } .superform .tab > div:first-of-type { padding: 3rem; box-sizing: border-box; padding: 3.0rem; padding: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); padding-top: 16.0rem; padding-top: calc(12.0rem + (160 - 120) * ((100vw - 375px) / 1305)); } .superform .tab > div:first-of-type p:first-of-type { margin-bottom: 2.0rem; margin-bottom: calc(1.0rem + (20 - 10) * ((100vw - 375px) / 1305)); } .superform .tab > div:first-of-type p:nth-child(2) { max-width: 53rem; } .superform .tab { width: 100%; height: 100%; display: flex; flex-direction: row; transition: opacity .2s ease; position: absolute; transition: opacity .3s ease, z-index .0s linear 3s, left .0s linear .3s; opacity: 0; z-index: -1; left: -100%; height: 0; } .superform .tab.active { left: 0; opacity: 1; z-index: 1; height: 100%; transition: opacity .3s ease, z-index .0s ease 0s, left .0s linear .0s; } .superform .tab.not-tab { background-color: white; } .superform .tab.not-tab > div:first-of-type > img { display: none; } .superform .tab:last-of-type > div:last-of-type { background-color: var(--color-light-blue); } .superform .prevBtn { display: none; } .superform .tab .success-message { display: none; } .superform button { z-index: 2; } .superform .nextBtn { position: fixed; bottom: 4rem; left: auto; padding: 0 4rem; box-sizing: border-box; width: calc(50% - calc(3.0rem + ( 30 ) * ((100vw - 375px) / 1305)) ); align-items: center; font-size: 2.2rem; justify-content: center; color: white; background-color: var(--color-orange); opacity: 1; transition: opacity .2s ease; right: 3.0rem; right: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); height: 7.0rem; height: calc(5.0rem + (70 - 50) * ((100vw - 375px) / 1305)); border-radius: 3.5rem; border-radius: calc(2.5rem + (35 - 25) * ((100vw - 375px) / 1305)); } .superform .continueBtn { padding: 0 4rem; display: block; box-sizing: border-box; height: 7rem; align-items: center; font-size: 2.2rem; justify-content: center; color: white; background-color: var(--color-orange); border-radius: 3.5rem; opacity: 1; transition: opacity .2s ease; margin-top: 3rem; } .superform .nextBtn.disabled { opacity: 0; } .superform .skipBtn { display: none; position: fixed; bottom: 4rem; padding: 0; align-items: center; font-size: 2.2rem; color: var(--color-orange); height: 7.0rem; height: calc(5.0rem + (70 - 50) * ((100vw - 375px) / 1305)); left: 3.0rem; left: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .superform .step-container { display: none; font-weight: 700; color: var(--color-orange); text-transform: uppercase; margin-top: 5.0rem; margin-top: calc(2.5rem + (50 - 25) * ((100vw - 375px) / 1305)); } .superform-top { display: flex; width: auto; position: absolute; box-sizing: border-box; flex-direction: column; align-items: flex-start; z-index: 2; padding: 3.0rem; padding: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); padding-top: 3.5rem; padding-top: calc(1.75rem + (35 - 17.5) * ((100vw - 375px) / 1305)); } .superform .option-container { padding: 3.0rem; padding: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); padding-bottom: 14rem; box-sizing: border-box; } .superform .option-container.radio:not(.variant) label:last-of-type { left: 100%; transform: translateX(-50%); } .superform .option-container.checkbox { padding : 5rem 3rem 12rem 3rem; overflow-y: auto; padding-left: 3.0rem; padding-left: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); padding-right: 3.0rem; padding-right: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .superform .option-container.radio { display: grid; grid-template-columns: auto auto; overflow-y: auto; grid-row-gap: 3.0rem; grid-row-gap: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); grid-column-gap: 3.0rem; grid-column-gap: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .superform .option-container.radio.variant { grid-template-rows: auto; grid-template-columns: 1fr 1fr; } .superform .option-container.checkbox { display: block; } .superform .option-container.range { display: flex; justify-content: center; align-items: center; } .superform .option-container.checkbox span { color: var(--color-orange); text-transform: uppercase; font-weight: 700; display: block; padding-left: 3.0rem; padding-left: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .superform .option-container.checkbox span:not(:first-of-type) { margin-top: 5rem; display: block; } .superform .option-container input:not([type="range"]) { display: none; } .superform .option-container label { font-family: William; display: flex; position: relative; flex-direction: column; align-items: center; justify-content: space-evenly; cursor: pointer; transition: all .2s ease; text-align: center; padding: 1.5rem; padding: calc(0.75rem + (15 - 7.5) * ((100vw - 375px) / 1305)); padding-bottom: 2.5rem; padding-bottom: calc(1.25rem + (25 - 12.5) * ((100vw - 375px) / 1305)); border-radius: 5.0rem; border-radius: calc(2.5rem + (50 - 25) * ((100vw - 375px) / 1305)); font-size: 2.2rem; font-size: calc(1.8rem + (22 - 18) * ((100vw - 375px) / 1305)); min-height: 24.0rem; min-height: calc(20.0rem + (240 - 200) * ((100vw - 375px) / 1305)); } .superform .option-container label p { font-family: Brown; text-align: center; margin-top: 3rem; font-size: 2.0rem; font-size: calc(1.8rem + (20 - 18) * ((100vw - 375px) / 1305)); } .superform .option-container.radio.variant label { background-color: var(--color-orange); color: white; padding: 7.5rem 1.5rem; box-sizing: border-box; font-size: 4.5rem; font-size: calc(2.5rem + (45 - 25) * ((100vw - 375px) / 1305)); } .superform .option-container.checkbox label { align-items: flex-start; text-align: left; padding: 0; box-sizing: border-box; line-height: 100%; border-radius: 4.5rem; border-radius: calc(2.5rem + (45 - 25) * ((100vw - 375px) / 1305)); min-height: 4.0rem; min-height: calc(0.5rem + (40 - 5) * ((100vw - 375px) / 1305)); font-size: 4.5rem; font-size: calc(2.5rem + (45 - 25) * ((100vw - 375px) / 1305)); padding-left: 3.0rem; padding-left: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); padding-right: 5.0rem; padding-right: calc(10.0rem + (50 - 100) * ((100vw - 375px) / 1305)); padding-top: 1.5rem; padding-top: calc(0.75rem + (15 - 7.5) * ((100vw - 375px) / 1305)); padding-bottom: 1.5rem; padding-bottom: calc(0.75rem + (15 - 7.5) * ((100vw - 375px) / 1305)); margin-bottom: 0.3rem; margin-bottom: calc(0.15rem + (3 - 1.5) * ((100vw - 375px) / 1305)); } .superform .option-container label img { object-fit: contain; margin-bottom: 2.0rem; margin-bottom: calc(1.0rem + (20 - 10) * ((100vw - 375px) / 1305)); } .superform .option-container label:hover, .superform .option-container.radio.variant label:hover { background-color: white; color: var(--color-orange); } .superform .option-container.radio input:checked + label, .superform .option-container.checkbox input:checked + label{ background-color: white; color: var(--color-orange); box-shadow: inset 0 0 0 2px var(--color-orange); } .superform .option-container input:checked + label::before { content: 'check_circle'; font-family: 'Material Icons'; color: var(--color-orange); position: absolute; top: 1.8rem; right: 2.3rem; font-size: 4.0rem; font-size: calc(2.4rem + (40 - 24) * ((100vw - 375px) / 1305)); top: 1.8rem; top: calc(0.9rem + (18 - 9) * ((100vw - 375px) / 1305)); right: 2.3rem; right: calc(1.0rem + (23 - 10) * ((100vw - 375px) / 1305)); } .superform .option-container.checkbox input:checked + label::before { top: 50%; transform: translateY(-50%); right: 2.3rem; } .superform .slidecontainer { position: relative; width: 100%; /* Width of the outside container */ height: auto; display: flex; justify-content: center; align-items: center; background: white; border-radius: 3rem; } .superform .slidecontainer img { position: absolute; max-width: 18rem; width: 25%; left: 0; bottom: calc(100% + 3rem); } .superform .slidecontainer img:nth-child(2) { right: 0; left: auto; } .superform .shadowrange { display: flex; flex-direction: row; position: absolute; width: calc(100% - 1.2rem); height: 6rem; border-radius: 3rem; overflow: hidden; left: 0.6rem; z-index: auto; } .superform .shadowstep { height: 100%; width: 100%; background: none; mix-blend-mode: multiply; box-shadow: 0 0 0 1px var(--color-orange); } .superform .shadowstep:nth-child(1), .superform .shadowstep:nth-child(4){ width: 117.5%; } .superform .slidecontainer input[value="2"] + .shadowrange .shadowstep:nth-child(2), .superform .slidecontainer input[value="3"] + .shadowrange .shadowstep:nth-child(2), .superform .slidecontainer input[value="4"] + .shadowrange .shadowstep:nth-child(2){ background: #FFE5DB; } .superform .slidecontainer input[value="3"] + .shadowrange .shadowstep:nth-child(3), .superform .slidecontainer input[value="4"] + .shadowrange .shadowstep:nth-child(3){ background: #FFDBCE; } .superform .slidecontainer input[value="4"] + .shadowrange .shadowstep:nth-child(4) { background: #FDD2C2; } .slidecontainer input[value="1"] + .shadowrange .shadowstep:nth-child(1), .slidecontainer input[value="2"] + .shadowrange .shadowstep:nth-child(1), .slidecontainer input[value="3"] + .shadowrange .shadowstep:nth-child(1), .slidecontainer input[value="4"] + .shadowrange .shadowstep:nth-child(1){ background: #FEEEE8; } /* The slider itself */ .superform .slider { -webkit-appearance: none; /* Override default CSS styles */ appearance: none; width: 100%; /* Full-width */ background: none; /* Grey background */ outline: none; /* Remove outline */ opacity: 1; /* Set transparency (for mouse-over effects on hover) */ -webkit-transition: .2s; /* 0.2 seconds transition on hover */ transition: opacity .2s; box-sizing: border-box; border-radius: 3.5rem; height: 7rem; padding: 0 0.6rem; border: none; box-shadow: 0 0 0 2px var(--color-orange); margin: 0; z-index: 1; } /* Mouse-over effects */ .superform .slider:hover { opacity: 1; /* Fully shown on mouse-over */ } /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */ .superform .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 6rem; height: 6rem; background: var(--color-orange); cursor: pointer; border-radius: 3rem; border: none; } .superform .slider::-moz-range-thumb { width: 6rem; height: 6rem; border-radius: 3rem; border: none; background: var(--color-orange); cursor: pointer; /* Cursor on hover */ } .superform .rangelabels { display: flex; justify-content: space-between; position: absolute; left: 0; width: 100%; top: calc(100% + 3rem); text-align: center; font-weight: 700; font-size: 1.8rem; } .superform .tab > .option-container.textarea { display: block; width: 100%; height: 100%; background-color: white; box-sizing: border-box; } .superform .option-container.textarea textarea { display: block; width: 100%; height: 100%; outline: none; border: none; text-align: left; font-size: 2rem; line-height: 4.5rem; font-family: 'Brown'; font-weight: 700; box-sizing: border-box; background-color: transparent; resize: none; overflow: hidden; background-image: repeating-linear-gradient(to bottom, transparent, transparent 4.4rem, var(--color-orange) 4.4rem, var(--color-orange) 4.5rem); } .superform .option-container.textarea > div { height: 100%; background-color: var(--color-orange-tint); box-sizing: border-box; padding: 4.0rem; padding: calc(1.5rem + (40 - 15) * ((100vw - 375px) / 1305)); padding-top: 5.0rem; padding-top: calc(2.5rem + (50 - 25) * ((100vw - 375px) / 1305)); padding-bottom: 5.0rem; padding-bottom: calc(2.5rem + (50 - 25) * ((100vw - 375px) / 1305)); border-radius: 5.0rem; border-radius: calc(2.5rem + (50 - 25) * ((100vw - 375px) / 1305)); } .superform .cc-custom-form { margin-top: 5rem; padding-bottom: 5.0rem; padding-bottom: calc(2.5rem + (50 - 25) * ((100vw - 375px) / 1305)); } .superform .cc-custom-form .hs-form-field, .superform .tab .final-step-header img { display: none; } .superform .cc-custom-form input[type="submit"] { width: auto; margin-left: 0; justify-content: center; } .superform .cc-custom-form .hs-form-field.hs-firstname, .superform .cc-custom-form .hs-form-field.hs-lastname, .superform .cc-custom-form .hs-form-field.hs-email { display: block; } .superform-mobile-nav { display: none; position: fixed; bottom: 0; height: 7.7rem; background: white; width: 199%; z-index: 1; box-shadow: 0px -1px 7px 0px #0000001f; } .superform .tab.light-blue { background-color: white; } .superform .tab.light-blue > div:last-of-type { background-color: #60b7d9; } @media only screen and (max-width: 750px) { .superform-mobile-nav { display: block; } .superform { overflow-y: scroll; height: -webkit-fill-available; } .superform > form { min-height: 100%; height: auto; } .superform .tab { flex-direction: column; min-height: 100vh; min-height: -webkit-fill-available; display: none; } .superform .tab.active { display: flex; height: auto !important; } .superform .tab:last-of-type > div:last-of-type { display: none; } .superform .tab .final-step-header img { display: block; } .superform .tab .final-step-header .orange-text { color: black; } .superform .tab:last-of-type { text-align: center; background-color: var(--color-light-blue); } .superform .cc-custom-form { background-color: transparent; } .superform .cc-custom-form input[type="submit"] { width: 100%; margin-top: 0; } .superform .nextBtn { bottom: 1.3rem; width: auto; right: 1.5rem; left: auto; } .superform .skipBtn { left: 3rem; bottom: 1.3rem; color: #979797; } .superform textarea { min-height: 350px; } .superform .option-container { margin-bottom: 1.5rem; } .superform .option-container.radio { grid-column-gap: 2rem; grid-row-gap: 2rem; overflow-y: initial; } .superform .option-container.radio.variant { grid-template-columns: auto; grid-column-gap: 2rem; grid-row-gap: 2rem; } .superform .option-container.radio.variant { grid-template-rows: auto auto 1fr; } .superform .tab:not(.light-blue) { background-color: var(--color-orange-tint); } .tab.active.light-blue { text-align: center; color: black; } .superform .tab.light-blue { background-color: #60b7d9; } .superform .tab.light-blue > div:last-of-type { background-color: white; } .tab.light-blue p.h-4.orange-text { max-width: 30rem; margin: auto; } .superform .tab.not-tab > div:last-of-type > img { display: none; } .superform .tab.not-tab > div:first-of-type > img { display: block; max-height: 50vh; } .superform .slidecontainer { transform: rotate(-90deg); min-width: 50rem; } /* Mouse-over effects */ .superform .slider:hover { opacity: 1; /* Fully shown on mouse-over */ } /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */ .superform .slider::-webkit-slider-thumb { width: 4rem; height: 4rem; } .superform .slider::-moz-range-thumb { width: 4rem; height: 4rem; } .superform .slidecontainer img { bottom: auto; top: calc(100% + 3rem); transform: rotate(90deg); } .superform .rangelabels { top: auto; bottom: calc(100% + 6rem); } .superform .rangelabels > p { transform: rotate(90deg); } .superform .option-container.range { min-height: 75rem; } .superform .slider { height: 5rem; } .superform .shadowrange { height: 4rem; } .superform .tab:nth-child(7) { background-color: white; } .superform .tab:last-of-type > div:first-of-type { padding-top: 10rem; } } /* endsuperform */ /* textmodule */ .textmodule .first-paragraph { font-family: 'William', sans-serif; line-height: 140%; width: 100%; position: relative; font-size: 3.5rem; font-size: calc(2.5rem + (35 - 25) * ((100vw - 375px) / 1305)); margin-bottom: 6.6rem; margin-bottom: calc(4.8rem + (66 - 48) * ((100vw - 375px) / 1305)); max-width: 109.0rem; max-width: calc(34.5rem + (1090 - 345) * ((100vw - 375px) / 1305)); } .textmodule .post-body-content > p { font-size: 2.2rem; font-size: calc(1.8rem + (22 - 18) * ((100vw - 375px) / 1305)); } .textmodule .inner { padding-top: 10.0rem; padding-top: calc(5.0rem + (100 - 50) * ((100vw - 375px) / 1305)); } .textmodule.variant p { max-width: 109.0rem; max-width: calc(34.5rem + (1090 - 345) * ((100vw - 375px) / 1305)); } .textmodule h2 { color: var(--color-orange); } @media only screen and (max-width: 750px) { .textmodule .inner { text-align: center; } } /* endtextmodule */ /* bubble header */ .bubbleheader { display:flex; justify-content: center; padding: 0; margin: 0; padding-bottom: 50%; position:relative; box-sizing: border-box; } .bubbleheader .inner { padding: 0; margin: 0; height: auto; width: 100%; box-sizing: border-box; position: absolute; top: 0; right: auto; left: auto; text-align: center; height: 100%; border-radius: 27.0rem; border-radius: calc(7.0rem + (270 - 70) * ((100vw - 375px) / 1305)); margin: 3.0rem; margin: calc(0.0rem + (30 - 0) * ((100vw - 375px) / 1305)); max-width: 109.0rem; max-width: calc(33.5rem + (1090 - 335) * ((100vw - 375px) / 1305)); } .bubbleheader span { position: absolute; text-transform: uppercase; top: 3rem; } .bubbleheader h1 { max-width: 90%; } @media only screen and (max-width: 750px) { .bubbleheader { padding-bottom: 100%; } [hideonmobile] { display: none; } } /* end bubble header */ .aboutus-container .hs-image-widget { width: 100% !important; box-sizing: border-box; border-radius: 15%; padding-left: 12.0rem; padding-left: calc(1.5rem + (120 - 15) * ((100vw - 375px) / 1305)); padding-right: 12.0rem; padding-right: calc(1.5rem + (120 - 15) * ((100vw - 375px) / 1305)); } #hs_cos_wrapper_linked_image2 { margin-bottom: 16.0rem; margin-bottom: calc(8.0rem + (160 - 80) * ((100vw - 375px) / 1305)); } /* content highlight */ .highlight .inner { margin: auto; box-sizing: border-box; width: 100%; display: flex; flex-direction: row; align-items: flex-start; min-height: 35rem; margin-top: 8.0rem; margin-top: calc(4.0rem + (80 - 40) * ((100vw - 375px) / 1305)); margin-bottom: 8.0rem; margin-bottom: calc(4.0rem + (80 - 40) * ((100vw - 375px) / 1305)); padding: 6.0rem; padding: calc(3.0rem + (60 - 30) * ((100vw - 375px) / 1305)); padding-top: 4.0rem; padding-top: calc(2.0rem + (40 - 20) * ((100vw - 375px) / 1305)); padding-bottom: 4.0rem; padding-bottom: calc(2.0rem + (40 - 20) * ((100vw - 375px) / 1305)); padding-right: 3.0rem; padding-right: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); border-radius: 6.0rem; border-radius: calc(3.0rem + (60 - 30) * ((100vw - 375px) / 1305)); max-width: 109.0rem; max-width: calc(34.5rem + (1090 - 345) * ((100vw - 375px) / 1305)); } .offerings + .highlight .inner { margin-bottom: 24.0rem; margin-bottom: calc(12.0rem + (240 - 120) * ((100vw - 375px) / 1305)); } .highlight .inner > div, .highlight .inner > img { width: 50%; box-sizing: border-box; } .highlight img { max-height: 100%; object-fit: contain; max-height: 30rem; align-self: center; } .highlight a.linkbutton, .highlight button { position: relative; margin-top: 3.0rem; margin-top: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .wistia_responsive_padding { width: 100%; } @media only screen and (max-width: 750px) { .highlight .inner > img { width: 100%; margin-bottom: 4.0rem; margin-bottom: calc(2.0rem + (40 - 20) * ((100vw - 375px) / 1305)); } .highlight .inner > div { width: 100%; } .highlight .inner { flex-direction: column-reverse; align-items: center; padding-bottom: 6.0rem; padding-bottom: calc(3.0rem + (60 - 30) * ((100vw - 375px) / 1305)); } } .timeline-module .inner { margin: auto; max-width: 110.0rem; max-width: calc(35.5rem + (1100 - 355) * ((100vw - 375px) / 1305)); } @media only screen and (max-width: 750px) { .timeline-module .inner { margin: 0; max-width: 100%; } } .timeline-tabs-wrapper { position: relative; } .grid-timeline { position: relative; display: flex; flex-direction: column; overflow: scroll; width: 100%; border-bottom: 1px solid var(--color-orange); margin-bottom: 6.0rem; margin-bottom: calc(3.0rem + (60 - 30) * ((100vw - 375px) / 1305)); } .timeline-rows {display:flex; flex-direction: row; width: 100%;} .timeline-column {display:flex; flex-direction: column; width: 100%; z-index: 1;} .timeline-stamp { background-color: #EDECE8; display: flex; align-items: center; justify-content: center; width: 100%; transition: background-color .3s ease, color .3s ease; font-weight: 700; cursor: pointer; color: black; margin-bottom: 1.5rem; margin-bottom: calc(0.75rem + (15 - 7.5) * ((100vw - 375px) / 1305)); border-radius: 2.0rem; border-radius: calc(1.0rem + (20 - 10) * ((100vw - 375px) / 1305)); min-height: 6.0rem; min-height: calc(5.0rem + (60 - 50) * ((100vw - 375px) / 1305)); } .timeline-stamp.selected, .timeline-stamp:hover { color: white; } .grid-cell { display: inline-flex; justify-content: center; align-items: center; width: auto; box-sizing: border-box; min-width: 74px; width: 100%; background-color: white; padding: .5rem; border-top: .1rem solid var(--color-orange); border-bottom: .1rem solid var(--color-orange); color: var(--color-orange); margin-bottom: 1.5rem; margin-bottom: calc(0.75rem + (15 - 7.5) * ((100vw - 375px) / 1305)); min-height: 5.0rem; min-height: calc(4.0rem + (50 - 40) * ((100vw - 375px) / 1305)); } .last_month_of_year_line { display: block; position: absolute; top: 0; bottom: 0; z-index: 0; border-left: 1px solid var(--color-orange);} .grid-cell.data {background-color: white;} .timeline-tab-container { box-sizing: border-box; position: absolute; opacity: 0; height: 0; overflow: hidden; transition: opacity .3s ease .0s, height .0s linear .3s, display .0s linear .3s, overflow 0s linear .3s; padding: 5.0rem; padding: calc(2.5rem + (50 - 25) * ((100vw - 375px) / 1305)); border-radius: 6.0rem; border-radius: calc(3.0rem + (60 - 30) * ((100vw - 375px) / 1305)); } .timeline-tab-container.active { position: relative; opacity: 1; height: 100%; overflow: auto; transition: opacity .3s ease 0s, height .0s linear .0s, display .0s linear .0s, overflow 0s linear .0s; } .timeline-tab h3 { line-height: 120%; margin-bottom: 4.0rem; margin-bottom: calc(3.0rem + (40 - 30) * ((100vw - 375px) / 1305)); margin-top: 0.05rem; margin-top: calc(0.025rem + (.5 - .25) * ((100vw - 375px) / 1305)); } .timeline-tab:not(:first-of-type) { border-top: 2px solid white; margin-top: 6.0rem; margin-top: calc(3.0rem + (60 - 30) * ((100vw - 375px) / 1305)); padding-top: 6.0rem; padding-top: calc(3.0rem + (60 - 30) * ((100vw - 375px) / 1305)); } /* BLOG STYLES */ /* FLUID CALCULATIONS FOR SPACING & TYPE ----------------------------------------- BASED ON VIEWPORTS: 375px to 1680px ----------------------------------------- FORMULA font-size = calc(ZZ + ((1vw - XX) * YY)) Where XX = min_viewport / 100 YY = 100 * (max_font_size - min_font_size) / (max_viewport - min_viewport) = 100 * font_size_difference / viewport_difference ZZ = Minimum font-size stated in REM 1 REM = 10px * safari fix min-height: 0vw ---------------------------------------- 5px to 10px calc(0.5rem + ((1vw - 3.75px) * 0.3831)) ----------------------------------------- 8px to 15px calc(0.8rem + ((1vw - 3.75px) * 0.5364)) ----------------------------------------- 15px to 30px calc(1.5rem + ((1vw - 3.75px) * 1.1494)) ----------------------------------------- 20px to 40px calc(2rem + ((1vw - 3.75px) * 1.5326)) ----------------------------------------- 30px to 60px calc(3rem + ((1vw - 3.75px) * 2.2989)) ----------------------------------------- 40px to 80px calc(4rem + ((1vw - 3.75px) * 3.0651)) ----------------------------------------- 70px to 100px calc(7rem + ((1vw - 3.75px) * 2.2989)) ----------------------------------------- 100px to 200px calc(10rem + ((1vw - 3.75px) * 7.6628)) ----------------------------------------- 100px to 150px calc(10rem + ((1vw - 3.75px) * 3.8314)) ----------------------------------------- 150px to 250px calc(15rem + ((1vw - 3.75px) * 7.6628)) ----------------------------------------- 345px to 520px calc(34.5rem + ((1vw - 3.75px) * 13.41)) ----------------------------------------- 345px to 745px calc(34.5rem + ((1vw - 3.75px) * 30.6513)) ----------------------------------------- 345px to 795px calc(34.5rem + ((1vw - 3.75px) * 34.4828)) ----------------------------------------- 345px to 1070px calc(34.5rem + ((1vw - 3.75px) * 55.5556)) ----------------------------------------- 345px to 1140px calc(34.5rem + ((1vw - 3.75px) * 60.9195)) ----------------------------------------- 345px to 1345px calc(34.5rem + ((1vw - 3.75px) * 76.6284)) ----------------------------------------- */ /*html:not(.no-js) [datafadein] {opacity: 0; transition: opacity .5s ease-in;}*/ /* Blog */ body > main.blogcontainer { position: relative; margin-left: 34rem; padding-bottom: 10.0rem; padding-bottom: calc(7.5rem + (100 - 75) * ((100vw - 375px) / 1305)); } body.hs-blog-search-listing { background-color: #FFF2ED; } body.hs-search-page main.blogcontainer { background-color: #FFF2ED; margin-left: 0; } @media only screen and (max-width: 1200px) { .blogcontainer.withsidenav { padding-left: 0rem; } body > main.blogcontainer { margin-left: 0; } } /* Blog side nav */ .listing-sidenav { position: fixed; height: 100%; transition: height 500ms ease; bottom: 0; left: 0; box-shadow: 2px 0 10px rgba(0, 0, 0, 0.15); background-color: white; overflow: hidden; width: 34rem; z-index: 1; padding-top: 8rem; box-sizing: border-box; } .listing-sidenav .nav-button { font-family: Material Icons; background-color: #ffe4da; color: var(--color-orange); margin-top: -1.5rem; float: right; right: 1.5rem; } .listing-sidenav.blog-filter--editing { overflow-y: none; } .listing-sidenav #blog-filter-nav, .listing-sidenav #listing-nav { position: absolute; width: auto; right: 0; left: 0; transition: transform ease 300ms, height .5s ease, top ease .5s; height: calc( 100% - 8rem ); } .hidenavbar .listing-sidenav #blog-filter-nav, .hidenavbar .listing-sidenav #listing-nav { height: 100%; top: 0; } .sidenav-controls { display: block; width: auto; padding: 2rem 1.5rem 0 1.5rem; position: absolute; left: 0; right: 0; top: 8rem; transition: top .5s ease; } .hidenavbar .sidenav-controls { top: 0; } .sidenav-controls > div { display: block; max-height: calc(100vh - 8rem); } .sidenav-controls [dataclosetray] { float: right; } .sidenav-controls #filter-controls { flex-direction: row-reverse; } #filter-controls, .blog-filter--editing #listing-controls { display: none; } .listing-sidenav .inner { display: block; margin: 0; padding: 5rem 1.5rem; height: auto; height: calc( 100% - 8rem ); width: 100%; box-sizing: border-box; position: absolute; transition: left .3s ease, height .5s ease; bottom: 0; overflow-y: auto; } .hidenavbar .listing-sidenav .inner { height: 100%; } .overlaytray .listing-sidenav .inner { height: 100%; } .listing-sidenav #sidenav-title { text-transform: uppercase; text-align: center; align-self: center; font-size: 2.2rem; } .listing-sidenav .post-collection { position: relative; width: 100%; padding-top: 3rem; } #blog-filter-nav { transform: translateX(-100%); } .blog-filter--editing #listing-nav { transform: translateX(100%); } .blog-filter--editing #filter-controls { display: flex; justify-content: space-between; } .blog-filter--editing #blog-filter-nav , .hs-blog-listing #blog-filter-nav { transform: translateX(0%); top: 8rem; } .overlaytray .listing-sidenav, .overlaytray.blog-filter--editing #blog-filter-nav { transform: translateX(0%); left: 0; opacity: 1; } .listing-sidenav .linkbutton { margin-left: 50%; margin-top: 3rem; transform: translateX(-50%); } @media only screen and (max-width: 1200px) { .listing-sidenav { opacity: 0; left: -37.5rem; padding-top: 0; top: 0; height: 100vh; transition: left 300ms ease, opacity 300ms ease; z-index: 99999; } .listing-sidenav .linkbutton { margin-top: 1.5rem; } } @media only screen and (max-width: 1200px) { .listing-sidenav .inner { height: 100%; } } .post-collection .postitem { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid #DCDAD9; margin: auto; transition: border-color ease 300ms; box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.25); transition: background-color ease 300ms, border-color ease 300ms, box-shadow ease 300ms, transform ease 300ms ; column-gap: 3.0rem; column-gap: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); padding: 3.0rem; padding: calc(6.0rem + (30 - 60) * ((100vw - 375px) / 1305)); padding-top: 1.5rem; padding-top: calc(3.0rem + (15 - 30) * ((100vw - 375px) / 1305)); padding-bottom: 6.0rem; padding-bottom: calc(3.0rem + (60 - 30) * ((100vw - 375px) / 1305)); max-width: 86.0rem; max-width: calc(37.5rem + (860 - 375) * ((100vw - 375px) / 1305)); } .post-collection .postitem > div {width: 100%; height: 100%; z-index: 1;} .postitem .posttitle { display: block; font-weight: 700; margin-bottom: var(--s-20); } .postitem:hover {background-color: white;border-color: white; box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.25);} .filtertag { position: relative; text-transform: uppercase; box-shadow: inset 0 0 0 1px var(--color-orange); color: var(--color-orange); border-radius: 2.5rem; display: inline-block; line-height: 100%; margin-bottom: 5px; transition: background-color ease 300ms, color ease 300ms; line-height: 135%; font-size: 1.3rem; padding: .7rem 1.4rem; letter-spacing: .09rem; } .tag_list .filtertag { display: none; } .filtertag:hover { background-color: var(--color-orange); color: white; } .filtertag.active { display: inline-block !important; padding-right: 3.4rem; background-color: var(--color-orange); color: white; } .filtertag.active::after { content: "close"; font-family: 'Material Icons'; display: grid; align-items: center; justify-content: center; position: absolute; top: 50%; transform: translateY(-50%); right: 4px; font-size: 1.8rem; text-transform: lowercase; width: 2.5rem; height: 2.5rem; text-align: center; border-radius: 2.5rem; background-color: rgba(255, 255, 255, 0.15); transition: background-color ease .3s, color ease .3s; line-height: 100%; } .filtertag.active:hover::after { background-color: white; color: var(--color-orange); } .posttypetag { display: block; font-family: 'BrownMono'; font-size: 1.4rem; color: #979797; letter-spacing: .03rem; margin-top: var(--s-30); } .postitem.postsummary { margin-bottom: var(--s-30) } .post-collection .post-item { position: relative; display: block; padding-top: 41%; height: 100%; margin-bottom: 1.5rem; border-radius: 2rem; background-color: #FFE4DA; transition: opacity 300ms ease; font-size: 1.5rem; } .post-collection .post-item:hover { opacity: .7; } .post-collection .post-item > div, .post-item > a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 1.5rem; line-height: 133%; letter-spacing: 0.06rem; } .post-collection .post-item span { display: block; font-weight: 700; color: #FD865D; text-transform: uppercase; font-size: 1.2rem; } .blog-listing {padding-top: 7.9rem; display: flex; flex-direction: column;} .blog-listing .inner.header { padding: var(--s-60) var(--s-30); padding-bottom: 0; } .blog-listing .post-collection { position: relative; display: block; padding: var(--s-30); padding-top: 7.0rem; padding-top: calc(3.5rem + (70 - 35) * ((100vw - 375px) / 1305)); } .blog-listing .post-item { height: auto; margin-bottom: var(--s-20);} .blog-pagination { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 0.5rem; align-items: center; width: auto; bottom: 0; margin: auto; padding: 0.8rem 1rem; font-weight: 700; border-radius: var(--s-30); background-color: #333; color: white; } /* Blog Home header */ .blogheader { height: 100%; min-height: calc(100vh - 7.9rem); margin-top: 7.9rem; color: #FD865D; } .blogheader p { color: black; } .blogheader .inner { display: flex; flex-direction: row; padding: 0; margin: 0; height: 100%; position: relative; } .blogheader .button-full { background-color: var(--color-orange); color: white; } .blogheader .inner div { width: 100%; } .blogheader > .inner { display: grid; grid-template-columns: 1fr 1fr; padding-left: 3.0rem; padding-left: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); padding-right: 3.0rem; padding-right: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .blogheader > .inner > div { width: auto; padding: 3.0rem; padding: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .blogheader img { max-width: 100%; margin: auto; max-height: 1010px; } /* Intro topics */ .header h2 { font-weight: 700; } .introtopics .header { margin: 0; padding: 0; padding-top: 6.0rem; padding-top: calc(3.0rem + (60 - 30) * ((100vw - 375px) / 1305)); } .introtopics .content { display: grid; grid-template-columns:repeat(2,1fr); margin: 0; padding: 6.0rem; padding: calc(1.5rem + (60 - 15) * ((100vw - 375px) / 1305)); padding-bottom: 20.0rem; padding-bottom: calc(10.0rem + (200 - 100) * ((100vw - 375px) / 1305)); column-gap: 3.0rem; column-gap: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); row-gap: 3.0rem; row-gap: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .introtopics .content > div:nth-child(odd):last-of-type { margin: auto; left: 50%; } @media only screen and (max-width: 750px) { .introtopics .content { grid-template-columns:repeat(1,1fr); } .introtopics .content > div:nth-child(odd):last-of-type { left: 0%; } } .introtopics .content > div { position: relative; padding-bottom: 66%; width: 100%; height: auto; transition: opacity 300ms ease; overflow: hidden; border-radius: 6.0rem; border-radius: calc(3.0rem + (60 - 30) * ((100vw - 375px) / 1305)); } .introtopics .content > div:hover { opacity: .7; } .introtopics .content > div a { position: absolute; color: white; top: 0; left: 0; right: 0; bottom: 0; padding-left: 3.0rem; padding-left: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); padding-right: 3.0rem; padding-right: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); font-size: 5.0rem; font-size: calc(3.5rem + (50 - 35) * ((100vw - 375px) / 1305)); } .introtopics .content > div a span { display: block; width: 50%; position: absolute; z-index: auto; top: 4.0rem; top: calc(2.0rem + (40 - 20) * ((100vw - 375px) / 1305)); } .introtopics .content > div a img { position: absolute; top: 50%; transform: translateY(-50%); height: 85%; width: auto; z-index: auto; right: 0; background-position: right; } @media only screen and (max-width: 750px) { .blogheader {height: 100%;} .blogheader .inner {display: block; } .blogheader .inner div {width: auto;} } /* topic header */ .topicheader { position: relative; color: white; min-height: 100vh; } .topicheader h1 { margin-bottom: 3.0rem; margin-bottom: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .topicheader .inner span { display: block; text-transform: uppercase; margin-bottom: 1.5rem; margin-bottom: calc(0.75rem + (15 - 7.5) * ((100vw - 375px) / 1305)); } .topicheader .inner, .topicheaderinfo .inner { position: relative; height: 100%; width: 100%; margin: auto; padding: 0; max-width: 107.0rem; max-width: calc(34.5rem + (1070 - 345) * ((100vw - 375px) / 1305)); } @media only screen and (max-width: 1200px) { .topicheader .inner, .topicheaderinfo .inner { max-width: 134.5rem; max-width: calc(34.5rem + (1345 - 345) * ((100vw - 375px) / 1305)); } } .topicheader .inner { display: grid; grid-template-columns: 1fr 1fr; align-items: flex-start; padding-top: 8rem; } .topicheader .inner > div { width: 100%; height: calc(100% - 8rem); } .topicheader .inner > div:nth-child(1) { padding-top: 8.0rem; padding-top: calc(4.0rem + (80 - 40) * ((100vw - 375px) / 1305)); padding-bottom: 8.0rem; padding-bottom: calc(4.0rem + (80 - 40) * ((100vw - 375px) / 1305)); } .topicheader .inner > div:nth-child(1) p { max-width: 75%; } .topicheader .inner > div:nth-child(2) { position: relative; } .topicheader .inner > div:nth-child(2) img { position: absolute; top: 50%; transform: translateY(-50%); left: 0; height: 100%; width: 100%; object-fit: contain; object-position: center center; max-height: 75vh; } .topicheader .inner p { font-style: italic; } .topicheader.purple .inner { grid-template-columns: 1fr 0.65fr; } @media only screen and (max-width: 750px) { .topicheader .inner, .topicheader.purple .inner { justify-content: flex-start; padding-top: 6.7rem; grid-template-columns: 1fr; grid-template-rows: auto 1fr; } } .topicheaderinfo .inner { padding-bottom: 0; padding-top: 3.0rem; padding-top: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } /* Blog search */ .blogsearch { display: none; position: fixed; height: 100vh; width: 100%; top: 0; left: 0; background-color: white; z-index: 999999;} .blogsearch.active {display: block;} .blogsearch ul {display: grid; grid-template-columns: repeat(4, 1fr); padding: 6.0rem; padding: calc(3.0rem + (60 - 30) * ((100vw - 375px) / 1305)); } .blogsearch li a {font-weight: 700; color: #FD865D;} /* Blog Filters */ .blog-filter-item { width: auto; display: block; padding: 1.55rem; background-color: #F1F1F1; border-radius: 2.5rem; text-align: center; font-weight: 400; font-size: 1.6rem; margin-bottom: 1rem; transition: background-color ease 300ms; } .blog-filter-item.active, .blog-filter-item:hover { background-color: #FEE6DD; } .featured-remove { position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%); border-radius: 2rem; height: 2.5rem; display: flex; align-items: center; width: 2.5rem; justify-content: center; transition: filter 300ms ease; background-color: white; font-size: 1.8rem; } .featured-remove:hover { filter: invert(); } .filter-link { font-size: 1.2rem; color: var(--color-orange); text-transform: uppercase; font-weight: 400; display: flex; justify-content: center; align-items: center; position: relative; display: inline-block; letter-spacing: 0.13rem; } .filter-link#edit_filter_link { float: left; } .filter-link#clear-filter-link { float: right; text-align: right; } .filter-link.w-icon { padding-left: 2.4rem; } .filter-link.w-icon span.material-icons { font-size: 2.4rem; position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .listing-tag-header {text-align: center;} .listing-tag-header span { display: inline-block; background-color: #FEDDD0; border-radius: 100px; padding: var(--s-15) var(--s-40); text-transform: uppercase; margin-right: var(--s-15); margin-bottom: var(--s-15); } /* Blog Post Content */ .post-body-content, .post-author-highlight-container, .post-comments { margin: auto; width: 100%; height: 100%; text-align: left; max-width: calc(34.5rem + ( 500 ) * ((100vw - 375px) / 1305)); } .post-comments { border-top: .2rem solid black; padding-top: 3.0rem; padding-top: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); margin-top: 3.0rem; margin-top: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .post-comments .comment.depth-0, .post-comments .comment.depth-0:first-child { border-top: none; border-bottom: 2px solid #eee; padding-bottom: 3.0rem; padding-bottom: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .post-author-highlight-container { display: grid; grid-template-columns: auto 1fr; border-top: 2px solid; margin: 10rem auto; margin-top: 10.0rem; margin-top: calc(5.0rem + (100 - 50) * ((100vw - 375px) / 1305)); margin-bottom: 10.0rem; margin-bottom: calc(5.0rem + (100 - 50) * ((100vw - 375px) / 1305)); padding-top: 3.0rem; padding-top: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); column-gap: 4.0rem; column-gap: calc(2.0rem + (40 - 20) * ((100vw - 375px) / 1305)); } .post-author-highlight-container > div { display: grid; justify-content: flex-start; row-gap: 1.5rem; row-gap: calc(0.75rem + (15 - 7.5) * ((100vw - 375px) / 1305)); } .post-author-highlight-container > div a:first-of-type { font-weight: 700; transition: opacity ease .3s; opacity: 1; } .post-author-highlight-container > div a:first-of-type:hover { opacity: .7; } .post-author-highlight-container > div a:last-of-type { margin-top: 1.5rem; margin-top: calc(0.75rem + (15 - 7.5) * ((100vw - 375px) / 1305)); } .post-author-highlight-container img { width: 9.5rem; height: 9.5rem; border-radius: 9.5rem; display: block; background-color: lightgrey; } .post-body-content p { padding-left: 0 !important; margin-bottom: 2.2rem; margin-bottom: calc(1.6rem + (22 - 16) * ((100vw - 375px) / 1305)); } .post-body-content sup { vertical-align: super; font-size: smaller; } .post-body-content sub { vertical-align: sub; font-size: smaller; } .post-body-content p img, .post-body-content img { display: block; margin: auto; } .post-body-content h2, .post-body-content h1 { line-height: 133%; font-weight: 700 !important; margin-bottom: 3.0rem; margin-bottom: calc(2.2rem + (30 - 22) * ((100vw - 375px) / 1305)); margin-top: 6.0rem; margin-top: calc(4.4rem + (60 - 44) * ((100vw - 375px) / 1305)); font-size: 3.0rem; font-size: calc(2.2rem + (30 - 22) * ((100vw - 375px) / 1305)); } .post-body-content h3, .post-body-content h4, .post-body-content h5, .post-body-content h6 { text-transform: uppercase; line-height: 150%; font-weight: 700 !important; font-size: 2.2rem; font-size: calc(1.8rem + (22 - 18) * ((100vw - 375px) / 1305)); margin-top: 4.4rem; margin-top: calc(3.2rem + (44 - 32) * ((100vw - 375px) / 1305)); } .post-body-content > p:first-of-type, .post-body-content > .hs_cos_wrapper > p:first-of-type { margin-top: 6.6rem; margin-top: calc(4.8rem + (66 - 48) * ((100vw - 375px) / 1305)); } /* for first paragraph */ .post-body-content.intro--styled > p:first-of-type, .post-body-content.intro--styled > .hs_cos_wrapper > p:first-of-type { font-family: 'William', sans-serif; line-height: 140%; width: 200%; max-width: calc(34.5rem + ( 745 ) * ((100vw - 375px) / 1305)); position: relative; left: 50%; transform: translateX(-50%); font-size: 3.5rem; font-size: calc(2.5rem + (35 - 25) * ((100vw - 375px) / 1305)); margin-bottom: 6.6rem; margin-bottom: calc(4.8rem + (66 - 48) * ((100vw - 375px) / 1305)); } .post-body-content, .post-body-content p, .post-body-content li, .post-body-content > .hs_cos_wrapper h2 ~ p:first-of-type { line-height: 154%; font-size: 2.2rem; font-size: calc(1.6rem + (22 - 16) * ((100vw - 375px) / 1305)); } .post-body-content li { position: relative; padding-left: 3.0rem; padding-left: calc(2.0rem + (30 - 20) * ((100vw - 375px) / 1305)); } /* for first paragraph after an h1, h2, h3,... */ .post-body-content > .hs_cos_wrapper h2 ~ p:first-of-type, .post-body-content > .hs_cos_wrapper h1 ~ p:first-of-type, .post-body-content > .hs_cos_wrapper h3 ~ p:first-of-type { font-family: 'Brown', sans-serif; left: auto; transform: none; max-width: none; width: 100%; } .post-body-content > .hs_cos_wrapper p:first-of-type img { display: none; max-width: calc(34.5rem + ( 500 ) * ((100vw - 375px) / 1305)); } .post-body-content :not(h2) a, .topicheaderinfo a { letter-spacing: normal; font-weight: normal; transition: background-color ease 300ms, box-shadow ease 300ms; } .post-body-content > span > :not(blockquote) a { color: black !important; } @media only screen and (max-width: 1400px) { .post-body-content p:first-of-type { /* width: 100%; */ } } /* post body numbered list */ .post-body-content ol { counter-reset: item; } .post-body-content ol > li { list-style-type: none; counter-increment: item; } .post-body-content ol ol li { list-style-type: lower-alpha; } .post-body-content ol ol li::before { display: none; } .post-body-content ol ol { margin-left: 7.5rem; } /* post body bullet list */ .post-body-content ul { list-style-type: none; margin-left:0; } .post-body-content ol > li:before { display: inline-block; width: auto; height: calc(1.2rem + ( 6 ) * ((100vw - 375px) / 1305)); margin-right: 1rem; font-weight: normal; font-family: 'Brown', sans-serif; content: counter(item) "."; } .post-body-content ul li::before { content: ' '; display: inline-block; background-color: black; position: absolute; width: 1rem; height: 1rem; left: 0; top: 1.2rem; top: calc(0.6rem + (12 - 6) * ((100vw - 375px) / 1305)); border-radius: 2.0rem; border-radius: calc(1.0rem + (20 - 10) * ((100vw - 375px) / 1305)); } .post-body-content ul ul { margin-left: 3rem; } .post-body-content ul ul li::before { content: ' '; box-shadow: 0 0 0 2px black inset; background-color: transparent; } /* post body quote */ .post-body-content blockquote { background-color:#4b51c00e; font-family: 'William'; color: #1B208A; line-height: 140%; padding: 3.0rem; padding: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); font-size: 2.5rem; font-size: calc(2.0rem + (25 - 20) * ((100vw - 375px) / 1305)); } .post-body-content blockquote p { font-size: 2.5rem; font-size: calc(2.0rem + (25 - 20) * ((100vw - 375px) / 1305)); margin: 0; } .post-topics { margin-top: 2.0rem; margin-top: calc(1.0rem + (20 - 10) * ((100vw - 375px) / 1305)); } .post-topics a { display: inline-flex; transition: opacity 300ms ease; align-items: center; background-color: rgba(255, 255, 255, 0.15); text-transform: uppercase; font-weight: 400; transition: background-color ease 300ms, opacity ease 300ms; border-radius: 2.5rem; border-radius: calc(2.0rem + (25 - 20) * ((100vw - 375px) / 1305)); height: 5.0rem; height: calc(4.0rem + (50 - 40) * ((100vw - 375px) / 1305)); font-size: 1.4rem; font-size: calc(1.2rem + (14 - 12) * ((100vw - 375px) / 1305)); letter-spacing: 0.13rem; letter-spacing: calc(0.05rem + (1.3 - 0.5) * ((100vw - 375px) / 1305)); padding-left: 2.0rem; padding-left: calc(1.0rem + (20 - 10) * ((100vw - 375px) / 1305)); padding-right: 2.0rem; padding-right: calc(1.0rem + (20 - 10) * ((100vw - 375px) / 1305)); margin-right: 0.25rem; margin-right: calc(0.175rem + (2.5 - 1.75) * ((100vw - 375px) / 1305)); margin-left: 0.25rem; margin-left: calc(0.175rem + (2.5 - 1.75) * ((100vw - 375px) / 1305)); margin-top: 1.0rem; margin-top: calc(0.5rem + (10 - 5) * ((100vw - 375px) / 1305)); } .post-topics a:hover { opacity: .75; } .postheader-attributes { display: flex; flex-direction: row; justify-content: space-between; align-items: center; text-transform: uppercase; } .postheader-attributes a { display: inline-flex; align-items: center; text-transform: uppercase; font-weight: 700; transition: background-color ease 300ms; border-radius: 2.5rem; border-radius: calc(2.0rem + (25 - 20) * ((100vw - 375px) / 1305)); height: 5.0rem; height: calc(4.0rem + (50 - 40) * ((100vw - 375px) / 1305)); padding-left: 2.0rem; padding-left: calc(1.0rem + (20 - 10) * ((100vw - 375px) / 1305)); padding-right: 2.0rem; padding-right: calc(1.0rem + (20 - 10) * ((100vw - 375px) / 1305)); font-size: 2.2rem; font-size: calc(1.8rem + (22 - 18) * ((100vw - 375px) / 1305)); letter-spacing: 0.13rem; letter-spacing: calc(0.05rem + (1.3 - 0.5) * ((100vw - 375px) / 1305)); } .postheader-attributes a:hover { background-color: rgba(255, 255, 255, 0.15); } .postheader { height: 100%; min-height: 100vh; display: flex; justify-content: center; align-items: stretch; } .postheader .inner { display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0; height: auto; width: 100%; position: relative; padding: 0; } .postheader.rounded .inner, .postheader.rounded_light .inner { padding-left: 3.0rem; padding-left: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); padding-right: 3.0rem; padding-right: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .postheader .inner > div { width: 100%; } .postheader .postheader-author { text-align: center; padding-bottom: 3.0rem; padding-bottom: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .postheader .postheader-author a { border-bottom: 0.2rem solid black; font-weight: normal; } .postheader .postheader-content a { color: white; } .postheader .inner .postheader-content { display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center; height: 100%; padding-top: calc(calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)) + 7.9rem ); padding-bottom: 3.0rem; padding-bottom: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .postheader.rounded .postheader-content, .postheader.rounded_light .postheader-content { margin: 3.0rem; margin: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); margin-top: 10.9rem; margin-top: calc(9.4rem + (109 - 94) * ((100vw - 375px) / 1305)); max-width: 109.0rem; max-width: calc(34.5rem + (1090 - 345) * ((100vw - 375px) / 1305)); padding-top: 3.0rem; padding-top: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .postheader.rounded .inner .postheader-content, .postheader.rounded_light .inner .postheader-content { border-radius: 23.0rem; border-radius: calc(7.0rem + (230 - 70) * ((100vw - 375px) / 1305)); } .postheader h1, .postheader .post-topics { padding-left: 3.0rem; padding-left: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); padding-right: 3.0rem; padding-right: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .postheader.rounded h1, .postheader.rounded_light h1 { font-weight: 700; line-height: 100%; font-size: 10.0rem; font-size: calc(3.0rem + (100 - 30) * ((100vw - 375px) / 1305)); } .postheader.rounded_light h1 { font-family: 'William'; font-weight: 400; } .postheader.cameo h1 { font-family: 'BrownCameoLLVIPWeb'; line-height: 137%; font-weight: 400; -moz-font-feature-settings: 'ss15' on; -ms-font-feature-settings: 'ss15' on; -o-font-feature-settings: 'ss15' on; -webkit-font-feature-settings: 'ss15' on; font-feature-settings: 'ss15' on; font-size: 10.0rem; font-size: calc(3.0rem + (100 - 30) * ((100vw - 375px) / 1305)); } .postheader.full h1 { font-family: BrownShadedLLWeb; text-align: center; line-height: 100%; font-size: 10.0rem; font-size: calc(3.0rem + (100 - 30) * ((100vw - 375px) / 1305)); } .postheader .postheader-content { height: 100%; display: flex; justify-content: space-between; flex-direction: column; } .tag_list > div { display: inline-block; } .blog-filter-item-sub { display: none; text-decoration: none; padding: 5px 16px; background-color: transparent; box-shadow: 0 0 0 1px var(--color-orange) inset; color: var(--color-orange); border-radius: 2.5rem; margin-right: 2.5px; margin-bottom: 5px; font-size: 1.4rem; font-weight: 700; line-height: 2.1rem; transition: opacity ease 200ms; text-transform: uppercase; } .blog-filter-item-sub:hover { opacity: .6; } #blog-filter-nav .filter-container { border-top: 0.1rem solid #DCDAD9; } .filter-container { width: 100%; margin-bottom: 3rem; display: flex; flex-direction: column; } .featured-item-tag { position: relative; } #more_tag_list { display: none; } .tag_search_input { background: #F1F1F1; border-radius: 25px; border: none; height: 5rem; text-align: center; padding: 0; margin: 0; width: 100%; font-size: 1.6rem; font-family: Brown, sans-serif; margin-bottom: 2rem; } .tag_search_input:focus { outline: none; box-shadow: 0 0 0 1px var(--color-orange) inset; } .post-body-content a, .topicheaderinfo a { box-shadow: 0px 4px 0px #00000040, 0px -4px 0px transparent; } .post-body-content a:hover, .topicheaderinfo a:hover { box-shadow: 0px 4px 0px #00000040, 0px -4px 0px #00000040; background-color: #00000040; } /* Blog Post Header */ .orange-style .post-body-content h1, .orange-style .post-body-content h2, .orange-style .post-body-content h3, .orange-style .post-body-content h4, .orange-style .post-body-content h5, .orange-style .post-body-content h6, .orange-style .post-body-content ol li::before, .orange-style .post-body-content ol li::marker, .orange-style .postheader-author, .topicheaderinfo.orange-style .info, .orange-style .post-author-highlight-container > div a:first-of-type, .orange-style .post-comments .hs-form-field input, .orange-style .post-comments .hs-form-field textarea, .orange-style .post-comments .hs-form-field input::placeholder, .orange-style .post-comments .hs-form-field textarea::placeholder, .orange-style .post-comments .comment-from { color: var(--color-orange); } .orange-style .post-body-content a, .orange-style .topicheaderinfo a { box-shadow: 0px 4px 0px #FFE4DA, 0px -4px 0px transparent; } /* comment inputs */ .orange-style .post-comments .hs-form-field input, .orange-style .post-comments .hs-form-field textarea { background-color: #FFE4DA; } .orange-style .post-body-content a:hover, .orange-style .topicheaderinfo a:hover { box-shadow: 0px 4px 0px #FFE4DA, 0px -4px 0px #FFE4DA; background-color: #FFE4DA; } .orange-style .postheader-author a { border-color: var(--color-orange) ; } .orange-style.full .postheader-author a, .orange-style.cameo .postheader-author a { border-color: white; } .orange-style .post-body-content ul li::before { background-color: var(--color-orange); } .orange-style .post-body-content ul ul li::before { background-color: white; box-shadow: 0 0 0 2px var(--color-orange) inset; } .postheader.orange-style .postheader-content, .postheader.full.orange-style .postheader-author, .postheader.cameo.orange-style .postheader-author { background-color: var(--color-orange); color: white; } .postheader.cameo.orange-style .postheader-content { /* background-color: white; color: var(--color-orange); */ } .postheader.rounded_light.orange-style .postheader-content, .orange-style .post-author-highlight-container > div a:last-of-type, .orange-style .subscribe-button { background-color: #FFE4DA; color: var(--color-orange); } .topicheader.orange h1 { color: #FFE4DA; } /* .postheader.cameo.orange-style .postheader-attributes a */ .postheader.rounded_light.orange-style .postheader-attributes a { color: var(--color-orange); } .swup-progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 6px; background-color: white; z-index:9999; } /* .postheader.cameo.orange-style .post-topics a, .postheader.cameo.orange-style .postheader-attributes a:hover */ .postheader.rounded_light.orange-style .post-topics a, .postheader.rounded_light.orange-style .postheader-attributes a:hover, .orange-style .post-comments .hs-submit input { background-color: var(--color-orange); color: white; } .orange-style .subscribe-button input { color: var(--color-orange); } .orange-style .subscribe-button input::placeholder { color: var(--color-orange); opacity: 0.5; } /* Blog Post Header */ .brown-style .post-body-content h1, .brown-style .post-body-content h2, .brown-style .post-body-content h3, .brown-style .post-body-content h4, .brown-style .post-body-content h5, .brown-style .post-body-content h6, .brown-style .post-body-content ol li::before, .brown-style .post-body-content ol li::marker, .brown-style .postheader-author, .topicheaderinfo.brown-style .info, .brown-style .post-author-highlight-container > div a:first-of-type, .brown-style .post-comments .hs-form-field input, .brown-style .post-comments .hs-form-field textarea, .brown-style .post-comments .hs-form-field input::placeholder, .brown-style .post-comments .hs-form-field textarea::placeholder, .brown-style .post-comments .comment-from { color: var(--color-brown); } .brown-style .post-body-content a, .brown-style .topicheaderinfo a { box-shadow: 0px 4px 0px #F1E3DE, 0px -4px 0px transparent; } /* comment inputs */ .brown-style .post-comments .hs-form-field input, .brown-style .post-comments .hs-form-field textarea { background-color: #F1E3DE; } .brown-style .post-body-content a:hover, .brown-style .topicheaderinfo a:hover { box-shadow: 0px 4px 0px #F1E3DE, 0px -4px 0px #F1E3DE; background-color: #F1E3DE; } .brown-style .postheader-author a { border-color: var(--color-brown) ; } .brown-style.full .postheader-author a, .brown-style.cameo .postheader-author a { border-color: white; } .brown-style .post-body-content ul li::before { background-color: var(--color-brown); } .brown-style .post-body-content ul ul li::before { background-color: white; box-shadow: 0 0 0 2px var(--color-brown) inset; } .postheader.brown-style .postheader-content, .postheader.full.brown-style .postheader-author, .postheader.cameo.brown-style .postheader-author { background-color: var(--color-brown); color: white; } .postheader.cameo.brown-style .postheader-content { /* background-color: white; color: var(--color-brown); */ } .postheader.rounded_light.brown-style .postheader-content, .brown-style .post-author-highlight-container > div a:last-of-type, .brown-style .subscribe-button { background-color: #F1E3DE; color: var(--color-brown); } .topicheader.brown h1 { color: #F1E3DE; } /* .postheader.cameo.brown-style .postheader-attributes a */ .postheader.rounded_light.brown-style .postheader-attributes a { color: var(--color-brown); } .swup-progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 6px; background-color: white; z-index:9999; } /* .postheader.cameo.brown-style .post-topics a, .postheader.cameo.brown-style .postheader-attributes a:hover */ .postheader.rounded_light.brown-style .post-topics a, .postheader.rounded_light.brown-style .postheader-attributes a:hover, .brown-style .post-comments .hs-submit input { background-color: var(--color-brown); color: white; } .brown-style .subscribe-button input { color: var(--color-brown); } .brown-style .subscribe-button input::placeholder { color: var(--color-brown); opacity: 0.5; } /* Blog Post Header */ .dark-blue-style .post-body-content h1, .dark-blue-style .post-body-content h2, .dark-blue-style .post-body-content h3, .dark-blue-style .post-body-content h4, .dark-blue-style .post-body-content h5, .dark-blue-style .post-body-content h6, .dark-blue-style .post-body-content ol li::before, .dark-blue-style .post-body-content ol li::marker, .dark-blue-style .postheader-author, .topicheaderinfo.dark-blue-style .info, .dark-blue-style .post-author-highlight-container > div a:first-of-type, .dark-blue-style .post-comments .hs-form-field input, .dark-blue-style .post-comments .hs-form-field textarea, .dark-blue-style .post-comments .hs-form-field input::placeholder, .dark-blue-style .post-comments .hs-form-field textarea::placeholder, .dark-blue-style .post-comments .comment-from { color: var(--color-dark-blue); } .dark-blue-style .post-body-content a, .dark-blue-style .topicheaderinfo a { box-shadow: 0px 4px 0px #D8D9FF, 0px -4px 0px transparent; } /* comment inputs */ .dark-blue-style .post-comments .hs-form-field input, .dark-blue-style .post-comments .hs-form-field textarea { background-color: #D8D9FF; } .dark-blue-style .post-body-content a:hover, .dark-blue-style .topicheaderinfo a:hover { box-shadow: 0px 4px 0px #D8D9FF, 0px -4px 0px #D8D9FF; background-color: #D8D9FF; } .dark-blue-style .postheader-author a { border-color: var(--color-dark-blue) ; } .dark-blue-style.full .postheader-author a, .dark-blue-style.cameo .postheader-author a { border-color: white; } .dark-blue-style .post-body-content ul li::before { background-color: var(--color-dark-blue); } .dark-blue-style .post-body-content ul ul li::before { background-color: white; box-shadow: 0 0 0 2px var(--color-dark-blue) inset; } .postheader.dark-blue-style .postheader-content, .postheader.full.dark-blue-style .postheader-author, .postheader.cameo.dark-blue-style .postheader-author { background-color: var(--color-dark-blue); color: white; } .postheader.cameo.dark-blue-style .postheader-content { /* background-color: white; color: var(--color-dark-blue); */ } .postheader.rounded_light.dark-blue-style .postheader-content, .dark-blue-style .post-author-highlight-container > div a:last-of-type, .dark-blue-style .subscribe-button { background-color: #D8D9FF; color: var(--color-dark-blue); } .topicheader.dark-blue h1 { color: #D8D9FF; } /* .postheader.cameo.dark-blue-style .postheader-attributes a */ .postheader.rounded_light.dark-blue-style .postheader-attributes a { color: var(--color-dark-blue); } .swup-progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 6px; background-color: white; z-index:9999; } /* .postheader.cameo.dark-blue-style .post-topics a, .postheader.cameo.dark-blue-style .postheader-attributes a:hover */ .postheader.rounded_light.dark-blue-style .post-topics a, .postheader.rounded_light.dark-blue-style .postheader-attributes a:hover, .dark-blue-style .post-comments .hs-submit input { background-color: var(--color-dark-blue); color: white; } .dark-blue-style .subscribe-button input { color: var(--color-dark-blue); } .dark-blue-style .subscribe-button input::placeholder { color: var(--color-dark-blue); opacity: 0.5; } /* Blog Post Header */ .red-style .post-body-content h1, .red-style .post-body-content h2, .red-style .post-body-content h3, .red-style .post-body-content h4, .red-style .post-body-content h5, .red-style .post-body-content h6, .red-style .post-body-content ol li::before, .red-style .post-body-content ol li::marker, .red-style .postheader-author, .topicheaderinfo.red-style .info, .red-style .post-author-highlight-container > div a:first-of-type, .red-style .post-comments .hs-form-field input, .red-style .post-comments .hs-form-field textarea, .red-style .post-comments .hs-form-field input::placeholder, .red-style .post-comments .hs-form-field textarea::placeholder, .red-style .post-comments .comment-from { color: var(--color-red); } .red-style .post-body-content a, .red-style .topicheaderinfo a { box-shadow: 0px 4px 0px #F6DDDF, 0px -4px 0px transparent; } /* comment inputs */ .red-style .post-comments .hs-form-field input, .red-style .post-comments .hs-form-field textarea { background-color: #F6DDDF; } .red-style .post-body-content a:hover, .red-style .topicheaderinfo a:hover { box-shadow: 0px 4px 0px #F6DDDF, 0px -4px 0px #F6DDDF; background-color: #F6DDDF; } .red-style .postheader-author a { border-color: var(--color-red) ; } .red-style.full .postheader-author a, .red-style.cameo .postheader-author a { border-color: white; } .red-style .post-body-content ul li::before { background-color: var(--color-red); } .red-style .post-body-content ul ul li::before { background-color: white; box-shadow: 0 0 0 2px var(--color-red) inset; } .postheader.red-style .postheader-content, .postheader.full.red-style .postheader-author, .postheader.cameo.red-style .postheader-author { background-color: var(--color-red); color: white; } .postheader.cameo.red-style .postheader-content { /* background-color: white; color: var(--color-red); */ } .postheader.rounded_light.red-style .postheader-content, .red-style .post-author-highlight-container > div a:last-of-type, .red-style .subscribe-button { background-color: #F6DDDF; color: var(--color-red); } .topicheader.red h1 { color: #F6DDDF; } /* .postheader.cameo.red-style .postheader-attributes a */ .postheader.rounded_light.red-style .postheader-attributes a { color: var(--color-red); } .swup-progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 6px; background-color: white; z-index:9999; } /* .postheader.cameo.red-style .post-topics a, .postheader.cameo.red-style .postheader-attributes a:hover */ .postheader.rounded_light.red-style .post-topics a, .postheader.rounded_light.red-style .postheader-attributes a:hover, .red-style .post-comments .hs-submit input { background-color: var(--color-red); color: white; } .red-style .subscribe-button input { color: var(--color-red); } .red-style .subscribe-button input::placeholder { color: var(--color-red); opacity: 0.5; } /* Blog Post Header */ .black-style .post-body-content h1, .black-style .post-body-content h2, .black-style .post-body-content h3, .black-style .post-body-content h4, .black-style .post-body-content h5, .black-style .post-body-content h6, .black-style .post-body-content ol li::before, .black-style .post-body-content ol li::marker, .black-style .postheader-author, .topicheaderinfo.black-style .info, .black-style .post-author-highlight-container > div a:first-of-type, .black-style .post-comments .hs-form-field input, .black-style .post-comments .hs-form-field textarea, .black-style .post-comments .hs-form-field input::placeholder, .black-style .post-comments .hs-form-field textarea::placeholder, .black-style .post-comments .comment-from { color: var(--color-black); } .black-style .postheader-author a { border-color: var(--color-black) ; } .black-style.full .postheader-author a, .black-style.cameo .postheader-author a { border-color: white; } .black-style .post-body-content ul li::before { background-color: var(--color-black); } .black-style .post-body-content ul ul li::before { background-color: white; box-shadow: 0 0 0 2px var(--color-black) inset; } .postheader.black-style .postheader-content, .postheader.full.black-style .postheader-author, .postheader.cameo.black-style .postheader-author { background-color: var(--color-black); color: white; } .postheader.cameo.black-style .postheader-content { /* background-color: white; color: var(--color-black); */ } /* .postheader.cameo.black-style .postheader-attributes a */ .postheader.rounded_light.black-style .postheader-attributes a { color: var(--color-black); } .swup-progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 6px; background-color: white; z-index:9999; } /* .postheader.cameo.black-style .post-topics a, .postheader.cameo.black-style .postheader-attributes a:hover */ .postheader.rounded_light.black-style .post-topics a, .postheader.rounded_light.black-style .postheader-attributes a:hover, .black-style .post-comments .hs-submit input { background-color: var(--color-black); color: white; } .black-style .subscribe-button input { color: var(--color-black); } .black-style .subscribe-button input::placeholder { color: var(--color-black); opacity: 0.5; } /* Blog Post Header */ .light-grey-style .post-body-content h1, .light-grey-style .post-body-content h2, .light-grey-style .post-body-content h3, .light-grey-style .post-body-content h4, .light-grey-style .post-body-content h5, .light-grey-style .post-body-content h6, .light-grey-style .post-body-content ol li::before, .light-grey-style .post-body-content ol li::marker, .light-grey-style .postheader-author, .topicheaderinfo.light-grey-style .info, .light-grey-style .post-author-highlight-container > div a:first-of-type, .light-grey-style .post-comments .hs-form-field input, .light-grey-style .post-comments .hs-form-field textarea, .light-grey-style .post-comments .hs-form-field input::placeholder, .light-grey-style .post-comments .hs-form-field textarea::placeholder, .light-grey-style .post-comments .comment-from { color: var(--color-light-grey); } .light-grey-style .postheader-author a { border-color: var(--color-light-grey) ; } .light-grey-style.full .postheader-author a, .light-grey-style.cameo .postheader-author a { border-color: white; } .light-grey-style .post-body-content ul li::before { background-color: var(--color-light-grey); } .light-grey-style .post-body-content ul ul li::before { background-color: white; box-shadow: 0 0 0 2px var(--color-light-grey) inset; } .postheader.light-grey-style .postheader-content, .postheader.full.light-grey-style .postheader-author, .postheader.cameo.light-grey-style .postheader-author { background-color: var(--color-light-grey); color: white; } .postheader.cameo.light-grey-style .postheader-content { /* background-color: white; color: var(--color-light-grey); */ } /* .postheader.cameo.light-grey-style .postheader-attributes a */ .postheader.rounded_light.light-grey-style .postheader-attributes a { color: var(--color-light-grey); } .swup-progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 6px; background-color: white; z-index:9999; } /* .postheader.cameo.light-grey-style .post-topics a, .postheader.cameo.light-grey-style .postheader-attributes a:hover */ .postheader.rounded_light.light-grey-style .post-topics a, .postheader.rounded_light.light-grey-style .postheader-attributes a:hover, .light-grey-style .post-comments .hs-submit input { background-color: var(--color-light-grey); color: white; } .light-grey-style .subscribe-button input { color: var(--color-light-grey); } .light-grey-style .subscribe-button input::placeholder { color: var(--color-light-grey); opacity: 0.5; } /* Blog Post Header */ .white-style .post-body-content h1, .white-style .post-body-content h2, .white-style .post-body-content h3, .white-style .post-body-content h4, .white-style .post-body-content h5, .white-style .post-body-content h6, .white-style .post-body-content ol li::before, .white-style .post-body-content ol li::marker, .white-style .postheader-author, .topicheaderinfo.white-style .info, .white-style .post-author-highlight-container > div a:first-of-type, .white-style .post-comments .hs-form-field input, .white-style .post-comments .hs-form-field textarea, .white-style .post-comments .hs-form-field input::placeholder, .white-style .post-comments .hs-form-field textarea::placeholder, .white-style .post-comments .comment-from { color: var(--color-white); } .white-style .postheader-author a { border-color: var(--color-white) ; } .white-style.full .postheader-author a, .white-style.cameo .postheader-author a { border-color: white; } .white-style .post-body-content ul li::before { background-color: var(--color-white); } .white-style .post-body-content ul ul li::before { background-color: white; box-shadow: 0 0 0 2px var(--color-white) inset; } .postheader.white-style .postheader-content, .postheader.full.white-style .postheader-author, .postheader.cameo.white-style .postheader-author { background-color: var(--color-white); color: white; } .postheader.cameo.white-style .postheader-content { /* background-color: white; color: var(--color-white); */ } /* .postheader.cameo.white-style .postheader-attributes a */ .postheader.rounded_light.white-style .postheader-attributes a { color: var(--color-white); } .swup-progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 6px; background-color: white; z-index:9999; } /* .postheader.cameo.white-style .post-topics a, .postheader.cameo.white-style .postheader-attributes a:hover */ .postheader.rounded_light.white-style .post-topics a, .postheader.rounded_light.white-style .postheader-attributes a:hover, .white-style .post-comments .hs-submit input { background-color: var(--color-white); color: white; } .white-style .subscribe-button input { color: var(--color-white); } .white-style .subscribe-button input::placeholder { color: var(--color-white); opacity: 0.5; } /* Blog Post Header */ .dark-grey-style .post-body-content h1, .dark-grey-style .post-body-content h2, .dark-grey-style .post-body-content h3, .dark-grey-style .post-body-content h4, .dark-grey-style .post-body-content h5, .dark-grey-style .post-body-content h6, .dark-grey-style .post-body-content ol li::before, .dark-grey-style .post-body-content ol li::marker, .dark-grey-style .postheader-author, .topicheaderinfo.dark-grey-style .info, .dark-grey-style .post-author-highlight-container > div a:first-of-type, .dark-grey-style .post-comments .hs-form-field input, .dark-grey-style .post-comments .hs-form-field textarea, .dark-grey-style .post-comments .hs-form-field input::placeholder, .dark-grey-style .post-comments .hs-form-field textarea::placeholder, .dark-grey-style .post-comments .comment-from { color: var(--color-dark-grey); } .dark-grey-style .postheader-author a { border-color: var(--color-dark-grey) ; } .dark-grey-style.full .postheader-author a, .dark-grey-style.cameo .postheader-author a { border-color: white; } .dark-grey-style .post-body-content ul li::before { background-color: var(--color-dark-grey); } .dark-grey-style .post-body-content ul ul li::before { background-color: white; box-shadow: 0 0 0 2px var(--color-dark-grey) inset; } .postheader.dark-grey-style .postheader-content, .postheader.full.dark-grey-style .postheader-author, .postheader.cameo.dark-grey-style .postheader-author { background-color: var(--color-dark-grey); color: white; } .postheader.cameo.dark-grey-style .postheader-content { /* background-color: white; color: var(--color-dark-grey); */ } /* .postheader.cameo.dark-grey-style .postheader-attributes a */ .postheader.rounded_light.dark-grey-style .postheader-attributes a { color: var(--color-dark-grey); } .swup-progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 6px; background-color: white; z-index:9999; } /* .postheader.cameo.dark-grey-style .post-topics a, .postheader.cameo.dark-grey-style .postheader-attributes a:hover */ .postheader.rounded_light.dark-grey-style .post-topics a, .postheader.rounded_light.dark-grey-style .postheader-attributes a:hover, .dark-grey-style .post-comments .hs-submit input { background-color: var(--color-dark-grey); color: white; } .dark-grey-style .subscribe-button input { color: var(--color-dark-grey); } .dark-grey-style .subscribe-button input::placeholder { color: var(--color-dark-grey); opacity: 0.5; } /* Blog Post Header */ .orange-tint-style .post-body-content h1, .orange-tint-style .post-body-content h2, .orange-tint-style .post-body-content h3, .orange-tint-style .post-body-content h4, .orange-tint-style .post-body-content h5, .orange-tint-style .post-body-content h6, .orange-tint-style .post-body-content ol li::before, .orange-tint-style .post-body-content ol li::marker, .orange-tint-style .postheader-author, .topicheaderinfo.orange-tint-style .info, .orange-tint-style .post-author-highlight-container > div a:first-of-type, .orange-tint-style .post-comments .hs-form-field input, .orange-tint-style .post-comments .hs-form-field textarea, .orange-tint-style .post-comments .hs-form-field input::placeholder, .orange-tint-style .post-comments .hs-form-field textarea::placeholder, .orange-tint-style .post-comments .comment-from { color: var(--color-orange-tint); } .orange-tint-style .postheader-author a { border-color: var(--color-orange-tint) ; } .orange-tint-style.full .postheader-author a, .orange-tint-style.cameo .postheader-author a { border-color: white; } .orange-tint-style .post-body-content ul li::before { background-color: var(--color-orange-tint); } .orange-tint-style .post-body-content ul ul li::before { background-color: white; box-shadow: 0 0 0 2px var(--color-orange-tint) inset; } .postheader.orange-tint-style .postheader-content, .postheader.full.orange-tint-style .postheader-author, .postheader.cameo.orange-tint-style .postheader-author { background-color: var(--color-orange-tint); color: white; } .postheader.cameo.orange-tint-style .postheader-content { /* background-color: white; color: var(--color-orange-tint); */ } /* .postheader.cameo.orange-tint-style .postheader-attributes a */ .postheader.rounded_light.orange-tint-style .postheader-attributes a { color: var(--color-orange-tint); } .swup-progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 6px; background-color: white; z-index:9999; } /* .postheader.cameo.orange-tint-style .post-topics a, .postheader.cameo.orange-tint-style .postheader-attributes a:hover */ .postheader.rounded_light.orange-tint-style .post-topics a, .postheader.rounded_light.orange-tint-style .postheader-attributes a:hover, .orange-tint-style .post-comments .hs-submit input { background-color: var(--color-orange-tint); color: white; } .orange-tint-style .subscribe-button input { color: var(--color-orange-tint); } .orange-tint-style .subscribe-button input::placeholder { color: var(--color-orange-tint); opacity: 0.5; } /* Blog Post Header */ .green-style .post-body-content h1, .green-style .post-body-content h2, .green-style .post-body-content h3, .green-style .post-body-content h4, .green-style .post-body-content h5, .green-style .post-body-content h6, .green-style .post-body-content ol li::before, .green-style .post-body-content ol li::marker, .green-style .postheader-author, .topicheaderinfo.green-style .info, .green-style .post-author-highlight-container > div a:first-of-type, .green-style .post-comments .hs-form-field input, .green-style .post-comments .hs-form-field textarea, .green-style .post-comments .hs-form-field input::placeholder, .green-style .post-comments .hs-form-field textarea::placeholder, .green-style .post-comments .comment-from { color: var(--color-green); } .green-style .post-body-content a, .green-style .topicheaderinfo a { box-shadow: 0px 4px 0px #D3F1DD, 0px -4px 0px transparent; } /* comment inputs */ .green-style .post-comments .hs-form-field input, .green-style .post-comments .hs-form-field textarea { background-color: #D3F1DD; } .green-style .post-body-content a:hover, .green-style .topicheaderinfo a:hover { box-shadow: 0px 4px 0px #D3F1DD, 0px -4px 0px #D3F1DD; background-color: #D3F1DD; } .green-style .postheader-author a { border-color: var(--color-green) ; } .green-style.full .postheader-author a, .green-style.cameo .postheader-author a { border-color: white; } .green-style .post-body-content ul li::before { background-color: var(--color-green); } .green-style .post-body-content ul ul li::before { background-color: white; box-shadow: 0 0 0 2px var(--color-green) inset; } .postheader.green-style .postheader-content, .postheader.full.green-style .postheader-author, .postheader.cameo.green-style .postheader-author { background-color: var(--color-green); color: white; } .postheader.cameo.green-style .postheader-content { /* background-color: white; color: var(--color-green); */ } .postheader.rounded_light.green-style .postheader-content, .green-style .post-author-highlight-container > div a:last-of-type, .green-style .subscribe-button { background-color: #D3F1DD; color: var(--color-green); } .topicheader.green h1 { color: #D3F1DD; } /* .postheader.cameo.green-style .postheader-attributes a */ .postheader.rounded_light.green-style .postheader-attributes a { color: var(--color-green); } .swup-progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 6px; background-color: white; z-index:9999; } /* .postheader.cameo.green-style .post-topics a, .postheader.cameo.green-style .postheader-attributes a:hover */ .postheader.rounded_light.green-style .post-topics a, .postheader.rounded_light.green-style .postheader-attributes a:hover, .green-style .post-comments .hs-submit input { background-color: var(--color-green); color: white; } .green-style .subscribe-button input { color: var(--color-green); } .green-style .subscribe-button input::placeholder { color: var(--color-green); opacity: 0.5; } /* Blog Post Header */ .purple-style .post-body-content h1, .purple-style .post-body-content h2, .purple-style .post-body-content h3, .purple-style .post-body-content h4, .purple-style .post-body-content h5, .purple-style .post-body-content h6, .purple-style .post-body-content ol li::before, .purple-style .post-body-content ol li::marker, .purple-style .postheader-author, .topicheaderinfo.purple-style .info, .purple-style .post-author-highlight-container > div a:first-of-type, .purple-style .post-comments .hs-form-field input, .purple-style .post-comments .hs-form-field textarea, .purple-style .post-comments .hs-form-field input::placeholder, .purple-style .post-comments .hs-form-field textarea::placeholder, .purple-style .post-comments .comment-from { color: var(--color-purple); } .purple-style .post-body-content a, .purple-style .topicheaderinfo a { box-shadow: 0px 4px 0px #EED8FB, 0px -4px 0px transparent; } /* comment inputs */ .purple-style .post-comments .hs-form-field input, .purple-style .post-comments .hs-form-field textarea { background-color: #EED8FB; } .purple-style .post-body-content a:hover, .purple-style .topicheaderinfo a:hover { box-shadow: 0px 4px 0px #EED8FB, 0px -4px 0px #EED8FB; background-color: #EED8FB; } .purple-style .postheader-author a { border-color: var(--color-purple) ; } .purple-style.full .postheader-author a, .purple-style.cameo .postheader-author a { border-color: white; } .purple-style .post-body-content ul li::before { background-color: var(--color-purple); } .purple-style .post-body-content ul ul li::before { background-color: white; box-shadow: 0 0 0 2px var(--color-purple) inset; } .postheader.purple-style .postheader-content, .postheader.full.purple-style .postheader-author, .postheader.cameo.purple-style .postheader-author { background-color: var(--color-purple); color: white; } .postheader.cameo.purple-style .postheader-content { /* background-color: white; color: var(--color-purple); */ } .postheader.rounded_light.purple-style .postheader-content, .purple-style .post-author-highlight-container > div a:last-of-type, .purple-style .subscribe-button { background-color: #EED8FB; color: var(--color-purple); } .topicheader.purple h1 { color: #EED8FB; } /* .postheader.cameo.purple-style .postheader-attributes a */ .postheader.rounded_light.purple-style .postheader-attributes a { color: var(--color-purple); } .swup-progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 6px; background-color: white; z-index:9999; } /* .postheader.cameo.purple-style .post-topics a, .postheader.cameo.purple-style .postheader-attributes a:hover */ .postheader.rounded_light.purple-style .post-topics a, .postheader.rounded_light.purple-style .postheader-attributes a:hover, .purple-style .post-comments .hs-submit input { background-color: var(--color-purple); color: white; } .purple-style .subscribe-button input { color: var(--color-purple); } .purple-style .subscribe-button input::placeholder { color: var(--color-purple); opacity: 0.5; } /* Blog Post Header */ .light-blue-style .post-body-content h1, .light-blue-style .post-body-content h2, .light-blue-style .post-body-content h3, .light-blue-style .post-body-content h4, .light-blue-style .post-body-content h5, .light-blue-style .post-body-content h6, .light-blue-style .post-body-content ol li::before, .light-blue-style .post-body-content ol li::marker, .light-blue-style .postheader-author, .topicheaderinfo.light-blue-style .info, .light-blue-style .post-author-highlight-container > div a:first-of-type, .light-blue-style .post-comments .hs-form-field input, .light-blue-style .post-comments .hs-form-field textarea, .light-blue-style .post-comments .hs-form-field input::placeholder, .light-blue-style .post-comments .hs-form-field textarea::placeholder, .light-blue-style .post-comments .comment-from { color: var(--color-light-blue); } .light-blue-style .post-body-content a, .light-blue-style .topicheaderinfo a { box-shadow: 0px 4px 0px #DDF5FF, 0px -4px 0px transparent; } /* comment inputs */ .light-blue-style .post-comments .hs-form-field input, .light-blue-style .post-comments .hs-form-field textarea { background-color: #DDF5FF; } .light-blue-style .post-body-content a:hover, .light-blue-style .topicheaderinfo a:hover { box-shadow: 0px 4px 0px #DDF5FF, 0px -4px 0px #DDF5FF; background-color: #DDF5FF; } .light-blue-style .postheader-author a { border-color: var(--color-light-blue) ; } .light-blue-style.full .postheader-author a, .light-blue-style.cameo .postheader-author a { border-color: white; } .light-blue-style .post-body-content ul li::before { background-color: var(--color-light-blue); } .light-blue-style .post-body-content ul ul li::before { background-color: white; box-shadow: 0 0 0 2px var(--color-light-blue) inset; } .postheader.light-blue-style .postheader-content, .postheader.full.light-blue-style .postheader-author, .postheader.cameo.light-blue-style .postheader-author { background-color: var(--color-light-blue); color: white; } .postheader.cameo.light-blue-style .postheader-content { /* background-color: white; color: var(--color-light-blue); */ } .postheader.rounded_light.light-blue-style .postheader-content, .light-blue-style .post-author-highlight-container > div a:last-of-type, .light-blue-style .subscribe-button { background-color: #DDF5FF; color: var(--color-light-blue); } .topicheader.light-blue h1 { color: #DDF5FF; } /* .postheader.cameo.light-blue-style .postheader-attributes a */ .postheader.rounded_light.light-blue-style .postheader-attributes a { color: var(--color-light-blue); } .swup-progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 6px; background-color: white; z-index:9999; } /* .postheader.cameo.light-blue-style .post-topics a, .postheader.cameo.light-blue-style .postheader-attributes a:hover */ .postheader.rounded_light.light-blue-style .post-topics a, .postheader.rounded_light.light-blue-style .postheader-attributes a:hover, .light-blue-style .post-comments .hs-submit input { background-color: var(--color-light-blue); color: white; } .light-blue-style .subscribe-button input { color: var(--color-light-blue); } .light-blue-style .subscribe-button input::placeholder { color: var(--color-light-blue); opacity: 0.5; } /* Blog Post Header */ .blue-style .post-body-content h1, .blue-style .post-body-content h2, .blue-style .post-body-content h3, .blue-style .post-body-content h4, .blue-style .post-body-content h5, .blue-style .post-body-content h6, .blue-style .post-body-content ol li::before, .blue-style .post-body-content ol li::marker, .blue-style .postheader-author, .topicheaderinfo.blue-style .info, .blue-style .post-author-highlight-container > div a:first-of-type, .blue-style .post-comments .hs-form-field input, .blue-style .post-comments .hs-form-field textarea, .blue-style .post-comments .hs-form-field input::placeholder, .blue-style .post-comments .hs-form-field textarea::placeholder, .blue-style .post-comments .comment-from { color: var(--color-blue); } .blue-style .post-body-content a, .blue-style .topicheaderinfo a { box-shadow: 0px 4px 0px #D8D9FF, 0px -4px 0px transparent; } /* comment inputs */ .blue-style .post-comments .hs-form-field input, .blue-style .post-comments .hs-form-field textarea { background-color: #D8D9FF; } .blue-style .post-body-content a:hover, .blue-style .topicheaderinfo a:hover { box-shadow: 0px 4px 0px #D8D9FF, 0px -4px 0px #D8D9FF; background-color: #D8D9FF; } .blue-style .postheader-author a { border-color: var(--color-blue) ; } .blue-style.full .postheader-author a, .blue-style.cameo .postheader-author a { border-color: white; } .blue-style .post-body-content ul li::before { background-color: var(--color-blue); } .blue-style .post-body-content ul ul li::before { background-color: white; box-shadow: 0 0 0 2px var(--color-blue) inset; } .postheader.blue-style .postheader-content, .postheader.full.blue-style .postheader-author, .postheader.cameo.blue-style .postheader-author { background-color: var(--color-blue); color: white; } .postheader.cameo.blue-style .postheader-content { /* background-color: white; color: var(--color-blue); */ } .postheader.rounded_light.blue-style .postheader-content, .blue-style .post-author-highlight-container > div a:last-of-type, .blue-style .subscribe-button { background-color: #D8D9FF; color: var(--color-blue); } .topicheader.blue h1 { color: #D8D9FF; } /* .postheader.cameo.blue-style .postheader-attributes a */ .postheader.rounded_light.blue-style .postheader-attributes a { color: var(--color-blue); } .swup-progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 6px; background-color: white; z-index:9999; } /* .postheader.cameo.blue-style .post-topics a, .postheader.cameo.blue-style .postheader-attributes a:hover */ .postheader.rounded_light.blue-style .post-topics a, .postheader.rounded_light.blue-style .postheader-attributes a:hover, .blue-style .post-comments .hs-submit input { background-color: var(--color-blue); color: white; } .blue-style .subscribe-button input { color: var(--color-blue); } .blue-style .subscribe-button input::placeholder { color: var(--color-blue); opacity: 0.5; } /* Blog Post Header */ .yellow-style .post-body-content h1, .yellow-style .post-body-content h2, .yellow-style .post-body-content h3, .yellow-style .post-body-content h4, .yellow-style .post-body-content h5, .yellow-style .post-body-content h6, .yellow-style .post-body-content ol li::before, .yellow-style .post-body-content ol li::marker, .yellow-style .postheader-author, .topicheaderinfo.yellow-style .info, .yellow-style .post-author-highlight-container > div a:first-of-type, .yellow-style .post-comments .hs-form-field input, .yellow-style .post-comments .hs-form-field textarea, .yellow-style .post-comments .hs-form-field input::placeholder, .yellow-style .post-comments .hs-form-field textarea::placeholder, .yellow-style .post-comments .comment-from { color: var(--color-yellow); } .yellow-style .postheader-author a { border-color: var(--color-yellow) ; } .yellow-style.full .postheader-author a, .yellow-style.cameo .postheader-author a { border-color: white; } .yellow-style .post-body-content ul li::before { background-color: var(--color-yellow); } .yellow-style .post-body-content ul ul li::before { background-color: white; box-shadow: 0 0 0 2px var(--color-yellow) inset; } .postheader.yellow-style .postheader-content, .postheader.full.yellow-style .postheader-author, .postheader.cameo.yellow-style .postheader-author { background-color: var(--color-yellow); color: white; } .postheader.cameo.yellow-style .postheader-content { /* background-color: white; color: var(--color-yellow); */ } /* .postheader.cameo.yellow-style .postheader-attributes a */ .postheader.rounded_light.yellow-style .postheader-attributes a { color: var(--color-yellow); } .swup-progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 6px; background-color: white; z-index:9999; } /* .postheader.cameo.yellow-style .post-topics a, .postheader.cameo.yellow-style .postheader-attributes a:hover */ .postheader.rounded_light.yellow-style .post-topics a, .postheader.rounded_light.yellow-style .postheader-attributes a:hover, .yellow-style .post-comments .hs-submit input { background-color: var(--color-yellow); color: white; } .yellow-style .subscribe-button input { color: var(--color-yellow); } .yellow-style .subscribe-button input::placeholder { color: var(--color-yellow); opacity: 0.5; } /* Blog Post Header */ .light-purple-style .post-body-content h1, .light-purple-style .post-body-content h2, .light-purple-style .post-body-content h3, .light-purple-style .post-body-content h4, .light-purple-style .post-body-content h5, .light-purple-style .post-body-content h6, .light-purple-style .post-body-content ol li::before, .light-purple-style .post-body-content ol li::marker, .light-purple-style .postheader-author, .topicheaderinfo.light-purple-style .info, .light-purple-style .post-author-highlight-container > div a:first-of-type, .light-purple-style .post-comments .hs-form-field input, .light-purple-style .post-comments .hs-form-field textarea, .light-purple-style .post-comments .hs-form-field input::placeholder, .light-purple-style .post-comments .hs-form-field textarea::placeholder, .light-purple-style .post-comments .comment-from { color: var(--color-light-purple); } .light-purple-style .postheader-author a { border-color: var(--color-light-purple) ; } .light-purple-style.full .postheader-author a, .light-purple-style.cameo .postheader-author a { border-color: white; } .light-purple-style .post-body-content ul li::before { background-color: var(--color-light-purple); } .light-purple-style .post-body-content ul ul li::before { background-color: white; box-shadow: 0 0 0 2px var(--color-light-purple) inset; } .postheader.light-purple-style .postheader-content, .postheader.full.light-purple-style .postheader-author, .postheader.cameo.light-purple-style .postheader-author { background-color: var(--color-light-purple); color: white; } .postheader.cameo.light-purple-style .postheader-content { /* background-color: white; color: var(--color-light-purple); */ } /* .postheader.cameo.light-purple-style .postheader-attributes a */ .postheader.rounded_light.light-purple-style .postheader-attributes a { color: var(--color-light-purple); } .swup-progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 6px; background-color: white; z-index:9999; } /* .postheader.cameo.light-purple-style .post-topics a, .postheader.cameo.light-purple-style .postheader-attributes a:hover */ .postheader.rounded_light.light-purple-style .post-topics a, .postheader.rounded_light.light-purple-style .postheader-attributes a:hover, .light-purple-style .post-comments .hs-submit input { background-color: var(--color-light-purple); color: white; } .light-purple-style .subscribe-button input { color: var(--color-light-purple); } .light-purple-style .subscribe-button input::placeholder { color: var(--color-light-purple); opacity: 0.5; } /* Blog Post Header */ .pink-style .post-body-content h1, .pink-style .post-body-content h2, .pink-style .post-body-content h3, .pink-style .post-body-content h4, .pink-style .post-body-content h5, .pink-style .post-body-content h6, .pink-style .post-body-content ol li::before, .pink-style .post-body-content ol li::marker, .pink-style .postheader-author, .topicheaderinfo.pink-style .info, .pink-style .post-author-highlight-container > div a:first-of-type, .pink-style .post-comments .hs-form-field input, .pink-style .post-comments .hs-form-field textarea, .pink-style .post-comments .hs-form-field input::placeholder, .pink-style .post-comments .hs-form-field textarea::placeholder, .pink-style .post-comments .comment-from { color: var(--color-pink); } .pink-style .postheader-author a { border-color: var(--color-pink) ; } .pink-style.full .postheader-author a, .pink-style.cameo .postheader-author a { border-color: white; } .pink-style .post-body-content ul li::before { background-color: var(--color-pink); } .pink-style .post-body-content ul ul li::before { background-color: white; box-shadow: 0 0 0 2px var(--color-pink) inset; } .postheader.pink-style .postheader-content, .postheader.full.pink-style .postheader-author, .postheader.cameo.pink-style .postheader-author { background-color: var(--color-pink); color: white; } .postheader.cameo.pink-style .postheader-content { /* background-color: white; color: var(--color-pink); */ } /* .postheader.cameo.pink-style .postheader-attributes a */ .postheader.rounded_light.pink-style .postheader-attributes a { color: var(--color-pink); } .swup-progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 6px; background-color: white; z-index:9999; } /* .postheader.cameo.pink-style .post-topics a, .postheader.cameo.pink-style .postheader-attributes a:hover */ .postheader.rounded_light.pink-style .post-topics a, .postheader.rounded_light.pink-style .postheader-attributes a:hover, .pink-style .post-comments .hs-submit input { background-color: var(--color-pink); color: white; } .pink-style .subscribe-button input { color: var(--color-pink); } .pink-style .subscribe-button input::placeholder { color: var(--color-pink); opacity: 0.5; } /* Blog Post Header */ .lighter-blue-style .post-body-content h1, .lighter-blue-style .post-body-content h2, .lighter-blue-style .post-body-content h3, .lighter-blue-style .post-body-content h4, .lighter-blue-style .post-body-content h5, .lighter-blue-style .post-body-content h6, .lighter-blue-style .post-body-content ol li::before, .lighter-blue-style .post-body-content ol li::marker, .lighter-blue-style .postheader-author, .topicheaderinfo.lighter-blue-style .info, .lighter-blue-style .post-author-highlight-container > div a:first-of-type, .lighter-blue-style .post-comments .hs-form-field input, .lighter-blue-style .post-comments .hs-form-field textarea, .lighter-blue-style .post-comments .hs-form-field input::placeholder, .lighter-blue-style .post-comments .hs-form-field textarea::placeholder, .lighter-blue-style .post-comments .comment-from { color: var(--color-lighter-blue); } .lighter-blue-style .postheader-author a { border-color: var(--color-lighter-blue) ; } .lighter-blue-style.full .postheader-author a, .lighter-blue-style.cameo .postheader-author a { border-color: white; } .lighter-blue-style .post-body-content ul li::before { background-color: var(--color-lighter-blue); } .lighter-blue-style .post-body-content ul ul li::before { background-color: white; box-shadow: 0 0 0 2px var(--color-lighter-blue) inset; } .postheader.lighter-blue-style .postheader-content, .postheader.full.lighter-blue-style .postheader-author, .postheader.cameo.lighter-blue-style .postheader-author { background-color: var(--color-lighter-blue); color: white; } .postheader.cameo.lighter-blue-style .postheader-content { /* background-color: white; color: var(--color-lighter-blue); */ } /* .postheader.cameo.lighter-blue-style .postheader-attributes a */ .postheader.rounded_light.lighter-blue-style .postheader-attributes a { color: var(--color-lighter-blue); } .swup-progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 6px; background-color: white; z-index:9999; } /* .postheader.cameo.lighter-blue-style .post-topics a, .postheader.cameo.lighter-blue-style .postheader-attributes a:hover */ .postheader.rounded_light.lighter-blue-style .post-topics a, .postheader.rounded_light.lighter-blue-style .postheader-attributes a:hover, .lighter-blue-style .post-comments .hs-submit input { background-color: var(--color-lighter-blue); color: white; } .lighter-blue-style .subscribe-button input { color: var(--color-lighter-blue); } .lighter-blue-style .subscribe-button input::placeholder { color: var(--color-lighter-blue); opacity: 0.5; } /* Blog Post Header */ .darker-orange-style .post-body-content h1, .darker-orange-style .post-body-content h2, .darker-orange-style .post-body-content h3, .darker-orange-style .post-body-content h4, .darker-orange-style .post-body-content h5, .darker-orange-style .post-body-content h6, .darker-orange-style .post-body-content ol li::before, .darker-orange-style .post-body-content ol li::marker, .darker-orange-style .postheader-author, .topicheaderinfo.darker-orange-style .info, .darker-orange-style .post-author-highlight-container > div a:first-of-type, .darker-orange-style .post-comments .hs-form-field input, .darker-orange-style .post-comments .hs-form-field textarea, .darker-orange-style .post-comments .hs-form-field input::placeholder, .darker-orange-style .post-comments .hs-form-field textarea::placeholder, .darker-orange-style .post-comments .comment-from { color: var(--color-darker-orange); } .darker-orange-style .postheader-author a { border-color: var(--color-darker-orange) ; } .darker-orange-style.full .postheader-author a, .darker-orange-style.cameo .postheader-author a { border-color: white; } .darker-orange-style .post-body-content ul li::before { background-color: var(--color-darker-orange); } .darker-orange-style .post-body-content ul ul li::before { background-color: white; box-shadow: 0 0 0 2px var(--color-darker-orange) inset; } .postheader.darker-orange-style .postheader-content, .postheader.full.darker-orange-style .postheader-author, .postheader.cameo.darker-orange-style .postheader-author { background-color: var(--color-darker-orange); color: white; } .postheader.cameo.darker-orange-style .postheader-content { /* background-color: white; color: var(--color-darker-orange); */ } /* .postheader.cameo.darker-orange-style .postheader-attributes a */ .postheader.rounded_light.darker-orange-style .postheader-attributes a { color: var(--color-darker-orange); } .swup-progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 6px; background-color: white; z-index:9999; } /* .postheader.cameo.darker-orange-style .post-topics a, .postheader.cameo.darker-orange-style .postheader-attributes a:hover */ .postheader.rounded_light.darker-orange-style .post-topics a, .postheader.rounded_light.darker-orange-style .postheader-attributes a:hover, .darker-orange-style .post-comments .hs-submit input { background-color: var(--color-darker-orange); color: white; } .darker-orange-style .subscribe-button input { color: var(--color-darker-orange); } .darker-orange-style .subscribe-button input::placeholder { color: var(--color-darker-orange); opacity: 0.5; } /* Blog Post Header */ .grey-style .post-body-content h1, .grey-style .post-body-content h2, .grey-style .post-body-content h3, .grey-style .post-body-content h4, .grey-style .post-body-content h5, .grey-style .post-body-content h6, .grey-style .post-body-content ol li::before, .grey-style .post-body-content ol li::marker, .grey-style .postheader-author, .topicheaderinfo.grey-style .info, .grey-style .post-author-highlight-container > div a:first-of-type, .grey-style .post-comments .hs-form-field input, .grey-style .post-comments .hs-form-field textarea, .grey-style .post-comments .hs-form-field input::placeholder, .grey-style .post-comments .hs-form-field textarea::placeholder, .grey-style .post-comments .comment-from { color: var(--color-grey); } .grey-style .postheader-author a { border-color: var(--color-grey) ; } .grey-style.full .postheader-author a, .grey-style.cameo .postheader-author a { border-color: white; } .grey-style .post-body-content ul li::before { background-color: var(--color-grey); } .grey-style .post-body-content ul ul li::before { background-color: white; box-shadow: 0 0 0 2px var(--color-grey) inset; } .postheader.grey-style .postheader-content, .postheader.full.grey-style .postheader-author, .postheader.cameo.grey-style .postheader-author { background-color: var(--color-grey); color: white; } .postheader.cameo.grey-style .postheader-content { /* background-color: white; color: var(--color-grey); */ } /* .postheader.cameo.grey-style .postheader-attributes a */ .postheader.rounded_light.grey-style .postheader-attributes a { color: var(--color-grey); } .swup-progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 6px; background-color: white; z-index:9999; } /* .postheader.cameo.grey-style .post-topics a, .postheader.cameo.grey-style .postheader-attributes a:hover */ .postheader.rounded_light.grey-style .post-topics a, .postheader.rounded_light.grey-style .postheader-attributes a:hover, .grey-style .post-comments .hs-submit input { background-color: var(--color-grey); color: white; } .grey-style .subscribe-button input { color: var(--color-grey); } .grey-style .subscribe-button input::placeholder { color: var(--color-grey); opacity: 0.5; } /* blog comments */ .post-comments .section { display: grid; row-gap: 10.0rem; row-gap: calc(5.0rem + (100 - 50) * ((100vw - 375px) / 1305)); } .post-comments .hs-form { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-areas: ". ." "test test"; row-gap: 3.0rem; row-gap: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); column-gap: 3.0rem; column-gap: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .post-comments .comment { display: grid; row-gap: 1rem; justify-content: auto; } .post-comments > p { font-weight: bold; } .post-comments .hs-form-field { position: relative; } .post-comments .hs-form-field.hs-firstname, .post-comments .hs-form-field.hs-lastname, .post-comments .hs-form-field.hs-email, .post-comments .hs-form-field.hs-website, .post-comments .hs-form-field.hs-recaptcha, .post-comments .hs-submit { position: relative; width: 100%; } .post-comments .hs_lastname, .post-comments .hs_website { display: none; } .post-comments .hs_comment { grid-area: test; } .post-comments .hs-form-field.hs-comments { display: block; width: 100%; } .post-comments .hs-form-field .input { position: relative; width: 100%; display: flex; justify-content: stretch; } .post-comments .hs-form-field input, .post-comments .hs-form-field textarea { width: 100%; border: 0; padding: 0; margin: 0; outline: none; background-color: #FEE6DD; font-family: 'Brown'; min-height: 0vw; font-weight: 700; font-size: 2.2rem; font-size: calc(1.8rem + (22 - 18) * ((100vw - 375px) / 1305)); border-radius: 3.5rem; border-radius: calc(1.75rem + (35 - 17.5) * ((100vw - 375px) / 1305)); padding-left: 3.5rem; padding-left: calc(1.75rem + (35 - 17.5) * ((100vw - 375px) / 1305)); padding-right: 3.5rem; padding-right: calc(1.75rem + (35 - 17.5) * ((100vw - 375px) / 1305)); padding-top: 1.9rem; padding-top: calc(0.95rem + (19 - 9.5) * ((100vw - 375px) / 1305)); padding-bottom: 1.9rem; padding-bottom: calc(0.95rem + (19 - 9.5) * ((100vw - 375px) / 1305)); } .post-comments .hs-submit input { font-family: 'Brown'; font-weight: 700; display: inline-flex; background-color: var(--color-orange); color: #ffffff; align-items: center; padding: 0; transition: opacity 0.3s ease; border: none; min-height: 0vw; border-radius: 3.5rem; border-radius: calc(1.75rem + (35 - 17.5) * ((100vw - 375px) / 1305)); font-size: 2.2rem; font-size: calc(1.8rem + (22 - 18) * ((100vw - 375px) / 1305)); padding-left: 3.5rem; padding-left: calc(1.75rem + (35 - 17.5) * ((100vw - 375px) / 1305)); padding-right: 3.5rem; padding-right: calc(1.75rem + (35 - 17.5) * ((100vw - 375px) / 1305)); padding-top: 1.9rem; padding-top: calc(0.95rem + (19 - 9.5) * ((100vw - 375px) / 1305)); padding-bottom: 1.9rem; padding-bottom: calc(0.95rem + (19 - 9.5) * ((100vw - 375px) / 1305)); } .post-comments .comment-reply-to { display: flex; width: auto; background: none; justify-content: flex-start; align-items: center; padding-left: 0; color: black; font-size: 1.8rem; font-size: calc(1.4rem + (18 - 14) * ((100vw - 375px) / 1305)); margin-top: 1.5rem; margin-top: calc(0.75rem + (15 - 7.5) * ((100vw - 375px) / 1305)); } .post-comments .comment-reply-to em { margin-left: 0.5rem; } .post-comments .comment-date { color: rgba(0, 0, 0, 0.5); font-size: 1.8rem; font-size: calc(1.4rem + (18 - 14) * ((100vw - 375px) / 1305)); } .post-comments .comment-from h4 { font-size: 2.0rem; font-size: calc(1.6rem + (20 - 16) * ((100vw - 375px) / 1305)); } .post-comments .replying { padding: 0; margin-top: 3.0rem; margin-top: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .post-comments .replying .replying-to { display: block; font-weight: 700; margin-bottom: 1.5rem; margin-bottom: calc(0.75rem + (15 - 7.5) * ((100vw - 375px) / 1305)); } .comment-reply-to::before { content: "reply"; font-family: 'Material Icons'; margin-right: 1.0rem; margin-right: calc(0.5rem + (10 - 5) * ((100vw - 375px) / 1305)); } .post-comments .hs_comment textarea { min-height: 15.0rem; min-height: calc(7.5rem + (150 - 75) * ((100vw - 375px) / 1305)); } .post-comments .hs-form-field label { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; display: none; left: 3.5rem; left: calc(1.75rem + (35 - 17.5) * ((100vw - 375px) / 1305)); } .post-comments .hs-form-field.hs-recaptcha { position: absolute; right: 0; bottom: 0; left: auto; width: auto; } .comment-date { font-size: 1.8rem; font-size: calc(1.4rem + (18 - 14) * ((100vw - 375px) / 1305)); } .comment-body { font-size: 2.2rem; font-size: calc(1.8rem + (22 - 18) * ((100vw - 375px) / 1305)); } @media only screen and (max-width: 1200px) { .postheader .inner .postheader-content { max-width: 100%; } } /* FLUID CALCULATIONS FOR SPACING & TYPE ----------------------------------------- BASED ON VIEWPORTS: 375px to 1680px ----------------------------------------- FORMULA font-size = calc(ZZ + ((1vw - XX) * YY)) Where XX = min_viewport / 100 YY = 100 * (max_font_size - min_font_size) / (max_viewport - min_viewport) = 100 * font_size_difference / viewport_difference ZZ = Minimum font-size stated in REM 1 REM = 10px * safari fix min-height: 0vw ---------------------------------------- 5px to 10px calc(0.5rem + ((1vw - 3.75px) * 0.3831)) ----------------------------------------- 8px to 15px calc(0.8rem + ((1vw - 3.75px) * 0.5364)) ----------------------------------------- 15px to 30px calc(1.5rem + ((1vw - 3.75px) * 1.1494)) ----------------------------------------- 20px to 40px calc(2rem + ((1vw - 3.75px) * 1.5326)) ----------------------------------------- 30px to 60px calc(3rem + ((1vw - 3.75px) * 2.2989)) ----------------------------------------- 40px to 80px calc(4rem + ((1vw - 3.75px) * 3.0651)) ----------------------------------------- 70px to 100px calc(7rem + ((1vw - 3.75px) * 2.2989)) ----------------------------------------- 100px to 200px calc(10rem + ((1vw - 3.75px) * 7.6628)) ----------------------------------------- 100px to 150px calc(10rem + ((1vw - 3.75px) * 3.8314)) ----------------------------------------- 150px to 250px calc(15rem + ((1vw - 3.75px) * 7.6628)) ----------------------------------------- 345px to 520px calc(34.5rem + ((1vw - 3.75px) * 13.41)) ----------------------------------------- 345px to 745px calc(34.5rem + ((1vw - 3.75px) * 30.6513)) ----------------------------------------- 345px to 795px calc(34.5rem + ((1vw - 3.75px) * 34.4828)) ----------------------------------------- 345px to 1070px calc(34.5rem + ((1vw - 3.75px) * 55.5556)) ----------------------------------------- 345px to 1140px calc(34.5rem + ((1vw - 3.75px) * 60.9195)) ----------------------------------------- 345px to 1345px calc(34.5rem + ((1vw - 3.75px) * 76.6284)) ----------------------------------------- */ /*html:not(.no-js) [datafadein] {opacity: 0; transition: opacity .5s ease-in;}*/ nav{ width:100%; position:relative; } .nav-bar { position:fixed; top:0; display:flex; align-items:center; justify-content:space-between; width:100%; transition: top 500ms ease, box-shadow 500ms ease .5s, background-color 150ms ease .5s, opacity 500ms ease; color: white; z-index: 2; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); } .add-default-nav-color nav > .nav-bar { background-color: var(--color-orange); } .transparent-navbar:not(.nav-floating) .nav-bar, .hub-transparent:not(.nav-floating) .nav-bar { background-color: transparent; box-shadow: none; color: black; } .generalform-template .nav-bar { background-color: white; color: black; transition: top 500ms ease,box-shadow 500ms ease 0s,background-color 150ms ease .5s,opacity 500ms ease; } .no-boxshadow .nav-bar { box-shadow: none; } .proposal-page.nav-floating .nav-bar { background-color: var(--color-blue); } .hidenavbar .nav-bar{ opacity: 1; } .nav-floating .nav-bar { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); } .overlaymenu .nav-bar { box-shadow: 0 0px 0px rgba(0, 0, 0, 0.15); } .hidenavbar.nav-floating .nav-bar{ top:-8rem; box-shadow: 0 0px 0px rgba(0, 0, 0, 0.15); } .nav-bar > div{ display:flex; align-items:center; padding:1.5rem 0; } .hs-search-page .nav-bar > div:last-of-type { width: 100%; } .nav-button{ position:relative; display:inline-block; min-width:5rem; height:5rem; margin-left:5px; border-radius:2.5rem; background-color:hsla(0, 0%, 100%, 0.16); transition:color 200ms ease, filter 200ms ease .5s, background-color 200ms ease, opacity 200ms ease; font-family:Brown, sans-serif; color:#fff; line-height:5rem; font-weight:700; text-align:center; letter-spacing:0.13rem; cursor:pointer; } .nav-button:hover{ background-color:#fff; color:#fd865d; } .nav-button.subscribe-button:hover{ background-color:#fff; color:black; } .nav-button.search, .nav-button.menu, .nav-button.close, .nav-button.side-menu { font-size: 3.6rem; font-family: 'Material Icons'; } .nav-button.side-menu { display: none; font-size: 3rem; font-family: 'Material Icons'; } .nav-button.menu { font-size: 4rem; } @media screen and (max-width:1200px){ .nav-button.side-menu { display: inline-block; } } @media screen and (max-width:750px){ .nav-button.side-menu { font-size: 2.4rem; } .nav-button.menu { font-size: 3rem; } } .nav-button.search.overlay{ display:block; } .nav-button.contact{ width:auto; padding-right:1.8rem; padding-left:1.8rem; } .nav-button.contact.overlay{ display:block; } .nav-button.contact.overlay:hover{ background-color:#fff; color:#1d1c1c; } .nav-button.contact.overlay.tray{ display:none; } .nav-button.menu, .nav-button.close{ margin-right:3rem; } .nav-button.close:hover, .nav-button.search.overlay:hover { background-color:white; color: black; } .nav-button.tray, .nav-button.back{ display: flex; width:auto; margin-left:5px; padding-right:1.8rem; padding-left: 1rem; } .servicelevel .nav-button.tray:not(.contact)::before, .nav-button.back::before { content: 'navigate_before'; display: block; font-family: 'Material Icons'; font-size: 3rem; } @media screen and (max-width:750px){ .servicelevel .nav-button.tray:not(.contact)::before, .nav-button.back::before { font-size: 2.4rem; left: .5rem; } } .nav-button.tray-mobile{ display:none; margin-left:5px; background-image:url("//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/images/cc-burger.svg"); background-position:50% 50%; background-size:40%; background-repeat:no-repeat; } .nav-button.tray-mobile:hover{ background-image:url("//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/images/cc-burger-og.svg"); } .nav-button.social{ background-image:url('https://d3e54v103j8qbb.cloudfront.net/img/background-image.svg'); background-position:50% 50%; background-size:auto; background-repeat:no-repeat; } .nav-button.social:hover{ background-color:#000; -webkit-filter:invert(100%); filter:invert(100%); } .nav-button.social.twitter{ margin-left:30px; background-image:url("//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/images/twitter-logo.svg"); } .nav-button.social.linkedin{ background-image:url("//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/images/linkedin-logo.svg"); } .nav-button.social.facebook{ background-image:url("//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/images/facebook-logo.svg"); } .nav-button.social.instagram{ background-image:url("//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/images/instagram-logo.svg"); } .nav-button.newsletter{ left:-30px; width:100%; margin-left:0; padding-right:26px; padding-left:26px; background-image:url("//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/images/arrow-w-line.svg"); background-position:95% 50%; background-size:auto; background-repeat:no-repeat; text-align:left; } .nav-button.newsletter:hover{ color:#1d1c1c; background-blend-mode:difference; } .homebutton{ margin-left:3rem; display: flex; align-items: center; } .homebutton svg, .homebutton img { height:5rem; max-width: initial; min-width: auto; } .homebutton svg g { transition: fill .2s ease .5s; } .homepage-body:not(.nav-floating) nav > .nav-bar .logo g, .landingpage-body:not(.nav-floating) nav > .nav-bar .logo g { fill: #000; } .generalform-template .logo g { fill: var(--color-orange); } .generalform-template .homebutton { color: var(--color-orange); } .homebutton span { display: inline-block; float: right; letter-spacing: 1.3px; font-size: 1.8rem; margin-left: 1.5rem; transition: color .2s ease .5s; } .nav-overlay .nav-bar{ position:absolute; z-index:9999; } .nav-overlay { position:fixed; left:-100%; top:0; width:100%; height:100%; overflow: auto; background-color:#1d1c1c; color: white; z-index: -1 ; opacity:0; transition:opacity 0.3s ease, left 0s linear 0.3s, z-index 0ms linear .3s; } .overlaymenu .nav-overlay, .overlaytray [dataclosetray], .overlaytray .close-tray-button, .overlaytray .lightbox-close-button, .no-js .nav-overlay{ transition:opacity 0.3s ease; opacity:1; left:0; z-index: 9999999; } .text-small-sans.navoverlay-extras { display: flex; flex-direction: column; font-weight: 700; line-height: 150%; } .navoverlay-extras > a:first-of-type { margin-bottom: 3rem; } .overlaytray button[dataclosetray], .overlaytray button.close-tray-button { left: auto; right: 0; top: 1.5rem; position: fixed; background-color: black; transition: background-color .2s ease, color .2s ease; } [dataOpenTray] { display: none; } .overlay-content, .searchresult-container { display:block; width:100%; margin-right:auto; margin-left:auto; padding-top:8rem; min-height:calc(100vh - 8rem); } .overlay-content .nav-content{ min-height:calc(100vh - 15rem); padding-bottom:6rem; height:auto; position:relative; display:flex; flex-direction:column; justify-content:space-between; } .nav-item { transition: opacity 0.15s ease; } .nav-item:hover, .nav-item.active, .nav-index a:hover { opacity: 0.7; } .overlay-grid{ max-width:var(--w-1070); left:calc(1.5rem + ((1vw - 3.75px) * 11.6475)); min-height:0vw; } .inneroverlay{ display:flex; width:100%; padding-right:calc(4rem + ((1vw - 3.75px) * 3.0651)); flex-direction:column; justify-items:start; align-items:flex-start; grid-auto-columns:1fr; grid-template-columns:1fr; grid-template-rows:auto auto; min-height:0vw} .inneroverlay.social{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; padding-right:0vw; flex-direction:row; align-items:center; grid-auto-flow:row; grid-template-rows:auto; color:#fff; } .divider{ width:100%; height:2px; margin-top:1.5vw; margin-bottom:1.5vw; background-color:hsla(0, 0%, 100%, 0.4); max-width: 25rem; } .divider.hidden{ background-color: transparent; } .divider.mobileonly{ display:none; } .nav-overlay.is_footer{ left:0; opacity:1; position:relative; } .tray-container { height: calc(100vh - 8rem); position:fixed; left:-32rem; top:0; bottom:0; z-index:99995; width:100%; max-width:34rem; background-color:#fff; box-shadow: 2px 0 10px rgba(0, 0, 0, 0.15); opacity:0; transition: opacity 500ms ease,left 500ms ease,height 500ms ease, top 500ms ease; overflow-y: scroll; } .hidenavbar .servicelevel .tray-container{ height: 100vh; top:0rem; } .overlaytray .servicelevel .tray-container, .overlaytray .tray-container { left:0; opacity:1; } .servicelevel .tray-container{ left:0; top:8rem; opacity:1; z-index:auto; } .closebutton{ display:inline; padding-left:2.5rem; background-image:url("//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/images/close-icon.svg"); background-position:0 50%; background-size:auto; background-repeat:no-repeat; color:#fd865d; } body:not(.overlaytray) .servicelevel .tray-top{ display:none; } .tray-overlay{ position:fixed; left:-100%; top:0; z-index:9999 !important; width:100%; height:100vh; background-color:rgba(144, 92, 73, 0.68); opacity:0; -webkit-transition:opacity .3s ease; transition:opacity .3s ease, left 0s linear .3s; cursor:pointer; } .servicelevel .hide .tray-inner ul:first-child{ padding-top:0; } .tray-inner > ul{ line-height:3.5rem; } .tray-top{ display: flex; justify-content: space-between; padding: 1.8rem 3rem 0rem 3rem; } .tray-inner > ul:last-child{ padding:1.75rem 3rem 3rem 3rem; } .tray-inner .servicelinks > ul { margin-bottom:1.75rem; } .anchorlinks{ background-color:var(--color-light-grey); padding:1.5rem 3rem; } .guidetemplate .anchorlinks { background-color: white; } .anchorlinks li a{ position:relative; transition:padding-left .2s ease; padding-left:0; } .anchorlinks li a::before{ content:""; width:1.8rem; height:1.8rem; border-radius:1.8rem; display:inline-block; top:2px; left:0px; position:absolute; left: -3rem; transition:background-color .2s ease, left .2s ease; } .anchorlinks li.active a, .anchorlinks li:hover a{ padding-left:3rem; } .anchorlinks li.active a::before, .anchorlinks li:hover a::before{ background-color:var(--color-orange); left: 0rem; } .servicelinks li.hidden, .servicelinks .showless{ display:none; } .servicelinks .showmore::after, .servicelinks .showless::after{ background-image:url('//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/images/arrow_drop_down.svg'); content:""; display:inline-block; width:2.4rem; height:1rem; background-repeat:no-repeat; background-position:center; } .servicelinks .showless::after{ transform:rotate(180deg); } .servicelinks a { line-height: 150%; display: initial; transition: box-shadow .3s ease; border-radius: 13rem; box-shadow: inset 0px 0px 0px 14px #fff0, 6px 0px 0px 7px #fff0, -6px 0px 0px 7px #fff0; } .servicelinks a.active-link, .servicelinks a:hover { box-shadow: inset 0px 0px 0px 14px #ffe4da, 6px 0px 0px 7px #ffe4da, -6px 0px 0px 7px #ffe4da; } .overlay-grid{ position:relative; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; width:100%; margin-top:calc(1.5rem + ((1vw - 3.75px) * 1.1494)); -webkit-box-orient:horizontal; -webkit-box-direction:normal; -webkit-flex-direction:row; -ms-flex-direction:row; flex-direction:row; justify-items:start; -webkit-box-align:start; -webkit-align-items:start; -ms-flex-align:start; align-items:start; -webkit-align-content:space-between; -ms-flex-line-pack:justify; align-content:space-between; grid-auto-flow:row; grid-auto-columns:1fr; -ms-grid-columns:1fr 1fr; grid-template-columns:1fr 1fr; -ms-grid-rows:auto auto; grid-template-rows:auto auto; } .tray-container .tag{ font-size:1.4rem; letter-spacing:0.075rem; font-weight:700; text-transform:uppercase; color:var(--color-orange); } .nav-overlay.is_search { opacity:1; left:0; } .is_search .nav-button.contact, .is_search .nav-button.search { display:none !important; } .is_search .nav-overlay > .nav-bar > div:last-of-type, .hs-search-page > nav > .nav-bar > div:last-of-type { width:100%; } .nav-overlay .hs-search-field, .hs-search-page > nav > .nav-bar .hs-search-field { opacity:0; width:0; margin-right:0.5rem; margin-left:0; transition:opacity .3s ease; height:auto; } .nav-overlay .hs-search-field form, .hs-search-page > nav > .nav-bar .hs-search-field form { position:relative; width:100%; } .is_search .hs-search-field, .hs-search-page > nav > .nav-bar .hs-search-field { opacity:1; width:100%; display:flex; } .hs-search-page .hs-search-field { width: 100%; } .nav-search{ display:none; text-align:left; color:var(--color-white); height:100%; min-height: calc(100vh - 8rem); position: relative; padding-top: var(--s-40) } .nav-search-container { width:100%; margin: auto; display: flex; flex-direction: column; align-items: center; max-width: 86.0rem; max-width: calc(34.5rem + (860 - 345) * ((100vw - 375px) / 1305)); } .nav-search-container > div { margin-bottom: var(--s-80); } .hs-search-results__listing { width: 100%; } .hs-search-header, .hs-search-results__pagination { display: flex; justify-content: center; align-items: center; flex-direction: column; } .hs-search-results__pagination { flex-direction: row; } .hs-search-field__result-length, .search-result-length-container { background-color: #FFE4DA; padding: .5rem 1rem; border-radius: 3rem; color: black; width: auto; margin: auto; margin-bottom: var(--s-15); } .hs-search-results__item { display: grid; grid-template-columns: auto 1fr; align-items: baseline; padding: var(--s-15); transition: background-color 300ms ease; border-radius: 1.6rem; margin-bottom: var(--s-30); grid-column-gap: 1.0rem; grid-column-gap: calc(0.5rem + (10 - 5) * ((100vw - 375px) / 1305)); } .hs-search-results__item h2 { margin-bottom: 1.0rem; margin-bottom: calc(0.5rem + (10 - 5) * ((100vw - 375px) / 1305)); } .hs-search-results__item:hover { background-color: black; } .hs-search-results__item > span { width: 1.6rem; height: 1.6rem; background-color: white; display: inline-block; border-radius: 2rem; opacity: 0; transition: opacity 300ms ease; } .hs-search-results__item:hover > span { opacity: 1; } /* search active class */ .is_search .nav-index, .is_search_active .nav-content, .is_search .nav-search{ display:none; } .is_search:not(.is_search_active) .nav-index, .is_search.is_search_active .nav-search, .hs-search-page .nav-search { display:block; } .nav-search-input-container { position: relative; } .nav-search-input-container > span { position: absolute; left: 1.8rem; font-size: 3.6rem; top: 50%; transform: translateY(-50%); z-index: 1; transition: color .3s ease; } .nav-search-input { color: white; display:block; border:none; width: calc(100% - 1rem); font-size:1.8rem; text-align:left; padding-left:6rem; height:4.8rem; box-sizing:border-box; line-height:2.5rem; background-color: #424141; } .nav-search-input::placeholder, .nav-search-input-container > span { color: white; } .nav-search-input:focus, .nav-search-input:hover{ background-color:white; color:black; } .nav-search-input:hover{ color: black; } .nav-search-input:hover::placeholder { color: black; } .nav-search-input:hover ~ span { color: black; } .nav-search-input:focus ~ span { color: black; } [dataclosetray], .close-tray-button { display: none; } @media screen and (max-width:1200px){ .overlaytray [dataCloseTray], .overlaytray .close-tray-button { display: block; } [dataclosetray]:not(button) { display: block; } .overlay-grid.footer{ margin-top:calc(4rem + ((1vw - 3.75px) * 3.0651)); flex-direction:column; } .nav-button.newsletter{ left:0; } .inneroverlay.social{ margin-bottom:calc(1.5rem + ((1vw - 3.75px) * 1.1494)); } .servicelevel .tray-container{ left:-100%; top:0; opacity:0; transition: left 300ms ease 0s , z-Index 0ms linear, opacity 300ms ease; } .overlaytray .servicelevel .tray-container{ left:0; opacity:1; z-index:99995; height: 100vh; } .nav-button.tray-mobile{ display:block; } .tray-top { background-color: var(--color-light-grey); } } @media screen and (max-width:750px){ nav{ font-size:1.6rem; } .nav-bar > div{ padding:1.5rem 0; } .logo{ position:relative; width:auto; height:100%; } .homebutton svg { height:4rem; } .homebutton{ margin-left:1.5rem; } .nav-button.menu, .nav-button.close{ margin-right:1.5rem; } .overlay-content{ padding-top:67px; } .overlay-grid{ flex-direction:column; grid-template-columns:1fr; max-width: 100%; left: 0; padding: 3rem 1.5rem; box-sizing: border-box; } .divider.mobileonly{ display:block; } .tray-container{ max-width:100%; transition:z-Index 0ms ease, opacity 300ms ease, left 300ms ease; } .tray-overlay { display:none; } .servicelevel .tray-container{ transition:z-Index 0ms linear, opacity 300ms ease; } .inneroverlay { padding-right: 0; } .nav-button{ min-width:3.7rem; height:3.7rem; line-height:3.7rem; } .nav-button.search, .homebutton span { display:none; } .nav-button.contact{ display:none; padding: 0 1.4rem; } .nav-button.tray{ margin-left:.5rem; } .nav-button.search{ font-size:2.7rem; } .nav-button.contact.overlay.tray{ display: flex; justify-content: center; align-items: center; padding-left: 1rem; background-color:#fd865d; background-image:none; } .nav-button.close{ font-size: 2.8rem; } .nav-button.menu{ background-size: 75%; } .nav-button.tray{ margin-left:.5rem; padding-right:1.4rem; background-position:1.4rem 50%; letter-spacing:0.8px; } .nav-button.tray.active{ padding-left:3.6rem; } .nav-button.social.twitter{ background-size:1.8rem; margin-left: 0; } .nav-button.social.linkedin{ background-size:1.8rem; } .nav-button.social.facebook{ background-size:1rem; } .nav-button.social.instagram{ background-size:1.8rem; } .nav-button.newsletter{ width:90%; padding-right:16px; padding-left:16px; } .nav-search-input{ height: 3.7rem; font-size: 1.6rem; background-size: 2.7rem; background-position: 1.2rem center; padding-left: 4.7rem; } .overlay-content{ padding-top:6rem; min-height:calc(100vh - 6rem); } .overlay-content .nav-content{ min-height:calc(100vh - 19rem); } .nav-index, .nav-search{ min-height: calc(100vh - 6rem); } .index-divider { max-width: 15px; min-width: 15px; max-width: var(--s-30); min-width: var(--s-30); display: block; } .nav-index-sort{ left:var(--s-30); } .tray-inner > ul:last-child{ padding-bottom: 16rem; } }