/*********************************************/ /* =^..^= =^..^= =^..^= =^..^= =^..^= =^..^= */ /* */ /* CUSTOM STYLE OVERWRITES */ /* */ /* =^..^= =^..^= =^..^= =^..^= =^..^= =^..^= */ /*********************************************/ /****************************************************************************/ /* */ /* IF YOU WOULD LIKE TO OVERWRITE CSS STYLE SETTINGS TO FURTHER CUSTOMIZE */ /* THE TEMPLATE TO YOUR NEEDS, PLEASE USE THIS FILE */ /* */ /****************************************************************************/ /*********************************************/ /* =^..^= =^..^= =^..^= =^..^= =^..^= =^..^= */ /* */ /* CUSTOM STYLE OVERWRITES by maka */ /* */ /* =^..^= =^..^= =^..^= =^..^= =^..^= =^..^= */ /*********************************************/ /*********************************************/ /* =^..^= =^..^= =^..^= =^..^= =^..^= =^..^= */ /* */ /* Hubspot POWER Template V1.0 */ /* by maka Ageny */ /* */ /* STYLE SETTINGS V1.0 */ /* */ /* =^..^= =^..^= =^..^= =^..^= =^..^= =^..^= */ /*********************************************/ /****************************************************************************/ /* */ /* With this file we provide you with some comfortable options to adjust */ /* some global style aspects of the POWER template to your needs. */ /* */ /* DON'T PANIC, it's way easier than it looks ;) We will guide you */ /* through the different configuration possibilities. */ /* */ /****************************************************************************/ /***************************************************************************** INDEX: 1. BASIC COLOR DEFINITIONS #bcd 2. SPECIFIC COLOR DEFINITIONS #scd - Background - Accent Background - Text - Titles - Links - Buttons - Navigation - Social Icons & Form Errors 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 *****************************************************************************/ /* ========================================================================== 1. BASIC COLOR DEFINITIONS #bcd These colors are used throughout the POWER template. The colors are configured in the HEX format. You can find or convert your color with the help of a tool like Photoshop, Gimp or online tools like colorpicker.com A color in the HEX format looks like this: #2254FE Change the HEX values inside the single quotation marks: ========================================================================== */ /* This color represents e.g. background color for dark-mode, dark text color, * is base for dark borders, ... * Theme default: #171B25, Standard black would be #000000 */ /* This color represents e.g. dark accent background color for boxes in front * of dark background (baseColorDark) * Theme default: #282B34 */ /* This color represents e.g. background color for light-mode, * light text color, is base for light borders, ... * Theme default: #FFFFFF (white) */ /* This color represents e.g. light accent background color for boxes in * front of light background (baseColorLight) * Theme default: #F4F6FA */ /* This color represents your primary brand color, e.g. * Accents / Hightlights, Hovers, Buttons, ... * Theme default: #2254FE */ /* ========================================================================== 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. You can either set HEX values like above or use the variable names on the left to reuse colors you have already defined. The latter is done by default and you can already save and have a look how your previous color changes affect your site. ========================================================================== */ /* Dark / Light 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) */ /* Dark / Light Link-Colors for 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) */ /* Social Icon color used for Header Top (light), Author Page, Media Content Split module * Theme default: #C4C8D3 */ /* Form error messages color * Theme default: #F2545B */ /* ========================================================================== 3. FONT AND FONT-SIZES #fs In this section you can configure the web-font(s) you would like to use. A lot of free and commonly used fonts are available at Google Fonts https://fonts.google.com/ There you can select the font and font-weights and use the suggested @import statement here 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 You'll find examples for both cases below ========================================================================== */ /* Google Fonts via @import */ /*@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap'); */ @font-face { font-family: 'NeueHelveticaPro45Light'; font-style: normal; font-weight: 400; src: local(''), url('https://7869277.fs1.hubspotusercontent-na1.net/hubfs/7869277/fonts/NeueHelveticaPro45Light.woff2') format('woff2'), /* Super Modern Browsers */ url('https://7869277.fs1.hubspotusercontent-na1.net/hubfs/7869277/fonts/NeueHelveticaPro45Light.woff') format('woff'), /* Modern Browsers */ } /* poppins-700 - latin */ @font-face { font-family: 'NeueHelveticaPro75Bold'; font-style: normal; font-weight: 700; src: local(''), url('https://7869277.fs1.hubspotusercontent-na1.net/hubfs/7869277/fonts/NeueHelveticaPro75Bold.woff2') format('woff2'), /* Super Modern Browsers */ url('https://7869277.fs1.hubspotusercontent-na1.net/hubfs/7869277/fonts/NeueHelveticaPro75Bold.woff') format('woff'), /* Modern Browsers */ } /* nunito-sans-regular - latin */ @font-face { font-family: 'NeueHelveticaPro45Light'; font-style: normal; font-weight: 400; src: local(''), url('https://7869277.fs1.hubspotusercontent-na1.net/hubfs/7869277/fonts/NeueHelveticaPro45Light.woff2') format('woff2'), /* Super Modern Browsers */ url('https://7869277.fs1.hubspotusercontent-na1.net/hubfs/7869277/fonts/NeueHelveticaPro45Light.woff') format('woff'), /* Modern Browsers */ } /* 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 @import or * @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 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-weights */ /* Font weight used in the body */ /* Font weight used in headings */ /* Font weight used in hero title */ /* Font weight for buttons */ /* Font weight Header Top */ /* Font weight Header / Burger */ /* Font weight Footer Titles & Reduced */ /* Font weight Footer Links */ /* 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 checkboxes (max 5px) */ /* Round edges on dropdowns */ /* Round edges on boxes */ /* Round edges on images */ /* ========================================================================== 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 */ /* Section padding in pixel * Relates to 'padding top' and 'padding bottom' setting in modules */ /* 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% */ .pwr-header.pwr-header-fixed { -webkit-transform: translate3d(0,0,0); transition: 0.5s ease-in-out; } /* ========================================================================== POWER GB Sticky Sub-Menu ========================================================================== */ .gb-sticky-sub-menu { padding: 10px 0; position: relative; z-index: 0; } .gb-sticky-sub-menu:not(.gb-sticky-sub-menu--mobile-open).scroll { position: fixed; box-shadow: -2px 3px 5px rgba(0,0,0,0.1); width: 100%; z-index: 999; } .gb-sticky-sub-menu--placeholder { display: none; } .gb-sticky-sub-menu--placeholder.scroll { display: block; } .gb-sticky-sub-menu__link-container { margin-left: -20px; margin-right: -20px; } .gb-sticky-sub-menu__link, .gb-sticky-sub-menu__link--external { color: #393E42; display: inline-block; font-family: NeueHelveticaPro75Bold, sans-serif; font-size: 13px; font-weight: 700; margin: 5px 20px; transition: color .4s ease-in-out; } .gb-sticky-sub-menu__link:hover:after, .gb-sticky-sub-menu__link--external:hover:after, .pwr--dark .gb-sticky-sub-menu__link:hover:after, .pwr--dark .gb-sticky-sub-menu__link--external:hover:after, .gb-sticky-sub-menu__link--active:after { content: ''; height: 3px; background: #d3eb2d; display: block; transition: all .4s ease-in-out; } .pwr--dark .gb-sticky-sub-menu__link, .pwr--dark .gb-sticky-sub-menu__link--external { color: #ffffff; } @media (min-width: 1200px ) { .pwr-anchor--sticky-sub-menu { margin-top: -55px; } .pwr-anchor--sticky-sub-menu::before { display: block; content: " "; height: 55px; margin-top: -55px; visibility: hidden; } .pwr-anchor--fixed-header.pwr-anchor--sticky-sub-menu { margin-top: -85px; } .pwr-anchor--fixed-header.pwr-anchor--sticky-sub-menu::before { display: block; content: " "; height: 140px; margin-top: -140px; visibility: hidden; } .pwr-anchor--fixed-header.pwr-anchor--fixed-top-header.pwr-anchor--sticky-sub-menu { margin-top: -141px; } .pwr-anchor--fixed-top-header.pwr-anchor--fixed-top-header.pwr-anchor--fixed-header.pwr-anchor--sticky-sub-menu::before { display: block; content: " "; height: 196px; margin-top: -196px; visibility: hidden; } } @media (max-width: 1199px ) { .gb-sticky-sub-menu { bottom: 0px; height: auto !important; left: 0px; min-height: 5px; padding: 0; position: fixed; right: 0px; top: auto !important; z-index: 999; } .gb-sticky-sub-menu:not(.gb-sticky-sub-menu--mobile-open) { background-color: transparent !important; } .gb-sticky-sub-menu--mobile-open { padding: 30px 0; text-align: center; } .gb-sticky-sub-menu--placeholder { display: none; } .gb-sticky-sub-menu__link-container { display: none; } .gb-sticky-sub-menu--mobile-open .gb-sticky-sub-menu__link-container { display: block; } .gb-sticky-sub-menu--mobile-open .gb-sticky-sub-menu__link, .gb-sticky-sub-menu--mobile-open .gb-sticky-sub-menu__link--external { display: block; font-size: 20px; padding: 10px 15px; } .gb-sticky-sub-menu__link:hover, .gb-sticky-sub-menu__link--external:hover, .pwr--dark .gb-sticky-sub-menu__link:hover, .pwr--dark .gb-sticky-sub-menu__link--external:hover, .gb-sticky-sub-menu__link--active { color: #d3eb2d !important; } .gb-sticky-sub-menu__link:hover:after, .gb-sticky-sub-menu__link--external:hover:after, .pwr--dark .gb-sticky-sub-menu__link:hover:after, .pwr--dark .gb-sticky-sub-menu__link--external:hover:after, .gb-sticky-sub-menu__link--active:after { display: none; } .gb-sticky-sub-menu__btn { background: #282B34; bottom: 20px; border-radius: 100%; display: inline-block; height: 44px; padding: 10px; position: fixed; transition: background-color .2s ease-in-out; right: 10px; width: 44px; z-index: 1001; } .gb-sticky-sub-menu__btn--hs-chat-active { bottom: 85px; right: 24px; } .gb-sticky-sub-menu__btn--open { background: #d3eb2d; } .gb-sticky-sub-menu__btn--icon-open { height: 14px; margin: 0 auto; opacity: 1; position: relative; top: 50%; transform: translateY(-50%); transition: opacity .2s ease-in-out; width: 20px; } .gb-sticky-sub-menu__btn--open .gb-sticky-sub-menu__btn--icon-open { opacity: 0; } .gb-sticky-sub-menu__btn--icon-open span, .gb-sticky-sub-menu__btn--icon-open:before, .gb-sticky-sub-menu__btn--icon-open:after { display: block; background-color: #ffffff; height: 1px; left: 50%; position: absolute; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 17px; } .gb-sticky-sub-menu__btn--icon-open:before, .gb-sticky-sub-menu__btn--icon-open:after { content: ' '; } .gb-sticky-sub-menu__btn--icon-open span { top: 50%; } .gb-sticky-sub-menu__btn--icon-open:before { top: 1px; } .gb-sticky-sub-menu__btn--icon-open:after { bottom: 0px; } .gb-sticky-sub-menu__btn--icon-close { left: 22px; opacity: 0; position: absolute; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: center center; transform-origin: center center; transition: all .4s ease; top: 21px; } .gb-sticky-sub-menu__btn--open .gb-sticky-sub-menu__btn--icon-close { opacity: 1; } .gb-sticky-sub-menu__btn--icon-close::before, .gb-sticky-sub-menu__btn--icon-close::after { background-color: #ffffff; content: ""; position: absolute; transition: background .4s ease-in-out; } .gb-sticky-sub-menu__btn--icon-close::before { left: -9px; width: 20px; height: 2px; } .gb-sticky-sub-menu__btn--icon-close::after { top: -9px; width: 2px; height: 20px; } } /* ========================================================================== ENDE - POWER GB Sticky Sub-Menu ========================================================================== */ /* Fixed Top Header */ .pwr-top-header-fixed{ position: fixed; } .pwr-top-header--light-on-scroll.scroll { background-color: #ffffff !important; color: #393E42; transition: background-color 0.4s ease-in-out; } .pwr-top-header--light-on-scroll.scroll .hs-menu-wrapper li a, .pwr-top-header--light-on-scroll.scroll .hs-menu-wrapper li:not(:last-child):after{ color: #393E42 !important; } .pwr-top-header--dark-on-scroll.scroll { background-color: #393E42 !important; color: #ffffff; transition: background-color 0.4s ease-in-out; } /* EXAMPLE - Landing Page Overwrites */ /* LP Heading - Lineheight */ .lp-squeeze-wrapper h1, .lp-basic-wrapper h1 { line-height: 1.2em; } /* LP Horizontal Box - Left Content Vertical Top alignment */ .lp-premium-content-wrapper .pwr-sec-form__content--v-align { align-items: initial; } /* EXAMPLE - ENTRY PAGE OF DEMO SITE */ /* Common */ .pwr-entry-wrapper .pwr-sec__title { line-height: 1.3em; } /* Hero */ .pwr-entry-wrapper .pwr-hero { height: 700px; } .pwr-entry-wrapper .pwr-hero__title { font-size: 130px; max-width: 950px; } .pwr-entry-wrapper .pwr-hero__desc { max-width: 100%; } @media (max-width: 1100px ) { .pwr-entry-wrapper .pwr-hero__title { font-size: 110px; line-height: 1em; } } @media (max-width: 576px ) { .pwr-entry-wrapper .pwr-hero__title { font-size: 66px; } } .pwr-services-item__img { margin-top: 5px; max-width: 64px; max-height: 64px; width: 100%; vertical-align: top; } /* List of Templates */ .pwr-entry-wrapper .pwr-image-box--smaller .pwr-image-box__title { font-size: 15px; } .pwr-entry-wrapper .pwr-image-box.pwr-image-box--4cols.pwr-image-box--one-by-one .pwr-image-box__img { height: 214px; } .pwr-entry-wrapper .pwr-image-box__below { padding: 25px 0; } /* CTA module titles */ .pwr-entry-wrapper .pwr-sec-cta__title { max-width: 880px; } /* Template Features */ .pwr-entry-wrapper .pwr-sec-txt .pwr-sec-txt__title-intro { margin-bottom: 5px; } .pwr-entry-wrapper .pwr-sec-steps .pwr-step__desc { line-height: 1.8em; } .pwr-entry-wrapper .pwr-sec-steps:not(.pwr-sec-steps--with-intro) .pwr-step { padding: 40px 20px; border-radius: 7px; border: 1px solid rgba(0,0,0,0.2); margin: 10px; } @media (max-width: 575px) { .pwr-entry-wrapper .pwr-sec-steps .pwr-step { margin-left: 0; margin-right: 0; } } /* Mockup and layout variant sections */ .pwr-entry-wrapper .pwr-sec-mockup .pwr-sec-mockup__title-intro, .pwr-entry-wrapper .pwr-sec-steps--with-intro .pwr-sec-steps__title-intro { color: #2254fe; font-size: 100px; font-weight: 800; margin-bottom: 0px; line-height: 1em; } .pwr-entry-wrapper .pwr-sec-mockup .pwr-sec-mockup_title, .pwr-entry-wrapper .pwr-sec-steps--with-intro .pwr-sec-steps__title { line-height: 1.3em; } .pwr-entry-wrapper .pwr-sec-steps .pwr-sec__title + .pwr-sec__desc { margin-top: 15px; } .pwr-entry-wrapper .pwr-sec-mockup .pwr-sec-mockup__desc, .pwr-entry-wrapper .pwr-sec-steps--with-intro .pwr-sec-steps__desc { line-height: 1.8em; } .pwr-entry-wrapper .pwr-sec-steps--with-intro .pwr-step__img { height: auto; margin-bottom: 20px; } .pwr-entry-wrapper .pwr-sec-steps--with-intro .pwr-step { margin: 0 10px 10px; padding: 0; } @media (max-width: 575px) { .pwr-entry-wrapper .pwr-sec-steps .pwr-step { margin-left: 0 !important; margin-right: 0 !important; } } /* Modules and cross-browser section */ body .hs-form-field { margin-bottom: 20px; } body input[type="text"], body input[type="password"], body input[type="datetime"], body input[type="datetime-local"], body input[type="date"], body input[type="month"], body input[type="time"], body input[type="week"], body input[type="number"], body input[type="email"], body input[type="url"], body input[type="search"], body input[type="tel"], body input[type="color"], body input[type="file"], body textarea, body select { background-color: #dfe7eb; border-color: #C0CFD8 !important; border-width: 0 0 2px; padding: 6px; border-bottom-style: solid; } .pwr-header-logo { cursor: pointer !important } .pwr-hero--x-small .pwr-hero__info-box { bottom: 40px; } .pwr-hero__title { line-height: 1.2; max-width: 1200px; } .pwr-price-table__title--style-reduced { font-size: 24px; } .pwr-price-table__price--style-reduced { margin-bottom: 0px; } .pwr-footer-full { -webkit-box-shadow: 0px -3px 0px #d3eb2d inset; -moz-box-shadow: 0px -3px 0px #d3eb2d inset; box-shadow: 0px -3px 0px #d3eb2d inset; } .pwr-footer-full { border-top:3px solid #ffffff; } .pwr-entry-wrapper .pwr-sec-maintenance-error__img--bottom { margin-top: 60px; } .pwr-toc-menu__burger, .pwr-toc-menu__header { background-color: #393E42 !important; border-bottom: 3px solid #d3eb2d !important; } .pwr-toc-menu__burger span, .pwr-toc-menu__burger:before, .pwr-toc-menu__burger:after { /* background-color: #d3eb2d !important; */ } .pwr-toc-menu .is-active-link::before { background-color: #393E42 !important; } .pwr-toc-menu .is-active-link { color: #393E42 !important; } .pwr-post-item__more-link { color: #ffffff !important; } .pwr-rich-text ul { padding-inline-start: 18px; -webkit-padding-start 18px; } .pwr-post-body { background-color: #ffffff !important; } .pwr-price-table { margin: 36px 10px 10px; } .pwr-rich-text ul li:before { left: -18px; background-color: #333; width: 4px; } .pwr-sec-price-tables__intro-sec { margin-bottom: 0px; } .pwr-hero__desc { font-size: 22px; line-height: 30px; margin: 20px 0 10px; max-width: 800px; padding-left: 3px !important; } .pwr-hero__title .pwr-rich-text { padding-left:4px !important; } .pwr-post-body { padding-top: 20px; } .pwr-post-content { max-width: 1200px; padding-bottom: 20px; } /* ARK SLIDER START */ .slickark-next, .slickark-prev { /*display: none !important; */ } .ark-page-center, .ark-page-center-xs, .ark-page-center-sm, .ark-page-center-md, .ark-page-center-lg, .ark-page-center-full { margin-left: auto; margin-right: auto; padding-left: 0px; padding-right: 0px; margin-top: 100px; } @media (max-width: 1199px) { .ark-page-center, .ark-page-center-xs, .ark-page-center-sm, .ark-page-center-md, .ark-page-center-lg, .ark-page-center-full { margin-left: 80px; margin-right: 80px; } } @media (max-width: 575px ) { .ark-page-center, .ark-page-center-xs, .ark-page-center-sm, .ark-page-center-md, .ark-page-center-lg, .ark-page-center-full { margin-left: 40px; margin-right: 40px; } .ark-hero-slider-02 .slickark-prev { left: 10px; } .ark-hero-slider-02 .slickark-prev { left: 10px; } } .ark h1, .ark h2, .ark h3, .ark h4, .ark h5, .ark h6 { font-family: Neue Helvetica Pro 75 Bold,sans-serif; } .ark-btn { border-radius: none; text-decoration: none; transition: none; } .ark a:not(.ark-btn) { text-decoration: none; color: #393E42; -webkit-transition: all ease-in-out 200ms; -moz-transition: all ease-in-out 200ms; -o-transition: all ease-in-out 200ms; -ms-transition: all ease-in-out 200ms; transition:all ease-in-out 200ms } .ark a:not(.ark-btn):hover, .ark a:not(.ark-btn):focus { color:#ffffff; } .ark a:not(.ark-btn):focus { outline: 0; color:#ffffff; } /* ARK SLIDER END */ @media (max-width: 575px) { .pwr--full-width { padding-left: 40px !important; padding-right: 40px !important; } } .pwr-header__menu--mega-menu .hs-menu-wrapper li.hs-menu-depth-2>ul.hs-menu-children-wrapper { width: 248px; } .pwr-sec-posts--vertical-layout .pwr-sec-posts__intro-sec { margin-bottom: 40px; } .pwr-sec-posts__intro-sec { max-width: 1000px; } .gb_text_link { color: #336699 !important; font-weight: bold !important; } .gb_text_link:hover { color: #393E42 !important; font-weight: bold !important; background-color: #D3EB2D; text-decoration: underline; } .pwr-rel-post-item:hover .pwr-rel-post-item__title { color: #393E42; } .pwr-rel-post-item__img-overlay { background-color: #393E42; } .pwr-sec-posts { padding: 100px 0 105px; } .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: #393E42; padding: 15px 21px 11px !important; } .pwr-cta--regular-solid .cta_button:not(.pwr-cta):not(.pwr-cta--hubspot-style):hover, .cta_button.pwr-cta--regular-solid:hover, .pwr-header--light-on-scroll.scroll .pwr-cta--regular-solid .cta_button:not(.pwr-cta):not(.pwr-cta--hubspot-style):hover, .pwr-btn--regular-solid .hs-submit:hover, .pwr-form.pwr-btn--regular-solid.pwr--light .hs-submit:hover { color :#393E42; } .pwr-accordion__title { text-transform: none; } .pwr-accordion.active .pwr-accordion__icon::before, .pwr-accordion.active .pwr-accordion__icon::after, .pwr-accordion.active .pwr-accordion__icon { background-color: #393E42 !important; color: #393E42 !important; } .pwr-sec__title-intro--narrow, .pwr-sec__title--narrow, .pwr-sec-image-boxes__intro-sec { max-width: 1200px; } .pwr-accordion-container.pwr--dark .pwr-accordion__title .pwr-accordion__icon::before, .pwr-accordion-container.pwr--dark .pwr-accordion__title .pwr-accordion__icon::after, .pwr-accordion-container.pwr--dark .pwr-accordion__title .pwr-accordion__icon { background-color: #393E42 !important; color: #393E42 !important; } .pwr-accordion-container.pwr--dark .pwr-accordion .pwr-accordion__title { color: #393E42; } .pwr-accordion-container.pwr--dark .pwr-accordion:hover .pwr-accordion__title, .pwr-accordion-container.pwr--dark .pwr-accordion:hover .pwr-accordion__desc, .pwr-accordion-container.pwr--dark .pwr-accordion.active .pwr-accordion__desc, .pwr-accordion-container.pwr--dark .pwr-accordion.active .pwr-accordion__title { background-color: #C0CFD8 !important; color: #333; } .pwr-accordion-container.pwr--dark .pwr-accordion:hover .pwr-accordion__desc, .pwr-accordion-container.pwr--dark .pwr-accordion.active .pwr-accordion__desc { padding-top: 24px; background-color: #ffffff !important; color: #333; border: 1px solid #c0cfd8; } .pwr-accordion-container .pwr-accordion:hover .pwr-accordion__desc, .pwr-accordion-container .pwr-accordion.active .pwr-accordion__desc { padding-top: 24px; background-color: #f0f3f5 !important; color: #333; } .pwr-accordion-container.pwr--dark .pwr-accordion__title { font-size: 22px; } .pwr-sec__desc { font-size: 16px; } .pwr-filter .pwr-filter__link:hover, .pwr-filter .pwr-filter__link.active { color: #393E42; } .pwr-filter__link.active:after, .pwr-filter__link:hover:after { content: ''; height: 3px; background: #D3EB2D; display:block; } .pwr-tabs__tab { color: #393E42; font-weight: 600; border-bottom: 2px solid #fff; font-family: NeueHelveticaPro75Bold,sans-serif; text-transform: uppercase; font-size: 14px; } .pwr-tabs__tab:hover { color: #393E42; font-weight: 600; border-bottom: 2px solid #d3eb2d; } .pwr-tabs__tab--active, .pwr-tabs__tab--active:hover { color: #393E42; font-weight: 800; border-bottom: 2px solid #d3eb2d !important; } .pwr-tabs__tab { transition-duration: 0s; } .pwr-footer-legal__back-to-top { float: right; width: 5%; } .pwr-hero__title--extra-large { font-size: 166px; line-height: .9em; max-width: 100%; } .legal-consent-container { font-size: 12px; margin-bottom: 0px; } .legal-consent-container p { line-height: 1.5em !important; color:#666666; } .legal-consent-container a { color: #336699 !important; font-weight: bold !important; } .legal-consent-container a:hover { color: #393E42 !important; font-weight: bold !important; background-color: #D3EB2D; } #page-center{ float: none; max-width: 1200px; margin: 0 auto; } .pwr-value:hover .pwr-value__overlay { background-color: #393e42; } .pwr-team-member__overlay { background-color: #393e42; } .pwr-image-box:hover .pwr-image-box__overlay { background-color: #393e42; } .pwr-post-item__overlay { background-color: #393e42; } .pwr-simple-list-item__more-link { color: #393E42 !important; } .pwr-sec-images__img-title { padding-top: 16px; text-align: center; font-weight: 600; } .pwr-testimonial__quote { font-size: 16px; } .pwr-header__menu--mega-menu .hs-menu-wrapper li.hs-menu-depth-3:first-child > a { margin-top: 0px; } .pwr-header__menu--mega-menu .hs-menu-wrapper li.hs-menu-depth-2 > a { margin-bottom: 8px !important; } .pwr-header__menu--mega-menu .hs-menu-wrapper li.hs-menu-depth-2:hover>a, .pwr-header__menu--mega-menu .hs-menu-wrapper li.active-branch.hs-menu-depth-2>a { cursor: pointer; } .pwr-header__menu--mega-menu .hs-menu-wrapper li.hs-menu-depth-2 a:hover { background-color: #D3EB2D; cursor: pointer; } .pwr-header__menu { left: 20%; } .featherlight .featherlight-content { background-color: transparent; margin: 60px; margin-right: 60px; max-height: 80%; padding: 0 !important; border-bottom: 0 !important; max-width: 800px; overflow: auto; } .featherlight .featherlight-close-icon { background-color: transparent; color: #333; font-size: 26px; font-weight: bold; line-height: 26px; right: 28px; width: 23px; top: 28px; } /* ========================================================================== Section Steps #mod-stp ========================================================================== */ .pwr-sec-steps--centered .pwr-step { padding-left: 10px; padding-right: 10px; } .pwr-step__title { display: block; font-size: 19px; font-weight: bold; } .pwr-step__desc { display: inline-block; margin-left: auto; margin-right: auto; } .pwr-step__title + .pwr-step__desc { margin-top: 20px; } @media (max-width: 991px ) { .pwr-hero__desc { font-size: 22px; } } .pwr-hero__basic-info { font-size: 22px; } .pwr-stat__title { font-size: 16px; letter-spacing: 0px; } @media (max-width: 575px ) { .pwr-hero__desc { font-size: 16px; } .pwr--dark .pwr-hero__title { font-size: 32px; } .pwr-stat__title { font-size: 12px; } } body .hs-form-field>label { font-size: 16px; } .pwr-sec-map__contact { font-size: 16px; } .pwr-team-member__name { font-size: 20px; } .pwr-team-member__job-title { font-size: 16px; } .pwr-image-box__overlay--front { opacity: 0.5; } .pwr-image-box--style-below-1 .pwr-image-box__intro, .pwr-image-box--style-below-2 .pwr-image-box__intro { color: #393E42; } @media (max-width: 1199px) { .pwr-image-box.pwr-image-box--4cols.pwr-image-box--one-by-two, .pwr-image-box.pwr-image-box--4cols.pwr-image-box--two-by-two { width: calc( 100% - 20px ); } } .body-container-wrapper.pwr-toc__content--narrow-content .page-center { max-width: 1200px; } .pwr-services-item__title { font-size: 20px; } .pwr-step__title { font-size: 22px; } .pwr-post-item__desc { font-size: 16px; } .pwr-sec-image-boxes__intro-sec { margin-bottom: 40px; } .pwr-footer-full__menu--4col .hs-menu-wrapper li.hs-menu-depth-1 { margin-left: 20px; width: calc( 26% - 25px ); } .pwr-footer-full .hs-menu-wrapper.hs-menu-flow-vertical li.hs-menu-depth-1>a, .pwr-footer-subscribe__title { padding-right: 0; } .pwr-price-table-features__icon { color: #C0CFD8; } .pwr-prev-next-nav__container { width: 45% !important; } .pwr-prev-next-nav__middle { width: 10% !important; } @media (max-width: 575px) { .pwr-prev-next-nav__left .pwr-prev-next-nav__text { margin-top: 0px; padding-left: 40px; } .pwr-prev-next-nav__right .pwr-prev-next-nav__text { margin-top: 0px; padding-right: 40px; } .container-fluid .row-fluid .page-center { margin-left: 12px; margin-right: 12px; } } @media (max-width: 575px){ .pwr-steps.pwr--neg-margin-lr-10, .pwr-step { margin-left: 8px; } .pwr-footer-legal__back-to-top { width: 15%; } } .pwr-sec-txt__title { margin: 2px 0 30px; } .pwr-image-box__desc, .pwr-image-box__desc > p{ line-height: 1.8em !important; } .pwr-image-box--style-below-2 .pwr-image-box__below { padding: 30px 30px; } .pwr-filter__list .pwr-filter__list-item li:before { background-color: #fff !important; } .pwr-search-results__entry:hover { background-color: #393E42; } .hs-search-highlight { color: #393E42 !important; font-weight: bold !important; background-color: #D3EB2D; } .pwr-image-box__front .pwr-image-box__title { background-color: #ffffff; padding: 12px; opacity: 0.9; color: #393E42 !important; } .pwr-image-box--smaller .pwr-image-box__back { padding: 20px !important; } .pwr-image-box--smaller .pwr-image-box__front { padding: 0px !important; } /* Image Slider Infobox */ .gb-img-slider__infobox { display: inline-block; position: absolute; bottom: 0px; !important; margin: 24px; padding: 16px 24px; background-color: rgba(255,255,255,0.8); } .gb-img-slider__infobox.pwr--dark{ background-color: rgba(57,62,66,0.8); } .pwr-rich-text__infobox { line-height: 1.5em !important; font-size: 14px; } @media (max-width: 991px){ .gb_company_logo_column { display:none; } } @media (max-width: 768px){ .gb_hide_2col { display:none; } } @media (max-width: 767px){ .gb-img-slider__infobox { display: block; position: relative; margin: 58px 0px -2px; padding: 16px 0px 0px; color: #393E42; background-color: initial !important; text-align: center; } } .pwr-cta--primary-border .cta_button:not(.pwr-cta):not(.pwr-cta--hubspot-style):hover, .pwr-btn--primary-border .hs-submit:hover { color: #393E42 !important; } .pwr-price-table--highlighted { color: #393E42 !important; } .pwr-price-table--highlighted .pwr-price-table-features__icon { color: #393E42 !important; } /* z-index fix bei self-storage .hs-content-id-44061507867 .pwr-sec-image-boxes { z-index: initial; }*/ /* z-index fix auf allen seiten */ .pwr-sec-image-boxes { z-index: initial; } .gb_new_product { border-radius: 2px; display: table; font-family: NeueHelveticaPro75Bold,sans-serif; font-size: 13px; font-weight: 700; text-transform: ""; z-index: 0; border-style: solid; border-width: 2px; padding: 14px 28px; border-color: #d3eb2d; color: #ffffff; background-color: rgba(57, 62, 66, 0.45); } .submitted-message { text-align: left; } @media (max-width: 992px ) { .pwr-stat { width: calc( 50% - 40px ); } } /* Chrome 93/94 3d Box Fix */ .pwr-3D-box{ transform: perspective(1200px) !important; -webkit-transform: perspective(1200px) !important; } .pwr-header__menu--mega-menu .hs-menu-wrapper.hs-menu-flow-horizontal li.hs-menu-depth-1 > ul.hs-menu-children-wrapper, .hs-menu-wrapper.hs-menu-flow-horizontal li.hs-menu-depth-1 > ul.hs-menu-children-wrapper, .hs-menu-wrapper ul.hs-menu-children-wrapper { transition: none; } .hs-menu-wrapper.hs-menu-flow-horizontal li.hs-menu-depth-1 > ul.hs-menu-children-wrapper { top: calc( 100% + -3px ); }