/* spacing */ /** Colors */ /** Fonts */ /** Breakpoints */ :root { --primary: #b01109; --primary-dark: #7f0c07; --primary-alpha: rgba(176, 17, 9, 0.25); --primary-fg: #fff; --accent: #015d75; --accent-alpha: rgba(1, 93, 117, 0.25); --accent-dark: #013542; --accent-fg: #fff; --success: #070; --error: #d00; --warning: #e90; --body-bg: #fff; --body-bg-alt: #f6f6f6; --body-text: #222; --header-bg: #fff; --header-text: #222; --footer-bg: #444; --footer-text: #fff; } body#tinymce { margin: 12px !important; /* stylelint-disable no-invalid-position-at-import-rule */ /* stylelint-enable */ } body#tinymce .button, body#tinymce button, body#tinymce input[type=submit], body#tinymce a.call-to-action { border-style: solid; border-width: 2px; border-radius: 3px; display: inline-block; font-family: "Karla", sans-serif; font-weight: 600; line-height: 1.5; padding: 0.875rem 3.25rem; vertical-align: middle; text-align: center; text-decoration: none; text-transform: uppercase; } body#tinymce .button:focus, body#tinymce .button.focus, body#tinymce .button:hover, body#tinymce button:focus, body#tinymce button.focus, body#tinymce button:hover, body#tinymce input[type=submit]:focus, body#tinymce input[type=submit].focus, body#tinymce input[type=submit]:hover, body#tinymce a.call-to-action:focus, body#tinymce a.call-to-action.focus, body#tinymce a.call-to-action:hover { text-decoration: none; } body#tinymce .button:focus, body#tinymce .button.focus, body#tinymce button:focus, body#tinymce button.focus, body#tinymce input[type=submit]:focus, body#tinymce input[type=submit].focus, body#tinymce a.call-to-action:focus, body#tinymce a.call-to-action.focus { outline: 0; } body#tinymce .button.disabled, body#tinymce .button:disabled, body#tinymce button.disabled, body#tinymce button:disabled, body#tinymce input[type=submit].disabled, body#tinymce input[type=submit]:disabled, body#tinymce a.call-to-action.disabled, body#tinymce a.call-to-action:disabled { opacity: 0.65; -webkit-box-shadow: none; box-shadow: none; } body#tinymce .button:active, body#tinymce .button.active, body#tinymce button:active, body#tinymce button.active, body#tinymce input[type=submit]:active, body#tinymce input[type=submit].active, body#tinymce a.call-to-action:active, body#tinymce a.call-to-action.active { background-image: none; -webkit-box-shadow: 0 0 0 3px var(--primary-alpha), inset 0 3px 5px rgba(0, 0, 0, 0.125); box-shadow: 0 0 0 3px var(--primary-alpha), inset 0 3px 5px rgba(0, 0, 0, 0.125); } body#tinymce .button, body#tinymce button, body#tinymce input[type=submit] { background-color: var(--primary); border-color: var(--primary); color: var(--primary-fg); } body#tinymce .button:focus, body#tinymce .button.focus, body#tinymce .button:hover, body#tinymce button:focus, body#tinymce button.focus, body#tinymce button:hover, body#tinymce input[type=submit]:focus, body#tinymce input[type=submit].focus, body#tinymce input[type=submit]:hover { background-color: var(--primary-dark); border-color: var(--primary-dark); color: var(--primary-fg); } body#tinymce .button:focus, body#tinymce .button.focus, body#tinymce button:focus, body#tinymce button.focus, body#tinymce input[type=submit]:focus, body#tinymce input[type=submit].focus { -webkit-box-shadow: 0 0 0 2px var(--primary-fg), 0 0 0 4px var(--primary-dark); box-shadow: 0 0 0 2px var(--primary-fg), 0 0 0 4px var(--primary-dark); } body#tinymce .button.button--accent, body#tinymce button.button--accent, body#tinymce input[type=submit].button--accent { background-color: var(--accent); border-color: var(--accent); color: var(--accent-fg); } body#tinymce .button.button--accent:focus, body#tinymce .button.button--accent.focus, body#tinymce .button.button--accent:hover, body#tinymce button.button--accent:focus, body#tinymce button.button--accent.focus, body#tinymce button.button--accent:hover, body#tinymce input[type=submit].button--accent:focus, body#tinymce input[type=submit].button--accent.focus, body#tinymce input[type=submit].button--accent:hover { background-color: var(--accent-dark); border-color: var(--accent-dark); color: var(--accent-fg); } body#tinymce .button.button--accent:focus, body#tinymce .button.button--accent.focus, body#tinymce button.button--accent:focus, body#tinymce button.button--accent.focus, body#tinymce input[type=submit].button--accent:focus, body#tinymce input[type=submit].button--accent.focus { -webkit-box-shadow: 0 0 0 2px var(--accent-fg), 0 0 0 4px var(--accent-dark); box-shadow: 0 0 0 2px var(--accent-fg), 0 0 0 4px var(--accent-dark); } body#tinymce .button.button--accent:active, body#tinymce .button.button--accent.active, body#tinymce button.button--accent:active, body#tinymce button.button--accent.active, body#tinymce input[type=submit].button--accent:active, body#tinymce input[type=submit].button--accent.active { background-image: none; -webkit-box-shadow: 0 0 0 3px var(--accent-alpha), inset 0 3px 5px rgba(0, 0, 0, 0.125); box-shadow: 0 0 0 3px var(--accent-alpha), inset 0 3px 5px rgba(0, 0, 0, 0.125); } body#tinymce .call-to-action { background-color: var(--primary-fg); border-color: var(--primary); color: var(--primary); } body#tinymce .call-to-action:focus, body#tinymce .call-to-action.focus, body#tinymce .call-to-action:hover { background-color: var(--primary-fg); border-color: var(--primary-dark); color: var(--primary-dark); } body#tinymce .call-to-action:focus, body#tinymce .call-to-action.focus { -webkit-box-shadow: 0 0 0 2px var(--primary-fg), 0 0 0 4px var(--primary-dark); box-shadow: 0 0 0 2px var(--primary-fg), 0 0 0 4px var(--primary-dark); } body#tinymce .call-to-action.call-to-action--accent { background-color: var(--accent-fg); border-color: var(--accent); color: var(--accent); } body#tinymce .call-to-action.call-to-action--accent:focus, body#tinymce .call-to-action.call-to-action--accent.focus, body#tinymce .call-to-action.call-to-action--accent:hover { background-color: var(--accent-fg); border-color: var(--accent-dark); color: var(--accent-dark); } body#tinymce .call-to-action.call-to-action--accent:focus, body#tinymce .call-to-action.call-to-action--accent.focus { -webkit-box-shadow: 0 0 0 2px var(--accent-fg), 0 0 0 4px var(--accent-dark); box-shadow: 0 0 0 2px var(--accent-fg), 0 0 0 4px var(--accent-dark); } body#tinymce .call-to-action.call-to-action--accent:active, body#tinymce .call-to-action.call-to-action--accent.active { background-image: none; -webkit-box-shadow: 0 0 0 3px var(--accent-alpha), inset 0 3px 5px rgba(0, 0, 0, 0.125); box-shadow: 0 0 0 3px var(--accent-alpha), inset 0 3px 5px rgba(0, 0, 0, 0.125); } body#tinymce [class$="--accent"] .call-to-action { background-color: var(--accent); border-color: var(--accent-fg); color: var(--accent-fg); } body#tinymce [class$="--accent"] .call-to-action:focus, body#tinymce [class$="--accent"] .call-to-action.focus, body#tinymce [class$="--accent"] .call-to-action:hover { background-color: var(--accent-dark); border-color: var(--accent-fg); color: var(--accent-fg); } body#tinymce [class$="--accent"] .call-to-action:focus, body#tinymce [class$="--accent"] .call-to-action.focus { -webkit-box-shadow: 0 0 0 2px var(--accent-dark), 0 0 0 4px var(--accent-fg); box-shadow: 0 0 0 2px var(--accent-dark), 0 0 0 4px var(--accent-fg); } body#tinymce [class$="--accent"] .call-to-action:active, body#tinymce [class$="--accent"] .call-to-action.active { background-image: none; -webkit-box-shadow: 0 0 0 3px var(--accent-alpha), inset 0 3px 5px rgba(0, 0, 0, 0.125); box-shadow: 0 0 0 3px var(--accent-alpha), inset 0 3px 5px rgba(0, 0, 0, 0.125); } body#tinymce .button--circle { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: var(--primary); border-color: var(--primary); border-radius: 50%; border-style: solid; border-width: 2px; color: var(--primary-fg); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 3.75rem; width: 3.75rem; } body#tinymce .button--circle:focus, body#tinymce .button--circle.focus, body#tinymce .button--circle:hover { background-color: var(--primary-dark); border-color: var(--primary-dark); color: var(--primary-fg); text-decoration: none; } body#tinymce .button--circle:focus, body#tinymce .button--circle.focus { -webkit-box-shadow: 0 0 0 2px var(--primary-fg), 0 0 0 4px var(--primary-dark); box-shadow: 0 0 0 2px var(--primary-fg), 0 0 0 4px var(--primary-dark); } body#tinymce .button--circle:active, body#tinymce .button--circle.active { background-image: none; -webkit-box-shadow: 0 0 0 3px var(--primary-alpha), inset 0 3px 5px rgba(0, 0, 0, 0.125); box-shadow: 0 0 0 3px var(--primary-alpha), inset 0 3px 5px rgba(0, 0, 0, 0.125); } body#tinymce .button--circle--accent { background-color: var(--accent); color: var(--accent-fg); } body#tinymce .button--circle--accent:focus, body#tinymce .button--circle--accent.focus, body#tinymce .button--circle--accent:hover { background-color: var(--accent-dark); border-color: var(--accent-dark); color: var(--accent-fg); } body#tinymce .button--circle--accent:focus, body#tinymce .button--circle--accent.focus { -webkit-box-shadow: 0 0 0 2px var(--accent-fg), 0 0 0 4px var(--accent-dark); box-shadow: 0 0 0 2px var(--accent-fg), 0 0 0 4px var(--accent-dark); } body#tinymce .button--circle--accent:active, body#tinymce .button--circle--accent.active { -webkit-box-shadow: 0 0 0 3px var(--accent-alpha), inset 0 3px 5px rgba(0, 0, 0, 0.125); box-shadow: 0 0 0 3px var(--accent-alpha), inset 0 3px 5px rgba(0, 0, 0, 0.125); } body#tinymce .page-section { width: 100%; padding: 4rem 1rem; background: var(--body-bg); text-align: center; } body#tinymce .page-section ul, body#tinymce .page-section ol { padding-left: 0; list-style-position: inside; } body#tinymce .page-section--accent { color: var(--accent-fg); background: var(--accent); } body#tinymce .page-section--accent h2 { color: var(--accent-fg); } body#tinymce .page-section--accent h2::before { background: var(--accent-fg); } body#tinymce .page-section--bordered { width: calc(100% - 2rem); margin: 5rem auto 0; border: solid 4px var(--accent); } body#tinymce .page-section--borderless { -webkit-box-shadow: none; box-shadow: none; } body#tinymce .block__subtitle { font-size: 1.5rem; margin-bottom: 1rem; text-transform: uppercase; } @media screen and (min-width: 768px) { body#tinymce .block__subtitle { margin-bottom: 1.5rem; } } body#tinymce .block-toggle__cta { position: relative; text-align: center; } @media screen and (min-width: 60rem) { body#tinymce .block-toggle__cta { display: none; } } body#tinymce .block-toggle__cta__blurb { font-size: 0.875rem; margin-bottom: 0; padding-bottom: 2.5rem; } body#tinymce .block-toggle__cta__button { bottom: 0; cursor: pointer; font-size: 1.5rem; left: 50%; margin: 0; position: absolute; -webkit-transform: translate(-50%, 50%); -o-transform: translate(-50%, 50%); transform: translate(-50%, 50%); z-index: 10; color: var(--primary); } body#tinymce .block-toggle__cta__button svg { width: 1.5rem; height: 2rem; } body#tinymce .block-toggle__cta__button.--visible svg { -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } body#tinymce .block.block-toggle { padding-bottom: 0; } @media screen and (max-width: 59.975rem) { body#tinymce .block.block-toggle:not(.block-toggle--visible) .block-toggle__content { display: none; } body#tinymce .block.block-toggle.block-toggle--visible .block-toggle__cta__blurb { display: none; } } body#tinymce .block.block-toggle.block-meta { padding-bottom: 6rem; } @media screen and (min-width: 60rem) { body#tinymce .has-sections .entry-content { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; max-width: 90rem; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: distribute; justify-content: space-around; } body#tinymce .page-section { width: 100%; max-width: 50rem; margin: 4rem auto; padding: 4rem 5.625rem; -webkit-box-shadow: -3px 5px 4px 2px rgba(135, 135, 135, 0.09); box-shadow: -3px 5px 4px 2px rgba(135, 135, 135, 0.09); } body#tinymce .page-section:first-of-type, body#tinymce .page-section:nth-of-type(2) { width: calc(50% - 4rem); } body#tinymce .page-section:only-of-type { width: 100%; max-width: 50rem; } body#tinymce .page-section--bordered { margin: 4rem auto; width: 100%; max-width: 50rem; -webkit-box-shadow: none; box-shadow: none; } body#tinymce .page-section--bordered:first-of-type, body#tinymce .page-section--bordered:nth-of-type(2) { width: calc(50% - 4rem); } body#tinymce .page-section--bordered:only-of-type { width: 100%; max-width: 50rem; } }