/*********************************************/ /* =^..^= =^..^= =^..^= =^..^= =^..^= =^..^= */ /* */ /* CUSTOM STYLE OVERWRITES */ /* */ /* =^..^= =^..^= =^..^= =^..^= =^..^= =^..^= */ /*********************************************/ /*********************************************/ /* =^..^= =^..^= =^..^= =^..^= =^..^= =^..^= */ /* */ /* Hubspot POWER THEME V1.1.4 */ /* by maka Ageny */ /* */ /* STYLE SETTINGS V1.0 */ /* */ /* =^..^= =^..^= =^..^= =^..^= =^..^= =^..^= */ /*********************************************/ /****************************************************************************/ /* */ /* With this file we provide you with comfortable options to adjust */ /* some global style aspects of the POWER theme to your needs. */ /* */ /* Please clone the theme to be able to edit the code files if you need */ /* to do so. */ /* */ /****************************************************************************/ /***************************************************************************** INDEX: 1. BASIC COLOR DEFINITIONS #bcd 2. SPECIFIC COLOR DEFINITIONS #scd - Background - Accent Background - Text - Titles - Links - Buttons - Navigation - Social Icons & Form Errors - Blog 3. FONT-SETTINGS #fs - Basic and accent font types - Font smooting - Font sizes - Font weights 4. ROUND EDGES #re 5. EFFECTS #eff - 3D box effect - Button hover effect 6. LAYOUT #lay - Main header menu position - Content width - Section padding - Responsive breakpoints - Mobile responsiveness size reduction factors 7. STYLING #sty - Slider Bullet Styles *****************************************************************************/ /* ========================================================================== 1. BASIC COLOR DEFINITIONS #bcd These colors are used throughout the POWER template. ========================================================================== */ /* This color represents e.g. background color for dark-mode, dark text color, * is base for dark borders, ... */ /* This color represents e.g. dark accent background color for boxes in front * of dark background (baseColorDark) */ /* This color represents e.g. background color for light-mode, * light text color, is base for light borders, ... */ /* This color represents e.g. light accent background color for boxes in * front of light background (baseColorLight) */ /* This color represents your primary brand color, e.g. * Accents / Hightlights, Hovers, Buttons, ... */ /* ========================================================================== 2. SPECIFIC COLOR DEFINITIONS #scd In this section you have the possibility to set more specific colors for common elements like text, titles, buttons, etc. ========================================================================== */ /* Background Colors */ /* Dark / Light accent background colors */ /* Dark / Light text colors */ /* Dark / Light intro title and title colors * For section intro + title, hero title, author page posts title and * blog overview (layout: 1 column) */ /* Link-Colors */ /* Dark / Light Link-Colors for POWER rich-text fields */ /* Primary / Dark / Light button background + text colors */ /* Dark / Light font color for navigation (Header / Footer) */ /* Hover opacity value for top-level navigation items (0 invisible, 1 fully visible) */ /* Hover background and font color for sub-level menu items (Dropdown, Mega-Menu, Burger-Menu) */ /* Boxed Elements Hover Colors */ /* Social Icon color used for Header Top (light), Author Page, Media Content Split module */ /* Colors for HubSpot's form module */ /* Colors for POWER's form modules */ /* Blog */ /* ========================================================================== 3. FONT AND FONT-SIZES #fs If you have a custom or purchased font, upload the files via file-manager and reference the font format(s) in the @font-face statement Please note, that you have to clone the theme before to be able to edit the code files of the theme. ========================================================================== */ /* Custom / Purchased fonts configured via @font-face * * @font-face properties explained: * font-family -> Official / Configured name of the font - this can be overwritten * by the function local within src-attribute if a custom name is desired. * src -> Here the links to the different font-formats uploaded in file-manager * are referenced * *.woff2 - format for all modern browsers * *.woff - format for IE 11 * *.eot - format for IE 6 - IE 8 * *.ttf - format for Safari, Android, iOS * *.svg - format for older iOS devices * font-weight -> Font weight as number (e.g. 700) or name (e.g. bold) * font-style -> Font style e.g. italic * */ /* @font-face { font-family: 'internal_font_name'; src: local('How_you_want_to_call_and_use_the_font'), url('https://cdn2.hubspot.net/hubfs/YOUR_HUBSPOT_ID/internal_font_name.woff') format('woff'), url('https://cdn2.hubspot.net/hubfs/YOUR_HUBSPOT_ID/internal_font_name.eot?#iefix') format('embedded-opentype'), url('https://cdn2.hubspot.net/hubfs/YOUR_HUBSPOT_ID/internal_font_name.ttf') format('truetype'), url('https://cdn2.hubspot.net/hubfs/YOUR_HUBSPOT_ID/internal_font_name.svg#svgFontName') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } */ /* Font family to use in the template * * You can set the names of the fonts you have imported via * @font-face above and optionally configure fall-back fonts (comma-separated) * */ /* You can use a different accent font-family for titles, CTAs, Menu, ... */ /* Switch font smoothing on (true) or off (false) */ /* * Font-sizes IN PIXELS */ /* Font size used in the body and in rich-text fields */ /* Font size used for paragraphs in the body and in rich-text fields */ /* Font size used in the blog post body */ /* Font-size for intro title in section modules */ /* Font-size for text description in section modules */ /* Font-size for buttons */ /* Font-sizes for headings */ /* Font-sizes for navigation (header and footer) - we recommend small variations from the default value */ /* Font-size for forms */ /* * Font-weights */ /* Font weight used in the body */ /* Font weight used in paragraphs */ /* Font weight used in the blog post body */ /* Font weight for intro title in section modules */ /* Font weight for text description in section modules */ /* Font weight used for headings */ /* Font weight for buttons */ /* Font weights Header */ /* Font weights for forms */ /* * Line-heights TRANSFORMED TO EM */ /* Line height used in the body */ /* Line height used in paragraphs */ /* Line height used in the blog post body */ /* Line height for intro title in section modules */ /* Line height for text description in section modules */ /* Line height for headings */ /* * Letter-spacings IN PIXELS */ /* Letter-spacing used in the body */ /* Letter-spacing used in paragraphs */ /* Letter-spacing used in the blog post body */ /* Letter-spacing for intro title in section modules */ /* Letter-spacing for text description in section modules */ /* Letter-spacing used for headings */ /* Letter-spacing for buttons */ /* Letter-spacing Header */ /* Letter-spacing for forms */ /* Accent text-property for e.g. titles, button-texts, menu, ... * Standard value -> text-transform: uppercase. To deactivate, use empty single quotation */ /* ========================================================================== 4. ROUND EDGES #re 0px is rectangular and 25px already pretty round ========================================================================== */ /* Round edges on buttons */ /* Round edges on inputs */ /* Round edges on dropdowns */ /* Round edges on boxes */ /* Round edges on images */ /* Round edges on checkboxes (max 6px) */ /* ========================================================================== 5. EFFECTS #eff ========================================================================== */ /* Switch 3D box effect on (true) or off (false) */ /* Switch button hover effect on (true) or off (false) */ /* ========================================================================== 6. LAYOUT #lay ========================================================================== */ /* * Main header menu position * * Position in percent. * Automatically centered if header is full-width */ /* Content width in pixel */ /* Vertical section padding in pixel * Relates to 'padding top' and 'padding bottom' setting in modules */ /* Horizontal section padding in pixel */ /* Header Breakpoint (when does it change to a burger menu...) */ /* Responsive Breakpoints */ /* Mobile responsiveness size reduction factors used by macros */ /* reduces font-sizes for mobile where applicable - by factor e.g. .25 => 25% */ /* Not smaller than ... pixel */ /* Reduces margins, paddings, etc. - by factor e.g. .25 => 25% */ /* ========================================================================== 7. STYLING #sty ========================================================================== */ /* * Slider Bullet Styles */ :root { --sl-pag-bullet-horizontal-gap: 5.0px; --sl-pag-bullet-inactive-opacity: 0.4; --sl-pag-bullet-inactive-height: 3px; --sl-pag-height: 3px; --sl-pag-bullet-inactive-width: 32px; --sl-pag-bullet-inactive-border-radius: 0px; --sl-pag-bullet-active-height: 3px; --sl-pag-bullet-active-width: 32px; --sl-pag-bullet-active-border-radius: 0px; } /* ========================================================================== MACROS ========================================================================== */ /*********************************************/ /* =^..^= =^..^= =^..^= =^..^= =^..^= =^..^= */ /* */ /* Hubspot POWER THEME V1.1.4 */ /* by maka Ageny */ /* */ /* STYLE SETTINGS V1.0 */ /* */ /* =^..^= =^..^= =^..^= =^..^= =^..^= =^..^= */ /*********************************************/ /****************************************************************************/ /* */ /* With this file we provide you with comfortable options to adjust */ /* some global style aspects of the POWER theme to your needs. */ /* */ /* Please clone the theme to be able to edit the code files if you need */ /* to do so. */ /* */ /****************************************************************************/ /***************************************************************************** INDEX: 1. BASIC COLOR DEFINITIONS #bcd 2. SPECIFIC COLOR DEFINITIONS #scd - Background - Accent Background - Text - Titles - Links - Buttons - Navigation - Social Icons & Form Errors - Blog 3. FONT-SETTINGS #fs - Basic and accent font types - Font smooting - Font sizes - Font weights 4. ROUND EDGES #re 5. EFFECTS #eff - 3D box effect - Button hover effect 6. LAYOUT #lay - Main header menu position - Content width - Section padding - Responsive breakpoints - Mobile responsiveness size reduction factors 7. STYLING #sty - Slider Bullet Styles *****************************************************************************/ /* ========================================================================== 1. BASIC COLOR DEFINITIONS #bcd These colors are used throughout the POWER template. ========================================================================== */ /* This color represents e.g. background color for dark-mode, dark text color, * is base for dark borders, ... */ /* This color represents e.g. dark accent background color for boxes in front * of dark background (baseColorDark) */ /* This color represents e.g. background color for light-mode, * light text color, is base for light borders, ... */ /* This color represents e.g. light accent background color for boxes in * front of light background (baseColorLight) */ /* This color represents your primary brand color, e.g. * Accents / Hightlights, Hovers, Buttons, ... */ /* ========================================================================== 2. SPECIFIC COLOR DEFINITIONS #scd In this section you have the possibility to set more specific colors for common elements like text, titles, buttons, etc. ========================================================================== */ /* Background Colors */ /* Dark / Light accent background colors */ /* Dark / Light text colors */ /* Dark / Light intro title and title colors * For section intro + title, hero title, author page posts title and * blog overview (layout: 1 column) */ /* Link-Colors */ /* Dark / Light Link-Colors for POWER rich-text fields */ /* Primary / Dark / Light button background + text colors */ /* Dark / Light font color for navigation (Header / Footer) */ /* Hover opacity value for top-level navigation items (0 invisible, 1 fully visible) */ /* Hover background and font color for sub-level menu items (Dropdown, Mega-Menu, Burger-Menu) */ /* Boxed Elements Hover Colors */ /* Social Icon color used for Header Top (light), Author Page, Media Content Split module */ /* Colors for HubSpot's form module */ /* Colors for POWER's form modules */ /* Blog */ /* ========================================================================== 3. FONT AND FONT-SIZES #fs If you have a custom or purchased font, upload the files via file-manager and reference the font format(s) in the @font-face statement Please note, that you have to clone the theme before to be able to edit the code files of the theme. ========================================================================== */ /* Custom / Purchased fonts configured via @font-face * * @font-face properties explained: * font-family -> Official / Configured name of the font - this can be overwritten * by the function local within src-attribute if a custom name is desired. * src -> Here the links to the different font-formats uploaded in file-manager * are referenced * *.woff2 - format for all modern browsers * *.woff - format for IE 11 * *.eot - format for IE 6 - IE 8 * *.ttf - format for Safari, Android, iOS * *.svg - format for older iOS devices * font-weight -> Font weight as number (e.g. 700) or name (e.g. bold) * font-style -> Font style e.g. italic * */ /* @font-face { font-family: 'internal_font_name'; src: local('How_you_want_to_call_and_use_the_font'), url('https://cdn2.hubspot.net/hubfs/YOUR_HUBSPOT_ID/internal_font_name.woff') format('woff'), url('https://cdn2.hubspot.net/hubfs/YOUR_HUBSPOT_ID/internal_font_name.eot?#iefix') format('embedded-opentype'), url('https://cdn2.hubspot.net/hubfs/YOUR_HUBSPOT_ID/internal_font_name.ttf') format('truetype'), url('https://cdn2.hubspot.net/hubfs/YOUR_HUBSPOT_ID/internal_font_name.svg#svgFontName') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } */ /* Font family to use in the template * * You can set the names of the fonts you have imported via * @font-face above and optionally configure fall-back fonts (comma-separated) * */ /* You can use a different accent font-family for titles, CTAs, Menu, ... */ /* Switch font smoothing on (true) or off (false) */ /* * Font-sizes IN PIXELS */ /* Font size used in the body and in rich-text fields */ /* Font size used for paragraphs in the body and in rich-text fields */ /* Font size used in the blog post body */ /* Font-size for intro title in section modules */ /* Font-size for text description in section modules */ /* Font-size for buttons */ /* Font-sizes for headings */ /* Font-sizes for navigation (header and footer) - we recommend small variations from the default value */ /* Font-size for forms */ /* * Font-weights */ /* Font weight used in the body */ /* Font weight used in paragraphs */ /* Font weight used in the blog post body */ /* Font weight for intro title in section modules */ /* Font weight for text description in section modules */ /* Font weight used for headings */ /* Font weight for buttons */ /* Font weights Header */ /* Font weights for forms */ /* * Line-heights TRANSFORMED TO EM */ /* Line height used in the body */ /* Line height used in paragraphs */ /* Line height used in the blog post body */ /* Line height for intro title in section modules */ /* Line height for text description in section modules */ /* Line height for headings */ /* * Letter-spacings IN PIXELS */ /* Letter-spacing used in the body */ /* Letter-spacing used in paragraphs */ /* Letter-spacing used in the blog post body */ /* Letter-spacing for intro title in section modules */ /* Letter-spacing for text description in section modules */ /* Letter-spacing used for headings */ /* Letter-spacing for buttons */ /* Letter-spacing Header */ /* Letter-spacing for forms */ /* Accent text-property for e.g. titles, button-texts, menu, ... * Standard value -> text-transform: uppercase. To deactivate, use empty single quotation */ /* ========================================================================== 4. ROUND EDGES #re 0px is rectangular and 25px already pretty round ========================================================================== */ /* Round edges on buttons */ /* Round edges on inputs */ /* Round edges on dropdowns */ /* Round edges on boxes */ /* Round edges on images */ /* Round edges on checkboxes (max 6px) */ /* ========================================================================== 5. EFFECTS #eff ========================================================================== */ /* Switch 3D box effect on (true) or off (false) */ /* Switch button hover effect on (true) or off (false) */ /* ========================================================================== 6. LAYOUT #lay ========================================================================== */ /* * Main header menu position * * Position in percent. * Automatically centered if header is full-width */ /* Content width in pixel */ /* Vertical section padding in pixel * Relates to 'padding top' and 'padding bottom' setting in modules */ /* Horizontal section padding in pixel */ /* Header Breakpoint (when does it change to a burger menu...) */ /* Responsive Breakpoints */ /* Mobile responsiveness size reduction factors used by macros */ /* reduces font-sizes for mobile where applicable - by factor e.g. .25 => 25% */ /* Not smaller than ... pixel */ /* Reduces margins, paddings, etc. - by factor e.g. .25 => 25% */ /* ========================================================================== 7. STYLING #sty ========================================================================== */ /* * Slider Bullet Styles */ :root { --sl-pag-bullet-horizontal-gap: 5.0px; --sl-pag-bullet-inactive-opacity: 0.4; --sl-pag-bullet-inactive-height: 3px; --sl-pag-height: 3px; --sl-pag-bullet-inactive-width: 32px; --sl-pag-bullet-inactive-border-radius: 0px; --sl-pag-bullet-active-height: 3px; --sl-pag-bullet-active-width: 32px; --sl-pag-bullet-active-border-radius: 0px; } /* Is used to reduce font-sizes for smaller screens */ /* Is used to reduce spacing (padding, margin) for smaller screens */ /* Generates rgba value from color object */ /* get Gradient Styles *//* Create styles for custom buttons */ /****************************************************************************/ /* IF YOU WOULD LIKE TO OVERWRITE CSS STYLE SETTINGS TO FURTHER CUSTOMIZE */ /* THE TEMPLATE TO YOUR NEEDS, PLEASE USE THIS FILE */ /* */ /****************************************************************************/ /***************************************************************************** INDEX: 1. ADDITIONAL VARIABLES #macro 2. BASE #base - Base Styles #base-pbs - Layout & DnD-Containers #base-dnd - Helper Classes & Shared Styles #base-hc 3. HEADER #head - Header Top #head-t 4. FOOTER #foot - Footer Full #foot-f 5. MENU STYLES #menu 6. BUTTONS #btn 7. FORMS #form 8. BLOG #blog - Post #blog-po 9. SYSTEM #sys 10. SECTION MODULES #mod - Top - Hero #mod-h - Section Steps #mod-stp - Section Media Content Split #mod-mcs - Section Form #mod-frm - Section Services #mod-sv - Section Device Mockup #mod-dm - Section Stats Counter #mod-sc - Section Team #mod-team - Section Blog Posts Preview #mod-bpp - Section Text #mod-txt - Standalone - Previous Next Navigation #mod-pnn 11. SUB MODULES #sub-m - Sub Image Boxes #sub-ib 13. MISCELLANOUS #misc ***************************************************************************** */ /* ========================================================================== 1. ADDITIONAL VARIABLES ========================================================================== */ /* ========================================================================== */ /* 2. BASE #base */ /* ========================================================================== */ html{ background-color: #0D0B1F; } /* Headings */ .pwr-rich-text h5, .pwr-rich-text h6{ margin-bottom: 8px; margin-top: 16px; } /* Paragraphs */ .pwr-rich-text p{ margin-top: 0; } /* Forms */ /* Lists */ .hs_cos_wrapper_type_rich_text ul:not(.inputs-list) li, .pwr-rich-text ul li, .hs_cos_wrapper_type_post_filter ul li, .hs_cos_wrapper_type_post_listing ul li { line-height: 1.6em; font-weight: 400; } .hs_cos_wrapper_type_rich_text ul:not(.inputs-list) li:before, .pwr-rich-text ul li:before, .hs_cos_wrapper_type_post_filter ul li:before, .hs_cos_wrapper_type_post_listing ul li:before { background-color: #332A77; border-radius: 50%; content: ""; height: 7px; left: -30px; position: absolute; top: 12px; width: 7px; } /* ========================================================================== */ /* Base Styles - Layout & DnD-Containers #base-dnd */ @media (max-width: 991px) { .dnd-section { padding-left: 0; padding-right: 0; } } @media (max-width: 575px){.dnd-section { padding-left: 0; padding-right: 0; }} /* ========================================================================== */ /* ========================================================================== */ /* Helper Classes & Shared Styles #base-hc */ .pwr-sec__desc { max-width: 60rem; } .pwr-sec__desc, .pwr-sec__desc p { line-height: 32px; } /* ========================================================================== */ /* 3. HEADER #head */ /* ========================================================================== */ .pwr-header { text-transform: none; } .hs-menu-wrapper.hs-menu-flow-horizontal li.hs-menu-depth-1:not(.hs-item-has-children):last-child>a { padding-right: 15px; } .pwr-header-right-bar__item.pwr-header-right-bar__cta a{ margin-left: 0px; } @media(max-width: 575px){ .pwr-header-logo__img, .pwr-header-logo__img--sticky{ width: 100px; } .pwr-hero .pwr-hero__info-box, .pwr-hero .pwr-hero__info-box.page-center { margin-bottom: 0px; } } /* ========================================================================== */ /* 4. FOOTER #foot */ /* ========================================================================== */ /* ========================================================================== */ /* Footer Full #foot-f */ .pwr-footer-full .hs-menu-wrapper.hs-menu-flow-vertical li.hs-menu-depth-1>a, .pwr-footer-full .pwr-footer-subscribe__title{ text-transform: uppercase; } .pwr-footer-full .hs-menu-wrapper.hs-menu-flow-vertical li.hs-menu-depth-2>a { text-transform: none; } @media (min-width: 992px){ .pwr-footer-full .hs-menu-wrapper.hs-menu-flow-vertical .hs-menu-item:not(:last-child) li.hs-menu-depth-2>a { word-spacing: 100vw; } .pwr--dark .pwr-footer-company-info__desc, .pwr--dark .pwr-footer-company-info__icons { max-width: 350px; } } @media (max-width: 767px) { .pwr-footer-full__content { padding-bottom: 20px; } } /* Footer Full */ /* ========================================================================== */ /* ========================================================================== */ /* 5. MENU STYLES #menu */ /* ========================================================================== */ .pwr-header__menu--mega-menu .hs-menu-wrapper li.hs-menu-depth-2>a { text-transform: uppercase; cursor: pointer; } .pwr-header__menu--mega-menu .hs-menu-wrapper li.hs-menu-depth-2>a:hover{ background-color: #332A77 } .pwr-header.pwr--dark:not(.scroll) .pwr-header__menu .hs-menu-wrapper .hs-menu-depth-3 a, .pwr-header--dark-on-scroll.scroll .hs-menu-wrapper .hs-menu-depth-3 a, .pwr-header.pwr--dark:not(.scroll) .pwr-header__menu .hs-menu-wrapper .hs-menu-depth-3 a:after, .pwr-header--dark-on-scroll.scroll .hs-menu-wrapper .hs-menu-depth-3 a:after { color: #A7B7ED; text-transform: none; } .pwr-header.pwr--dark:not(.scroll) .pwr-header__menu .hs-menu-wrapper .hs-menu-depth-3 a:hover, .pwr-header--dark-on-scroll.scroll .hs-menu-wrapper .hs-menu-depth-3:hover a { color: #FAFAFA } .hs-menu-item .hs-menu-depth-3:hover>a{ color: #F8F9F8 } .pwr-dark .hs-menu-item .hs-menu-depth-3:hover>a{ color: #0D0B1F } .hs-menu-depth-2>.hs-menu-children-wrapper { margin-left: 0px !important; } /* ========================================================================== */ /* 6. BUTTONS #btn */ /* ========================================================================== */ .cta_button:hover { cursor: pointer; } /* button pseudo classes */ .pwr--dark .pwr-cta--regular-solid .cta_button:not(.pwr-cta):not(.pwr-cta--hubspot-style):before, .pwr--dark .cta_button.pwr-cta--regular-solid:not(.pwr-cta--hubspot-style):before, .pwr-header--dark-on-scroll.scroll .pwr-cta--regular-solid .cta_button:not(.pwr-cta):not(.pwr-cta--hubspot-style):before, .pwr--dark .pwr-btn--regular-solid .hs-submit:before, .pwr-form.pwr-btn--regular-solid.pwr--dark .hs-submit:before { background-color: transparent; } .pwr-cta--regular-solid-primary-background .cta_button:not(.pwr-cta):not(.pwr-cta--hubspot-style):before, .cta_button.pwr-cta--regular-solid-primary-background:before, .pwr-btn--regular-solid-primary-background .hs-submit:before { background-color: transparent; } .pwr--dark .pwr-cta--regular-solid .cta_button:not(.pwr-cta):not(.pwr-cta--hubspot-style):hover:after, .pwr--dark .cta_button.pwr-cta--regular-solid:hover:after, .pwr-header--dark-on-scroll.scroll .pwr-cta--regular-solid .cta_button:not(.pwr-cta):not(.pwr-cta--hubspot-style):hover:after, .pwr--dark .pwr-btn--regular-solid .hs-submit:hover:after, .pwr-form.pwr-btn--regular-solid.pwr--dark .hs-submit:hover:after { background-color: transparent; } .cta_button:not(.pwr-cta--hubspot-style):before, .hs-submit:before, .pwr-cta--primary-solid .cta_button:not(.pwr-cta):not(.pwr-cta--hubspot-style):before, .cta_button.pwr-cta--primary-solid:before, .pwr-btn--primary-solid .hs-submit:before, .pwr-form.pwr-btn--primary-solid.pwr--light .hs-submit:before { background-color: transparent; } .cta_button:not(.pwr-cta--hubspot-style):hover:after, .hs-submit:hover:after, .pwr-cta--primary-solid .cta_button:not(.pwr-cta):not(.pwr-cta--hubspot-style):hover:after, .cta_button.pwr-cta--primary-solid:hover:after, .pwr-header--light-on-scroll.scroll .pwr-cta--primary-solid .cta_button:not(.pwr-cta):not(.pwr-cta--hubspot-style):hover:after, .pwr-btn--primary-solid .hs-submit:hover:after, .pwr-form.pwr-btn--primary-solid.pwr--light .hs-submit:hover:after { background-color: transparent; } .pwr--dark .cta_button:not(.pwr-cta--hubspot-style):hover:after, .pwr-header--dark-on-scroll.scroll .cta_button:not(.pwr-cta--hubspot-style):hover:after, .pwr--dark .hs-submit:hover:after, .pwr--dark .pwr-cta--primary-solid .cta_button:not(.pwr-cta):not(.pwr-cta--hubspot-style):hover:after, .pwr--dark .cta_button.pwr-cta--primary-solid:hover:after, .pwr-header--dark-on-scroll.scroll .pwr-cta--primary-solid .cta_button:not(.pwr-cta):not(.pwr-cta--hubspot-style):hover:after, .pwr--dark .pwr-btn--primary-solid .hs-submit:hover:after, .pwr-form.pwr-btn--primary-solid.pwr--dark .hs-submit:hover:after { background-color: transparent; } /* ------------------------ SOLID CTA------------------------ */ .cta_button:not(.pwr-cta--hubspot-style), .hs-submit, .pwr-cta--primary-solid .cta_button:not(.pwr-cta):not(.pwr-cta--hubspot-style), .cta_button.pwr-cta--primary-solid, .pwr-btn--primary-solid .hs-submit, .pwr-form.pwr-btn--primary-solid.pwr--light .hs-submit { color: #F8F9F8; background-color: #332A77; border: 1px solid #332A77; } .pwr--dark .pwr-cta--regular-solid .cta_button:not(.pwr-cta):not(.pwr-cta--hubspot-style), .pwr--dark .cta_button.pwr-cta--regular-solid, .pwr-header--dark-on-scroll.scroll .pwr-cta--regular-solid .cta_button:not(.pwr-cta):not(.pwr-cta--hubspot-style), .pwr--dark .pwr-btn--regular-solid .hs-submit, .pwr-form.pwr-btn--regular-solid.pwr--dark .hs-submit { background-color: #A6D8ED; color: #0D0B1F; border: 1px solid #A6D8ED; } /*hover*/ .cta_button:not(.pwr-cta--hubspot-style):not(.pwr-cta--link):hover, .scroll .cta_button:not(.pwr-cta--hubspot-style):hover, .hs-submit:hover, .pwr-cta--primary-solid .cta_button:not(.pwr-cta):not(.pwr-cta--hubspot-style):hover, .cta_button.pwr-cta--primary-solid:hover, .scroll .pwr-cta--primary-solid .cta_button:not(.pwr-cta):not(.pwr-cta--hubspot-style):hover, .pwr-btn--primary-solid .hs-submit:hover, .pwr-form.pwr-btn--primary-solid.pwr--dark .hs-submit:hover { color: #332A77; background-color: transparent; border: 1px solid #332A77; } .pwr--dark .cta_button:not(.pwr-cta--hubspot-style):not(.pwr-cta--link):hover, .pwr-header--dark-on-scroll.scroll .cta_button:not(.pwr-cta--hubspot-style):hover, .pwr--dark .hs-submit:hover, .pwr--dark .pwr-cta--primary-solid .cta_button:not(.pwr-cta):not(.pwr-cta--hubspot-style):hover, .pwr--dark .cta_button.pwr-cta--primary-solid:hover, .pwr-header--dark-on-scroll.scroll .pwr-cta--primary-solid .cta_button:not(.pwr-cta):not(.pwr-cta--hubspot-style):hover, .pwr--dark .pwr-btn--primary-solid .hs-submit:hover, .pwr-form.pwr-btn--primary-solid.pwr--dark .hs-submit:hover { color: #A6D8ED; background-color: transparent; border: 1px solid #A6D8ED; } /* ------------------------ SOLID CTA - 2nd on hero ------------------------- */ /* standard */ .pwr--dark .pwr-hero__cta.pwr-cta--regular-solid:nth-of-type(2) .cta_button:not(.pwr-cta):not(.pwr-cta--hubspot-style), .pwr--dark .pwr-hero__cta.cta_button.pwr-cta--regular-solid:nth-of-type(2), .pwr-header--dark-on-scroll.scroll .pwr-cta--regular-solid .cta_button:not(.pwr-cta):not(.pwr-cta--hubspot-style){ background-color: rgba(32, 34, 34, 0.2) ; color: #A6D8ED; border: 1px solid #A6D8ED; } /* hover */ .pwr--dark .pwr-cta--regular-solid:nth-of-type(2) .cta_button:not(.pwr-cta):not(.pwr-cta--hubspot-style):hover, .pwr-header--dark-on-scroll.scroll .pwr-cta--regular-solid:nth-of-type(2) .cta_button:not(.pwr-cta):not(.pwr-cta--hubspot-style):hover, .pwr--dark .pwr-btn--regular-solid .hs-submit:hover, .pwr-form.pwr-btn--regular-solid.pwr--dark .hs-submit:hover { border-color: #A6D8ED; background-color: transparent; color: #A6D8ED; } /* ------------------------ BORDER CTA ------------------------ */ .pwr--dark .pwr-cta--regular-border .cta_button:not(.pwr-cta):not(.pwr-cta--hubspot-style), .pwr--dark .cta_button.pwr-cta--regular-border, .pwr-header--dark-on-scroll.scroll .pwr-cta--regular-border .cta_button:not(.pwr-cta):not(.pwr-cta--hubspot-style), .pwr--dark .pwr-btn--regular-border .hs-submit, .pwr-form.pwr-btn--regular-border.pwr--dark .hs-submit { background-color: rgba(32, 34, 34, 0.2) ; border: 1px solid #A6D8ED; color: #A6D8ED; } /*------------------------------- HYPERLINKS ----------------------- */ .hyperlink-form-message-dark { color:#AB29FC; } .hyperlink-form-message-dark:hover { color:#F4F6FA; } /* ========================================================================== */ /* 8. BLOG #blog */ /* ========================================================================== */ /* ========================================================================== */ /* Listing Filter #blog-lf */ /* */ /* Also used in modules with filters, like Image Boxes */ /* */ .pwr-post-body{ background-color: #FFF; } .blog-content .pwr-filter .pwr-filter__link:hover, .blog-content .pwr-filter .pwr-filter__link.active { color: #A6D8ED; } .hs-blog-post h1 { max-width: 70%; } .pwr-post-content, .pwr-post-content p { font-size: 18px; font-weight: 400; line-height: 2em; letter-spacing: 0px; text-align: left !important; } /* Listing Filter */ /* ========================================================================== */ /* ========================================================================== */ /* Post #blog-po */ .hs-blog-post h1 { font-size: 48px; font-weight: 500; letter-spacing: -1px; line-height: 1.1805555555555556em; } .hs-blog-post .pwr-hero__desc p { font-size: 24px; } .pwr-post-item__overlay { background-color: #0D0B1F !important; } .pwr-post-content blockquote { padding-left: 40px; margin-left: 100px; margin-right: 120px; font-size: 1.5rem; line-height: 2.7rem; } @media (max-width: 767px) { .hs-blog-post h1 { font-size: 2.5rem; min-width: 100%; width: 70%; } .pwr-post-content blockquote { padding-left: 40px; margin-left: 0; margin-right: 0; font-size: 1.5rem; line-height: 2.7rem; } } @media (max-width: 575px) { .hs-blog-post h1 { font-size: 1.7rem; } .pwr-sec-posts__cta{ text-align: center; } } /* Post */ /* ========================================================================== */ /* ========================================================================== */ /* 10. SECTION MODULES #mod */ /* ========================================================================== */ /* ========================================================================== */ /* Top - Hero #mod-h */ .pwr-hero__info-box { bottom: 80px; } .pwr-hero__desc p { font-size: 18px; } .pwr-hero__desc { max-width: 700px; } .pwr-hero__cta-container { padding: 10px 0 30px; } .pwr-hero__title--extra-large { font-size: 100px; letter-spacing: -1px; line-height: 1.14em; max-width: 100%; font-weight: 500; } .pwr-hero__desc--larger p span{ font-size: 1.2rem } .pwr-hero--small .pwr-hero__title, .pwr-hero--x-small .pwr-hero__title { max-width: 80%; } @media (max-width: 1199px) { .pwr-hero__title--extra-large { font-size: 100px; } .pwr-hero--small .pwr-hero__title, .pwr-hero--x-small .pwr-hero__title { max-width: 100%; } } @media (max-width: 991px) { .pwr-hero__title--extra-large { font-size: 90px; } } @media (max-width: 767px) { .pwr-hero__title--extra-large { font-size: 90px; } } @media (max-width: 575px){ .pwr-hero .pwr-hero__info-box, .pwr-hero .pwr-hero__info-box.page-center { text-align: center; } } /* ========================================================================== */ /* Section Steps #mod-stp */ .pwr-steps { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; } .pwr-step.pwr-step--3-col { flex: 0 0 33.333333% } @media (min-width: 1200px){ #managed_services + div .pwr-step{ flex: 0 0 33.333333% } #managed_services + div .pwr-step:nth-child(4), #managed_services + div .pwr-step:nth-child(5), #managed_services + div .pwr-step:nth-child(6){ border-bottom: 1px solid rgba(248,249,248,.2); } #managed_services + div .pwr-step:nth-child(7), #managed_services + div .pwr-step:nth-child(8), #managed_services + div .pwr-step:nth-child(9){ border-bottom: 0; } } .pwr-step__desc { display: flex; flex-direction: column; } .pwr-step__img { max-width: 70px; max-height: 70px; } .pwr-step__desc p:first-child { margin-bottom: auto } .pwr-steps a{ color: #312D35; } .pwr-steps .pwr-step { margin: 0; padding: 40px 30px; height: 100%; border-right: 1px solid rgba(13, 11, 31, .2); border-bottom: 1px solid rgba(13, 11, 31, .2); } .pwr--dark .pwr-steps .pwr-step { border-right: 1px solid rgba(248, 249, 248, .2); border-bottom: 1px solid rgba(248, 249, 248, .2); } .pwr-steps .pwr-step:nth-child(3n) { border-right: 0; } .pwr-steps .pwr-step:nth-child(4), .pwr-steps .pwr-step:nth-child(5), .pwr-steps .pwr-step:nth-child(6){ border-bottom: 0; } @media (max-width: 1200px){ .pwr-steps .pwr-step{ flex: 0 0 50%; } .pwr-steps .pwr-step .pwr-step__desc{ padding-left: 20px; padding-right: 20px; } .pwr-steps .pwr-step { border-right: 0; border-bottom: 0; } .pwr--dark .pwr-steps .pwr-step { border-right: 0; border-bottom: 0; } .pwr-steps .pwr-step:nth-child(3n) { border-right: 0; } .pwr-steps .pwr-step:nth-child(4), .pwr-steps .pwr-step:nth-child(5), .pwr-steps .pwr-step:nth-child(6){ border-bottom: 0; } } @media (max-width: 768px){ .pwr-steps .pwr-step{ flex: 0 0 100%; padding: 40px 10px; border-bottom: 1px solid rgba(248, 249, 248, .2) } .pwr-steps .pwr-step:nth-child(1), .pwr-steps .pwr-step:nth-child(2), .pwr-steps .pwr-step:nth-child(3), .pwr-steps .pwr-step:nth-child(4), .pwr-steps .pwr-step:nth-child(5), .pwr-steps .pwr-step:nth-child(6), .pwr-steps .pwr-step:nth-child(7), .pwr-steps .pwr-step:nth-child(8){ border-bottom: 1px solid rgba(248, 249, 248, .2) } } /* ========================================================================== */ /* Section Media Content Split #mod-mcs */ .pwr-sec-split__desc { width: 100%; } .pwr-sec-split__link { color: #332A77; } .pwr-sec-split__link:hover { color: #6D2AB9; } .pwr--dark .pwr-sec-split__link { color: #A6d8ED; } .pwr--dark .pwr-sec-split__link:hover { color: #F8F9F8; } /* Engagement Steps Split Section */ .eb-media-split__list { padding-top: 20px; } .eb-media-split__step { display: flex; padding-top: 40px } .eb-media-split__step img { width: 40px; max-width: 40px; } .eb-media-split__step h4 { margin-left: 1.5rem; font-size: 20px; } .eb-media-split__step p { margin-left: 1.5rem; margin-top: 0; max-width: 30em; } @media (max-width: 992px){ .eb-media-split__list{ text-align: center; } .eb-media-split__step{ margin-top: 20px; flex-direction: column; align-items: center; } .eb-media-split__step h4{ margin-left: 0; margin-top: 1.3rem; } .eb-media-split__step p{ margin-left: 0; } .pwr-sec-split__title{ text-align: center; } .pwr-sec-split__img{ display:none } } /* ========================================================================== */ /* Section Form #mod-frm */ .pwr-sec-form__content h3{ font-size: 32px !important; font-weight: 600 !important; letter-spacing: -0.5px !important; line-height: 1.34375em !important; } .pwr-sec-form__content h3 span{ color: #312D35 !important; } .pwr--dark .pwr-sec-form__content h3 span{ color: #F8F9F8 !important; } @media (max-width: 767px) { .pwr-sec-form__content h3{ font-size: 24px !important; } } .pwr-sec-form__content p{ display: inline-block; font-size: 18px !important; font-weight: 400 !important; letter-spacing: 0px !important; line-height: 2.0em !important; } @media (max-width: 767px) { .pwr-sec-form__content p{ font-size: 15px !important; } } .hs-richtext.hs-main-font-element { margin-bottom: 60px; } /* ========================================================================== */ /* Section Services #mod-svs */ .pwr-services { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; } .pwr-sec-services--style-2 { padding-bottom: 30px; } .pwr-services-item { max-width: 500px; height: auto; display: flex; flex-direction: column; } .pwr-services-item__img { max-width: 70px; max-height: 70px; } .pwr-services-item .pwr-services-item__desc{ margin-bottom: auto; height: fit-content; padding-bottom: 2rem; } .pwr-services-item .pwr-services-item__more-link{ margin-bottom: 0; } .pwr-services--style-1 .pwr-services-item, .pwr--dark .pwr-services--style-1 .pwr-services-item { border-right: none; border-bottom: none; transition: all .4s ease-in-out; } .pwr-services--style-1 .pwr-services-item:hover{ background: #F8F9F8; border-radius: 4%; box-shadow: inset 18.32px 18.32px 18px #DDDEDD, inset -18.32px -18.32px 18px #FFFFFF; cursor:pointer; } .pwr--dark .pwr-services--style-1 .pwr-services-item:hover { background: linear-gradient(145deg, #0A0824, #100E26); border-radius: 4%; box-shadow: inset 9.91px 9.91px 15px #070610, inset -9.91px -9.91px 15px #1f1a48; cursor: pointer; } .pwr-services-item__more-link{ color: #332A77; opacity: 0.7; display: block; } .pwr-services-item__more-link:before { content: "Read More"; color: #332A77; opacity: 1; transition: all .4s ease-in-out; } .pwr--dark .pwr-services-item__more-link:before { content: "Read More"; color: #F8F9F8; opacity: 0.7; transition: all .4s ease-in-out; } .pwr-services-item.pwr-services-item--is-link:hover .pwr-services-item__more-link, .pwr-services-item.pwr-services-item--is-link:hover .pwr-services-item__more-link:before { color: #6D2AB9 } .pwr-services-item.pwr-services-item--is-link:hover .pwr-services-item__title { color: #5C5563; } .pwr--dark .pwr-services-item.pwr-services-item--is-link:hover .pwr-services-item__title { color: #FAFAFA; } .fake-link{ position: relative; color: #A6d8ED; } .fake-link::before{ content: ""; position: absolute; display: block; width: 100%; height: 2px; bottom: -4px; left: 0; background-color: #A6d8ED; transform: scaleX(0); transition: transform 0.5s ease-in-out; transition-delay: 250ms; } .pwr-value.pwr-touch-btn-container:hover .fake-link::before{ transform: scaleX(1); } @media(hover:none){ .pwr-services-item__more-link{ margin-left: auto; margin-right: auto; background-color: #A6D8ED; color: #0D0B1F; width: 70%; margin-bottom: 3rem; padding: 8px 12px; border-radius: 30px; } .pwr--dark .pwr-services-item__more-link:before { content: "Read More"; color: #0D0B1F; opacity: 1; } .pwr-services-item--is-link:not(.pwr-services-box) .pwr-services-item__more-link { color: #0D0B1F; } } @media (max-width: 575px){ .pwr-services{ flex: 0 0 100%; } .pwr-services--style-1 .pwr-services-item, .pwr--dark .pwr-services--style-1 .pwr-services-item { margin-bottom: 2rem; } } @media (max-width: 1200px){ .pwr-services{ flex: 0 0 45%; } } /* ========================================================================== */ /* Section Device Mockup #mod-dm */ @media (max-width: 991px){ .pwr-sec-mockup__title+.pwr-sec-mockup__desc { text-align: left; width: 100%; } } /* ========================================================================== */ /* Section Stats Counter #mod-sc */ @media (max-width: 575px){ .pwr-stat{ width: 100%; } } /* ========================================================================== */ /* Section Team # */ .pwr--align-c .pwr-team-members{ display: flex; flex-wrap: wrap; justify-content: center; } .pwr-team-member__img { background-position: center; } /* ========================================================================== */ /* Section Blog Posts Preview #mod-bpp */ .pwr--dark .pwr-rel-post-item:hover .pwr-rel-post-item__more-link { color: #A6d8ED; } .pwr--dark .pwr-rel-post-item:hover .pwr-rel-post-item__title, .pwr--dark .pwr-rel-post-item--large:hover .pwr-rel-post-item__more-link { color: #A6d8ED; } .pwr-rel-post-item__img-overlay { background-color: #A6d8ED; } .pwr-rel-post-item__overlay-icon{ fill: #5C5563; } /* ========================================================================== */ /* Section Text #mod-txt */ #management_member + div > .page-center { margin-left: 0; } /* ========================================================================== */ /* Standalone - Previous Next Navigation #mod-pnn */ .pwr-prev-next-nav__link:hover, .pwr--dark .pwr-prev-next-nav__link:hover { color: #A6d8ED; } /* ========================================================================== */ /* 11. SUB MODULES #sub-m */ /* ========================================================================== */ /* ========================================================================== */ /* Sub Module - IMAGE BOXES #sub-ib */ .pwr-image-box:hover .pwr-image-box__overlay { background-color: #0D0B1F; opacity: .70; } /* ========================================================================== */ /* 13. MISCELLANOUS #misc */ /* ========================================================================== */ /* Slider */ .pwr-owl .owl-dots .owl-dot span { background-color: #A6d8ED; -webkit-backface-visibility: visible; display: block; height: 0.8rem; margin: 0 5px; opacity: .4; transition: opacity 200ms ease; width: 0.8rem; border-radius: 50%; } /* ========================================================================== */ /* 14. IFRAME - CAREERS PAGE */ /* ========================================================================== */ /* ========================================================================== */ */ /* ========================================================================== */