/* 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)); /* custom */ --w-1100: calc(35.5rem + ( 745 ) * ((100vw - 375px) / 1305)); --f-24: calc(2.0rem + ( 4 ) * ((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; } main.servicecontainer + footer { border-top: 1px solid #ccc; width: calc(100% - 34rem); padding-left: 34rem; } body:not(.generalform-template) > main.resourcecontainer { padding-top: 8rem; min-height: calc(100vh - 13.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.servicecontainer + footer, 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, sans-serif; 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, sans-serif; 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, sans-serif; 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, sans-serif; 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, sans-serif; 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, sans-serif; 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, sans-serif; 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, sans-serif; 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, sans-serif; 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, sans-serif; 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, sans-serif; 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, sans-serif; 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, sans-serif; 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, sans-serif; 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, sans-serif; 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, sans-serif; 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, sans-serif; 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, sans-serif; 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, sans-serif; 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, sans-serif; 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, sans-serif; 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, sans-serif; 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, sans-serif; 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, sans-serif; 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, sans-serif; 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, sans-serif; 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; 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 */ /*******************/ .bbb-logo { max-height: 5rem; position: absolute; bottom: 6rem; right: 3.0rem; right: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .generalform-template .nav-bar--main .nav-button, .generalform-template .nav-bar--main .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; } .twocolumn .inner.header p { margin-top: 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); box-shadow: none; } .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; color: black; 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: 800px; padding: var(--s-30) 0; display: grid; gap: var(--s-5); justify-items: center; align-items: stretch; align-content: center; } .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; width: 100%; box-sizing: border-box; } .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(5, 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;} } /* 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; background-color: #e3e3e3; 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: flex; justify-content: center; text-align: center; opacity: 1; transition: opacity 0.3s ease; 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)); } /* HTML:
*/ .list-pagination-loader { height: 30px; aspect-ratio: 2.5; --_g: no-repeat radial-gradient(farthest-side,var(--color-orange) 90%,#0000); background: var(--_g), var(--_g), var(--_g), var(--_g); background-size: 20% 50%; animation: l44 1s infinite linear alternate; } .list-pagination-container.s-hidden { opacity: 0; } @keyframes l44 { 0%, 5% {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% } 12.5% {background-position: calc(0*100%/3) 0 ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% } 25% {background-position: calc(0*100%/3) 0 ,calc(1*100%/3) 0 ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% } 37.5% {background-position: calc(0*100%/3) 100%,calc(1*100%/3) 0 ,calc(2*100%/3) 0 ,calc(3*100%/3) 50% } 50% {background-position: calc(0*100%/3) 100%,calc(1*100%/3) 100%,calc(2*100%/3) 0 ,calc(3*100%/3) 0 } 62.5% {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 100%,calc(2*100%/3) 100%,calc(3*100%/3) 0 } 75% {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 100%,calc(3*100%/3) 100%} 87.5% {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 100%} 95%, 100% {background-position: calc(0*100%/3) 50% ,calc(1*100%/3) 50% ,calc(2*100%/3) 50% ,calc(3*100%/3) 50% } } /* 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 > .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)); } } /* 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; } .howitworks button + div { max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; border-bottom: .1rem solid #d1d1d1; } .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: var(--f-24); } .howitworks-accordion button::after { color: #979797; } .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 */ .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)); } /* 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)); } } @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.5rem; border-radius: calc(1.75rem + (35 - 17.5) * ((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); } .servicenav {display: none;} /* 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)); } .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; gap: var(--s-20); } .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-grid; gap: 10px; position: relative; width: 100%; } form.cc-custom-form .hs-form-field.hs-fieldtype-file { width: auto !important; margin-right: var(--s-5); float: none; } .cc-custom-form .hs-fieldtype-text:not(.long-label) label, .cc-custom-form .hs-fieldtype-number:not(.long-label) label, .cc-custom-form .hs-fieldtype-phonenumber:not(.long-label) label, .cc-custom-form .hs-fieldtype-textarea:not(.long-label) label { position: relative; font-weight: 700; color: var(--color-orange); transition: font-size .2s ease, top .2s ease, color .2s ease; z-index: 1; text-align:left; font-size: 1.8rem; font-size: calc(1.4rem + (18 - 14) * ((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, .long-label) label, .cc-custom-form .hs-form-field.selected:not(.hs-fieldtype-textarea, .long-label) label, .cc-custom-form input:focus label, .cc-custom-form input:focus-visible label { color: var(--color-orange); } .cc-custom-form .hs-form-field.selected.hs-fieldtype-textarea:not(.long-label) label, .cc-custom-form .not-empty.hs-fieldtype-textarea:not(.long-label) label{ color: var(--color-orange); } .cc-custom-form .not-empty:not(.hs-fieldtype-textarea, .long-label) label, .cc-custom-form .selected:not(.hs-fieldtype-textarea, .long-label) label { color: var(--color-orange); } .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, .cc-custom-form .hs-form-booleancheckbox { 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, .cc-custom-form .hs-fieldtype-number { margin-top: 10px; } .hs-dependent-field { display: grid; gap: var(--s-20); margin-bottom: 5.0rem; margin-bottom: calc(3.5rem + (50 - 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, .cc-custom-form .hs-form-booleancheckbox label, .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-booleancheckbox input, .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-booleancheckbox span, .cc-custom-form .hs-form-checkbox span, .cc-custom-form .hs-form-radio span { display: flex; align-items: center; } .cc-custom-form .hs-form-booleancheckbox span::before, .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-booleancheckbox label:hover span::before, .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-booleancheckbox input:checked + span::before, .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-booleancheckbox input:checked + span::before, .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, .long-label label { color: var(--color-orange); font-weight: 700; text-align: left; display: block; font-size: 1.8rem; font-size: calc(1.4rem + (18 - 14) * ((100vw - 375px) / 1305)); } .form-pilot { display: flex; min-height: 100vh; } .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; border-top: 2px solid; padding-top: var(--s-30); 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: #EEEEEE; 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)); } .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: var(--f-24); right: 3.0rem; right: calc(1.5rem + (30 - 15) * ((100vw - 375px) / 1305)); } .cc-custom-form .hs-fieldtype-date .input { margin-right: 0 !important; } /* 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) { display: inline-flex; border-left: 1px solid #dadada; justify-content: flex-end; width: auto; gap: 5px; } .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: none; color: #000; } .form-contact-footer.main-footer > div:nth-child(4) { border-color: var(--color-orange); border: none; } .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: 15rem; 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: #EEEEEE; color: black; cursor: pointer; transition: background-color .3s ease, color .3s ease; position: relative; padding: 0; border-radius: 3.5rem; border-radius: calc(1.75rem + (35 - 17.5) * ((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: #EEEEEE; 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.5rem; border-bottom-left-radius: calc(1.75rem + (35 - 17.5) * ((100vw - 375px) / 1305)); border-bottom-right-radius: 3.5rem; border-bottom-right-radius: calc(1.75rem + (35 - 17.5) * ((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(0, 0, 0, 0.1); } .cc-custom-form .select-items div.same-as-selected { color: var(--color-orange); } /*********/ /* 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: #EEEEEE; 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"; position: absolute; font-family: Material Icons; float: right; font-weight: 400; color: var(--color-orange); 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-file input { display: none; } .cc-custom-form .form-small-title-with-border { border-top: 0.2rem solid var(--color-orange); font-weight: 700; 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)); 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); 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)); margin-top: var(--s-30); } .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 .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-number .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-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 .long-label:not(.hs-input, .hs-fieldtype-textarea) .hs-input { padding-top: 0.8rem; padding-top: calc(0.4rem + (8 - 4) * ((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 */ /* 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: var(--w-1100); } @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 */ @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 0px 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 12rem; 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; } #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%; } } .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); } /* Intro topics */ .header h2 { font-weight: 700; } @media only screen and (max-width: 750px) { .blogheader {height: 100%;} .blogheader .inner {display: block; } .blogheader .inner div {width: auto;} } /* 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%); } /* Blog Post Content */ .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; } .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, .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-reply-to, .orange-style .post-comments .replying-to, .orange-style .post-author-tutor__title { 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 .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; } .orange-style .post-author-highlight-container > div a:last-of-type, .orange-style .subscribe-button, .orange-style .post-author-tutor .linkbutton, .orange-style .post-topics a { background-color: #FFE4DA; color: var(--color-orange); } .topicheader.orange h1 { color: #FFE4DA; } .swup-progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 6px; background-color: white; z-index:9999; } .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, .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-reply-to, .brown-style .post-comments .replying-to, .brown-style .post-author-tutor__title { 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 .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; } .brown-style .post-author-highlight-container > div a:last-of-type, .brown-style .subscribe-button, .brown-style .post-author-tutor .linkbutton, .brown-style .post-topics a { background-color: #F1E3DE; color: var(--color-brown); } .topicheader.brown h1 { color: #F1E3DE; } .swup-progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 6px; background-color: white; z-index:9999; } .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, .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-reply-to, .dark-blue-style .post-comments .replying-to, .dark-blue-style .post-author-tutor__title { 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 .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; } .dark-blue-style .post-author-highlight-container > div a:last-of-type, .dark-blue-style .subscribe-button, .dark-blue-style .post-author-tutor .linkbutton, .dark-blue-style .post-topics a { background-color: #D8D9FF; color: var(--color-dark-blue); } .topicheader.dark-blue h1 { color: #D8D9FF; } .swup-progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 6px; background-color: white; z-index:9999; } .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, .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-reply-to, .red-style .post-comments .replying-to, .red-style .post-author-tutor__title { 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 .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; } .red-style .post-author-highlight-container > div a:last-of-type, .red-style .subscribe-button, .red-style .post-author-tutor .linkbutton, .red-style .post-topics a { background-color: #F6DDDF; color: var(--color-red); } .topicheader.red h1 { color: #F6DDDF; } .swup-progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 6px; background-color: white; z-index:9999; } .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, .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-reply-to, .black-style .post-comments .replying-to, .black-style .post-author-tutor__title { color: var(--color-black); } .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; } .swup-progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 6px; background-color: white; z-index:9999; } .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, .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-reply-to, .light-grey-style .post-comments .replying-to, .light-grey-style .post-author-tutor__title { color: var(--color-light-grey); } .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; } .swup-progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 6px; background-color: white; z-index:9999; } .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, .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-reply-to, .white-style .post-comments .replying-to, .white-style .post-author-tutor__title { color: var(--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; } .swup-progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 6px; background-color: white; z-index:9999; } .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, .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-reply-to, .dark-grey-style .post-comments .replying-to, .dark-grey-style .post-author-tutor__title { color: var(--color-dark-grey); } .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; } .swup-progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 6px; background-color: white; z-index:9999; } .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, .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-reply-to, .orange-tint-style .post-comments .replying-to, .orange-tint-style .post-author-tutor__title { color: var(--color-orange-tint); } .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; } .swup-progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 6px; background-color: white; z-index:9999; } .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, .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-reply-to, .green-style .post-comments .replying-to, .green-style .post-author-tutor__title { 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 .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; } .green-style .post-author-highlight-container > div a:last-of-type, .green-style .subscribe-button, .green-style .post-author-tutor .linkbutton, .green-style .post-topics a { background-color: #D3F1DD; color: var(--color-green); } .topicheader.green h1 { color: #D3F1DD; } .swup-progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 6px; background-color: white; z-index:9999; } .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, .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-reply-to, .purple-style .post-comments .replying-to, .purple-style .post-author-tutor__title { 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 .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; } .purple-style .post-author-highlight-container > div a:last-of-type, .purple-style .subscribe-button, .purple-style .post-author-tutor .linkbutton, .purple-style .post-topics a { background-color: #EED8FB; color: var(--color-purple); } .topicheader.purple h1 { color: #EED8FB; } .swup-progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 6px; background-color: white; z-index:9999; } .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, .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-reply-to, .light-blue-style .post-comments .replying-to, .light-blue-style .post-author-tutor__title { 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 .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; } .light-blue-style .post-author-highlight-container > div a:last-of-type, .light-blue-style .subscribe-button, .light-blue-style .post-author-tutor .linkbutton, .light-blue-style .post-topics a { background-color: #DDF5FF; color: var(--color-light-blue); } .topicheader.light-blue h1 { color: #DDF5FF; } .swup-progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 6px; background-color: white; z-index:9999; } .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, .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-reply-to, .blue-style .post-comments .replying-to, .blue-style .post-author-tutor__title { 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 .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; } .blue-style .post-author-highlight-container > div a:last-of-type, .blue-style .subscribe-button, .blue-style .post-author-tutor .linkbutton, .blue-style .post-topics a { background-color: #D8D9FF; color: var(--color-blue); } .topicheader.blue h1 { color: #D8D9FF; } .swup-progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 6px; background-color: white; z-index:9999; } .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, .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-reply-to, .yellow-style .post-comments .replying-to, .yellow-style .post-author-tutor__title { color: var(--color-yellow); } .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; } .swup-progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 6px; background-color: white; z-index:9999; } .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, .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-reply-to, .light-purple-style .post-comments .replying-to, .light-purple-style .post-author-tutor__title { color: var(--color-light-purple); } .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; } .swup-progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 6px; background-color: white; z-index:9999; } .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, .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-reply-to, .pink-style .post-comments .replying-to, .pink-style .post-author-tutor__title { color: var(--color-pink); } .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; } .swup-progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 6px; background-color: white; z-index:9999; } .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, .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-reply-to, .lighter-blue-style .post-comments .replying-to, .lighter-blue-style .post-author-tutor__title { color: var(--color-lighter-blue); } .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; } .swup-progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 6px; background-color: white; z-index:9999; } .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, .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-reply-to, .darker-orange-style .post-comments .replying-to, .darker-orange-style .post-author-tutor__title { color: var(--color-darker-orange); } .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; } .swup-progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 6px; background-color: white; z-index:9999; } .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, .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-reply-to, .grey-style .post-comments .replying-to, .grey-style .post-author-tutor__title { color: var(--color-grey); } .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; } .swup-progress-bar { position: fixed; top: 0; left: 0; width: 100%; height: 6px; background-color: white; z-index:9999; } .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; } /* tools */ /* modules */ nav { width: 100%; position: relative; } nav .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 0.5s, background-color 150ms ease 0.5s, opacity 500ms ease; color: white; z-index: 2; } nav .nav-bar > div { display: grid; grid-auto-flow: column; grid-template-columns: 1fr auto; align-items: center; padding: 1.5rem 0; gap: 5px; } .add-default-nav-color nav .nav-bar { background-color: var(--color-orange); } .add-default-nav-color nav .nav-bar svg g { fill: white; } .add-default-nav-color nav .nav-bar .nav-button:not(:hover) { color: white; background-color: rgba(255, 255, 255, 0.15); } .transparent-navbar:not(.nav-floating) nav .nav-bar { background-color: transparent; box-shadow: none; color: black; } .generalform-template nav .nav-bar { background-color: white; color: black; transition: top 500ms ease, box-shadow 500ms ease 0s, background-color 150ms ease 0.5s, opacity 500ms ease; } .no-boxshadow nav .nav-bar { box-shadow: none; } .proposal-page.nav-floating nav .nav-bar { background-color: var(--color-blue); } .hidenavbar nav .nav-bar { opacity: 1; } nav .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 0.3s; } nav .nav-overlay.is_footer, nav .nav-overlay.is_search { left: 0; opacity: 1; position: relative; } nav .nav-overlay .nav-bar { position: absolute; z-index: 9999; background-color: transparent; } nav .nav-overlay .nav-button { color: white; } nav .nav-overlay .nav-button:hover { color: black; } .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-button { position: relative; display: inline-block; min-width: 5rem; height: 5rem; border-radius: 2.5rem; background-color: rgba(255, 255, 255, 0.5); transition: color 200ms ease, filter 200ms ease 0.5s, background-color 200ms ease, opacity 200ms ease; font-family: Brown, sans-serif; color: black; line-height: 5rem; font-weight: 700; text-align: center; letter-spacing: 0.13rem; cursor: pointer; white-space: nowrap; backdrop-filter: blur(5px); } .nav-button:hover, .nav-button.s-active { background-color: #fff; color: #fd865d; } .navbar-invert-color .nav-button { color: white; background-color: rgba(255, 255, 255, 0.1); } .navbar-invert-color.hs-bloghub-page .nav-bar--main .nav-button { background-color: white; color: var(--color-orange); } .nav-button.subscribe-button:hover, .nav-button.close:hover, .nav-button.search.overlay:hover, .nav-button.contact.overlay: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.menu, .nav-button.close { margin-right: 3rem; } .nav-button.search.overlay, .nav-button.contact.overlay { display: block; } .nav-button.menu { font-size: 4rem; } @media (max-width: 750px) { .nav-button.menu { font-size: 3rem; } } .nav-button.contact, .nav-button.nav-button--text { width: auto; padding-right: 1.8rem; padding-left: 1.8rem; } .nav-button.contact.overlay.tray { display: none; } .nav-button.tray, .nav-button.back { display: flex; width: auto; margin-left: 5px; padding-right: 1.8rem; padding-left: 1rem; } .nav-button.side-menu { display: none; font-size: 3rem; font-family: "Material Icons"; } @media (max-width: 750px) { .nav-button.side-menu { font-size: 2.4rem; } } @media (max-width: 1200px) { .nav-button.side-menu { display: inline-block; } } .servicelevel .nav-button.tray:not(.contact)::before, .nav-button.back::before { content: "navigate_before"; display: block; font-family: "Material Icons"; font-size: 3rem; } @media (max-width: 750px) { .servicelevel .nav-button.tray:not(.contact)::before, .nav-button.back::before { font-size: 2.4rem; left: 0.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.social { background-image: url("//174241.fs1.hubspotusercontent-na1.net/hubfs/174241/raw_assets/public/cc-theme/assets/images/twitter-logo.svg"); } .nav-button.social.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.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.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; } .nav-button.newsletter { margin-left: 3rem; display: flex; align-items: center; } .homebutton { margin-left: 3rem; display: flex; align-items: center; } .homebutton svg, .homebutton img { height: 5rem; max-width: initial; min-width: auto; } .homebutton svg g { fill: black; transition: fill 0.2s ease; } .navbar-invert-color .homebutton svg g { fill: white !important; } .homebutton span { display: inline-block; float: right; letter-spacing: 1.3px; font-size: 1.8rem; margin-left: 1.5rem; transition: color 0.2s ease; } .navbar-invert-color .homebutton span { color: white !important; } body:not(.transparent-navbar, .add-default-nav-color) .logo g { fill: var(--color-orange); } body:not(.transparent-navbar, .add-default-nav-color) .nav-bar--main .nav-button { background-color: var(--color-orange-tint); color: black; } body:not(.transparent-navbar, .add-default-nav-color) .nav-bar--main .nav-button.nav-button--blog-topics { background-color: var(--color-orange-tint); color: black; } .s-topiclist { overflow: hidden; } .topic-list { position: fixed; top: 0; left: 0; right: 0; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 0.3s ease 0s, visibility 0s linear 0.3s; max-height: 100vh; overflow-y: auto; } .s-topiclist .topic-list { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.3s ease 0s, visibility 0s linear 0s; } .topic-list .topic-list__overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; background-color: #E8E8E8; opacity: 0.5; } .topic-list .topic-list__show-more { font-size: 16px; } .topic-list strong.text-attribute { text-transform: uppercase; font-weight: 700; } .topic-list .topic-list__left, .topic-list .topic-list__right { display: grid; gap: 20px; justify-items: start; grid-auto-rows: min-content; } @media (max-width: 750px) { .topic-list .topic-list__left, .topic-list .topic-list__right { grid-column: 1/3; } } .topic-list .topic-list__list { display: flex; row-gap: var(--s-10); column-gap: var(--s-10); align-items: start; flex-flow: row wrap; } .topic-list .topic-list__list li { display: flex; } .topic-list .topic-list__list li.topic-list__item-hidden { display: none; } .s-showmoretopics .topic-list .topic-list__list li.topic-list__item-hidden { display: flex !important; } .topic-list .topic-list__list li a { padding: var(--s-15); font-family: "Brown"; line-height: 100%; color: var(--color-blue); background: rgba(70, 80, 247, 0.09); border-radius: var(--s-40); text-transform: capitalize; font-size: calc(1.4rem + 4 * (100vw - 375px) / 1305); } .topic-list > div { width: 100%; } .topic-list__content { display: flex; align-items: center; justify-content: center; background-color: white; padding-top: calc(8rem + var(--s-30)); padding-bottom: var(--s-60); width: auto; } .topic-list__content-inner { display: grid; grid-template-columns: 1.5fr 1fr; row-gap: var(--s-30); column-gap: var(--s-100); padding: 0 var(--s-30); max-width: 1440px; width: 100%; } @media (max-width: 750px) { .topic-list__content-inner { gap: var(--s-50); grid-template-columns: 1fr; } } .topic-list__center { grid-column: 1/3; display: flex; flex-flow: column; align-items: center; } .topic-list__center button[type=submit] { display: none; } .topic-list__center.hs-search-field--open button[type=submit] { display: block; } .topic-list__center.hs-search-field--open ~ .topic-list__right, .topic-list__center.hs-search-field--open ~ .topic-list__left { display: none; } .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 0.2s ease, color 0.2s ease; } [dataclosetray], .close-tray-button, [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: flex; gap: 10px; 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; } .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 0 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 0.3s ease; transition: opacity 0.3s ease, left 0s linear 0.3s; cursor: pointer; } .servicelevel .hide .tray-inner ul:first-child { padding-top: 0; } .tray-inner .servicelinks > ul { margin-bottom: 1.75rem; } .tray-inner > ul { line-height: 3.5rem; } .tray-inner > ul:last-child { padding: 1.75rem 3rem 3rem 3rem; } .tray-top { display: flex; justify-content: space-between; padding: 1.8rem 3rem 0rem 3rem; } .guidetemplate .anchorlinks { background-color: white; } .anchorlinks { background-color: var(--color-light-grey); padding: 1.5rem 3rem; } .anchorlinks li.active a, .anchorlinks li:hover a { padding-left: 3rem; } .anchorlinks li.active a::before, .anchorlinks li.active a::before, .anchorlinks li:hover a::before, .anchorlinks li:hover a::before { background-color: var(--color-orange); left: 0rem; } .anchorlinks li a { position: relative; transition: padding-left 0.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 0.2s ease, left 0.2s ease; } .servicelinks a { line-height: 150%; display: initial; transition: box-shadow 0.3s ease; border-radius: 13rem; box-shadow: inset 0px 0px 0px 14px rgba(255, 255, 255, 0), 6px 0px 0px 7px rgba(255, 255, 255, 0), -6px 0px 0px 7px rgba(255, 255, 255, 0); box-decoration-break: clone; -webkit-box-decoration-break: clone; } .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; } .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); } .overlay-grid { position: relative; display: flex; width: 100%; margin-top: calc(1.5rem + (1vw - 3.75px) * 1.1494); flex-direction: row; justify-items: 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; grid-template-columns: 1fr 1fr; 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); } .is_search .nav-button.contact, .is_search .nav-button.search { display: none !important; } .is_search .nav-overlay > .nav-bar > div:last-of-type { width: 100%; } .nav-overlay .hs-search-field { opacity: 0; width: 0; margin-right: 0.5rem; margin-left: 0; transition: opacity 0.3s ease; height: auto; } .nav-overlay .hs-search-field form { position: relative; width: 100%; } .is_search .hs-search-field { opacity: 1; width: 100%; display: flex; } .nav-search { display: none; text-align: left; 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: calc(34.5rem + 515 * (100vw - 375px) / 1305); } .nav-search-container > div { margin-bottom: var(--s-80); } .hs-search-results__listing { width: 100%; margin: auto; } .hs-search-results__listing.loading + .hs-search-results__loader { opacity: 1; visibility: visible; } .hs-search-results__loader { width: 15px; aspect-ratio: 1; border-radius: 50%; animation: l5 1s infinite linear alternate; opacity: 0; visibility: hidden; pointer-events: none; position: relative; margin: 50px auto; } @keyframes l5 { 0% { box-shadow: 20px 0 #000, -20px 0 rgba(0, 0, 0, 0.1333333333); background: #000; } 33% { box-shadow: 20px 0 #000, -20px 0 rgba(0, 0, 0, 0.1333333333); background: rgba(0, 0, 0, 0.1333333333); } 66% { box-shadow: 20px 0 rgba(0, 0, 0, 0.1333333333), -20px 0 #000; background: rgba(0, 0, 0, 0.1333333333); } 100% { box-shadow: 20px 0 rgba(0, 0, 0, 0.1333333333), -20px 0 #000; background: #000; } } .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: 0.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: calc(0.5rem + 5 * (100vw - 375px) / 1305); } .hs-search-results__item h2 { margin-bottom: calc(0.5rem + 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 { 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: auto; transition: color 0.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:focus, .nav-search-input:hover { background-color: white; color: black; } .nav-search-input:hover ~ span, .nav-search-input:focus ~ span, .nav-search-input:hover::placeholder, .nav-search-input:hover { color: black; } .cc-search-container { display: grid; gap: var(--s-30); width: 100%; } .cc-search-container .hide-submit-button { max-width: 1400px; width: 100%; margin: auto; } .cc-search-container .hide-submit-button button { display: none; } .cc-search-container[nosuggestions] { max-width: 1400px; width: 100%; margin: auto; margin-bottom: var(--s-30); } .cc-search-container[nosuggestions] button, .cc-search-container[nosuggestions] .hs-search-field__suggestions { display: none; } .cc-search-container .nav-search-input { background-color: white; color: black; border: 1px solid rgba(0, 0, 0, 0.462); } .cc-search-container .nav-search-input > span { color: black; } .cc-search-container .nav-search-input::placeholder, .cc-search-container .nav-search-input-container > span { color: black; } .nav-search-input::placeholder, .nav-search-input-container > span { color: white; } /* The dropdown container */ .nav-dropdown { overflow: hidden; } /* Dropdown content (hidden by default) */ .nav-dropdown-content { display: none; position: absolute; margin-top: 5px; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; border-radius: 2.5rem; font-family: Brown, sans-serif; font-weight: 700; text-align: left; letter-spacing: 0.13rem; padding: 5px; /* Links inside the dropdown */ } .nav-dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; border-radius: 2.5rem; transition: background-color 0.2s ease; } .nav-dropdown-content a:hover { background-color: var(--color-light-grey); } .nav-button--dropdown { display: flex; align-items: center; } .nav-button--dropdown::after { display: block; content: "keyboard_arrow_down"; font-family: "Material Icons"; } .nav-button--dropdown.s-active.s-active + .nav-dropdown-content { display: block; } .nav-button--dropdown.s-active::after { content: "keyboard_arrow_up"; } @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:not(.nav-button--blog-topics) { display: none; padding: 0 1.4rem; } .nav-button.tray { margin-left: 0.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: 0.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; } } main.servicecontainer.servicecontainer--topic { width: 100%; padding-left: 0; } .servicelinks__subtitle { color: #B3B2B1; text-transform: uppercase; font-size: 15px; } .session-header .inner { align-items: flex-start; width: var(--w-1070); margin: auto; padding-bottom: 0; } .topic-collection .inner { align-items: flex-start; width: var(--w-1070); margin: auto; display: grid; gap: var(--s-20); position: relative; padding: var(--s-30); padding-top: var(--s-60); } .topic-collection .inner .session-topics-list { padding-top: var(--s-15); } .topic-collection .inner .session-topic-list-item { width: 100%; padding-top: 10px; border-top: 1px solid var(--color-orange); margin-bottom: var(--s-80); } @media only screen and (max-width: 960px) { .topic-collection .inner .session-topic-list-item { grid-template-columns: auto; } } .session-topics-list { display: flex; flex-flow: row wrap; gap: var(--s-15); padding-top: var(--s-80); } .session .inner { padding-top: var(--s-60); } .session-topics { display: flex; flex-flow: column; gap: var(--s-5); } .session-topics > ul { display: flex; flex-flow: row wrap; gap: var(--s-5); } .session-topics > p { text-transform: uppercase; color: black; } .session-topics.h-4 { margin: auto; } .session-topics .linkbutton, .session-topics span { color: black; } .session-topics span { padding: var(--s-15) var(--s-30); border-radius: var(--s-80); } .session-topics.session-topics__examarea .linkbutton, .session-topics.session-topics__examarea span { background: #FFBB96; } .session-topics.session-topics__topic .linkbutton, .session-topics.session-topics__topic span { background: #FFE4DA; } .session-topics.session-topics__subtopic .linkbutton, .session-topics.session-topics__subtopic span { background: rgba(214, 211, 201, 0.436141); } .topic-search-overlay { display: none; position: fixed; background-color: white; z-index: 9; overflow: scroll; top: 7.9rem; bottom: 0; left: 0; right: 0; } .topic-search-overlay .inner { display: grid; grid-template-columns: 1fr; align-items: start; justify-content: flex-start; gap: var(--s-60); } .topic-search-overlay .inner > div { display: flex; flex-flow: column; gap: var(--s-5); } .topic-search-overlay .inner > div > ul { display: flex; flex-flow: wrap; gap: var(--s-10); } .dashboard { display: block; } .dashboard .homebutton { color: var(--color-orange); margin: 0; } .dashboard .homebutton g { fill: var(--color-orange); } .dashboard .dashboard__mobile { position: fixed; top: 0; right: 0; left: 0; z-index: 9; padding: 20px; background: white; justify-content: space-between; border-bottom: 1px solid #F1F1F1; display: none; } @media only screen and (max-width: 900px) { .dashboard .dashboard__mobile { display: flex; } } .dashboard .dashboard__mobile .nav-button { color: white; background-color: var(--color-orange); margin-right: 0; } .dashboard.s-menu-active .dashboard__sidenav { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.2s ease, visibility 0s linear 0s, transform 0.2s ease; transform: translateY(0); } .dashboard .dashboard__sidenav { width: 320px; border-right: 1px solid #F1F1F1; padding: 20px 30px; box-sizing: border-box; position: fixed; left: 0; top: 0; bottom: 0; overflow-y: scroll; overflow-x: hidden; display: grid; grid-template-rows: auto auto auto 1fr; scrollbar-width: none; } @media only screen and (max-width: 900px) { .dashboard .dashboard__sidenav { width: 100%; right: 0; border-right: none; background: white; z-index: 9; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s; transform: translateY(30px); } } .dashboard .dashboard__sidenav .dashboard__sidenav__logo { margin-bottom: 70px; } .dashboard .dashboard__sidenav .dashboard__sidenav__profile { display: grid; justify-items: center; margin-bottom: 30px; text-align: center; word-break: break-all; } .dashboard .dashboard__sidenav .dashboard__sidenav__profile img { border-radius: 100px; width: 50px; height: 50px; background-color: var(--color-lighgrey); } .dashboard .dashboard__sidenav .dashboard__sidenav__links { display: grid; gap: 5px; } .dashboard .dashboard__sidenav .dashboard__sidenav__links + .dashboard__sidenav__link-item { align-self: end; } .dashboard .dashboard__sidenav .dashboard__sidenav__links__sub { visibility: hidden; height: 0; overflow: hidden; transition: height 0.2s ease; padding-left: 25px; display: grid; } .dashboard .dashboard__sidenav .dashboard__sidenav__links__sub.s-active { visibility: visible; height: auto; transition: height 0.2s ease; overflow: visible; } .dashboard .dashboard__sidenav .dashboard__sidenav__link-item, .dashboard .dashboard__sidenav .dashboard__sidenav__link-item--sub { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; justify-items: flex-start; min-height: 50px; padding: 0 15px; font-size: 16px; font-weight: 400; font-family: "Brown"; border-radius: 25px; transition: background-color 0.2s ease; margin: 0 -15px; } .dashboard .dashboard__sidenav .dashboard__sidenav__link-item.s-active, .dashboard .dashboard__sidenav .dashboard__sidenav__link-item:hover, .dashboard .dashboard__sidenav .dashboard__sidenav__link-item--sub.s-active, .dashboard .dashboard__sidenav .dashboard__sidenav__link-item--sub:hover { background-color: #F5F5F5; } .dashboard .dashboard__sidenav .dashboard__sidenav__link-item.s-active + .dashboard__sidenav__links__sub, .dashboard .dashboard__sidenav .dashboard__sidenav__link-item--sub.s-active + .dashboard__sidenav__links__sub { visibility: visible; height: auto; overflow: visible; } .dashboard .dashboard__sidenav .dashboard__sidenav__link-item--sub { padding-left: 20px; } .dashboard .dashboard__topnav { display: block; position: sticky; text-align: center; top: 0; padding: var(--s-15) var(--s-30); border-bottom: 1px solid #F1F1F1; background-color: white; margin-left: 320px; z-index: 2; } @media (max-width: 900px) { .dashboard .dashboard__topnav { margin-left: 0; margin-top: 90px; top: 90px; } } @media (max-width: 750px) { .dashboard .dashboard__topnav { margin-top: 80px; top: 80px; } } .dashboard .dashboard__content { width: auto; padding-left: 320px; min-height: 100vh; display: grid; align-content: space-between; } @media only screen and (max-width: 900px) { .dashboard .dashboard__content { padding-left: 0px; } } .dashboard .dashboard__content [data-aos=fade] { opacity: 1 !important; } .dashboard .dashboard__content [data-dashboard-content="1"] .hs_cos_wrapper_widget .inner { max-width: var(--w-1140); margin: auto; } @media only screen and (max-width: 900px) { .dashboard .dashboard__content [data-dashboard-content="1"] .hs_cos_wrapper_widget .inner { max-width: 100%; } } .dashboard .dashboard__content [data-dashboard-content] { opacity: 0; visibility: hidden; pointer-events: none; height: 0; transition: opacity 0.2s ease, visibility 0s linear 0.2s, height 0s linear 0.2s; overflow: hidden; } .dashboard .dashboard__content [data-dashboard-content].s-active { opacity: 1; visibility: visible; pointer-events: auto; height: 100%; transition: opacity 0.4s ease, visibility 0s linear 0s, height 0s linear 0s; } .dashboard .dashboard__content [data-dashboard-content] > div:first-of-type .inner { padding-top: 0; margin-top: 0; } .dashboard .dashboard__content .dashboard__content__inner { padding: var(--s-60); } @media only screen and (max-width: 900px) { .dashboard .dashboard__content .dashboard__content__inner { padding: var(--s-80) var(--s-60); } } .dashboard .dashboard__content .dashboard__resources--loader { display: block; text-align: center; } .dashboard .dashboard__content .dashboard__resources--loader ~ .dashboard__resources { display: none; } .dashboard .dashboard__content .dashboard__resources { display: grid; gap: 24px; max-width: 750px; margin: auto; transform: translateX(0); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s; position: relative; } .dashboard .dashboard__content .dashboard__resources h2 { display: flex; align-items: center; justify-content: center; } .dashboard .dashboard__content .dashboard__resources__back-button { position: absolute; left: 0; } .dashboard .dashboard__content .dashboard__resources[data-category-page=all].s-hidden { transform: translateX(-50px); } .dashboard .dashboard__content .dashboard__resources.s-hidding { opacity: 0; position: relative; transform: translateX(50px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s; } .dashboard .dashboard__content .dashboard__resources.s-hidding[data-category-page=all] { transform: translateX(-50px); } .dashboard .dashboard__content .dashboard__resources.s-hidden { opacity: 0; visibility: hidden; pointer-events: none; position: absolute; top: 0; transform: translateX(50px); } .dashboard .dashboard__content .dashboard__resources.s-hidden[data-category-page=all] { transform: translateX(-50px); } .dashboard .dashboard__content .dashboard__resources__item, .dashboard .dashboard__content .dashboard__resources__category-item { display: grid; grid-auto-flow: column; justify-content: start; align-items: center; border-radius: var(--s-20); padding: var(--s-30); background-color: #FEE9E2; transition: opacity 0.3s ease; gap: var(--s-30); } .dashboard .dashboard__content .dashboard__resources__item:hover, .dashboard .dashboard__content .dashboard__resources__category-item:hover { opacity: 0.75; } .dashboard .dashboard__content .dashboard__resources__item::before, .dashboard .dashboard__content .dashboard__resources__category-item::before { content: attr(data-icon-content); font-family: Material Icons; background-color: #FFF3EE; border-radius: var(--s-10); font-size: 40px; padding: 5px; font-weight: 400; } .dashboard .dashboard__content .dashboard__resources__category-item { background-color: #f5f5f5; justify-content: space-between; } .dashboard .dashboard__content .dashboard__resources__category-item::before { content: none; } .dashboard .dashboard__content .dashboard__resources__category-item::after { content: "arrow_forward"; background-color: transparent; font-family: Material Icons; border-radius: var(--s-10); font-size: 40px; padding: 5px; font-weight: 400; } .dashboard form .hs-main-font-element .hs-richtext { margin-bottom: 30px; display: grid; gap: 20px; } .dashboard form > div:nth-child(1), .dashboard form > div:nth-child(2), .dashboard form .hs_email, .dashboard form .hs_most_recent_availability_update { display: none; } .dashboard .dnd-dashboard .dnd-column { display: grid; gap: var(--s-60); } .dashboard .pdfviewer .pdf-controls { position: fixed; bottom: 0; left: 320px; right: 0; padding: 15px 30px; background: white; z-index: 9; width: auto; border-top: 1px solid #F1F1F1; } .dashboard .pdfviewer .pdf-controls button { color: white; background: var(--color-orange); } /* system pages */ .body-container-wrapper { display: flex; flex-direction: column; width: 100%; min-height: calc(100vh - 8rem); padding-top: 10rem; justify-content: center; margin: auto; align-items: center; width: var(--w-745); } .systems-page { width: 100%; display: grid; gap: var(--s-40); } .systems-page .simpleheader .inner { padding: 0; } .systems-page form { display: grid; row-gap: var(--s-10); max-width: 420px; width: 100%; margin: auto; } .systems-page #hs-register-widget-email { margin-bottom: var(--s-30); } .systems-page .hs-form-field { display: flex; position: relative; } .systems-page .hs-form-field > label:not([for=hs-login-widget-remember]) { display: none; } .systems-page .hs-login-widget-show-password, .systems-page .hs-register-widget-show-password, .systems-page .hs-reset-widget-show-password { font-size: 0; position: absolute; top: 50%; transform: translateY(-50%); right: var(--s-15); } .systems-page .hs-login-widget-show-password::after, .systems-page .hs-register-widget-show-password::after, .systems-page .hs-reset-widget-show-password::after { content: "visibility"; display: block; font-family: Material Icons; font-size: 22px; color: black; } .systems-page input.hs-input[type=password], .systems-page input.hs-input[type=text], .systems-page input.hs-input[type=email] { font-family: "Brown"; font-weight: 700; color: black; border: none; padding: 0; margin: 0; width: 100%; line-height: 100%; font-size: 18px; padding: var(--s-15) var(--s-30); border-radius: 100px; background: var(--color-light-grey); } [data-export-table] { display: grid; gap: 1px; background: lightgrey; font-size: 16px; } [data-export-table] > div { background: white; padding: 10px 0; } .linkbutton--small { font-size: 16px; align-self: end; } .linkbutton--extra-small { font-size: 16px; padding: 7.5px 15px; } .wrapper { display: grid; align-content: flex-start; padding-top: 120px; background-color: #E7EBF0; } .wrapper.school_header { padding-left: 20px; padding-right: 20px; } .wrapper:not(:first-of-type) { padding-top: 30px; } .wrapper.wrapper--prompt { min-height: 100vh; padding-bottom: 120px; } .wrapper.wrapper--tool { gap: 20px; height: calc(100vh - 100px); overflow: hidden; } .wrapper.wrapper--tool.wrapper--prompt { height: 100%; } .wrapper.wrapper--tool:not(.wrapper--prompt) > div { height: auto; position: relative; width: 100%; max-height: calc(100vh - 268px); } .wrapper.wrapper--tool .filter_header { display: flex; flex-flow: row wrap; column-gap: 10px; row-gap: 20px; justify-content: flex-start; padding: 0 20px; } .wrapper.wrapper--tool .filter_header .filter_header__actions { display: grid; grid-auto-flow: column; justify-content: start; gap: 10px; position: fixed; bottom: 0; z-index: 9; background: white; padding: 20px; right: 0; left: 0; border-top: 1px solid rgb(224, 224, 224); overflow: scroll; } .wrapper.wrapper--tool .filter_header .filter_header__actions > button { white-space: nowrap; } .hidenavbar .wrapper.wrapper--tool:not(.wrapper--prompt) { height: calc(100vh - 20px); } .tablewrapper { background-color: white; } .filter_header fieldset { display: inline-grid; gap: 5px; } .filter_header fieldset label { font-weight: 700; font-size: 14px; display: grid; grid-auto-flow: column; align-items: flex-start; justify-content: flex-start; gap: 5px; } .val-multiselect { background: #e8e8e8; border-radius: 30px; padding: 5px 10px; } .extra-cell-space { display: none; position: absolute; z-index: 9999; background: white; text-align: center; padding: 21px 16px; white-space: nowrap; border-bottom: 1px solid rgb(224, 224, 224); max-width: 350px; box-sizing: border-box; box-shadow: inset -1px 0 0 rgb(224, 224, 224), 0 0 5px 3px rgb(224, 224, 224); height: auto; width: 350px; white-space: initial; font-size: 14px; } .table-bar { background: white; border: 1px solid rgb(224, 224, 224); border-radius: 5px; padding: 15px 0px; margin-bottom: -15px; } .table-bar .table-bar__button { position: relative; display: grid; padding-left: 50px; font-size: 14px; font-weight: 700; } .row-checkbox, .savedata__item input[type=checkbox] { width: 0; height: 0; margin: 0; } .row-checkbox:hover::before, .savedata__item input[type=checkbox]:hover::before { border-radius: 50px; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.0588235294); background-color: rgba(0, 0, 0, 0.0588235294); } .row-checkbox::before, .savedata__item input[type=checkbox]::before { cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); left: 10px; padding: 5px; transition: all 300ms ease; font-weight: 400; content: "check_box_outline_blank"; font-family: "Material Icons"; display: block; font-size: 20px; } .selected .row-checkbox::before, .savedata__item input[type=checkbox]:checked::before { content: "check_box"; } .partial .row-checkbox::before { content: "indeterminate_check_box"; } .table-tool { border-collapse: collapse; border-spacing: 0; width: 100%; font-size: 14px; } .table-tool thead { position: sticky; top: 0; background: white; z-index: 1; } .table-tool thead .tr-cat { text-transform: uppercase; } .table-tool thead .tr-cat th:first-of-type { padding-left: 20px; } .table-tool thead .tr-cat th:not(:first-of-type) { position: relative; } .table-tool thead .tr-cat th:not(:first-of-type) span { position: absolute; left: 0; top: 50%; transform: translateY(-50%); will-change: transform; padding: 0 20px; } .table-tool th { font-weight: 700; position: relative; background-color: #f5f5f5 !important; } .table-tool th > div { display: grid; } .table-tool th[data-sort] { padding-right: 30px; } .table-tool th[data-sort]::after { font-family: "Material Icons"; font-size: 20px; display: block; position: absolute; content: "unfold_more"; right: 5px; top: 50%; transform: translateY(-50%); } .table-tool th[data-sort=asc]::after { content: "expand_less"; } .table-tool th[data-sort=desc]::after { content: "expand_more"; } .table-tool th[data-state-in-out] { min-width: 250px; width: 100%; white-space: normal; } .table-tool th, .table-tool td { text-align: center; padding: 14px; white-space: nowrap; text-overflow: ellipsis; max-width: 350px; height: 55px; vertical-align: middle; box-sizing: border-box; box-shadow: inset -1px 0 0 rgb(224, 224, 224), inset 0px -1px 0 rgb(224, 224, 224); overflow: hidden; } .table-tool th:first-of-type, .table-tool td:first-of-type { text-align: left; position: sticky; left: 0; background: white; transition: background 0.2s ease; min-width: 450px; text-overflow: initial; white-space: initial; z-index: 1; padding-left: 50px; } .table-tool [data-sort-numerical] { height: auto; white-space: initial; min-width: 200px; } tr { cursor: pointer; } #exporttable:disabled { background-color: #ccc; cursor: default; } #exporttable span { margin-left: 5px; } #exporttable:disabled span { display: none; } .export-bar { position: fixed !important; display: flex; flex-direction: column; bottom: 0; left: 0; right: 0; padding: 15px 60px; background-color: white; z-index: 3; opacity: 0; pointer-events: none; bottom: -100px; transition: bottom 0.2s ease, opacity 0.2s ease; box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.3215686275); } .table-tool th:first-of-type { z-index: 2; } .list-isotope, .isotope-school-filter { height: auto !important; } .table-tool tbody tr, .isotope-school-filter__item { transition: background 0.2s ease; position: relative !important; top: auto !important; left: auto !important; z-index: 0; } .table-tool tbody tr:hover { background: #f5f5f5; } .table-tool tbody tr:hover td:first-of-type { background: #f5f5f5; } /* tr:nth-child(even) { background-color: #f2f2f2 } */ [id^=mcat-res-] span, [id^=gpa-res-] span { border-radius: 30px; padding: 7px 15px; } @-webkit-keyframes moving-gradient { 0% { background-position: -250px 0; } 100% { background-position: 250px 0; } } .loading-table th::before, .loading-table td::before { display: block; width: 100%; content: ""; height: 19.5px; background: linear-gradient(to right, #eee 20%, #ddd 50%, #eee 80%); background-size: 500px 100px; animation-name: moving-gradient; animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: linear; animation-fill-mode: forwards; } .loading-table th:first-of-type, .loading-table td:first-of-type { width: 110px; } .loading-table th:nth-child(2), .loading-table td:nth-child(2) { width: 76px; } .loading-table th:nth-child(3), .loading-table td:nth-child(3) { width: 63px; } .cc-input { border: 0; padding: 15px 20px; border-radius: 30px; font-size: 16px; } .cc-input.cc-input--school-search { border: 2px solid var(--color-grey); border-radius: 10px; width: 100%; box-sizing: border-box; margin-bottom: -12px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; position: relative; z-index: 1; } /* Tooltip container */ .label__tooltip { position: relative; display: inline-block; /* Tooltip text */ /* Show the tooltip text when you mouse over the tooltip container */ } .label__tooltip span { font-size: 16px; color: grey; } .label__tooltip div { visibility: hidden; width: 300px; background-color: #555; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; /* Position the tooltip text */ position: absolute; z-index: 1; top: 0; left: 130%; z-index: 99; /* Fade in tooltip */ opacity: 0; transition: opacity 0.3s; } .label__tooltip:hover div { visibility: visible; opacity: 1; } /* The Modal (background) */ .filtermodal { display: block; position: fixed; z-index: 999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.4); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .filtermodal.s-active { opacity: 1; pointer-events: auto; } .filtermodal[data-current-modal=extra] .filtermodal__wrapper--extra, .filtermodal[data-current-modal=filter] .filtermodal__wrapper--filter, .filtermodal[data-current-modal=export] .filtermodal__wrapper--export, .filtermodal[data-current-modal=export-success] .filtermodal__wrapper--export-success, .filtermodal[data-current-modal=input-error] .filtermodal__wrapper--input-error, .filtermodal[data-current-modal=preview] .filtermodal__wrapper--preview, .filtermodal[data-current-modal=edit-view] .filtermodal__wrapper--edit-view { display: grid; } .filtermodal .filtermodal__wrapper--extra .filtermodal__inner { text-align: center; padding: 30px 0 0; gap: 30px; background-color: white; position: sticky; top: 0; border-bottom: 1px solid lightgray; z-index: 1; margin-bottom: -1px; } .filtermodal .filtermodal__wrapper--preview .row-item { position: relative; display: grid; gap: 10px; } .filtermodal__wrapper--preview { min-width: 700px !important; } .modal-preview__table { text-align: left; border: 1px solid rgb(224, 224, 224); border-radius: 5px; background-color: white; font-size: 14px; } .modal-preview__table tr.tr-preview { display: grid; grid-template-columns: 1fr 1fr; } .modal-preview__table tr.tr-preview-header th { text-align: center; } .modal-preview__table tr td { display: block !important; } .modal-preview__table tr th { font-weight: 700; position: relative; background-color: #f5f5f5 !important; } .modal-preview__table tr th, .modal-preview__table tr td { padding: 15px; box-shadow: inset -1px 0 0 rgb(224, 224, 224), inset 0px -1px 0 rgb(224, 224, 224); } .filtermodal__outer { top: 50%; transform: translate(-50%, -50%); position: absolute; left: 50%; background-color: #fff; border-radius: 30px; overflow: hidden; } .filtermodal__loader { position: absolute; width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; background-color: #ffffff; z-index: 9; display: flex; align-items: center; justify-content: center; top: 0; } .filtermodal__loader.s-active { opacity: 1; pointer-events: auto; } .filtermodal__loader::before { content: ""; display: block; height: 30px; aspect-ratio: 2.5; --_g: no-repeat radial-gradient(farthest-side,#000 90%,#0000); background: var(--_g), var(--_g), var(--_g), var(--_g); background-size: 20% 50%; animation: l43 1s infinite linear; } @keyframes l43 { 0% { background-position: 0% 50%, 33.3333333333% 50%, 66.6666666667% 50%, 100% 50%; } 16.67% { background-position: 0% 0, 33.3333333333% 50%, 66.6666666667% 50%, 100% 50%; } 33.33% { background-position: 0% 100%, 33.3333333333% 0, 66.6666666667% 50%, 100% 50%; } 50% { background-position: 0% 50%, 33.3333333333% 100%, 66.6666666667% 0, 100% 50%; } 66.67% { background-position: 0% 50%, 33.3333333333% 50%, 66.6666666667% 100%, 100% 0; } 83.33% { background-position: 0% 50%, 33.3333333333% 50%, 66.6666666667% 50%, 100% 100%; } 100% { background-position: 0% 50%, 33.3333333333% 50%, 66.6666666667% 50%, 100% 50%; } } /* Modal Content/Box */ .filtermodal__wrapper { width: 100%; max-width: 500px; position: relative; max-height: 80dvh; display: none; overflow: overlay; scrollbar-width: auto; scrollbar-color: #dadada transparent; } .filtermodal__wrapper.filtermodal__wrapper--confirmation { position: absolute; z-index: 9; background: #ffffff; width: 100%; height: 100%; justify-content: center; justify-items: center; align-content: center; gap: 30px 40px; display: grid; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; padding: 30px; box-sizing: border-box; text-align: center; } .filtermodal__wrapper.filtermodal__wrapper--confirmation > div { display: flex; flex-flow: row wrap; gap: 10px; } .filtermodal__wrapper.filtermodal__wrapper--confirmation.s-active { opacity: 1; pointer-events: auto; } /* The Close Button */ .filtermodal__close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .filtermodal__close:focus, .filtermodal__close:hover { color: black; text-decoration: none; cursor: pointer; } .filtermodal__inner { display: grid; grid-template-columns: 1fr; gap: 40px; padding: 30px; } .filtermodal_actions { position: sticky; bottom: 0; padding: 20px 30px; padding-top: 15px; background: white; border-top: 2px solid var(--color-grey); z-index: 3; text-align: right; } .filtermodal__filter { display: flex; flex-flow: column; gap: 10px; } .filtermodal__filter label { position: relative; padding: 10px 7px 10px 30px; cursor: pointer; } .filtermodal__filter input:not(.cc-input) { font-family: "Material Icons"; width: 0; height: 0; font-size: 20px; margin: 0; position: absolute; left: 0px; top: 50%; } .filtermodal__filter input:not(.cc-input)::before { content: "check_box_outline_blank"; position: absolute; top: 50%; transform: translateY(-50%); left: 0; } .filtermodal__filter input:not(.cc-input):checked::before { content: "check_box"; } .filtermodal__filter .filtermodal__filter-group { display: grid; grid-template-columns: 1fr 1fr; justify-items: flex-start; overflow: overlay; overflow-x: hidden; } .filtermodal__filter .filtermodal__filter-group.filtermodal__filter-group--no-max { max-height: none !important; } .filtermodal__filter .filtermodal__filter-group.filtermodal__filter-group--list { border: 2px solid var(--color-grey); padding: 5px 0px; border-radius: 10px; max-height: 200px; overflow: scroll; overflow-x: hidden; grid-template-columns: 1fr; } .filtermodal__filter .filtermodal__filter-group.filtermodal__filter-group--list input:not(.cc-input) { left: 10px; } .filtermodal__filter .filtermodal__filter-group.filtermodal__filter-group--list label { width: 100%; transition: background-color 0.2s ease; box-sizing: border-box; padding: 10px 7px 10px 40px; } .filtermodal__filter .filtermodal__filter-group.filtermodal__filter-group--list label:hover { background-color: #ebebeb; } .filtermodal__filter .filtermodal__filter-group.filtermodal__filter-group--list.isotope-school-filter { border-top-left-radius: 0px; border-top-right-radius: 0px; max-height: 350px; } .savedata__list { display: grid; overflow: hidden; min-height: 250px; align-items: start; grid-auto-rows: min-content; } .savedata__list:has(.savedata__item:not(.savedata__item--empty)) .savedata__item--empty { display: none; } .savedata__item { display: grid; grid-auto-flow: column; justify-content: start; gap: 40px; grid-auto-columns: auto 1fr auto; padding: 17.5px 15px; font-size: 16px; align-items: center; position: relative; } .savedata__item.savedata__item--empty { text-align: center; grid-template-columns: 1fr; } .savedata__item .savedata__item-date { color: grey; font-size: 14px; } .savedata__item:not(.savedata__item--new, .savedata__item--empty) { cursor: pointer; } .savedata__item:not(.savedata__item--new, .savedata__item--empty):hover, .savedata__item:not(.savedata__item--new, .savedata__item--empty):has(input:checked) { background-color: rgba(0, 0, 0, 0.0588235294); } .savedata__item.savedata__item--new { margin-bottom: -1px; grid-template-columns: 1fr; padding: 0; padding-right: 15px; min-width: 450px; border-top: 1px solid lightgray; } .savedata__item.savedata__item--new button { align-self: auto; } .savedata__item.savedata__item--new input { margin: 0; border: none; background: none; padding: 30px 20px; font-size: 16px; font-family: Brown, sans-serif; } .savedata__item.savedata__item--new input:focus { outline: none; } [data-close-modal] { float: left; } .prompt-accordion { display: grid; gap: 5px; } .prompt-accordion > div { background: white; border: 1px solid rgb(224, 224, 224); border-radius: 5px; overflow: hidden; font-size: 14px; position: relative !important; top: auto !important; left: auto !important; } .prompt-accordion .prompt-accordion__button { padding: 20px; padding-left: 50px; position: relative; width: 100%; text-align: left; display: flex; gap: 20px; } .prompt-accordion .prompt-accordion__button:after { font-family: "Material Icons"; font-size: 20px; display: block; position: absolute; content: "add"; left: 15px; top: 50%; transform: translateY(-50%); } .prompt-accordion .prompt-accordion__button span { border-radius: 30px; background: #ffe4da; padding: 8px 15px; margin-left: 0; font-size: 12px; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font-weight: 700; } .prompt-accordion .prompt-accordion__button.active:after { content: "remove"; } .prompt-accordion .prompt-accordion__panel { max-height: 0; overflow: hidden; transition: max-height 0.2s ease; border-top: 1px solid rgb(224, 224, 224); } /* landing page */ .landingpagecontainer { background-color: #FFF3EE; display: grid; grid-template-columns: 1fr 1fr; } .landingpagecontainer .landingpage_content, .landingpagecontainer .landingpage_formcontainer { height: 100vh; overflow: scroll; box-sizing: border-box; display: inline-block; } .landingpagecontainer .landingpage_content { padding: calc(2rem + 80 * (100vw - 375px) / 1305); padding-top: calc(2rem + 120 * (100vw - 375px) / 1305); padding-bottom: calc(7rem + 70 * (100vw - 375px) / 1305); } .landingpagecontainer .landingpage_content h1, .landingpagecontainer .landingpage_content h1 + span { display: block; text-align: center; width: 100%; } .landingpagecontainer .landingpage_content h1 + span { margin-top: 3rem; margin-top: var(--s-30); color: #FA8F66; } .landingpagecontainer .landingpage_content img { width: 100%; max-width: 50rem; margin: auto; } .landingpagecontainer .landingpage_formcontainer { background-color: #7C5D8F; padding: calc(1.5rem + 85 * (100vw - 375px) / 1305); } .landingpagecontainer .landingpage_formcontainer .h-6 { font-size: 2.2rem; } .landingpagecontainer .form-module { opacity: 1 !important; } .landingpagecontainer .form-module .inner { margin-top: 6rem; margin-bottom: 0; } .landingpagecontainer .form-container-target { margin-top: 3rem; } .landingpagecontainer .post-body-content a { box-shadow: 0px 4px 0px rgba(124, 93, 143, 0.2509803922), 0px -4px 0px transparent; } .landingpagecontainer .post-body-content a:hover { box-shadow: 0px 4px 0px rgba(124, 93, 143, 0.2509803922), 0px -4px 0px rgba(124, 93, 143, 0.2509803922); background-color: rgba(124, 93, 143, 0.2509803922); } .landingpagecontainer .form-module h1, .landingpagecontainer .form-module h2, .landingpagecontainer .hs-fieldtype-checkbox > label, .landingpagecontainer .hs-fieldtype-radio > label, .landingpagecontainer .hs-fieldtype-select > label, .landingpagecontainer .cc-custom-form .hs-fieldtype-date > label, .landingpagecontainer .hs-fieldtype-file > label, .landingpagecontainer .cc-custom-form .hs-form-checkbox label, .landingpagecontainer .cc-custom-form .hs-form-radio label, .landingpagecontainer .cc-custom-form .hs-fieldtype-select, .landingpagecontainer .cc-custom-form .hs-fieldtype-date, .landingpagecontainer .cc-custom-form .hs-fieldtype-file .input label, .landingpagecontainer .cc-custom-form .hs-fieldtype-file .input label::after { color: white; } .landingpagecontainer .cc-custom-form .hs-submit input { margin-top: var(--s-80); } .landingpagecontainer .cc-custom-form .hs-fieldtype-file .input label { background: none; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.631372549); transition: box-shadow; cursor: pointer; } .landingpagecontainer .cc-custom-form .hs-fieldtype-file:hover .input label { box-shadow: inset 0 0 0 3px #ffffff; } .landingpagecontainer .cc-custom-form .hs-form-checkbox span::before, .landingpagecontainer .cc-custom-form .hs-form-radio span::before { color: white; opacity: 0.7; } .landingpagecontainer .cc-custom-form .hs-form-checkbox label:hover span::before, .landingpagecontainer .cc-custom-form .hs-form-checkbox input:checked + span::before, .landingpagecontainer .cc-custom-form .hs-form-radio label:hover span::before, .landingpagecontainer .cc-custom-form .hs-form-radio input:checked + span::before { color: white; opacity: 1; } .landingpagecontainer .text-body ul, .landingpagecontainer .text-body ol { margin-bottom: calc(1.6rem + 6 * (100vw - 375px) / 1305); } .landingpagecontainer .form-contact-footer { display: flex; flex-flow: row wrap; background-color: rgba(255, 255, 255, 0.6705882353); margin-top: 100px; width: 100%; } #formContainerClose { display: none; } @media only screen and (max-width: 960px) { .landingpagecontainer { display: block; } .landingpage-body:not(.nav-floating, .overlaymenu) .nav-button { color: black; background-color: rgb(255, 255, 255); } .landingpage_formcontainer .h-6 { font-size: 1.8rem; } .mobilehidden #formContainerClose { display: none; } #formContainerClose { display: block; position: absolute; right: 1.5rem; top: 1.5rem; color: white; font-size: 4rem; } .landingpagecontainer .landingpage_content { padding-top: 10rem; padding-bottom: 10rem; width: 100%; } .landingpagecontainer .landingpage_formcontainer { z-index: 99; border-radius: 2rem; height: calc(100% - 3rem); max-height: 100%; overflow: scroll; top: auto; bottom: 1.5rem; left: 1.5rem; right: 1.5rem; width: auto; position: fixed; transition: all 0.3s ease; padding: 1.5rem; } .landingpagecontainer .form-module .inner { transition: margin-top 0.3s ease; } .mobilehidden .form-module .inner { margin-top: 0rem; } .landingpagecontainer .landingpage_formcontainer.mobilehidden { height: 54px; max-height: 54px; overflow: hidden; position: fixed; float: none; min-height: auto; cursor: pointer; } .landingpage_formcontainer.mobilehidden .form-container-target { display: none; } .landingpage_formcontainer .form-container-target { transition: display 0s linear 0.3s; } } .rangeslider { position: relative; height: 14px; border-radius: 10px; text-align: left; margin: 45px 0 10px 0; } .rangeslider__visual { position: absolute; left: 13px; right: 15px; height: 14px; } .rangeslider__inverse-left { position: absolute; left: 0; height: 14px; border-radius: 10px; background-color: #CCC; margin: 0 7px; } .rangeslider__inverse-right { position: absolute; right: 0; height: 14px; border-radius: 10px; background-color: #CCC; margin: 0 7px; } .rangeslider__range { position: absolute; left: 0; height: 14px; border-radius: 14px; background-color: var(--color-orange); } .rangeslider__thumb { position: absolute; top: -7px; z-index: 2; height: 28px; width: 28px; text-align: left; margin-left: -11px; cursor: pointer; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4); background-color: #FFF; border-radius: 50%; outline: none; } .rangeslider input[type=range] { position: absolute; pointer-events: none; -webkit-appearance: none; z-index: 3; height: 14px; top: -2px; width: 100%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } .rangeslider > input[type=range]::-ms-track { -webkit-appearance: none; background: transparent; color: transparent; } .rangeslider > input[type=range]::-moz-range-track { -moz-appearance: none; background: transparent; color: transparent; } .rangeslider > input[type=range]:focus::-webkit-slider-runnable-track { background: transparent; border: transparent; } .rangeslider > input[type=range]:focus { outline: none; } .rangeslider > input[type=range]::-ms-thumb { pointer-events: all; width: 28px; height: 28px; border-radius: 0px; border: 0 none; background: red; } .rangeslider > input[type=range]::-moz-range-thumb { pointer-events: all; width: 28px; height: 28px; border-radius: 0px; border: 0 none; background: red; } .rangeslider > input[type=range]::-webkit-slider-thumb { pointer-events: all; width: 28px; height: 28px; border-radius: 0px; border: 0 none; background: red; -webkit-appearance: none; } .rangeslider > input[type=range]::-ms-fill-lower { background: transparent; border: 0 none; } .rangeslider > input[type=range]::-ms-fill-upper { background: transparent; border: 0 none; } .rangeslider > input[type=range]::-ms-tooltip { display: none; } .rangeslider__sign { position: absolute; margin-left: -12px; top: -40px; z-index: 3; color: #000; width: 30px; height: 30px; border-radius: 30px; text-align: center; line-height: 30px; } .servicelinks a { line-height: 150%; display: initial; transition: box-shadow 0.3s ease, background-color 0.3s ease; border-radius: 13rem; box-shadow: inset 0px 0px 0px 14px rgba(255, 255, 255, 0), 6px 0px 0px 7px rgba(255, 255, 255, 0), -6px 0px 0px 7px rgba(255, 255, 255, 0); box-decoration-break: clone; -webkit-box-decoration-break: clone; } .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; } .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.servicelinks--sessions .servicelinks__session-list { display: flex; flex-flow: column; gap: 15px; } .servicelinks.servicelinks--sessions .servicelinks__session-list li { display: flex; } .servicelinks.servicelinks--sessions a { font-size: 14px; display: inline-flex; gap: 10px; } .servicelinks.servicelinks--sessions a.active-link, .servicelinks.servicelinks--sessions a:hover { background-color: #ffe4da; } .intake-form-module .form-container-target { margin-top: var(--s-30); } .intake-form-module .meetings-iframe-container { width: 100%; margin-top: var(--s-30); } .intake-form-module .meetings-iframe-container iframe { width: 100% !important; min-width: 100% !important; } .intake-form-module .inner { margin-bottom: calc(10rem + 100 * (100vw - 375px) / 1305); } .intake-form-module .form-container-target { margin-bottom: var(--s-40); } .intake-form-module [data-submit-message] { margin-bottom: var(--s-40); } .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 > label { width: 100%; margin: 0; color: black; box-sizing: border-box; padding-left: var(--s-30); padding-right: var(--s-30); } .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: var(--s-20); } .cc-custom-form.intake-form .hs-dependent-field.field_table_choice > div:not(:nth-child(1)) .input { margin-bottom: 1.5rem; } .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 .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"; } .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 0.5fr 0.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: var(--s-20); } .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: var(--s-10); padding: var(--s-15); margin-left: var(--s-20); margin-right: var(--s-20); margin-top: var(--s-10); margin-bottom: var(--s-10); } .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; } .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: 0.5rem; grid-template-columns: auto auto auto; align-self: flex-start; } .intake-form fieldset.form-columns-2 .hs-form-field { width: 100% !important; } .form-module-top-container { position: relative; display: flex; width: 100%; align-items: center; justify-content: center; margin-bottom: var(--s-20); } .form-module-top-container p { color: #999; } .form-module-top-container button { position: absolute; left: 0; display: flex; align-items: center; } 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 rgba(0, 0, 0, 0.0784313725); 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: var(--s-20); } .hidenavbar ul.options-list { top: -1px; } .intake-form .bucket-container { margin-bottom: 50px; } .bucket-container .hs-form-field { margin-bottom: 15px; } .intake-form .bucket-container h2 { margin-bottom: var(--s-20); } .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; } 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: var(--s-15); } .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: flex; flex-flow: row wrap; gap: 5px; padding-top: var(--s-10); padding-bottom: var(--s-10); padding-left: var(--s-15); } 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 rgba(0, 0, 0, 0.168627451); 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 0.3s ease; width: auto; display: inline-flex; box-sizing: border-box; padding-top: var(--s-10); padding-bottom: var(--s-10); padding-left: var(--s-15); padding-right: var(--s-15); border-radius: calc(5rem + 50 * (100vw - 375px) / 1305); min-height: calc(4.8rem + -10.5 * (100vw - 375px) / 1305); } .intake-form .cc-custom-form .cc-searchmulti li { padding-left: var(--s-15); } 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: var(--s-30); } .intake-form .cc-multiselect--no-result-found ~ ul::after { content: "No results were found"; padding: var(--s-15); padding-left: var(--s-30); } .cc-custom-form [selectvalue]::after { content: "close"; font-family: "Material Icons"; font-size: 18px; margin-left: var(--s-10); } .cc-custom-form [selectvalue]:hover { opacity: 0.7; } .intake-form .input { margin-right: 0px !important; } .cc-custom-form .select-items:not(.select-hide) { display: grid; } .cc-custom-form .select-items .select-search { position: sticky; top: 0; z-index: 1; padding-top: 0; border-radius: 0; } .cc-custom-form .select-items .select-search:hover { background-color: #EEEEEE; } .cc-custom-form .select-items .select-search input { width: 100%; background: none; border: none; border-bottom: 2px solid rgb(165, 165, 165); margin: 0; height: 100%; font-family: "Brown"; padding-left: calc(24px + var(--s-15)); font-size: calc(1.4rem + 4 * (100vw - 375px) / 1305); } .cc-custom-form .select-items .select-search input::placeholder { color: black; } .cc-custom-form .select-items .select-search::before { content: "search"; font-family: "Material Icons"; font-size: 24px; display: block; position: absolute; left: calc(2.25rem + 22.5 * (100vw - 375px) / 1305); } /* hs datepicker */ .hs-datepicker { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; max-width: 450px; } .hs-dateinput:has(.pika-single:not(.is-hidden))::before { content: ""; background-color: rgba(0, 0, 0, 0.223); position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9; pointer-events: none; } .cc-custom-form .hs-dateinput input::placeholder { font-size: calc(1.4rem + 4 * (100vw - 375px) / 1305); } .cc-custom-form .hs-datepicker { width: calc(100% - 40px); border-radius: 3rem; overflow: hidden; box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.19); } .cc-custom-form .fn-date-picker .pika-lendar { width: 100% !important; margin: 0; padding: var(--s-30); box-sizing: border-box; } .cc-custom-form .fn-date-picker .pika-label { font-size: 16px; line-height: 150%; background-color: var(--color-light-grey); padding: 10px 25px 10px 20px; border-radius: 50px; margin: 0 5px; } .cc-custom-form .fn-date-picker .pika-label::after { position: absolute; content: "arrow_drop_down"; font-family: "Material Icons"; top: 50%; transform: translateY(-50%); right: 10px; font-size: calc(1.4rem + 4 * (100vw - 375px) / 1305); } .cc-custom-form .fn-date-picker .pika-prev, .cc-custom-form .fn-date-picker .pika-next { opacity: 1; background-color: var(--color-light-grey); width: 44px; border-radius: 22px; height: 44px; background-repeat: no-repeat; background-position: center; font-size: 0; background-size: 16px; margin-left: 10px; } .cc-custom-form .fn-date-picker .pika-prev { margin-left: 0; margin-right: 10px; } .cc-custom-form .fn-date-picker .pika-table td { position: relative; } .cc-custom-form .fn-date-picker .pika-table td::before { content: ""; display: block; padding-bottom: 100%; } .cc-custom-form .fn-date-picker .pika-title { margin-bottom: var(--s-30); } .cc-custom-form .fn-date-picker .pika-title select { height: 100%; width: 100%; top: 0; } .cc-custom-form .fn-date-picker .pika-button { background: none; text-align: center; border-radius: 5rem !important; color: black; font-family: "Brown"; line-height: 150%; position: absolute; height: 100%; top: 0; font-size: calc(1.4rem + 4 * (100vw - 375px) / 1305); } .cc-custom-form .fn-date-picker .pika-button:hover { color: #fff !important; background: var(--color-orange) !important; box-shadow: none !important; 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 .is-today .pika-button { border: 2px solid var(--color-orange); color: black; } .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"; } .post-listing { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-30); max-width: 1400px; margin: auto; padding: 0 var(--s-30); } @media (max-width: 900px) { .post-listing { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 750px) { .post-listing { grid-template-columns: repeat(1, 1fr); padding: 0; } } .post-listing .post-item { display: grid; gap: var(--s-15); padding: var(--s-30); border-radius: var(--s-30); background-color: #EBEBEB; transition: box-shadow ease 300ms, transform ease 300ms; box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2); transform: translateY(0); align-items: stretch; align-content: space-between; } .post-listing .post-item .post-item--link { position: absolute; width: 100%; height: 100%; z-index: 1; } .post-listing .post-item .post-item__header { display: grid; gap: var(--s-5); } .post-listing .post-item .post-item__header > span { opacity: 0.5; text-transform: uppercase; font-size: calc(1.4rem + 2 * (100vw - 375px) / 1305); } @media (max-width: 750px) { .post-listing .post-item { grid-template-columns: repeat(1, 1fr); min-height: 150px; } } .post-listing .post-item:hover { box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2); transform: translateY(-5px); } .post-listing .post-item strong { font-weight: 700; } .post-listing .post-item .post-item__tags { display: flex; flex-flow: row; gap: 10px; overflow: scroll; margin: 0 calc(var(--s-30) * -1); padding: 0 var(--s-30); scrollbar-width: none; white-space: pre; z-index: 2; } .post-listing .post-item .post-item__tags::after { content: ""; display: block; position: absolute; width: var(--s-30); top: 0; border-bottom-right-radius: var(--s-30); border-top-right-radius: var(--s-30); height: 100%; right: 0; background: linear-gradient(270deg, #ebebeb, rgba(235, 235, 235, 0)); } .post-listing .post-item .post-item__tags::before { content: ""; display: block; position: absolute; width: var(--s-30); top: 0; border-bottom-left-radius: var(--s-30); border-top-left-radius: var(--s-30); height: 100%; left: 0; background: linear-gradient(90deg, #ebebeb, rgba(235, 235, 235, 0)); } .scroll-zone { position: absolute; top: 0; width: 50%; height: 100%; z-index: 1; background: transparent; /* Invisible zones */ cursor: pointer; } .scroll-zone.left { left: 0; } .scroll-zone.right { right: 0; } .post-item-tag { display: flex; flex-direction: row; align-items: center; padding: var(--s-10) var(--s-15); background: rgba(70, 80, 247, 0.09); border-radius: var(--s-30); color: var(--color-blue); text-transform: capitalize; font-size: calc(1.4rem + 2 * (100vw - 375px) / 1305); } .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); } .blog-listing { padding-top: 7.9rem; display: flex; flex-direction: column; padding-bottom: 7.9rem; } .blog-listing .inner.header { text-align: center; padding: var(--s-100) var(--s-30) var(--s-80); display: grid; gap: var(--s-15); } .blog-listing .inner.header .h-2 { color: var(--color-green); } .blog-listing .inner.header .h-2::first-letter { text-transform: uppercase; } .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; margin-top: var(--s-60); } .postheader { height: 100%; display: flex; justify-content: center; align-items: center; } .postheader h1 { font-size: calc(3rem + 35 * (100vw - 375px) / 1305); text-transform: uppercase; width: 100%; display: flex; max-width: calc(100vw - 40px); } .postheader h1 span { width: 100%; } .postheader .inner { display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0; height: auto; width: 100%; position: relative; gap: var(--s-80); padding-top: var(--s-200); padding-bottom: 0; } .postheader .inner > div { width: 100%; } .postheader .postheader-author { text-align: center; padding-bottom: var(--s-30); } .postheader .postheader-author a { border-bottom: 0.2rem solid black; font-weight: normal; } .postheader .postheader-content { display: grid; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: var(--s-30); height: 100%; max-width: calc(34.5rem + 745 * (100vw - 375px) / 1305); } .post-topics { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; gap: var(--s-5); } .post-topics a { display: inline-flex; transition: opacity 300ms ease; align-items: center; font-weight: 400; transition: background-color ease 300ms, opacity ease 300ms; border-radius: 100px; padding: var(--s-15) var(--s-20); font-weight: 700; text-transform: capitalize; background-color: var(--color-orange-tint); color: var(--color-orange); font-size: calc(1.6rem + 2 * (100vw - 375px) / 1305); letter-spacing: calc(0.05rem + 1 * (100vw - 375px) / 1305); } .post-topics a:hover { opacity: 0.75; } .blogcontainer { position: relative; padding: 0 20px; min-height: 100vh; display: flex; flex-flow: column; justify-content: space-between; } .blogcontainer > footer { margin: 0 -20px; padding: 0 20px; } footer { border-top: 2px solid var(--color-orange); } .post-body-content, .post-author-highlight-container, .post-comments, .post-author-tutor, .post-related-content, .post-service-cta { margin: auto; width: 100%; height: 100%; text-align: left; max-width: 845px; } .post-related-content { display: flex; flex-flow: column; gap: var(--s-30); margin-bottom: var(--s-80); margin-top: var(--s-60); } .post-related-content .post-listing { grid-template-columns: repeat(2, 1fr); padding: 0; } .post-related-content .post-listing .post-item { min-height: 150px; } @media (max-width: 750px) { .post-related-content .post-listing { grid-template-columns: 1fr; } } .post-related-content .h-6 { font-weight: 700; } .post-related-content .post-collection > .hs_cos_wrapper { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } @media (max-width: 750px) { .post-related-content .post-collection > .hs_cos_wrapper { grid-template-columns: 1fr; } } .post-related-content .post-collection .post-item { position: relative; display: block; border-radius: var(--s-30); background-color: #FFE4DA; transition: opacity 300ms ease; font-size: 1.8rem; line-height: 120%; padding: var(--s-20) var(--s-30); aspect-ratio: 2/1; } @media (max-width: 750px) { .post-related-content .post-collection .post-item { aspect-ratio: 4/1; } } .post-related-content .post-collection .post-item:hover { opacity: 0.7; } .post-related-content .post-collection .post-item span { display: block; font-weight: 700; color: #FD865D; text-transform: uppercase; font-size: 1.5rem; line-height: 150%; } .post-related-content .post-collection .post-item.postsummary { margin-bottom: var(--s-30); } .post-service-cta { border-radius: var(--s-60); margin-top: var(--s-80); margin-bottom: var(--s-80); } .post-service-cta.post-service-cta--image > div { grid-template-columns: auto 1fr; align-items: center; justify-items: center; } @media (max-width: 750px) { .post-service-cta.post-service-cta--image > div { grid-template-columns: 1fr; } } .post-service-cta.post-service-cta--image > div img { max-height: 300px; grid-row: span 2; margin-top: calc(var(--s-80) * -1); } @media (max-width: 750px) { .post-service-cta.post-service-cta--image > div img { grid-row: auto; } } .post-service-cta.post-service-cta--image > div .linkbutton { grid-column: 2; } @media (max-width: 750px) { .post-service-cta.post-service-cta--image > div .linkbutton { grid-column: auto; } } .post-service-cta > div { padding: var(--s-100) var(--s-60) var(--s-80); display: grid; justify-content: center; align-items: center; gap: var(--s-60); text-align: center; } .post-comments { padding-top: var(--s-60); display: grid; gap: var(--s-30); padding-bottom: var(--s-200); } .post-comments #comments-listing { display: flex; flex-flow: column; } .post-comments .comment { display: flex; flex-flow: wrap; row-gap: var(--s-15); column-gap: var(--s-15); align-items: baseline; padding: var(--s-15) 0; position: relative; } .post-comments .comment.depth-0, .post-comments .comment.depth-0:first-child { border-top: 2px solid var(--color-grey); margin-top: var(--s-30); } .post-comments .comment:first-child { border-top: none; } .post-comments .comment.depth-1 { padding-left: calc(var(--s-20) * 2); } .post-comments .comment.depth-2 { padding-left: calc(var(--s-20) * 4); } .post-comments .comment.depth-3 { padding-left: calc(var(--s-20) * 6); } .post-comments .comment-date { position: absolute; right: 0; color: rgba(0, 0, 0, 0.5); font-size: 14px; } .post-comments .comment-body { width: 100%; font-size: 16px; line-height: 140%; grid-column: 2 span; } .post-comments .comment-from { font-weight: 700; font-size: 20px; } .post-comments .comment-reply-to { display: flex; width: auto; background: none; justify-content: flex-start; align-items: center; padding-left: 0; font-size: 18px; color: var(--color-orange); } .post-comments .comment-reply-to em { margin-left: 0.5rem; } .post-comments .section { display: grid; row-gap: var(--s-100); } .post-comments .hs-form { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-areas: ". ." "test test"; gap: var(--s-30); } .post-comments > p { font-weight: bold; margin-bottom: -30px; } .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-submit { grid-column: 1/3; } .post-comments .hs_lastname, .post-comments .hs_website { display: none; } .post-comments .hs_comment { grid-area: test; } .post-comments .hs-form-field { position: relative; } .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: calc(1.8rem + 4 * (100vw - 375px) / 1305); border-radius: calc(1.75rem + 17.5 * (100vw - 375px) / 1305); padding-left: calc(1.75rem + 17.5 * (100vw - 375px) / 1305); padding-right: calc(1.75rem + 17.5 * (100vw - 375px) / 1305); padding-top: calc(0.95rem + 9.5 * (100vw - 375px) / 1305); padding-bottom: calc(0.95rem + 9.5 * (100vw - 375px) / 1305); } .post-comments .hs-form-field label { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; display: none; left: calc(1.75rem + 17.5 * (100vw - 375px) / 1305); } .post-comments .hs-form-field.hs-recaptcha { display: flex; justify-content: center; align-items: center; position: absolute; top: calc(100% + 10px); width: auto; left: 50%; transform: translateX(-50%) scale(0.8); } .post-comments .hs-form-field.hs-recaptcha .input { width: auto; } .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; margin-left: inherit; margin: auto; font-size: calc(1.8rem + 4 * (100vw - 375px) / 1305); border-radius: calc(1.75rem + 17.5 * (100vw - 375px) / 1305); padding-left: calc(1.75rem + 17.5 * (100vw - 375px) / 1305); padding-right: calc(1.75rem + 17.5 * (100vw - 375px) / 1305); padding-top: calc(0.95rem + 9.5 * (100vw - 375px) / 1305); padding-bottom: calc(0.95rem + 9.5 * (100vw - 375px) / 1305); } .post-comments .replying { margin-bottom: 30px; } .post-comments .replying .replying-to { display: block; font-weight: 700; margin-bottom: var(--s-30); } .post-comments .hs_comment textarea { height: calc(7.5rem + 75 * (100vw - 375px) / 1305); } .post-comments .hs-comment-message.hs-common-confirm-message { padding: 0 30px; padding-bottom: 60px; font-size: 25px; font-weight: 700; text-align: center; max-width: 540px; margin: auto; margin-top: -30px; } .introtopics { width: 100%; max-width: 1440px; margin: auto; } .introtopics .header { margin: 0; padding: 0; max-width: 500px; margin: auto; text-align: center; padding-top: var(--s-30); } .introtopics .content { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; padding: var(--s-60); padding-bottom: var(--s-200); gap: var(--s-30); } .introtopics .content > div:nth-child(odd):last-of-type { margin: auto; left: 50%; } .introtopics .content > div { position: relative; padding-bottom: 66%; width: 100%; height: auto; transition: opacity 300ms ease; overflow: hidden; border-radius: var(--s-60); } .introtopics .content > div:hover { opacity: 0.7; } .introtopics .content > div a { position: absolute; color: white; top: 0; left: 0; right: 0; bottom: 0; padding-left: var(--s-30); padding-right: var(--s-30); font-size: calc(3.5rem + 15 * (100vw - 375px) / 1305); } .introtopics .content > div a span { display: block; width: 50%; position: absolute; z-index: auto; top: calc(2rem + 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 (max-width: 750px) { .introtopics .content { grid-template-columns: repeat(1, 1fr); padding-left: 0; padding-right: 0; } .introtopics .content > div:nth-child(odd):last-of-type { left: 0%; } } .topicheader { position: relative; min-height: 100vh; display: flex; } .topicheader h1 { margin-bottom: var(--s-15); } .topicheader .linkbutton { margin-top: var(--s-30); } .topicheader .inner { display: grid; grid-template-columns: 1fr auto; gap: var(--s-50); align-items: flex-start; max-width: 2000px; padding: var(--s-30) 0; } .topicheader .inner > div { padding: var(--s-60) var(--s-30); } .topicheader .inner span { display: block; text-transform: uppercase; margin-bottom: var(--s-15); } .topicheader .popular-topics { margin-top: var(--s-50); } .topicheader .popular-topics > span { font-weight: 700; } .topicheader .popular-topics > div { display: flex; flex-flow: row wrap; gap: 10px; } .topicheader .inner, .topicheaderinfo .inner { position: relative; height: 100%; width: auto; margin: auto; } .topicheader .topicheader .inner > div { width: 100%; height: calc(100% - 8rem); } .topicheader .inner > div:nth-child(2) { position: relative; } @media (max-width: 750px) { .topicheader .inner > div:nth-child(2) { display: none; } } .topicheader .inner > div:nth-child(2) img { width: 33vw; max-width: 560px; } .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: var(--s-30); width: auto; max-width: calc(34.5rem + 725 * (100vw - 375px) / 1305); } @media only screen and (max-width: 1200px) { .topicheaderinfo .inner { max-width: calc(34.5rem + 1000 * (100vw - 375px) / 1305); } } .bloghub__posts-lists { display: grid; gap: var(--s-50); padding: var(--s-100) 0; } .bloghub__posts-lists > div:first-child { display: flex; flex-flow: row wrap; column-gap: var(--s-50); row-gap: var(--s-15); align-items: center; justify-content: center; } .bloghub__posts-lists [data-bloglists-btn] { text-transform: uppercase; font-weight: 400; display: flex; align-items: center; justify-self: center; font-size: calc(2rem + 15 * (100vw - 375px) / 1305); } .bloghub__posts-lists [data-bloglists-btn] { display: flex; gap: var(--s-15); transition: opacity 0.3s ease; opacity: 0.3; } .bloghub__posts-lists [data-bloglists-btn].s-active, .bloghub__posts-lists [data-bloglists-btn]:hover { opacity: 1; } .bloghub__posts-lists [data-bloglists-btn]::after { content: "trending_up"; font-family: "Material Icons"; text-transform: none; font-size: calc(2rem + 10 * (100vw - 375px) / 1305); } .bloghub__posts-lists [data-bloglists-btn].s-most-recent::after { content: "schedule"; } .bloghub__posts-lists [data-bloglists-content] { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.3s ease 0s, visibility 0s linear 0s, height 0s linear 0s; } .bloghub__posts-lists [data-bloglists-content].s-hidden { display: none; } .bloghub__posts-lists [data-bloglists-content]:not(.s-active) { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease 0s, visibility 0s linear 0.3s, height 0s linear 0.3s; } .blogcontainer .twocolumn { padding-left: 20px; padding-right: 20px; margin: -20px; } .tutor-cards { scroll-margin-top: 80px; } .tutor-cards--empty { padding: var(--s-30); margin: auto; text-align: center; } main.tutorscontainer { width: 100%; height: auto; padding-top: 7.9rem; background-color: #FFF2ED; min-height: calc(100vh - 7.9rem); } main.tutorscontainer:has(.listing-sidenav) { width: calc(100% - 34rem); padding-left: 34rem; }