/*********************************************/ /* =^..^= =^..^= =^..^= =^..^= =^..^= =^..^= */ /* */ /* CUSTOM STYLE OVERWRITES */ /* */ /* =^..^= =^..^= =^..^= =^..^= =^..^= =^..^= */ /*********************************************/ /****************************************************************************/ /* */ /* IF YOU WOULD LIKE TO OVERWRITE CSS STYLE SETTINGS TO FURTHER CUSTOMIZE */ /* THE TEMPLATE TO YOUR NEEDS, PLEASE USE THIS FILE */ /* */ /****************************************************************************/ .form-container .hs-login-widget-show-password{ font-size:.65em !important; text-transform: uppercase; font-weight:800 !important; } ul.no-list.hs-error-msgs{list-style-type: none !important;} .form-container .hs-input { position:relative; left:0; } #hs_login_reset{ font-size:.65em !important; line-height: .5em !important; margin-top: -40px !important; } input#hs-login-widget-email.hs-input{ margin-bottom:40px !important; } input#hs-login-widget-password.hs-input{ margin-bottom:40px !important; } .hs-form-field{margin-bottom:0px !important;} /* Fix with for svg logo overlay */ .pwr-header-top { z-index: 1000000; } /* EXAMPLE - Landing Page Overwrites */ .pwr-sec-txt { overflow: visible !important; z-index:999998 !important; } #pwr-header-fixed{z-index:999999 !important;} .accolades{font-size:.75em; text-align:left;} /* @Chandler - add this on top of the custom_styles.css file */ /*********************************************/ /* =^..^= =^..^= =^..^= =^..^= =^..^= =^..^= */ /* */ /* 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'); @import url("https://use.typekit.net/kei5qud.css"); /* 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% */ @media (max-width: 575px ) { #hs_cos_wrapper_widget_1609773071300 img{max-width:125px !important; margin-top:-75px !important;} #hs_cos_wrapper_widget_1613069841742 img{max-width:125px !important; margin-top:-75px !important;} } #hs_cos_wrapper_widget_1613069841742 .pwr-sec-txt { overflow: visible !important; } /* LP Heading - Lineheight */ .lp-squeeze-wrapper h1, .lp-basic-wrapper h1 { line-height: 1.2em; } .pwr-hero__desc{ font-size:24px; max-width: 650px; } .pwr-hero__desc p{ line-height:1.25em !important; font-size:30px !important; } /* 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: #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 */ .pwr-entry-wrapper .pwr-sec-maintenance-error__img--bottom { margin-top: 60px; } @media (max-width: 575px) { .pwr--full-width { padding-left: 40px !important; padding-right: 40px !important; } } #page-center{ float: none; max-width: 1200px; margin: 0 auto; } .pwr-team-member--style-reduced { width: calc( 33% - 20px ); } /* @Chandler - and this at the bottom */ /* ========================================================================== Custom Nhada Code ========================================================================== */ /* Fix Footer text wrap for narrow columns */ .pwr-footer-full__menu .hs-menu-wrapper ul.hs-menu-children-wrapper { min-width: 100px; } .text-center{text-align:center;} .upper-pull{margin-top:-125px;} .white-card{background:white; padding:20px;} .partner__sidebar{margin-left:0px; margin-right:40px;} .partner-height{top:180px;} .pwr-hero--partner{height:125px;} /* Media Split - mp4 max 100% */ .nda-media-split-mp4-scale-wrapper .pwr-sec-split__video video { max-width: 100%; } /* nda-blog-listing class => custom 3 column layout with sidebar for blog post listing */ .nda-blog-listing .pwr-blog-listing__posts--sidebar .pwr-team-member:not(.pwr-post-item--1col) { width: calc( 33.33% - 20px ); } @media (max-width: 1199px ) { .nda-blog-listing .pwr-blog-listing__posts--sidebar .pwr-team-member:not(.pwr-post-item--1col) { width: calc( 50% - 20px ); } } @media (max-width: 767px ) { .nda-blog-listing .pwr-blog-listing__posts--sidebar .pwr-team-member:not(.pwr-post-item--1col) { margin-left: 0; margin-right: 0; width: 100%; } } /* nda-blog-listing class => custom 3 column layout with sidebar for blog post listing */ .nda-blog-listing .pwr-blog-listing__posts--sidebar .pwr-post-item:not(.pwr-post-item--1col) { width: calc( 33.33% - 20px ); } @media (max-width: 1199px ) { .nda-blog-listing .pwr-blog-listing__posts--sidebar .pwr-post-item:not(.pwr-post-item--1col) { width: calc( 50% - 20px ); } } @media (max-width: 767px ) { .nda-blog-listing .pwr-blog-listing__posts--sidebar .pwr-post-item:not(.pwr-post-item--1col) { margin-left: 0; margin-right: 0; width: 100%; } } .dropbtn { background-color: #ffffff; color: black; padding: 16px; font-size: 16px; border: none; cursor: pointer; min-width:230px; text-align:left; } .dropbtn:hover, .dropbtn:focus { background-color: #f9f9f9; } #myInput { box-sizing: border-box; background-image: url('searchicon.png'); background-position: 14px 12px; background-repeat: no-repeat; font-size: 16px; padding: 14px 20px 12px 45px; border: none; border-bottom: 1px solid #ddd; } #myInput:focus {outline: 3px solid #ddd;} .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #ffffff; min-width: 230px; overflow: auto; border: 1px solid #ddd; z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; cursor: pointer; transition:0s; } .dropdown a:hover {background-color: #2254fe; color:white; transition:0s;} .show {display: block;} .iPUBZE { display: inline-block; font-weight: 700; font-size: 10px; -webkit-font-smoothing: antialiased; text-align: center; text-transform: uppercase; vertical-align: inherit; hyphens: manual; line-height: 20px; min-height: 20px; background-color: #2254fe; color: rgb(255, 255, 255); border-radius: 20px 6px 6px 20px; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; padding: 0px 6px 0px 10px; position: absolute; top: 8px; right: -4px; z-index: 1; } .diamond-bg{background-color:#0081ce !important;} .platinum-bg{background-color:#85a0bb !important;} .gold-bg{background-color:#d4af47 !important;} .silver-bg{background-color:#bec2cb !important;} .bronze-bg{background-color:#b08d57 !important;} span.dropbtn-text:after { box-shadow: inset -2px 2px 0 0; color: #171b25; content: ""; display: block; height: 7px; position: absolute; right: 10px; top: 50%; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: translate(0,-5px) rotate(135deg); transform: translate(0,-5px) rotate(135deg); transition: transform .15s ease-in-out; width: 7px; } /* Sidebar Fix */ @media (max-width: 991px) { .nda-blog-listing .pwr-blog-listing__sidebar { display: block !important; width: 100%; } .nda-blog-listing .pwr-sidebar-widget { margin-left: 0 !important; max-width: 100%; } span.pwr-services-item__icon img.pwr-services-item__img { max-width:80px !important; max-height:80px !important; } .pwr-sidebar-widget-form .hs-submit .hs-button{padding:15px 2px !important;} .nda_button:not(.pwr-cta--hubspot-style) { border: 0; border-radius: 6px; display: inline-block; font-family: proxima-nova, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.6em; text-transform: uppercase; z-index: 0; opacity: 1 !important; letter-spacing: .5px; overflow: hidden; padding: 15px 21px; position: relative; transition: all .4s ease-in-out; } .nda_button:not(.pwr-cta--hubspot-style):before, .nda_button:not(.pwr-cta--hubspot-style):after { bottom: 0; display: block; content: ''; left: 0; position: absolute; transition: all .4s ease-in-out; width: 100%; z-index: -1; } .nda_button:not(.pwr-cta--hubspot-style):before { top: 0; } .nda_button:not(.pwr-cta--hubspot-style):after { height: 0; } .nda_button:not(.pwr-cta--hubspot-style):hover:after { height: 100%; } .nda_button:not(.pwr-cta--hubspot-style):after { height: 100%; } .nda_button:not(.pwr-cta--hubspot-style):before { background-color: #2254FE; } .nda_button:not(.pwr-cta--hubspot-style) { color: #FFFFFF; } .nda_button:not(.pwr-cta--hubspot-style):hover:after { background-color: #171B25; } .nda_button:not(.pwr-cta--hubspot-style):not(.pwr-cta--link):hover { color: #FFFFFF; } .pwr--dark .nda_button:not(.pwr-cta--hubspot-style):hover:after, .pwr-header--dark-on-scroll.scroll .nda_button:not(.pwr-cta--hubspot-style):hover:after { background-color: #FFFFFF; } .pwr--dark .nda_button:not(.pwr-cta--hubspot-style):not(.pwr-cta--link):hover, .pwr-header--dark-on-scroll.scroll .nda_button:not(.pwr-cta--hubspot-style):hover { color: #171B25; } .pwr-header__menu .hs-menu-wrapper li.hs-menu-depth-1.hs-item-has-children>a {padding-right:18px !important;} .pwr-header {font-size:13px !important;} .pwr-pill { background-color: #2254fe; border: none; color: white; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; margin: 4px 2px; cursor: pointer; border-radius: 16px; }