@import url(https://fonts.googleapis.com/css?family=Caveat&display=swap); @import url(https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500&display=swap); /* Google Caveat font import */ /* Google Oswald font import */ /* Global Styles should be used for all global elements and not recreated in pages. All components should inherit global styles at the project level and modify only as needed. */ /* Color Variables */ /* contains entire app within this width */ /* Font Variables */ /* Screen Size Variables */ /* MEDIA QUERY PIXEL VALUES */ /* Global Style include: - font-smoothing */ /* Color Variables */ /* contains entire app within this width */ /* Font Variables */ /* Screen Size Variables */ /* MEDIA QUERY PIXEL VALUES */ @font-face { font-display: swap; } .logged-in-navbar .drop-down-menu { margin-top: 0; } .logged-in-navbar .drop-down-menu .drop-down-link { font-size: 1.4rem; line-height: 1.8rem; } .logged-in-navbar .link { font-size: 1.4rem; font-weight: 700; } #fixed-sign-in.primary-button { font-weight: bold; } @supports (-ms-ime-align: auto) { @media screen and (min-width: 1000px) { main, footer { margin-left: -2.1rem; } main section, main article, footer section, footer article { padding-left: 2.1rem; } section { padding-left: 2.1rem; } } } html, *, body { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-smoothing: antialiased; } html { margin: 0; padding: 0; border: 0; font-size: 62.5%; } @media screen and (min-width: 80rem) { /* Edge 16+ CSS */ @supports (-ms-ime-align: auto) { html { margin-left: calc(100vw - 100%); } } /* IE 10+ */ } @media screen and (min-width: 80rem) and (-ms-high-contrast: active) { html { margin-left: calc(100vw - 100%); } } *, *:before, *:after { box-sizing: inherit; } body { overflow-x: hidden; padding: 0; margin: 0; font-family: 'Source Sans Pro', sans-serif !important; background-color: #f4f5f8; line-height: 1.5; } div, input, textarea, select { font-family: 'Source Sans Pro', sans-serif !important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } ::before, ::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } h1, h2, h3, h4, h5, h6 { font-weight: 700; color: #1b2733; } h1.underline, h2.underline, h3.underline, h4.underline, h5.underline, h6.underline { padding-bottom: 1.6rem; border-bottom: 2px solid #ffbc00; } h1 { font-size: 4rem; } h2 { font-size: 3.2rem; } h3 { font-size: 2.6rem; } h4 { font-size: 2.4rem; } h5 { font-size: 1.6rem; } h6 { font-size: 1.4rem; } p, ul, a { margin: 1rem 0; font-size: 1.6rem; color: #1b2733; } a { color: #0F62FA; text-decoration: none; } ul li a:hover { text-decoration: underline; } .lead { color: #455060; font-size: 1.8rem; } .large { font-size: 1.8rem; } .small { font-size: 1.4rem; } .container { max-width: 1200px; margin: 0 auto; } .primary { color: #1b2733; } .secondary { color: #455060; } .tertiary { color: #687588; } .text-success { color: #257757; } .text-danger { color: #c40028; } .hide { display: none !important; } .border-bottom { padding-bottom: 2rem; border-bottom: 1px solid #dce2ed; } .innermax { max-width: 140rem; margin: 0 auto; } .lead { color: #1b2733; font-size: 2.4rem; line-height: 1.5; font-weight: 200; } .main-react-app { max-width: 164.8rem; overflow-x: hidden; margin: 0 auto; position: relative; background-color: white; box-shadow: 0 0 16px rgba(23, 39, 51, 0.1); } .main-react-app header, .main-react-app main { flex: 1; align-items: flex-start; } .main-react-app nav { box-shadow: none; } .main-react-app nav div span a { margin: 0; width: 100%; } .main-react-app nav div span div { top: 4.4rem; } .main-react-app nav div button.primary-button { font-weight: bold; } .main-react-app main .comp-container { min-height: calc(100vh - 40rem); } .main-react-app main nav { left: 0; margin-left: 0; border-bottom: none; } .main-react-app header button.primary-button { font-size: 1.3rem; font-weight: 400; } .main-react-app button { font-family: 'Source Sans Pro', sans-serif; } .grecaptcha-badge { display: none !important; } .likeh1 { color: #1b2733; font-size: 4rem; font-weight: 700; line-height: 6rem; margin-bottom: 1rem; margin-top: 4rem; } .ie-overflow-fix-resources main { overflow: auto; } /* Color Variables */ /* contains entire app within this width */ /* Font Variables */ /* Screen Size Variables */ /* MEDIA QUERY PIXEL VALUES */ [data-tooltip] { position: relative; cursor: pointer; content: attr(data-tooltip); } [data-tooltip]::before, [data-tooltip]::after { position: absolute; opacity: 0; transition: opacity 150ms ease-in; z-index: 10; pointer-events: none; } /* The Arrow */ [data-tooltip]::before { content: ''; top: -6px; left: 50%; transform: translateX(-50%); border-width: 6px 6px 0 6px; border-style: solid; border-color: #1b2733 transparent transparent transparent; z-index: 100; } /* The Message */ [data-tooltip]::after { content: attr(data-tooltip); left: 50%; top: -6px; transform: translateX(-50%) translateY(-100%); background: #1b2733; text-align: left; color: #fff; padding: 6px; font-size: 1.4rem; white-space: nowrap; border-radius: 5px; line-height: 1.8rem; font-weight: 600; } /* On hover show tooltip */ [data-tooltip]:hover::after, [data-tooltip]:hover::before { opacity: 1; } /* Top */ [data-tooltip-placement='top']::before { left: 50%; } [data-tooltip-placement='top']::after { left: 50%; } /* Right */ [data-tooltip-placement='right']::before { left: 100%; top: 50%; margin-left: -1px; transform: translateY(-50%) rotate(90deg); } [data-tooltip-placement='right']::after { left: 100%; top: 50%; margin-left: 7px; transform: translateX(0%) translateY(-50%); } /* Bottom */ [data-tooltip-placement='bottom']::before { top: 100%; margin-top: 8px; transform: translateX(-50%) translateY(-100%) rotate(-180deg); } [data-tooltip-placement='bottom']::after { top: 100%; margin-top: 8px; transform: translateX(-50%) translateY(0%); } /* Left */ [data-tooltip-placement='left']::before { left: 0%; top: 50%; margin-left: -11px; transform: translateY(-50%) rotate(-90deg); } [data-tooltip-placement='left']::after { left: 0%; top: 50%; margin-left: -7px; transform: translateX(-100%) translateY(-50%); }