/*********************************************/ /* =^..^= =^..^= =^..^= =^..^= =^..^= =^..^= */ /* */ /* 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 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. ========================================================================== */ /* 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) */ /* 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 */ /* ========================================================================== 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% */ /* ========================================================================== 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 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. ========================================================================== */ /* 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) */ /* 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 */ /* ========================================================================== 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% */ /* 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 */ .pwr-post-comments{ display:none !important; } .pwr-image-box__desc{ width: 100%; } .pwr-sec-image-boxes__intro-sec{ margin-bottom:0px; } .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 { top: 20px; } .h1-no-seo{ font-family: Yantramanav, sans-serif; margin: 0; font-size: 72px; font-weight: 700; letter-spacing: -1px; line-height: 1.1805555555555556em; } .h1-no-seo:focus{ outline: 0; } .pwr-post-header__title{ font-family: Yantramanav, sans-serif; margin: 0; font-size: 72px; font-weight: 700; letter-spacing: -1px; line-height: 1.1805555555555556em; } .footer__container__content__header{ display:block; color:#1d1d1b; font-size: 72px; font-weight: 700; font-family:Yantramanav, sans-serif; padding-bottom:20px; line-height: 1em; } @media (max-width: 767px) { .footer__container__content__header{ font-size: 54px; } .h1-no-seo { font-size: 54px; } .pwr-post-header__title { font-size: 54px; } p { font-size: 20px; } .pwr-post-content, .pwr-post-content p { font-size: 20px; } } @media (max-width: 575px) { .h1-no-seo { font-size: 41px; } .pwr-post-header__title { font-size: 41px; } .footer__container__content__header{ font-size: 41px; } } body .hs-form-field > label { font-family: Yantramanav, sans-serif; } 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 { font-family: Yantramanav, sans-serif; background-color:#E9EBEF; border:0px; padding: 10px; color:#1d1d1b !important; } body .hs-form-field{ margin-bottom:20px; } /* Legal consent */ .legal-consent-container, .legal-consent-container p { font-family: Yantramanav, sans-serif; } /* Descriptions / Help-Text */ body .hs-field-desc { font-family: Yantramanav, sans-serif; font-size:16px; } [type="checkbox"]:checked + span, [type="checkbox"]:not(:checked) + span { font-family: Yantramanav, sans-serif; } .pwr-hero__title{ line-height:0.8em } /*NP edits start*/ p{ margin-top:10px; font-family:"Roboto" !important; } p span { font-family:"Roboto" !important; } div ul li,div ul li span,div ul li a,div ul li p{ font-family:"Roboto" !important; } div span{ font-family:"Roboto" !important; } /*override default styling that sets font-weight to bold*/ .pwr-header__menu li a { font-family: "Roboto" !important; } /*dont display contact button in DOM*/ div#pwr-js-header-right-bar { display: none; } /* Hide the "Contact" button on mobile screens */ @media screen and (max-width: 992px) { div.pwr-burger-bottom-bar .pwr-burger-bottom-bar__item { display: none; } } /*NP edits end*/ /*power sec text h1 changes to line height*/ div.pwr-rich-text.pwr-sec-txt__left h1{ line-height:1em !important; } strong, h1, h3, h4, h5, h6, footer span.footer__container__content__header { font-weight: 900 !important; } footer div.footer__container__content__item__info h3{ font-weight: 900 !important; } .footer__container{ padding:100px 40px; width:100%; background-color:rgba(67, 199, 244, 1.0); } .footer__container__content{ max-width:1200px; margin:0 auto; } .footer__container__content__item{ width:100%; padding-bottom:20px; } .footer__container__content__item__info{ float: left; text-align: left; padding-top:20px; } .footer__container__content__item--right{ text-align:left; } .footer__container__content__column{ width:50%; display:inline-block; float:left; padding-top: 20px; } .footer__container__content__partners{ width:100%; white-space: nowrap; } .footer__container__content__partners__item{ display:block; text-align:left; } .footer__container__content__partners__item__image{ height:75px; margin:0px; } .footer__container__content__partners__item__description{ color:#1d1d1b; font-size:14px; white-space: normal; padding-right:80px; font-family:Yantramanav, sans-serif; line-height:1.2; } @media (min-width: 992px) { .footer__container__content__item{ width:50%; float:left; display:inline-block; padding-bottom:0px; } .footer__container__content__item--right{ text-align:right; } } .pwr-sec-txt__title{ margin-bottom: 5px !important; } .pwr-3D-box{ -webkit-transform:none; transform:none; -webkit-transform-style:none; transform-style:none; } .pwr-post-header__title{ font-weight:900; line-height:0.8; } .pwr-burger{ font-size:25px; } .pwr-burger__trigger-close { font-size: 20px; font-weight: normal; } a[href^="tel"]{ color:inherit; text-decoration:none; } .pwr-hero__desc{ max-width:none; } .remove-default-background:before{ background-color:inherit !important; } .contact-cta{ width:100%; padding-top:40px; padding-bottom:40px; font-size:20px; } .contact-cta--dark{ color:white; } .contact-cta--light{ color:#1d1d1b; } .contact-cta--dark a{ color:white; text-decoration:none; } .contact-cta--light a{ color:#1d1d1b; text-decoration:none; } .contact-cta--dark a:hover{ color:white; text-decoration:none; } .contact-cta--light a:hover{ color:#1d1d1b; text-decoration:none; } .contact-cta__header{ padding-bottom:20px; } .contact-cta__content{ } .contact-cta__content__contacts{ display:inline-block; width:100%; padding-bottom:40px; } .contact-cta__content__contacts__container{ display:block; } .contact-cta__content__contacts__container__item{ display:block; padding-bottom:20px; } .contact-cta__content__contacts__container__item__info{ } .contact-cta__content__cta{ display:inline-block; width:100%; float:right; } .contact-cta__w-50{ width: 50%; } .contact-cta__hidden{ display:none; } .contact-modal{ display:none; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color:#1d1d1b; padding: 20px; color:white; min-width:300px; z-index:501; } .contact-modal__content{ padding-top:40px; } .contact-modal__cta{ text-align:center; padding-top:40px; } .contact-modal__close{ position: absolute; height: auto; width: 30px; top: 20px; right: 20px; cursor:pointer; } .contact-modal__content__item{ padding-bottom:20px; } .contact-modal__overlay{ display:none; position:fixed; width:100%; height:100%; top:0; left:0; background-color:#1d1d1b; opacity:0.2; z-index:500; } .preview-iframe-wrapper .exit-intent-popup{ display:none !important; } .exit-intent-popup { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 1; background: rgba(0, 0, 0, 0.2); transform: translateY(60%) scale(0); } .exit-intent-popup.visible { transform: translateY(0) scale(1); } .exit-intent-popup__newsletter { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* Popup-specific styles */ .exit-intent-popup__newsletter { background: #43C7F4; padding: 100px; border-radius: 3px; color: #1d1d1b; } .exit-intent-popup__newsletter__header{ padding-bottom: 20px; } .exit-intent-popup__newsletter__description{ padding-bottom: 50px; } .exit-intent-popup__close { position: absolute; top: 10px; right: 10px; cursor: pointer; width: 30px; height: auto; } .banner-area-vanta{ overflow:auto; margin: 0 40px; position:relative; } .banner-area-vanta__content{ height:100%; } .banner-area-vanta__content__header{ font-size: 30px; line-height: 0.8; color: #1d1d1b; font-weight: 900; font-family: "Yantramanav"; display:none; } .banner-area-vanta__content__header__mobile{ font-size: 54px; line-height: 0.8; color: #1d1d1b; font-weight: 900; font-family: "Yantramanav"; } .banner-area-vanta__content__header__mobile__line{ display: inline-block; width: 40px; height: 5px; color: #1d1d1b; background: #1d1d1b; margin-bottom: 6px; margin-right: 10px; font-size:100px; } .banner-area-vanta__content__header__line{ display: inline-block; width: 40px; height: 5px; color: #1d1d1b; background: #1d1d1b; margin-bottom: 6px; margin-right: 10px; font-size:100px; } .banner-area-vanta__content__links__link{ padding:5px; text-decoration:none; display:none; float:left; margin:5px; font-size:16px; font-family:"Helvetica" } .banner-area-vanta__visible-on-mobile{ display:inline-block; } .banner-area-vanta__content__links__link:hover{ text-decoration:none; } .banner-area-vanta__content__entry-points{ margin-top:40px; } .banner-area-vanta__content__links{ width:100%; display:inline-block; float:left } .banner-area-vanta__content__image-container{ width:20%; display:inline-block; float:left; text-align:right; display:none; } .banner-area-vanta__content__image-container__image{ max-width: 75% !important; height: auto; margin: 0 auto; } .vanta-canvas{ width: 100% !important; height: 100% !important; } @keyframes bounce { 0%, 20%, 60%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } 80% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } } .js-scrolldown { -webkit-animation: bounce 1s ease; animation: bounce 1s ease; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } .case-module{ width:100%; font-family: "Times New Roman", Times, serif !important; } .case-module a:hover{ text-decoration:none; } .case-module__video{ width:100%; height:auto; } .js-video-image{ width:100%; height:auto; position: absolute; top: 0px; left: 0px; } .case-module__image-container__image{ width:100%; height:auto; } .case-module__image-container{ width:100%; overflow:hidden; position:relative; } .case-module__content{ margin-bottom:30px; } .case-module__content__header{ margin-top:25px; font-size: 30px !important; color:#1d1d1b !important; font-weight:900 !important; } .case-module__content__teaser{ font-size 20px !important; margin-top:-10px; color:#1d1d1b; } .case-module__content__teaser__readmore{ font-size:20px; text-decoration:underline; } .case-module__content__teaser__readmore:hover{ text-decoration:underline; } .hide-images .pwr-image-box__img{ display:none; } .pwr-header-right-bar .cta_button{ font-size:20px !important; } .pwr-burger-bottom-bar__item .cta_button{ font-size:20px !important; } @media (max-width:991px){ .hidden-on-mobile{ display:none } } @media (min-width: 576px) { .contact-cta__content__contacts__container{ display:flex; } .contact-cta__content__contacts__container__item{ flex:1; padding-bottom:0; } .banner-area-vanta__content__header{ font-size: 50px; display:block; } .banner-area-vanta__content__header__mobile{ display:none } } @media (min-width: 768px) { .banner-area-vanta__content__header{ font-size: 70px; } .banner-area-vanta__content__entry-points{ margin-top:100px; } } @media (min-width: 768px) { .contact-modal__cta{ text-align:right; } } @media (min-width: 992px) { .footer__container__content__column{ display:inline-block; padding: 50px 50px 50px 0; width:auto; } .footer__container__content__partners__item{ display:inline-block; width:20%; text-align:left; vertical-align: top; } .footer__container__content__item__info{ float:right; padding-top:0px; } .banner-area-vanta__content__image-container{ display:inline-block; width:30% } .banner-area-vanta__content__links{ width:70% } .banner-area-vanta__content__header__line{ width:90px; height: 15px; margin-bottom: 20px; } .banner-area-vanta__content__header{ font-size: 80px; } .banner-area-vanta__content__links__link{ display:inline-block; font-size:16px; padding:7px; } } @media (min-width: 1200px) { .contact-modal{ min-width:750px; padding:100px; } .contact-modal__content{ display:flex; } .contact-modal__content__item{ flex:1; padding-bottom:0; } .footer__container{ padding: 100px 0px; } .pwr-team-member{ width: calc( 25% - 20px ); } .contact-cta__content__contacts{ width:70%; padding-bottom:0px; } .contact-cta__content__cta{ width:30% } .banner-area-vanta{ margin:0px; } .banner-area-vanta__content__image-container{ width:20% } .banner-area-vanta__content__links{ width:80% } .banner-area-vanta__content__header{ font-size: 100px; } } /****************************************************************************/ /* */ /* IF YOU WOULD LIKE TO OVERWRITE CSS STYLE SETTINGS TO FURTHER CUSTOMIZE */ /* THE TEMPLATE TO YOUR NEEDS, PLEASE USE THIS FILE */ /* */ /****************************************************************************/ /* 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; } } /* 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: #43c7f4; 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 */ .pwr-entry-wrapper .pwr-sec-maintenance-error__img--bottom { margin-top: 60px; }