/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-homepage-hero-dropdown .f-checkbox-wrapper { display: inline-flex; }

.f-homepage-hero-dropdown .f-checkbox-wrapper span { margin-left: 8px; }

.f-homepage-hero-dropdown .f-dropdown-options { color: #444647; font-size: 14px; width: 185px; }

.f-homepage-hero-dropdown .f-dropdown-options li.f-selected-option { background-color: #fff; }

.f-homepage-hero-dropdown .f-dropdown-options li i { margin-left: 0; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-preset-list { display: flex; flex-wrap: wrap; justify-content: space-between; }

.f-preset-list .f-preset-item { background-position: center; background-size: cover; border-radius: 4px; cursor: pointer; height: 112px; margin: 0 0 16px; overflow: hidden; position: relative; width: 176px; }

.f-preset-list .f-radio-wrapper { left: 8px; margin: 0; padding: 0; position: absolute; top: 8px; z-index: 9; }

.f-preset-list:hover .f-preset-credit { opacity: 1; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-homepage-background-modal { display: block; font-family: Lato, sans-serif; }

.f-homepage-background-modal * { font-family: Lato, sans-serif; }

.f-homepage-background-modal .fas { font-family: 'Font Awesome 5 Pro'; }

.f-homepage-background-modal .f-tab-underline { font-size: 14px; }

.f-homepage-background-modal .fractal-fileupload-v2 .f-dropzone-wrapper .f-dropzone { align-items: center; display: flex; flex-direction: column; font-size: 14px; height: 320px; justify-content: center; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.fractal-click-to-confirm-modal-v2 .fractal-modal .wrapper-outer { height: 540px; max-height: 540px; max-width: 624px; }

.fractal-click-to-confirm-modal-v2 .fractal-modal .wrapper-outer .wrapper-inner .fractal-modal-body { padding: 15px 15px 0; }

.fractal-click-to-confirm-modal-v2.f-homepage-hero-image-modal .fractal-modal .wrapper-outer .wrapper-inner .fractal-modal-body { padding: 16px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-homepage-hero-edit { align-items: center; background: rgba(0, 0, 0, 0.4); border-radius: 4px; display: flex; height: 40px; justify-content: center; margin: 0 auto; padding: 0 8px; transform: translateY(20px); width: 518px; }

.f-homepage-hero-edit .webstorm-level .f-homepage-hero { margin-top: 50px; }

.f-homepage-hero-edit .fractal-fileupload { display: none; }

.f-homepage-hero-edit input { margin-left: 12px; padding: 5px 12px 4px; width: 80px; }

.f-homepage-hero-edit .__react_component_tooltip.type-dark.place-bottom { margin-top: 10px; }

.f-homepage-hero-edit .fractal-button.f-btn-xs { font-size: 12px; height: 24px; line-height: 24px; margin: 0; }

.f-homepage-hero-edit .fractal-button.f-btn-xs .fa-ellipsis-h { margin: 0; }

.f-homepage-hero-edit .fractal-button.f-dropdown-btn { margin-left: 8px; }

.f-homepage-hero-edit .fractal-button.f-homepage-hero-buttons-image, .f-homepage-hero-edit .fractal-button.f-btn-cancel { margin-right: 8px; }

.f-homepage-hero-edit .fractal-button.f-homepage-slider-focused { background-color: #797d7f; border-color: #797d7f; color: #fff; }

.f-homepage-hero-edit .fractal-button i:first-child { margin-right: 8px; }

.f-homepage-hero-edit .fractal-button i:last-child { margin-left: 8px; }

.f-homepage-hero-modify { display: flex; margin-right: 8px; }

.f-homepage-hero-buttons-image { line-height: 34px; margin: 12px 8px 0 20px; }

.f-hp-slide-container { align-items: center; display: flex; margin-right: 0; position: relative; }

.f-hp-slide-container .fractal-button { margin: 0; }

.f-hp-slide-container .fractal-input { margin-top: 12px; }

.f-homepage-hero-slider { background: #fff; border-radius: 4px; box-shadow: 2px 2px 10px -1px #000; left: 0; margin-left: 0; padding: 8px; position: absolute; top: 20px; width: 176px; z-index: 1; }

.f-homepage-hero-slider.is-off { display: none; }

.f-homepage-hero-slider .rc-slider-handle { border: 1px solid #bdc3c7; height: 11px; margin-top: -4px; width: 11px; }

.f-homepage-hero-slider .rc-slider-rail { background-color: #d5d9db; }

.f-homepage-hero-slider .rc-slider-track { background-color: #3498db; }

.f-save-cancel-buttons { display: flex; }

.f-save-cancel-buttons::before { background: #fff; content: ''; display: block; height: 20px; margin-right: 8px; margin-top: 2px; opacity: 0.8; width: 1px; }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.f-homepage-header-buttons { position: relative; top: 50%; transform: translateY(-50%); z-index: 99; }

.f-homepage-header-buttons .action-buttons { padding: 0 80px; text-align: center; }

.f-homepage-header-buttons .action-buttons button { width: 200px; }

.f-homepage-header-buttons .action-buttons button.campaign-closed { display: none; }

.f-homepage-header-buttons .action-buttons .f-btn-md { border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.25); font-size: 1.8rem; font-weight: 500; height: 4.8rem; margin: 0 0.8rem; padding: 0 2.4rem; width: auto; }

.f-homepage-header-buttons .action-buttons .f-btn-secondary { background: #e74c3c; border-radius: 4px; transition: all 0.2s ease-in-out; }

.f-homepage-header-buttons .action-buttons .f-btn-secondary:hover, .f-homepage-header-buttons .action-buttons .f-btn-secondary:focus { box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.25); outline: none; }

.f-homepage-header-buttons .action-buttons .f-btn-secondary:active { background: #d62c1a; outline: none; }

.f-homepage-header-buttons .action-buttons .f-btn-standard { background: rgba(255, 255, 255, 0.2); border: 2px solid #fff; border-radius: 4px; color: #fff; transition: all 0.2s ease-in-out; }

.f-homepage-header-buttons .action-buttons .f-btn-standard:hover, .f-homepage-header-buttons .action-buttons .f-btn-standard:focus { background: rgba(255, 255, 255, 0.2); border: 2px solid #fff; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.25); outline: none; }

.f-homepage-header-buttons .action-buttons .f-btn-standard:active { outline: none; }

.f-homepage-header-buttons .action-buttons .__react_component_tooltip.place-bottom { margin-top: 10px; }

.f-homepage-header-buttons .action-buttons .f-color-picker-group { margin-right: 8px; }

.f-homepage-header-buttons .navigate-container { clear: both; }

.f-homepage-header-buttons .f-buttons-editing { align-items: center; display: flex; justify-content: center; transform: translate(0, -3px); }

.f-homepage-header-buttons .f-buttons-editing.f-colorpicker-enabled { transform: translate(20px, -4px); }

.f-homepage-header-buttons .f-color-picker-group .fractal-color-picker { left: auto; right: 0; top: 40px; }

@media (max-width: 800px) { .f-homepage-header-buttons { top: initial !important; transform: translateY(0); width: 100% !important; } }

.f-homepage-header-buttons-editing .action-buttons .fractal-input { padding: 0 6px; }

.f-homepage-header-buttons-editing .action-buttons .fractal-input input { background: transparent; border-color: #3498db; border-width: 2px; color: white; font-family: 'Lato', 'Open Sans', arial, sans serif; font-size: 18px; margin-top: 7px; min-width: 0; padding: 2px; text-align: center; width: 100%; }

.f-homepage-header-buttons-editing .action-buttons .f-warning-border .fractal-input input { border: 2px solid #e74c3c; }

.f-homepage-header-buttons-editing .action-buttons .f-btn-hidden { display: inline-block; font-family: 'Lato', 'Open Sans', arial, sans serif; font-size: 18px; overflow: auto; position: fixed; top: 0; visibility: hidden; width: auto; }

@media (max-width: 1000px) { .fractal-homepage-header-buttons { position: inherit; top: inherit; transform: none; } }

/*
Guidelines:
- roughly, ordered from white / lighter grey to darker, then colors
- consider using standard names from external sources where possible;
- for example, ImageMagick has a lot of names https://www.imagemagick.org/script/color.php
- if you are starting out something that might have a lot of shades, leave numbers in between
- let the designer know the names of colors if you aren't sure
- Keep in sync with utils/rnwStyles.jsx
- @todo DRY out with utils/rnwStyles.jsx
*/
/* #region mixins for buttons */
/* #endregion */
/* #region mixins for buttons */
/* #endregion */
/* #region global variables */
/* #endregion */
/** KEEP wider-global-nav-bar mixin IN SYNC WITH: CORE/CSS/global_nav_OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR.css */
/** Legacy mobile first css with min-width's, however: Users are desktop first Organized this file desktop first Mixing naming here desktop first */
/* Desktop */
/* Tablet */
/* Phone */
/* Tiny phone */
/** Responsive card widths (Based off of idea boards 3.0 with sidebar (filter) open taking ~255px of space on left) Desktop first (Note: CSS order is desktop first so mobile over-rides) Margin of 10px each card >> subtract 20px each breakpoint >> About (235+20) = 275 width each card Calc's are divided by number of cards per row @todo Cleanup above comment - no longer super applicable as re-used mixin? @todo BPD-23765 Abstract all the grids / cards */
.redactor-dropdown-box-format .redactor-dropdown-p { font-family: 'Open Sans' !important; font-size: 12px; line-height: 24px; }

.redactor-dropdown-box-format .redactor-dropdown-h1 { font-family: 'Open Sans' !important; font-size: 32px; font-weight: bold; line-height: 40px; }

.redactor-dropdown-box-format .redactor-dropdown-h2 { font-family: 'Open Sans' !important; font-size: 24px; line-height: 30px; }

.redactor-dropdown-box-format .redactor-dropdown-h3 { font-family: 'Open Sans' !important; font-size: 14px; line-height: 15px; }

.redactor-dropdown-box-format .redactor-dropdown-h4 { font-family: 'Open Sans' !important; font-size: 13px; line-height: 13px; }

.redactor-dropdown-box-format .redactor-dropdown-h5 { font-family: 'Open Sans' !important; font-size: 12px; line-height: 12px; }

.redactor-dropdown-box-format .redactor-dropdown-h6 { font-family: 'Open Sans' !important; font-size: 11px; line-height: 11px; }

.redactor-air { background: rgba(255, 255, 255, 0.9); min-width: 70px; }

.redactor-air li a { color: rgba(0, 0, 0, 0.75); height: 34px; }

.redactor-air li a.re-button-icon { font-size: 12px; padding: 12px; }

#redactor-modal-overlay { background-color: rgba(0, 0, 0, 0.5); }

.fractal-redactor { position: relative; }

.fractal-redactor .redactor-box { border: none; }

.fractal-redactor .redactor-styles blockquote { border-left: 1px solid rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.6); font-style: italic; margin-bottom: 16px; padding-left: 24px; position: relative; }

.fractal-redactor .redactor-styles div { font-family: 'Open Sans' !important; font-size: 12px; line-height: normal; }

.fractal-redactor .redactor-styles h1 { font-family: 'Open Sans' !important; font-size: 32px; font-weight: bold; line-height: 40px; margin-bottom: 16px; }

.fractal-redactor .redactor-styles h2 { font-family: 'Open Sans' !important; font-size: 24px; line-height: 30px; margin-bottom: 14px; }

.fractal-redactor .redactor-styles h3 { font-family: 'Open Sans' !important; font-size: 14px; line-height: 15px; margin-bottom: 12px; }

.fractal-redactor .redactor-styles h4 { font-family: 'Open Sans' !important; font-size: 13px; line-height: 13px; margin-bottom: 11px; }

.fractal-redactor .redactor-styles h5 { font-family: 'Open Sans' !important; font-size: 12px; line-height: 12px; margin-bottom: 10px; }

.fractal-redactor .redactor-styles h6 { font-family: 'Open Sans' !important; font-size: 11px; line-height: 11px; margin-bottom: 5px; }

.fractal-redactor .redactor-styles ul { margin: 0 0 16px 24px; }

.fractal-redactor .redactor-styles li { line-height: 24px; }

.fractal-redactor .redactor-styles p { font-family: 'Open Sans' !important; font-size: 12px; line-height: 24px; margin-bottom: 16px; }

.fractal-redactor .redactor-styles p:empty { min-height: 0; }

.fractal-redactor .redactor-styles p + h3, .fractal-redactor .redactor-styles ul + h3 { margin-top: 0; }

.fractal-redactor .redactor-styles pre { background: rgba(0, 0, 0, 0.03); color: rgba(0, 0, 0, 0.75); font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 90%; font-style: normal; line-height: 24px; margin-bottom: 16px; margin-top: 16px; padding: 16px 20px; word-wrap: normal; }

.fractal-redactor .redactor-styles ul { font-family: 'Open Sans'; font-size: 12px; line-height: normal; }

.fractal-redactor .redactor-styles figure { margin-bottom: 0; }

.fractal-redactor .redactor-styles.dynamic-resize-large::before, .fractal-redactor .redactor-styles.dynamic-resize-large p, .fractal-redactor .redactor-styles.dynamic-resize-large div, .fractal-redactor .redactor-styles.dynamic-resize-large a { font-size: 24px; line-height: 32px; }

.fractal-redactor .redactor-styles.dynamic-resize-small::before, .fractal-redactor .redactor-styles.dynamic-resize-small p, .fractal-redactor .redactor-styles.dynamic-resize-small div, .fractal-redactor .redactor-styles.dynamic-resize-small a { font-size: 14px; }

.fractal-redactor .redactor-styles .video-container { padding-bottom: 30%; }

.fractal-redactor .redactor-toolbar li { height: 34px; }

.fractal-redactor .redactor-toolbar li a { height: 34px; }

.fractal-redactor .redactor-toolbar li a.re-button-icon { font-size: 12px; padding: 12px; }

.fractal-redactor .redactor-toolbar a.re-button { color: #444647; }

.fractal-redactor .redactor-toolbar .fa-spinner { float: right; font-size: 14px; margin: 10px; }

.fractal-redactor .redactor-toolbar-box .re-button-tooltip { display: none; visibility: hidden; }

.fractal-redactor .f-redactor-word-count { font-size: 10px; padding-top: 4px; position: absolute; right: 0; }

.redactor-dropdown-ai.redactor-dropdown a { border-bottom: none; font-family: 'Lato', sans-serif; font-weight: normal; }

.redactor-dropdown-ai.redactor-dropdown a.redactor-dropdown-item-disabled { color: #999ea1; }

.redactor-dropdown-ai.redactor-dropdown a.redactor-dropdown-item-heading, .redactor-dropdown-ai.redactor-dropdown a.redactor-dropdown-item-heading2 { padding: 8px 8px 4px; }

.redactor-dropdown-ai.redactor-dropdown a.redactor-dropdown-item-heading span, .redactor-dropdown-ai.redactor-dropdown a.redactor-dropdown-item-heading2 span { color: #797d7f; font-weight: 700; text-transform: uppercase; }

.redactor-dropdown-ai.redactor-dropdown a.redactor-dropdown-item-heading:hover, .redactor-dropdown-ai.redactor-dropdown a.redactor-dropdown-item-heading2:hover { background-color: #fff; color: inherit; cursor: default; }

.redactor-dropdown-ai.redactor-dropdown .fa-robot { padding-right: 8px; }

.redactor-dropdown-customformat .redactor-dropdown-item-0 { font-size: 12px; font-weight: 400; line-height: 20px; }

.redactor-dropdown-customformat .redactor-dropdown-item-1 { font-size: 14px; font-weight: 600; line-height: 20px; }

.redactor-dropdown-customformat .redactor-dropdown-item-2 { font-size: 18px; font-weight: 400; line-height: 28px; }

.redactor-dropdown-customformat .redactor-dropdown-item-3 { font-size: 24px; font-weight: 400; line-height: 36px; }

.redactor-dropdown-item-disabled { cursor: not-allowed; }

.redactor-dropdown a:not(.redactor-dropdown-item-disabled) span { color: #000; }

.redactor-context-toolbar { z-index: 2147483600; }

#redactor-modal { z-index: 100002; }

#redactor-modal .redactor-ai-modal-text { font-family: 'Lato', sans-serif; font-size: 14px; padding-bottom: 16px; }

#redactor-modal .redactor-ai-modal-text + textarea { font-family: 'Lato', sans-serif; font-size: 14px; resize: none; }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { html { overflow: auto; padding-right: 0 !important; } }

.f-homepage-hero { align-items: center; height: 60vh; justify-content: center; max-height: 9999px; min-height: 490px; overflow: hidden; position: relative; z-index: 0; }

.f-homepage-hero blockquote { border-left: 1px solid rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.6); font-style: italic; margin-bottom: 16px; padding-left: 24px; position: relative; }

.f-homepage-hero div { font-family: 'Open Sans' !important; font-size: 12px; line-height: normal; }

.f-homepage-hero h1 { font-family: 'Open Sans' !important; font-size: 32px; font-weight: bold; line-height: 40px; margin-bottom: 16px; }

.f-homepage-hero h2 { font-family: 'Open Sans' !important; font-size: 24px; line-height: 30px; margin-bottom: 14px; }

.f-homepage-hero h3 { font-family: 'Open Sans' !important; font-size: 14px; line-height: 15px; margin-bottom: 12px; }

.f-homepage-hero h4 { font-family: 'Open Sans' !important; font-size: 13px; line-height: 13px; margin-bottom: 11px; }

.f-homepage-hero h5 { font-family: 'Open Sans' !important; font-size: 12px; line-height: 12px; margin-bottom: 10px; }

.f-homepage-hero h6 { font-family: 'Open Sans' !important; font-size: 11px; line-height: 11px; margin-bottom: 5px; }

.f-homepage-hero ul { margin: 0 0 16px 24px; }

.f-homepage-hero li { line-height: 24px; }

.f-homepage-hero p { font-family: 'Open Sans' !important; font-size: 12px; line-height: 24px; margin-bottom: 16px; }

.f-homepage-hero p:empty { min-height: 0; }

.f-homepage-hero p + h3, .f-homepage-hero ul + h3 { margin-top: 0; }

.f-homepage-hero pre { background: rgba(0, 0, 0, 0.03); color: rgba(0, 0, 0, 0.75); font-family: Consolas, Menlo, Monaco, 'Courier New', monospace; font-size: 90%; font-style: normal; line-height: 24px; margin-bottom: 16px; margin-top: 16px; padding: 16px 20px; word-wrap: normal; }

.f-homepage-hero ul { font-family: 'Open Sans'; font-size: 12px; line-height: normal; }

.f-homepage-hero figure { margin-bottom: 0; }

.f-homepage-hero .redactor-styles { border: 2px solid #3498db; border-radius: 5px; cursor: text; }

.f-homepage-hero .redactor-styles:hover { cursor: text; }

.f-homepage-hero .fractal-button { font-family: 'Lato', 'Open Sans', arial, sans serif; }

.f-homepage-hero .f-homepage-hero-name { margin: 0 auto; min-width: 320px; width: 80%; }

.f-homepage-hero .f-homepage-hero-name .redactor-styles, .f-homepage-hero .f-homepage-hero-name .fractal-htmlpreview div { box-sizing: border-box; color: #fff; display: inline-block; font-size: 64px; font-weight: bold; line-height: 72px; margin: 0 auto; overflow: hidden; padding: 8px; width: 96%; }

.f-homepage-hero .f-homepage-hero-name .redactor-styles *, .f-homepage-hero .f-homepage-hero-name .fractal-htmlpreview div * { font-size: 64px; line-height: 64px; }

.f-homepage-hero .f-homepage-hero-description { margin: 2.4rem auto; min-width: 320px; width: 80%; }

.f-homepage-hero .f-homepage-hero-description .redactor-styles, .f-homepage-hero .f-homepage-hero-description .fractal-htmlpreview div { box-sizing: border-box; color: #fff; display: inline-block; font-size: 18px; line-height: 24px; margin: 0 auto 10px; overflow: hidden; padding: 8px 0; width: 96%; }

.f-homepage-hero .f-homepage-hero-description .redactor-styles *, .f-homepage-hero .f-homepage-hero-description .fractal-htmlpreview div * { font-size: 18px; }

@media (max-width: 800px) { .f-homepage-hero .f-homepage-hero-description { margin: 2rem auto; } }

.f-homepage-hero .fractal-redactor.redactor-with-air .redactor-box { background: none; }

.f-homepage-hero .fractal-redactor.redactor-with-air .redactor-layer { background: none; left: -1px; margin-bottom: -2px; overflow: visible; padding: 0; top: -1px; }

.f-homepage-hero .fractal-redactor.redactor-with-air .redactor-air { background: transparent; padding: 0; }

.f-homepage-hero .fractal-redactor.redactor-with-air .redactor-air a { background: #fff; border-radius: 4px; color: #444647; margin-bottom: 0; margin-top: 10px; }

.f-homepage-hero .f-homepage-header-buttons { position: relative; }

.f-homepage-hero .fractal-subscribe-button.fractal-subscribe-button-top { margin-top: 55px; }

.f-homepage-hero .f-homepage-hero-center { display: flex; margin: 0 auto; padding-bottom: 90px; padding-top: 75px; top: 30px; }

.f-homepage-hero .f-homepage-hero-center .main { flex: 1; }

.f-homepage-hero .f-homepage-hero-center .f-animate-out .rc-slider-track { visibility: hidden !important; }

.f-homepage-hero .f-homepage-hero-image { background-position: center center; background-repeat: no-repeat; background-size: cover !important; height: 100%; height: 60vh; left: 0; max-height: 9999px; min-height: 490px; position: absolute; width: 100%; z-index: -2; }

.f-homepage-hero .f-homepage-hero-overlay { background: black; height: 100%; height: 60vh; left: 0; max-height: 9999px; min-height: 490px; position: absolute; width: 100%; z-index: -1; }

.f-homepage-hero .f-homepage-hero-outline { bottom: 24px; height: calc(60vh - 112px); left: auto; margin: 0 auto; max-height: 9999px; max-width: calc(100% - 48px); min-height: 390px; position: absolute; top: auto; width: 100%; }

.f-homepage-hero .f-homepage-hero-outline::after { content: ''; display: block; height: 100%; width: 100%; }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .f-homepage-hero .f-homepage-hero-outline { left: 24px; } }

.f-homepage-hero .f-homepage-hero-clickarea { bottom: 24px; height: calc(60vh - 112px); left: auto; max-height: 9999px; max-width: calc(100% - 48px); min-height: 390px; position: absolute; top: auto; }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .f-homepage-hero .f-homepage-hero-clickarea { left: 24px; } }

.f-homepage-hero .f-edit-buttons { background: rgba(0, 0, 0, 0.4); border-radius: 4px; font-weight: bold; padding: 0; position: absolute; right: 10px; top: 10px; }

.f-homepage-hero .f-edit-trigger { opacity: 0; transition: opacity 0.3s; }

.f-homepage-hero .f-btn-hp-editmode i { margin-right: 8px; }

.f-homepage-hero .fractal-animate-in { height: 40px; }

.f-homepage-hero .side { margin-bottom: 40px; }

.f-homepage-hero.f-homepage-hero-editmode .f-homepage-hero-outline::after { border: 2px dashed rgba(255, 255, 255, 0.7); transition: border-color 0.2s; }

.f-homepage-hero.f-homepage-hero-editmode:hover .f-homepage-hero-outline .f-edit-trigger { opacity: 1; transition: opacity 0.3s; }

.f-homepage-hero.f-homepage-hero-editmode:hover .f-homepage-hero-outline::after { border: 2px dashed #fff; transition: border-color 0.2s; }

.f-homepage-hero.f-homepage-hero-editing .f-homepage-hero-outline::after { border: 2px dashed #fff; transition: border-color 0.2s; }

.f-homepage-hero.f-homepage-hero-editing .side { margin-bottom: 0; }

@media (max-width: 1000px) { .f-homepage-hero .f-homepage-hero-buttons-image { margin-left: 20px; }
  .f-homepage-hero .f-homepage-hero-center { display: block; padding-top: 0; }
  .f-homepage-hero .f-homepage-hero-slider { left: 185px; } }

#container_homepage_header #container_homepage_header, #container_homepage_header #container_homepage_header #display-section, #container_homepage_header #display-section .webstorm-level #container_homepage_header, #container_homepage_header #display-section .webstorm-level #container_homepage_header #display-section { height: 60vh; max-height: 9999px; min-height: 490px; }

#container_homepage_header #display-region, #container_homepage_header #display-section .webstorm-level #display-region { background: #bdc3c7; height: 60vh; max-height: 9999px; min-height: 490px; }

#container_homepage_header #display-region #hh-display, #container_homepage_header #display-section .webstorm-level #display-region #hh-display { overflow-y: visible; }

#container_homepage_header #display-section, #container_homepage_header #display-section .webstorm-level #display-section { height: 60vh; max-height: 9999px; min-height: 490px; }

#container_homepage_header .f-homepage-hero, #container_homepage_header #display-section .webstorm-level .f-homepage-hero { margin: 0 auto; max-width: 100%; width: 100%; }

#container_homepage_header .f-homepage-hero, #container_homepage_header #display-section .webstorm-level .f-homepage-hero { display: flex; flex-direction: column; overflow: visible; position: relative; z-index: auto; }

#container_homepage_header .f-homepage-hero .f-homepage-hero-image, #container_homepage_header .f-homepage-hero .f-homepage-hero-overlay, #container_homepage_header #display-section .webstorm-level .f-homepage-hero .f-homepage-hero-image, #container_homepage_header #display-section .webstorm-level .f-homepage-hero .f-homepage-hero-overlay { z-index: 0; }

#container_homepage_header .f-homepage-hero .f-home-center, #container_homepage_header #display-section .webstorm-level .f-homepage-hero .f-home-center { margin: 0 auto; max-width: calc(100% - 48px); position: relative; text-align: center; width: 100%; }

#container_homepage_header .f-homepage-hero .f-homepage-hero-center, #container_homepage_header #display-section .webstorm-level .f-homepage-hero .f-homepage-hero-center { display: block; padding: 0; position: relative; }

#container_homepage_header .f-homepage-hero .f-homepage-edit-btn-container, #container_homepage_header #display-section .webstorm-level .f-homepage-hero .f-homepage-edit-btn-container { position: absolute; right: 0; top: 0; z-index: 9; }

#container_homepage_header .f-homepage-hero .f-homepage-hero-clickarea, #container_homepage_header #display-section .webstorm-level .f-homepage-hero .f-homepage-hero-clickarea { display: flex; flex-direction: column; justify-content: center; position: absolute; }

.webstorm-level #container_homepage_header #hh-layout { min-width: 100%; }

.webstorm-level #container_homepage_header { height: 60vh; max-height: 9999px; min-height: 490px; }

.webstorm-level #container_homepage_header #display-section { height: 60vh; max-height: 9999px; min-height: 490px; }

.option-inline-header { margin-bottom: 30px; }

.option-inline-header #navbar.OPT_FEATURE_NEW_NAV_AND_ADMIN_BAR { position: absolute; }

.option-inline-header .title_back, .option-inline-header .title_back_hover { z-index: 0; }

.option-apps-v3 #container_homepage_header { height: 60vh; max-height: 9999px; min-height: 490px; }

@media (max-width: 1000px) { .option-apps-v3 #container_homepage_header, .option-apps-v3 #container_homepage_header .f-homepage-hero, .option-apps-v3 #container_homepage_header #display-section, .option-apps-v3 #container_homepage_header #display-region, .option-apps-v3 #container_homepage_header #display-section .webstorm-level #display-region, .option-apps-v3 #container_homepage_header #display-section .webstorm-level #display-section, .option-apps-v3 #container_homepage_header #display-section .webstorm-level .f-homepage-hero, .option-apps-v3 .webstorm-level #container_homepage_header, .option-apps-v3 .f-homepage-hero, .option-apps-v3 .f-homepage-hero .f-homepage-hero-overlay, .option-apps-v3 .f-homepage-hero .f-homepage-hero-image, .option-inline-header #container_homepage_header, .option-inline-header #container_homepage_header .f-homepage-hero, .option-inline-header #container_homepage_header #display-section, .option-inline-header #container_homepage_header #display-region, .option-inline-header #container_homepage_header #display-section .webstorm-level #display-region, .option-inline-header #container_homepage_header #display-section .webstorm-level #display-section, .option-inline-header #container_homepage_header #display-section .webstorm-level .f-homepage-hero, .option-inline-header .webstorm-level #container_homepage_header, .option-inline-header .f-homepage-hero, .option-inline-header .f-homepage-hero .f-homepage-hero-overlay, .option-inline-header .f-homepage-hero .f-homepage-hero-image { height: 80vh; max-height: 9999px; }
  .option-apps-v3 .f-homepage-hero .f-homepage-hero-outline, .option-apps-v3 #container_homepage_header .f-homepage-hero .f-homepage-hero-clickarea, .option-apps-v3 #container_homepage_header #display-section .webstorm-level .f-homepage-hero .f-homepage-hero-clickarea, .option-inline-header .f-homepage-hero .f-homepage-hero-outline, .option-inline-header #container_homepage_header .f-homepage-hero .f-homepage-hero-clickarea, .option-inline-header #container_homepage_header #display-section .webstorm-level .f-homepage-hero .f-homepage-hero-clickarea { height: calc(80vh - 112px); max-height: 9999px; }
  .option-apps-v3 .f-homepage-hero .f-homepage-hero-name .redactor-styles *, .option-apps-v3 .f-homepage-hero .f-homepage-hero-name .fractal-htmlpreview div, .option-apps-v3 .f-homepage-hero .f-homepage-hero-name .fractal-htmlpreview div *, .option-inline-header .f-homepage-hero .f-homepage-hero-name .redactor-styles *, .option-inline-header .f-homepage-hero .f-homepage-hero-name .fractal-htmlpreview div, .option-inline-header .f-homepage-hero .f-homepage-hero-name .fractal-htmlpreview div * { font-size: 56px; line-height: 60px; }
  .option-apps-v3 .f-homepage-hero .f-homepage-hero-description .redactor-styles *, .option-apps-v3 .f-homepage-hero .f-homepage-hero-description .fractal-htmlpreview div, .option-apps-v3 .f-homepage-hero .f-homepage-hero-description .fractal-htmlpreview div *, .option-inline-header .f-homepage-hero .f-homepage-hero-description .redactor-styles *, .option-inline-header .f-homepage-hero .f-homepage-hero-description .fractal-htmlpreview div, .option-inline-header .f-homepage-hero .f-homepage-hero-description .fractal-htmlpreview div * { font-size: 16px; line-height: 20px; margin-bottom: 8px; } }

@media (max-width: 768px) { .option-apps-v3 .f-homepage-hero .f-homepage-hero-name .redactor-styles *, .option-apps-v3 .f-homepage-hero .f-homepage-hero-name .fractal-htmlpreview div, .option-apps-v3 .f-homepage-hero .f-homepage-hero-name .fractal-htmlpreview div *, .option-inline-header .f-homepage-hero .f-homepage-hero-name .redactor-styles *, .option-inline-header .f-homepage-hero .f-homepage-hero-name .fractal-htmlpreview div, .option-inline-header .f-homepage-hero .f-homepage-hero-name .fractal-htmlpreview div * { font-size: 48px; line-height: 52px; word-break: break-word; }
  .option-apps-v3 .f-homepage-hero .f-homepage-hero-description .redactor-styles *, .option-apps-v3 .f-homepage-hero .f-homepage-hero-description .fractal-htmlpreview div, .option-apps-v3 .f-homepage-hero .f-homepage-hero-description .fractal-htmlpreview div *, .option-inline-header .f-homepage-hero .f-homepage-hero-description .redactor-styles *, .option-inline-header .f-homepage-hero .f-homepage-hero-description .fractal-htmlpreview div, .option-inline-header .f-homepage-hero .f-homepage-hero-description .fractal-htmlpreview div * { font-size: 14px; line-height: 18px; }
  .option-apps-v3 .f-homepage-hero .f-homepage-hero-description .redactor-styles, .option-apps-v3 .f-homepage-hero .f-homepage-hero-description .fractal-htmlpreview div, .option-apps-v3 .f-homepage-hero .f-homepage-hero-name .fractal-htmlpreview div, .option-inline-header .f-homepage-hero .f-homepage-hero-description .redactor-styles, .option-inline-header .f-homepage-hero .f-homepage-hero-description .fractal-htmlpreview div, .option-inline-header .f-homepage-hero .f-homepage-hero-name .fractal-htmlpreview div { margin: 0 auto; padding: 0; }
  .option-apps-v3 .f-homepage-hero .f-homepage-hero-description, .option-inline-header .f-homepage-hero .f-homepage-hero-description { margin: 0 auto; }
  .option-apps-v3 .f-homepage-hero .f-homepage-hero-description .redactor-styles, .option-apps-v3 .f-homepage-hero .f-homepage-hero-description .fractal-htmlpreview div, .option-inline-header .f-homepage-hero .f-homepage-hero-description .redactor-styles, .option-inline-header .f-homepage-hero .f-homepage-hero-description .fractal-htmlpreview div { margin-bottom: 16px; }
  .option-apps-v3 .f-homepage-hero .f-homepage-hero-description .redactor-styles p, .option-apps-v3 .f-homepage-hero .f-homepage-hero-description .fractal-htmlpreview div p, .option-inline-header .f-homepage-hero .f-homepage-hero-description .redactor-styles p, .option-inline-header .f-homepage-hero .f-homepage-hero-description .fractal-htmlpreview div p { margin-bottom: 8px; overflow: hidden; width: 100%; }
  .fractal-button span { white-space: nowrap; } }

@media (max-width: 560px) { .option-apps-v3 #container_homepage_header, .option-apps-v3 #container_homepage_header .f-homepage-hero, .option-apps-v3 #container_homepage_header #display-section, .option-apps-v3 #container_homepage_header #display-region, .option-apps-v3 #container_homepage_header #display-section .webstorm-level #display-region, .option-apps-v3 #container_homepage_header #display-section .webstorm-level #display-section, .option-apps-v3 #container_homepage_header #display-section .webstorm-level .f-homepage-hero, .option-apps-v3 .webstorm-level #container_homepage_header, .option-apps-v3 .f-homepage-hero, .option-apps-v3 .f-homepage-hero .f-homepage-hero-overlay, .option-apps-v3 .f-homepage-hero .f-homepage-hero-image, .option-inline-header #container_homepage_header, .option-inline-header #container_homepage_header .f-homepage-hero, .option-inline-header #container_homepage_header #display-section, .option-inline-header #container_homepage_header #display-region, .option-inline-header #container_homepage_header #display-section .webstorm-level #display-region, .option-inline-header #container_homepage_header #display-section .webstorm-level #display-section, .option-inline-header #container_homepage_header #display-section .webstorm-level .f-homepage-hero, .option-inline-header .webstorm-level #container_homepage_header, .option-inline-header .f-homepage-hero, .option-inline-header .f-homepage-hero .f-homepage-hero-overlay, .option-inline-header .f-homepage-hero .f-homepage-hero-image { height: calc(98vh - 48px); justify-content: flex-end; max-height: 9999px; }
  .option-apps-v3 .f-homepage-hero .f-homepage-hero-outline, .option-apps-v3 #container_homepage_header .f-homepage-hero .f-homepage-hero-clickarea, .option-apps-v3 #container_homepage_header #display-section .webstorm-level .f-homepage-hero .f-homepage-hero-clickarea, .option-inline-header .f-homepage-hero .f-homepage-hero-outline, .option-inline-header #container_homepage_header .f-homepage-hero .f-homepage-hero-clickarea, .option-inline-header #container_homepage_header #display-section .webstorm-level .f-homepage-hero .f-homepage-hero-clickarea { height: calc(98vh - 160px); max-height: 9999px; }
  .option-apps-v3 .f-homepage-hero .f-homepage-hero-name .redactor-styles *, .option-apps-v3 .f-homepage-hero .f-homepage-hero-name .fractal-htmlpreview div, .option-apps-v3 .f-homepage-hero .f-homepage-hero-name .fractal-htmlpreview div *, .option-inline-header .f-homepage-hero .f-homepage-hero-name .redactor-styles *, .option-inline-header .f-homepage-hero .f-homepage-hero-name .fractal-htmlpreview div, .option-inline-header .f-homepage-hero .f-homepage-hero-name .fractal-htmlpreview div * { font-size: 44px; line-height: 44px; }
  .option-apps-v3 .f-homepage-header-buttons .action-buttons, .option-inline-header .f-homepage-header-buttons .action-buttons { padding: 0; }
  .option-apps-v3 .f-homepage-header-buttons .action-buttons .f-homepage-browse-button, .option-inline-header .f-homepage-header-buttons .action-buttons .f-homepage-browse-button { margin-bottom: 12px; }
  .option-apps-v3 .f-homepage-header-buttons .f-buttons-editing, .option-inline-header .f-homepage-header-buttons .f-buttons-editing { flex-direction: column; }
  .option-apps-v3 .f-homepage-hero-edit, .option-inline-header .f-homepage-hero-edit { flex-direction: column; height: 70px; padding: 8px; width: 96%; }
  .option-apps-v3 .f-save-cancel-buttons::before, .option-inline-header .f-save-cancel-buttons::before { display: none; } }


/*# sourceMappingURL=index.css.map?8cceba22622edb3916d0*/