.currencyContainer { display: block; background: #f76d43; } .currencyContainer .innerWrapper { display: flex; align-items: center; margin: 0 auto; max-width: 500px; padding-left: 20px; padding-right: 20px; gap: 18px; padding-top: 10px; } .currencyContainer .innerWrapper label { width: 60%; text-align: right; color: #fff; } .currencyContainer .innerWrapper select { width: 40%; } .custom-menu-primary .hs-menu-wrapper > ul > li { font-size: 12px!important; } img { max-width: 100% !important; } @media only screen and (min-width : 1360px) { h1 { font-size: 46px; line-height: 50px; } h2 { font-size: 36px; line-height: 40px; } h3 { font-size: 22px; line-height: 26px; } h4 { font-size: 21px; line-height: 25px; } } .container-fluid2 p { font-size: 12px!important; line-height: 20px; color: #39536f; font-family: "Lato-Medium",sans-serif; letter-spacing: .5px; font-weight: 100; } /* ------ Structure ------ */ /* The outer wrappers of your website, if you wanted to set your website width to a fixed size you could set a width or max-width of 960px for example. */ .header-container-wrapper, .body-container-wrapper, .footer-container-wrapper {} .header-container-wrapper {} /* The inner wrappers of your website */ .header-container, .footer-container { max-width: 100%; margin: 0 auto; padding: 0 0px; } .page-center { float: none !important; margin: 0 auto !important; max-width: 71% !important; padding: 0px !important; min-height: 0px !important; height: auto !important; } .page-center2 { float: none !important; margin: 0 auto !important; max-width: 50% !important; padding: 0px !important; } .page-center1 { float: none !important; margin: 0 auto !important; max-width: 86% !important; padding: 0 14px !important; } .rtmodule-center { float: none !important; margin: 0 auto !important; max-width: 80% !important; padding: 15px !important; } /* ------ Grid ------ */ /* By default HubSpot's grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically. You can also use spans to setup your different colored sidebar or container columns like this: span8 {background:#fff;} span4 {background:#eee;}. The column spans will always add up to 12 and will be setup for you automatically when you use Template Builder to adjust the visual layout. */ /* ------ Content ------ */ .body-container-wrapper {} .body-container { padding-bottom: 0px !important; } .body-container-wrapper .body-container > .row-fluid-wrapper {} /* ------ Blog ------ */ /* Your basic blog wrapper */ .blog-listing-wrapper {} .hs-blog-header h1 {} .post-header h1 { color: #666666; } .post-header h1 a { color: #666666; } .post-header h1 a:hover { color: #666666; text-decoration: none; } .post-header h2 { color: #000000; } .post-header h2 a { color: #000000; } .post-header h2 a:hover { color: #666666; text-decoration: none; } .custom_blog_module h1, .custom_blog_module h2, .custom_blog_module h3, .block h3 { color: #071B45; font-size: 17.2px; font-weight: bold; line-height: 20.7px; } .custom_blog_module {} .custom_blog_module ul { padding-left: 0; list-style: none; } .more-link, .all-posts-link { font-size: 13.5px; font-weight: 300; line-height: 22.9px; } .post-header p, .hs-author-social-label { font-size: 13.5px; font-weight: 300; line-height: 22.9px; color: #3F4A62; } .post-header p.hubspot-editable {} .post-header p.hubspot-editable a {} #comment-form h4 {} #comment-form { border-top: 1px solid #CCCCCC; padding-top: 20px; margin-top: 20px; } .custom_listing_comments {} .custom_listing_comments a {} .custom_blog_module .widget-type-rich_text {} #hubspot-topic_data { font-weight:bold; color: #888888; } #hs_cos_wrapper_blog_subscription .hs-form.stacked .field.hs-form-field .hs-input{ font-family: Helvetica,Arial,sans-serif; color: #414141; font-size: 13.5px; line-height: 15px; margin: 4px 6px 10px 0 !important; padding: 2px !important; border-width: 1px; border-style: solid; border-color: #abadb3 #e3e9ef #e3e9ef; border-radius:2px; } #hs_cos_wrapper_blog_subscription .hs-form.stacked .field.hs-form-field label{ font-size: 14px; line-height: 18px; font-weight:normal; color:#333333; } #hs_cos_wrapper_blog_subscription .hs-button.primary{ font-family: Helvetica,Arial,sans-serif !important; color: #414141 !important; font-size: 13.5px !important; line-height: 16px !important; border: 1px solid #707070 !important; background: #f0f0f0 !important; box-shadow: 0 -12px 0 #dadada inset !important; font-weight:normal !important; padding: 3px 40px !important; text-decoration: none !important; border-radius:3px !important; } #hs_cos_wrapper_blog_subscription .hs-button.primary:hover{ border: 1px solid #3c7fb1 !important; background: #e1f3fc !important; box-shadow: 0 -12px 0 #b5e2fa inset !important; } /* Use this to set up different styling for your blog posts */ .blog-listing-wrapper .post-listing .post-item { border-bottom: 1px solid #CCCCCC; padding-bottom: 20px; margin-bottom: 20px; } .post-body a { font-style: italic!important; text-decoration: underline!important; font-weight: bold!important; color: #4a9bc9!important; } .blog-listing-wrapper .post-listing .post-item .post-body {} /* Blog comments and blog comment form */ #comments-listing { border: 1px solid #E2E2E2; display: none;*/ line-height: 165%; padding: 15px; margin:15px 0; } #comments-listing h3 { font-size: 21px; margin: 0; padding: 0; } .comment { border-bottom: 1px solid #000000; display: block; padding: 15px; } .comment-date { font-style: italic; padding: 4px 0; display: block; font-size: 0.9em; } #recaptcha_table td { line-height: 0; } .custom_social_bar { border-top:1px solid #E2E2E2; border-bottom:1px solid #E2E2E2; padding: 7px 0; margin:7px 0 } .custom_listing_comments { border: 1px solid #E2E2E2; display: block; line-height: 165%; padding: 15px; margin:10px 0; } #blog-comment-form div.hs-form-field {} #blog-comment-form div.hs-form-field label { font-size: 13.5px; line-height: 22.9px; color: #3F4A62; font-family: Arial,Helvetica,sans-serif; font-weight: 300; } #blog-comment-form div.hs-form-field .hs-field-desc {} #blog-comment-form div.hs-form-field input[type="text"], #blog-comment-form div.hs-form-field input[type="email"], #blog-comment-form div.hs-form-field textarea { } #blog-comment-form div.hs-form-field select {} #blog-comment-form .hs-button {} #blog-comment-form textarea, #blog-comment-form input[type="text"], #blog-comment-form input[type="password"], #blog-comment-form input[type="datetime"], #blog-comment-form input[type="datetime-local"], #blog-comment-form input[type="date"], #blog-comment-form input[type="month"], #blog-comment-form input[type="time"], #blog-comment-form input[type="week"], #blog-comment-form input[type="number"], #blog-comment-form input[type="email"], #blog-comment-form input[type="url"], #blog-comment-form input[type="search"], #blog-comment-form input[type="tel"], #blog-comment-form input[type="color"], #blog-comment-form .uneditable-input { margin: 3px 0 8px; padding: 2px; font-size: 13px; color: #414141; } #blog-comment-form form div.hs-form-field ul li {} .hs_submit {} /* Pagination */ .post-header a {} .post-header p {} .blog-pagination {} /* Subscription frequency form */ .hs_blog_default_blog_subscription {} .hs_blog_default_blog_subscription ul {} /* ------ Forms ------ */ /* This is the main form wrapper */ .hs-form {} .hs-input { margin: 3px 0 8px; padding: 2px; font-size: 13px; color: #414141; } .hs-input:hover {} .hs-input:focus {} .field label { font-size: 13.5px; line-height: 22.9px; color: #3F4A62; font-family: Arial,Helvetica,sans-serif; font-weight: 300; } .hs_cos_wrapper_type_form {} .hs_cos_wrapper_type_form form {} .hs_cos_wrapper_type_form form div.hs-form-field {} .hs_cos_wrapper_type_form form div.hs-form-field label { font-size: 13.5px; line-height: 22.9px; color: #3F4A62; font-family: Arial,Helvetica,sans-serif; font-weight: 300; } .hs_cos_wrapper_type_form form div.hs-form-field input[type="text"], .hs_cos_wrapper_type_form form div.hs-form-field textarea {} input[type="number"] { padding: 6px; display: inline-block; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; min-height: 30px; } .hs_cos_wrapper_type_form form div.hs-form-field select {} .hs_cos_wrapper_type_form form textarea, .hs_cos_wrapper_type_form form input[type="text"], .hs_cos_wrapper_type_form form input[type="password"], .hs_cos_wrapper_type_form form input[type="datetime"], .hs_cos_wrapper_type_form form input[type="datetime-local"], .hs_cos_wrapper_type_form form input[type="date"], .hs_cos_wrapper_type_form form input[type="month"], .hs_cos_wrapper_type_form form input[type="time"], .hs_cos_wrapper_type_form form input[type="week"], .hs_cos_wrapper_type_form form input[type="number"], .hs_cos_wrapper_type_form form input[type="email"], .hs_cos_wrapper_type_form form input[type="url"], .hs_cos_wrapper_type_form form input[type="search"], .hs_cos_wrapper_type_form form input[type="tel"], .hs_cos_wrapper_type_form form input[type="color"], .hs_cos_wrapper_type_form form .uneditable-input { margin: 3px 0 8px; padding: 2px; font-size: 13px; color: #414141; } .hs_cos_wrapper_type_form form .input ul { list-style:none; padding-left:0; } /* ------ Buttons ------ */ .hs-button { font-size: 13px; color: #414141; cursor: pointer; text-decoration: none !important; } .hs-button:hover {} .hs-button:focus {} .hs-button:active {} .hs-button:hover, .hs-button:focus, .hs-button:active {} /* ------ Footer ------ */ /* Your basic footer container */ .footer-container { padding-top: 0px; padding-bottom: 0px; } .footer-container-wrapper .footer-container > .row-fluid-wrapper { } .footer-container .hs_cos_wrapper_type_page_footer footer {} .footer-container .hs-footer-company-copyright { font-size: 13px; line-height: 15.7px; } /* ------ Misc ------ */ /* Any overflow styles can go in this space */ /* ------ Custom Layout ------ */ .custom_body .header-container { padding: 0; max-width: 100%; } .custom_contact_link > .cell-wrapper { float: none !important; margin: 0 auto !important; max-width: 71%; padding: 0 14px; background-color: #000000; } .custom_contact_link a { display: inline-block; margin: 7px 7px 4px 0; font-size: 12px; } .custom_contact_link img { vertical-align: middle; } .custom_top_menu_group { padding-bottom: 3px; width: 100%; } .custom_top_menu_group > .row-fluid-wrapper {} .custom_menu > .cell-wrapper { float: none !important; margin: 0 auto !important; max-width: 71%; padding: 0 14px; } .custom_menu .hs-menu-flow-horizontal > ul { background: none; box-shadow: none; } .custom_logo { text-align: center; } .custom_logo img { margin: -1px 0 0; width: 100%; } .custom_footer_links p { margin: 1.6px 0 0; padding: 2.25px 0 0; line-height: 20.5px; } .custom_footer_links2 p a:hover { margin: 1.6px 0 0; padding: 2.25px 0 0; line-height: 20.5px; color: #cccccc; } .custom_footer_links p a:hover { margin: 1.6px 0 0; padding: 2.25px 0 0; line-height: 20.5px; color: #cccccc; } .custom_footer_links p:first-child { padding: 0; line-height: 20.7px; font-weight: bold; } .custom_footer_links p:first-child a { font-size: 12px; line-height: 30.7px; text-transform: uppercase; color: #ffffff; } .custom_footer_links p:first-child a:hover { font-size: 12px; line-height: 30.7px; text-transform: uppercase; color:#cccccc; } .custom_footer_links p a { font-size: 11px; line-height: 20.5px; text-transform: none; } .custom_footer_links2 p a { font-size: 11px; line-height: 20.5px; text-transform: none; color:#cccccc; } .custom_social_links { border-left: 1px dotted #FFFFFF; padding-left: 18px; } .custom_social_links p { margin: 1.6px 0 10px; font-size: 11px; color: #FFFFFF; line-height: 18.7px; text-transform: uppercase; } .tinynav { display: none; position: relative; top: 5px; margin-left: 10px; } .divbg { background-color: #ced7df; } #categoryhoover{ background-color:#ced7df; } #categoryhoover:hover{ background-color:#a2b9cd; } .divbg2 { background-color: #385473; } .custom_footer_links, .custom_social_links { margin-bottom: 25px; width: 50% !important; float: left !important; } .secondary-footer-module { margin-bottom: 0px; } .FB { display : block; width : 32px; height : 32px; background-image:url(//cdn2.hubspot.net/hub/317086/file-655187435-png/images/PB_Wesite/Social_IconsNew/white_facebook.png); } .FB:hover { display : block; width : 32px; height : 32px; background-image:url(//cdn2.hubspot.net/hub/317086/file-655187435-png/images/PB_Wesite/Social_IconsNew/blue_facebook.png); } .Twitter a:hover{background-image:url('//cdn2.hubspot.net/hub/317086/file-650303373-png/images/PB_Wesite/Social_IconsNew/blue_twitter_bird.png'); background-position:inherit} .Youtube a:hover{ background-image:url('//cdn2.hubspot.net/hub/317086/file-650343593-png/images/PB_Wesite/Social_IconsNew/blue_youtube.png'); background-position:inherit } /* Landscape phones and down */ @media (max-width: 480px) { .widget-type-image_slider{display: none!important;} } /* Service Page */ .service-sidebar a{ color:#2b3158 } /*CATEGORY PAGE*/ .category_banner{ width: 100%; min-height: 200px !important; height: auto; margin: 0 auto; float: none; background: url(//cdn2.hubspot.net/hub/219243/file-2373721754-jpg/images/top_banner.jpg) 100% 100% no-repeat; background-size: cover; } .category_banner h1{ text-align: center; font-size: 32px !important; line-height: 70px; letter-spacing: 1px; color: #ffffff !important; font-weight: 100!important; } /*PRODUCTS PAGE*/ .products_banner{ width: 100%; min-height: 200px !important; height: auto; margin: 0 auto; float: none; background: url(//cdn2.hubspot.net/hub/219243/file-2373721754-jpg/images/top_banner.jpg) 100% 100% no-repeat; background-size: cover; } .products_banner h1{ text-align: center; font-size: 32px !important; line-height: 70px; letter-spacing: 1px; color: #ffffff !important; font-weight: 100!important; } /* Custom bg Image Code Start */ .viscosity_banner{ width: 100%; height: auto; margin: 0 auto; float: none; background: url(//cdn2.hubspot.net/hub/219243/file-2373721754-jpg/images/top_banner.jpg) 100% 100% no-repeat; background-size: cover; } .viscosity_banner h2{ text-align: center; font-size: 32px !important; line-height: 35px; font-weight: 100!important; letter-spacing: 1px; color: #ffffff !important; } } .viscosity_banner h3{ text-align: center; font-size: 24px !important; line-height: 26px; letter-spacing: 2px; color: #ffffff !important; font-weight: normal!important; } /* Custom bg Image Code End */ .row-fluid .secondary-footer { margin-bottom: 0 !important; } /*FAQ Accordion*/ /* SpryAccordion.css - version 0.5 - Spry Pre-Release 1.6.1 */ /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */ /* This is the selector for the main Accordion container. For our default style, * we draw borders on the left, right, and bottom. The top border of the Accordion * will be rendered by the first AccordionPanelTab which never moves. * * If you want to constrain the width of the Accordion widget, set a width on * the Accordion container. By default, our accordion expands horizontally to fill * up available space. * * The name of the class ("Accordion") used in this selector is not necessary * to make the widget function. You can use any class name you want to style the * Accordion container. */ .Accordion { width: 80%; overflow: hidden; float: none; margin: 0 auto; } /* This is the selector for the AccordionPanel container which houses the * panel tab and a panel content area. It doesn't render visually, but we * make sure that it has zero margin and padding. * * The name of the class ("AccordionPanel") used in this selector is not necessary * to make the widget function. You can use any class name you want to style an * accordion panel container. */ .AccordionPanel { margin: 0px; padding: 0px; } /* This is the selector for the AccordionPanelTab. This container houses * the title for the panel. This is also the container that the user clicks * on to open a specific panel. * * The name of the class ("AccordionPanelTab") used in this selector is not necessary * to make the widget function. You can use any class name you want to style an * accordion panel tab container. * * NOTE: * This rule uses -moz-user-select and -khtml-user-select properties to prevent the * user from selecting the text in the AccordionPanelTab. These are proprietary browser * properties that only work in Mozilla based browsers (like FireFox) and KHTML based * browsers (like Safari), so they will not pass W3C validation. If you want your documents to * validate, and don't care if the user can select the text within an AccordionPanelTab, * you can safely remove those properties without affecting the functionality of the widget. */ .AccordionPanelTab_first { background-color: #ebecee; border: solid 0px gray; margin: 0px; margin-top:0px; margin-bottom: 2px; padding: 2px; cursor: pointer; -moz-user-select: none; -khtml-user-select: none; border-top-left-radius: 10px!important; border-top-right-radius: 10px!important; padding-left: 20px; padding-right: 20px; } .AccordionPanelTab { background-color: #ebecee; border: solid 0px gray; margin: 0px; margin-top: 2px; margin-bottom: 2px; padding: 2px; cursor: pointer; -moz-user-select: none; -khtml-user-select: none; border-radius: 0px !important; padding-left: 20px; padding-right: 20px; } .AccordionPanelTab_last { background-color: #ebecee; border: solid 0px gray; margin: 0px; margin-top:0px; margin-bottom: 2px; padding: 2px; cursor: pointer; -moz-user-select: none; -khtml-user-select: none; border-bottom-left-radius: 10px!important; border-bottom-right-radius: 10px!important; padding-left: 20px; padding-right: 20px; } .AccordionPanelTab h3{ color: #3F4A62; font-size: 17.2px; font-weight: 100; letter-spacing: .5px; line-height: 0; font-family: "Lato-Medium",sans-serif; text-align: center; padding-top: 15px; } .AccordionPanelTab_first h3{ color: #3F4A62; font-size: 17.2px; font-weight: 100; letter-spacing: .5px; line-height: 0; font-family: "Lato-Medium",sans-serif; text-align: center; padding-top: 15px; } .AccordionPanelTab h3{ color: #3F4A62; font-size: 17.2px; font-weight: 100; letter-spacing: .5px; line-height: 0; font-family: "Lato-Medium",sans-serif; text-align: center; padding-top: 15px; } .AccordionPanelTab_last h3{ color: #3F4A62; font-size: 17.2px; font-weight: 100; letter-spacing: .5px; line-height: 0; font-family: "Lato-Medium",sans-serif; text-align: center; padding-top: 15px; } .arrow { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 15px solid #115093; margin: 0 auto; float:none; margin-top: 0px; margin-bottom: 5px; } /* This is the selector for a Panel's Content area. It's important to note that * you should never put any padding on the panel's content area if you plan to * use the Accordions panel animations. Placing a non-zero padding on the content * area can cause the accordion to abruptly grow in height while the panels animate. * * Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel * Content container. * * The name of the class ("AccordionPanelContent") used in this selector is not necessary * to make the widget function. You can use any class name you want to style an * accordion panel content container. */ .AccordionPanelContent { overflow: auto; margin: 0px; padding: 0px; height: auto!important; padding: 20px; } /* This is an example of how to change the appearance of the panel tab that is * currently open. The class "AccordionPanelOpen" is programatically added and removed * from panels as the user clicks on the tabs within the Accordion. */ .AccordionPanelOpen .AccordionPanelTab { background-color: #ebecee; } /* This is an example of how to change the appearance of the panel tab as the * mouse hovers over it. The class "AccordionPanelTabHover" is programatically added * and removed from panel tab containers as the mouse enters and exits the tab container. */ .AccordionPanelTabHover { color: #ebecee; } .AccordionPanelOpen .AccordionPanelTabHover { color: #ebecee; } /* This is an example of how to change the appearance of all the panel tabs when the * Accordion has focus. The "AccordionFocused" class is programatically added and removed * whenever the Accordion gains or loses keyboard focus. */ .AccordionFocused .AccordionPanelTab { background-color: #ebecee; } /* This is an example of how to change the appearance of the panel tab that is * currently open when the Accordion has focus. */ .AccordionFocused .AccordionPanelOpen .AccordionPanelTab { background-color: #ebecee; } /* Rules for Printing */ @media print { .Accordion { overflow: visible !important; } .AccordionPanelContent { display: block !important; overflow: visible !important; height: auto !important; } } /*---END FAQ Accordion END---*/ /*Home Page Banner Fonts*/ .slider h3{ text-align: center; font-size: 32px !important; letter-spacing: 1px; color: #ffffff !important; font-weight: 100!important; } .slider h4{ text-align: center; font-size: 22px !important; letter-spacing: 1px; color: #ffffff !important; font-weight: 100!important; } .caption { background-color: none !important; position: static; font-size: 2em; line-height: 1.1em; color: white !important; width: 100% !important; padding: 0px 5% 0px 5%; top: 10% !important; text-align: center; } @media screen and (max-width: 860px) { .hs_cos_flex-direction-nav .hs_cos_flex-prev {opacity: 1; left: 0;} .hs_cos_flex-direction-nav .hs_cos_flex-next {opacity: 1; right: 0;} .caption { background-color: transparent !important; position: static; font-size: 2em; color: white !important; width: 100% !important; padding: 0px 5% 0px 5%; top: 5% !important; text-align: center; } .slider h3{ text-align: center; font-size: 22px !important; line-height: 26px; letter-spacing: 1px; color: #ffffff !important; font-weight: 100!important; } .slider h4{ text-align: center; font-size: 12px !important; line-height: 16px; letter-spacing: 1px; color: #ffffff !important; font-weight: 100!important; } } @media all and (max-width: 400px) { .caption { background-color: gray !important; position: static; font-size: 2em; line-height: 1.1em; color: white !important; width: 100% !important; padding: 0px 7% 0px 7%; top: 0%!important; text-align: center; } .slider h3{ text-align: center; font-size: 18px !important; color: #ffffff !important; font-weight: 100!important; } .slider h4{ text-align: center; font-size: 12px !important; color: #ffffff !important; font-weight: 100!important; } } /*Point of dispense and other pages*/ .point_banner2 h2{ font-size: 32px; text-align: center; } .point_banner2 h4{ text-align: center; font-size: 18px !important; line-height: 30px; letter-spacing: 1px; color: #4e70a0 !important; font-weight: 100!important; font-style: italic; font-weight: 100; } .sub_menu{ text-align: center; width: 86%; background-color: #26407d; float: none !important; margin: 0 auto; } .sub_menu ul{ list-style: none; text-align: center; float: none !important; margin: 0 auto; height: auto; vertical-align: middle !important; } .sub_menu ul li{ display: inline-block; margin-left: 10px; margin-right: 10px; width: auto!improtant; float: none !important; margin: 0 auto; height: auto !important; vertical-align: middle !important; } .sub_menu ul li a{ color: #ffffff !important; font-size: 12px; width: auto!improtant; max-width: 240px !important; float: none !important; margin: 0 auto; vertical-align: middle !important; } .sub_menu ul li a:hover{ background-color: rgba(255,255,255,0.5) !important; font-size: 12px; width: auto!improtant; } /*Under Banner CTAs*/ /*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/ .banner_cta h3{ text-align: left; font-size: 18px !important; Line-height: 26px!important; letter-spacing: 1px; color: #ffffff !important; font-weight: 100!important; } .banner_cta h4{ text-align: left; font-size: 16px !important; Line-height: 24px!important; letter-spacing: 1px; color: #ffffff !important; font-weight: 100!important; } /*END Under Banner CTAs*/ /*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/ /*Sain Clair Landing Page*/ /*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/ .LP_header{ height: 100px; margin-top: -20px; } .LP_SC_left_column h1{ font-weight: bold; font-size: 44px; line-height: 54px; } .LP_SC_left_column h2{ text-align: left; font-weight: bold; font-size: 28px; line-height: 36px; } .LP_SC_left_column p{ font-size: 16px; line-height: 20px; } .LP_SC_right_column h2{ text-align: center; font-weight: normal; font-size: 26px; } .LP_SC_right_column .hs-input{ height: 30px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #d5d5d5; color: #656565 !important; } .LP_SC_right_column textarea.hs-input{ height: 70px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #d5d5d5; color: #656565 !important; } .LP_SC_right_column .hs-button{ background-color: rgb(242,148,45); border: none; height: 42px; width: 100%; color: #ffffff; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; font-size: 14px; font-family: 'Cabin', sans-serif; font-weight: normal; margin-top: 10px; margin-bottom: 40px; box-shadow: 0px 1px 2px #000000; -webkit-transition-duration: .4s; -moz-transition-duration: .4s; transition-duration: .4s; } .LP_SC_right_column .hs-button:hover{ background-color: #e76c43!important; } .hs-form.stacked label {display:none;} .download_description_SC{ background-color: #ffffff; } .download_description_SC h2{ color:#6e6e6e; font-size: 24px; line-height: 32px; font-weight: normal; font-family: 'Cabin', sans-serif; } .download_description_SC h3{ color:#C15E40; font-size: 18px; font-weight: normal; font-family: 'Cabin', sans-serif; } .download_description_SC p{ color: #656565 !important; font-family: 'Cabin', sans-serif; font-size: 16px; line-height: 20px; } .download_description_SC ul li { color: #656565 !important; font-family: 'Cabin', sans-serif; font-size: 14px; } /*Links page*/ /*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/ .link_text{ padding-top: 10px!important; text-align: center!important; height: auto; float: none !important; margin: 0 auto !important; } .link_text a { color: #0178cc!important; font-size: 16px; text-align: center!important; padding-top: 20px!important; } /*END Links page*/ /*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/ /* ========================================================================== /*FAQ form*/ /*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/ .faq_form h2{ text-align: center; font-weight: normal; font-size: 26px; } .faq_form .hs-input{ height: 30px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #d5d5d5; color: #656565 !important; } .faq_form textarea.hs-input{ height: 70px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #d5d5d5; color: #656565 !important; } .faq_form .hs-button{ background-color: #4a9bc9; border: none; height: 40px; width: 100%; color: #ffffff; border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; font-size: 18px; font-family: 'Cabin', sans-serif; font-weight: normal; margin-top: 10px; margin-bottom: 40px; } /*Norcross Landing pages*/ /*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/ .LP_header{ height: 100px; margin-top: -20px; } .LP_header h1{ color:#ffffff; font-family: 'Cabin', sans-serif; line-height: 100px; } .LP_left_column h1{ color:#656565; font-weight: bold; font-family: 'Cabin', sans-serif; font-size: 44px; line-height: 54px; } .LP_left_column h2{ color:#C15E40; text-align: left; font-weight: bold; font-family: 'Cabin', sans-serif; font-size: 28px; line-height: 36px; } .LP_left_column p{ color: #656565 !important; font-family: 'Cabin', sans-serif; font-size: 16px; line-height: 20px; } .LP_left_column a{ color: #5F5F5F !important; } .LP_left_column a:hover{ color: #e06c4a !important; } .LP_left_column p{ color: #8B8B8B; font-family: 'Cabin', sans-serif; } .LP_right_column h2{ color:#C15E40; text-align: center; font-weight: normal; font-family: 'Cabin', sans-serif; font-size: 30px; line-height: 36px; } .LP_right_column p{ color: #8B8B8B; font-family: 'Cabin', sans-serif; } .LP_right_column a{ color: #5F5F5F !important; } .LP_right_column a:hover{ color: #e06c4a !important; } .LP_right_column .hs-input{ height: 30px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #d5d5d5; color: #656565 !important; } .LP_right_column .hs-button{ background-color: rgb(242,148,45); border: none; height: 42px; width: 100%; color: #ffffff; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; font-size: 14px; font-family: 'Cabin', sans-serif; font-weight: normal; margin-top: 10px; margin-bottom: 40px; box-shadow: 0px 1px 2px #000000; -webkit-transition-duration: .4s; -moz-transition-duration: .4s; transition-duration: .4s; } .hs-form.stacked label {display:none;} .download_description{ background-color: #ffffff; } .download_description h2{ color:#6e6e6e; font-size: 24px; line-height: 32px; font-weight: normal; font-family: 'Cabin', sans-serif; } .download_description h3{ color:#C15E40; font-size: 18px; font-weight: normal; font-family: 'Cabin', sans-serif; } .download_description p{ color: #656565 !important; font-family: 'Cabin', sans-serif; font-size: 16px; line-height: 20px; } .download_description ul li { color: #656565 !important; font-family: 'Cabin', sans-serif; font-size: 14px; } .norcross_footer{ background-color: #333; text-align: center; float: none; padding-bottom: 20px; } .norcross_footer p{ color: #5F5F5F !important; } .norcross_footer a{ color: #5F5F5F !important; } .norcross_footer a:hover{ color: #e06c4a !important; } /* can_page_parallax */ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ .can_page_parallax{ background: url(https://cdn2.hubspot.net/hubfs/219243/NorcrossStClairWebsite/backgrounds/BlueCanAndContainerPRLX.jpg) center center no-repeat fixed; min-height: 400px!important; text-align:center; padding-top: 100px; padding-bottom: 100px; } .can_page_parallax .container{ width: 70%!important; margin: 0 auto!important; float: none!important; text-align: center!important; display: inline-block; } .can_page_parallax h1{ color: #ffffff!important; font-size: 45px!important; text-align: center; margin-bottom: 20px; } .can_page_parallax p{ color: #ffffff!important; font-size: 29px!important; text-align: center; line-height: 35px!important; } /* END can_page_parallax */ /*####################################################################################################################################################*/ /* industrial_page_parallax */ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ .industrial_page_parallax{ background: url(https://cdn2.hubspot.net/hubfs/219243/NorcrossStClairWebsite/backgrounds/IndustrialFinishingParallex2.jpg) center center no-repeat fixed; min-height: 400px!important; text-align:center; padding-top: 100px; padding-bottom: 100px; } .industrial_page_parallax .container{ width: 70%!important; margin: 0 auto!important; float: none!important; text-align: center!important; display: inline-block; } .industrial_page_parallax h1{ color: #ffffff!important; font-size: 45px!important; text-align: center; margin-bottom: 20px; } .industrial_page_parallax p{ color: #ffffff!important; font-size: 29px!important; text-align: center; line-height: 35px!important; } /* END industrial_page_parallax */ /*####################################################################################################################################################*/ /* cc_products_page_parallax */ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ .cc_products_page_parallax{ background: url(https://cdn2.hubspot.net/hubfs/219243/NorcrossStClairWebsite/backgrounds/CoilCoatingParallex.jpg) center center no-repeat fixed; min-height: 400px!important; text-align:center; padding-top: 200px; padding-bottom: 100px; } .cc_products_page_parallax .container{ width: 70%!important; margin: 0 auto!important; float: none!important; text-align: center!important; display: inline-block; } .cc_products_page_parallax h1{ color: #ffffff!important; font-size: 45px!important; text-align: center; margin-bottom: 20px; } .cc_products_page_parallax p{ color: #ffffff!important; font-size: 29px!important; text-align: center; line-height: 35px!important; } /* END cc_products_page_parallax */ /*####################################################################################################################################################*/ /* adhesives_products_page_parallax */ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ .adhesives_products_page_parallax{ background: url(https://cdn2.hubspot.net/hubfs/219243/NorcrossStClairWebsite/backgrounds/IndustrialSealersParallex2.jpg) center center no-repeat fixed; min-height: 400px!important; text-align:center; padding-top: 100px; padding-bottom: 100px; } .adhesives_products_page_parallax .container{ width: 70%!important; margin: 0 auto!important; float: none!important; text-align: center!important; display: inline-block; } .adhesives_products_page_parallax h1{ color: #ffffff!important; font-size: 45px!important; text-align: center; margin-bottom: 20px; } .adhesives_products_page_parallax p{ color: #ffffff!important; font-size: 29px!important; text-align: center; line-height: 35px!important; } /* END adhesives_products_page_parallax */ /*####################################################################################################################################################*/ /* automotive_paint_page_parallax */ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ .automotive_paint_page_parallax{ background: url(https://cdn2.hubspot.net/hubfs/219243/NorcrossStClairWebsite/backgrounds/AutomotiveFinishingParallex.jpg) center center no-repeat fixed; min-height: 400px!important; text-align:center; padding-top: 100px; padding-bottom: 100px; } .automotive_paint_page_parallax .container{ width: 70%!important; margin: 0 auto!important; float: none!important; text-align: center!important; display: inline-block; } .automotive_paint_page_parallax h1{ color: #ffffff!important; font-size: 45px!important; text-align: center; margin-bottom: 20px; } .automotive_paint_page_parallax p{ color: #ffffff!important; font-size: 29px!important; text-align: center; line-height: 35px!important; } /* END automotive_paint_page_parallax */ /*####################################################################################################################################################*/ /* home_page_parallax */ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ .home_page_parallax{ background: url(https://cdn2.hubspot.net/hubfs/219243/NorcrossStClairWebsite/backgrounds/HomePageParallex2.jpg) center center no-repeat fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; min-height: 400px!important; text-align:center; padding-top: 100px; padding-bottom: 100px; } .home_page_parallax .container{ width: 70%!important; margin: 0 auto!important; float: none!important; text-align: center!important; display: inline-block; } .home_page_parallax h1{ color: #ffffff!important; font-size: 45px!important; text-align: center; margin-bottom: 20px; } .home_page_parallax p{ color: #ffffff!important; font-size: 29px!important; text-align: center; line-height: 35px!important; } /* END home_page_parallax */ /*####################################################################################################################################################*/ /* cta_parallax */ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ .cta_parallax{ background: url(https://cdn2.hubspot.net/hubfs/219243/NorcrossStClairWebsite/backgrounds/testimonialsBackground.png) center center no-repeat fixed; min-height: 400px!important; text-align:center; padding-top: 50px; padding-bottom: 50px; } .cta_parallax .container{ width: 90%!important; margin: 0 auto!important; float: none!important; text-align: center!important; display: inline-block; } .cta_parallax h1{ color: #ffffff!important; font-size: 45px!important; text-align: center; margin-bottom: 20px; } .cta_parallax p{ color: #39536f!important; font-size: 22px!important; text-align: center; line-height: 30px!important; } /* END cta_parallax */ /*####################################################################################################################################################*/ /* category_page_parallax */ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ .category_page_parallax{ background: url(https://cdn2.hubspot.net/hubfs/219243/NorcrossStClairWebsite/backgrounds/category_page_banner.jpg) center center no-repeat fixed; min-height: 400px!important; text-align:center; padding-top: 100px; padding-bottom: 100px; } .category_page_parallax .container{ width: 90%!important; margin: 0 auto!important; float: none!important; text-align: center!important; display: inline-block; } .category_page_parallax h1{ color: #ffffff!important; font-size: 45px!important; text-align: center; margin-bottom: 20px; } .category_page_parallax p{ color: #39536f!important; font-size: 22px!important; text-align: center; line-height: 30px!important; } /* END category_page_parallax */ /*####################################################################################################################################################*/ /* parallax */ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ .category_page_parallax { background: url(https://cdn2.hubspot.net/hubfs/219243/NorcrossStClairWebsite/backgrounds/category_page_banner.jpg) center top no-repeat fixed; -webkit-background-size: contain; -moz-background-size: contain; background-size: contain; display: none !important; text-align: center; position: relative; } .product1-parallax { background: url(https://cdn2.hubspot.net/hubfs/219243/NorcrossStClairWebsite/backgrounds/Viscosity_coil_coating_Pg_Banner.png) center top no-repeat fixed; -webkit-background-size: contain; -moz-background-size: contain; background-size: contain; display: none !important; text-align: center; position: relative; } .parallax-page-title { text-align: center; position: absolute; top: 50%; transform: translateY(-50%); } .parallax-page-title h1, .parallax-page-title p { color: #fff; margin-top: 0; } .parallax-page-title h1 { font-size: 2em; margin-bottom: 10px; } .parallax-page-title p { font-size: 1em !important; font-weight: normal; } @media only screen and (min-width: 1200px) { .parallax-background { display: block !important; height: 150px !important; min-height: 150px !important; } .parallax-page-title h1 { font-size: 2.2em; } .parallax-page-title p { font-size: 1em !important; } } @media only screen and (min-width: 1440px) { .parallax-background { height: 200px !important; min-height: 200px !important; } .parallax-page-title h1 { font-size: 2.5em; } .parallax-page-title p { font-size: 1.2em !important; } } @media only screen and (min-width: 1680px) { .parallax-background { height: 280px !important; min-height: 280px !important; } .parallax-page-title h1 { font-size: 3em; } .parallax-page-title p { font-size: 1.5em !important; } } /* END parallax */ /*####################################################################################################################################################*/ /* Start Top_Menu start*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ .Top_Menu{ width: 100%!important; position: relative!important; margin: 0 auto!important; float: none!important; text-align: center!important; z-index: 99999999; display: inline-block; -webkit-transition-duration: .0s; -moz-transition-duration: .0s; transition-duration: .0s; } .Top_Menu ul li{ display: inline-block!important; float: none!important; margin-top: 40px; margin-bottom: 40px; } .Top_Menu ul li a{ font-family: 'Lato', sans-serif; font-weight: bolder; font-size: 12px; color: #1f2323; padding: 0 !important; margin-left: 5px!important; margin-right: 5px!important; padding-left: 0px!important; white-space: nowrap; max-width: 200px!important; } .Top_Menu ul li a:hover{ color: #f95d05; } .Primary_Navbar{ width: 100%!important; margin: 0 auto!important; float: none!important; background-color: rgba(255,255,255,1); display: inline-block; position: relative; -webkit-transition-duration: .5s; -moz-transition-duration: .5s; transition-duration: .5s; z-index: 1040; /*z-index: 9999999999;*/ } .Primary_Navbar .Container{ width: 90%!important; margin: 0 auto!important; float: none!important; text-align: left!important; display: inline-block; background-color: transparent; } .Primary_Navbar .page-center1 { margin: 40px auto 0 !important } @media only screen and (min-width : 785px) { .Primary_Navbar .page-center1 { margin: 0 auto !important } } .top_menu_logo{ width: 500px; -webkit-transition-duration: .5s; -moz-transition-duration: .5s; transition-duration: .5s; } @media (max-width : 1200px) { .scs-logo, .custom-menu-primary { display: block !important; float: none !important; margin: 0px !important; width: 100% !important; min-width: 100% !important; } } @media (min-width : 1200px) { .header-container-wrapper .row-fluid .span12 { min-width: 1280px; } } /* End Top_Menu */ /*####################################################################################################################################################*/ /* Home Page Mosiac Hover Images */ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ HTML CSS Result Edit * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .image-container1{ width:100%; position:relative; overflow: hidden; } .image-container1 img { max-width: 100%; height: auto; display: block; /* added this */ } .image-container1 a { position:absolute; color: #fff; width: 100%; height: 100%; top: 0; left: 0; padding: 0; z-index:2; } .image-container1 .image-overlay1{ opacity:0; position:absolute; color: #fff; background: rgba(141, 178, 215, 0.77); width: 100%; height: 100%; top: 0; left: 0; padding: 0; text-align:center; font-size:40px; line-height: 200px; /* added this */ -webkit-transition: opacity .5s ease-in-out; -moz-transition: opacity .5s ease-in-out; -ms-transition: opacity .5s ease-in-out; -o-transition: opacity .5s ease-in-out; transition: opacity .5s ease-in-out; z-index:1; } .image-container1:hover .image-overlay1{ opacity:1; } /* END Home Page Mosiac Hover Images */ /*####################################################################################################################################################*/ /* Search Styles */ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ .scs-search { margin-top: 23px; } .scs-search a { display: block; padding: 10px; } .secondary-footer .row-fluid-wrapper > .row-fluid > .scs-search-modal { min-height: 0 !important; } #scsSearchModal .modal-body { padding: 30px 15px; } #scsSearchModal #hs_cos_wrapper_google_search form label { display: none; } #scsSearchModal #hs_cos_wrapper_google_search form .input input.hs-input { font-size: 16px; line-height: 28px; padding: 4px; width: 85%; height: 28px; } /* Parallax Styles */ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ .scs-parallax-home { background: url("https://cdn2.hubspot.net/hubfs/219243/NorcrossStClairWebsite/backgrounds/HomePageParallex4.jpg") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; text-align: center; position: relative; height: 400px !important; min-height: 400px !important; } .scs-parallax-landing-page { background-image: url("https://cdn2.hubspot.net/hubfs/219243/NorcrossStClairWebsite/backgrounds/scs_tier3_bnr.jpg"); background-repeat: no-repeat; background-position: center center; text-align: center; position: relative; height: 150px !important; min-height: 150px !important; } .scs-parallax-custom-app { background-image: url("https://cdn2.hubspot.net/hubfs/219243/NorcrossStClairWebsite/backgrounds/scs_custom_app_bnr.jpg"); } .scs-parallax-automotive { background-image: url("https://cdn2.hubspot.net/hubfs/219243/NorcrossStClairWebsite/backgrounds/scs_paint_bnr.jpg"); margin-bottom: 0 !important; } .scs-parallax-print { background-image: url("https://cdn2.hubspot.net/hubfs/219243/NorcrossStClairWebsite/backgrounds/scs_print_bnr.jpg"); } .scs-parallax-can-coating { background-image: url("https://cdn2.hubspot.net/hubfs/219243/NorcrossStClairWebsite/backgrounds/scs_coatings_bnr.jpg"); } .scs-parallax { background-repeat: no-repeat; background-position: center; /*background-attachment: fixed; background-size: cover;*/ position: relative; height: 400px !important; min-height: 400px !important; } .scs-parallax_small {height: 300px!important;min-height: 300px !important;} .scs-parallax-text { text-align: center; position: absolute; top: 50%; transform: translateY(-50%); width: 100% !important; } .scs-parallax-text h1, .scs-parallax-text p { color: #fff; margin-top: 0; } .scs-parallax-text h1 { margin-bottom: 10px; } .scs-parallax-text p { font-weight: normal; } @media only screen and (min-width: 1440px) { .scs-parallax-text h1 { font-size: 50px; line-height: 50px; } } @media only screen and (min-width: 1680px) { .scs-parallax-text h1 { font-size: 52px; line-height: 52px; } .scs-parallax-text p { font-size: 36px; line-height: 40px; } } /* END Parallax Styles */ /*####################################################################################################################################################*/ /* Testimonials */ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ .scs-testimonials-wrapper { background-image: url(https://cdn2.hubspot.net/hubfs/219243/NorcrossStClairWebsite/backgrounds/testimonialsBackground.png); background-repeat: no-repeat; background-position: center; background-size: cover; min-height: 400px !important; padding: 100px 0; } .scs-testimonial-slider .scs-ts-image { margin: 0 auto; padding: 20px 0; width: 90%; } .scs-testimonials .scs-ts-image h2 { text-align: center; margin-top: 0; } .scs-testimonial-slider .scs-ts-block { border-top: 1px solid #39536f; border-bottom: 1px solid #39536f; padding: 20px 0; } .scs-testimonial-slider .scs-ts-image p.scs-ts-reference { text-align: right; } /* END Testimonial Styles */ /*####################################################################################################################################################*/ /* Market Page Styles */ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ .mkt-description-block h2, .mkt-description-block p, .mkt-description-block ul, .mkt-item-block h2, .mkt-item-block p, .mkt-item-block ul, .mkt-slider-block h2 { margin-top: 0; } /* Description Block -----------------------------------------------------------*/ .mkt-page-description { text-align: center; padding: 120px 0; } /* Item Block -----------------------------------------------------------*/ .mkt-item-container { border-top: 1px solid #546e8a; } .mkt-item { border-top: 1px solid #546e8a; padding: 70px 0; } .mkt-item-container div:nth-child(2) .mkt-item { border-top: none; } .mkt-item-text ul > li { font-weight: bold; } /* Slider Block -----------------------------------------------------------*/ .mkt-slider-container { border-top: 1px solid #546e8a; padding: 70px 0; } .mkt-slick-slider .mkt-ss-image { text-align: center; padding: 10px; } .mkt-slick-slider .mkt-ss-image > a { display: block; } .mkt-slick-slider .mkt-ss-image > a > img{ margin: 0 auto; } /* END Market Page Styles */ /*####################################################################################################################################################*/ /* Resource Page Styles */ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ .scs-vcalc { overflow: hidden; width: 100%; height: 850px; } @media only screen and (min-width: 480px) { .scs-vcalc { height: 650px; } } @media screen and (max-width: 768px) { .global-header { max-width: 100% !important; margin: 0 auto; width: 100% !important; } .body-container-wrapper { top: 0; } .header-container .hs_cos_wrapper_type_logo a img { max-width: 205px !important; } } .footer-container-wrapper { position: relative; top: -8px; } /* END Resource Page Styles */ /*####################################################################################################################################################*/ /* Fluid Control Page Styles */ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ .fcs-description-wrapper { background-color: #ebecee; } .fcs-item-wrapper { background-color: #ebecee; padding-top: 150px; } .fcs-photo-header-wrapper { margin: 20px 0; } /* Description Block -----------------------------------------------------------*/ .fcs-description-block h2, .fcs-description-block p, .fcs-description-block ul { margin-top: 0; } .fcs-page-description { text-align: center; padding: 120px 0; } /* Photo Header Block -----------------------------------------------------------*/ .fcs-photo-header { margin: 20px 0; } /* Item Block -----------------------------------------------------------*/ .fcs-item-block { border-top: 1px solid #546e8a; } .fcs-item { padding: 20px 0; } .fcs-item h3, .fcs-item p, .fcs-item ul { margin-top: 0; } .fcs-item-header { text-align: center; } .fcs-item-header h3 { margin-bottom: 50px; } .fcs-item-text ul > li { margin-bottom: 10px; } .fcs-item-text p.fcs-call-to-action { text-align: right; } /* END Fluid Control Page Styles */ /*####################################################################################################################################################*/ /* Landing Page Styles */ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ .scs-landing-page-content { padding: 40px 0; } .scs-landing-page-text h2, .scs-landing-page-text p, .scs-landing-page-text ul, .scs-landing-page-text h2, .scs-landing-page-text p, .scs-landing-page-text ul { margin-top: 0; } .scs-landing-page-form .hs-input { border: 1px solid #d5d5d5; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; color: #656565 !important; height: 30px; } .scs-landing-page-form textarea.hs-input { border: 1px solid #d5d5d5; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; color: #656565 !important; height: 70px; } .scs-landing-page-form .hs-button { background-color: rgb(242,98,45); background-image: none; border: none; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; box-shadow: 0px 1px 2px #000000; color: #ffffff; font-size: 14px !important; font-family: 'Cabin', sans-serif; font-weight: bold; line-height: 1.5em; -webkit-transition-duration: .4s; -moz-transition-duration: .4s; transition-duration: .4s; margin-top: 0; margin-bottom: 40px; padding: 5px 0; width: 100%; } @media only screen and (min-width: 480px) { .scs-landing-page-form .hs-button { width: 50% !important; } } .scs-landing-page-form .hs-button:hover:not(.inactive), .scs-landing-page-form .hs-button:focus:not(.inactive), .scs-landing-page-form .hs-button.hovered:not(.inactive) { border: 0; box-shadow: 0 1px 2px #000; } /* END Landing Page Styles */ /*####################################################################################################################################################*/ /* Secondary Footer Styles */ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ .scs-secondary-footer-address, .scs-secondary-footer-posts, .scs-secondary-footer-form { margin-top: 20px; } .scs-secondary-footer-address p, .scs-secondary-footer-posts ul > li { font-size: 12px; } /* Secondary Footer Form -----------------------------------------------------------*/ .scs-secondary-footer-form .hs-form.stacked .field { margin-bottom: 5px; } .scs-secondary-footer-form .hs-form .field > label { display: none; } .scs-secondary-footer-form .hs-form input.hs-input { border: none; color: #ffffff; height: 27px; } .scs-secondary-footer-form .hs-form select.hs-input { color: #000000; } .scs-secondary-footer-form .hs-form textarea.hs-input { border: none; color: #ffffff; width: 100%; height: 90px; } .scs-secondary-footer-form .hs-form input.hs-input, .scs-secondary-footer-form .hs-form select.hs-input, .scs-secondary-footer-form .hs-form textarea.hs-input { box-sizing: border-box; font-size: 12px; line-height: 16px; width: 100%; } .scs-secondary-footer-form .hs-form input.hs-input, .scs-secondary-footer-form .hs-form textarea.hs-input { background: #5f6380; border-radius: 0; } .scs-secondary-footer-form .hs-form input.hs-input::-webkit-input-placeholder, .scs-secondary-footer-form .hs-form input.hs-input::-moz-placeholder, .scs-secondary-footer-form .hs-form input.hs-input:-moz-placeholder, .scs-secondary-footer-form .hs-form input.hs-input:-ms-input-placeholder, .scs-secondary-footer-form .hs-form input.hs-input:placeholder-shown, .scs-secondary-footer-form .hs-form textarea.hs-input::-webkit-input-placeholder, .scs-secondary-footer-form .hs-form textarea.hs-input::-moz-placeholder, .scs-secondary-footer-form .hs-form textarea.hs-input:-moz-placeholder, .scs-secondary-footer-form .hs-form textarea.hs-input:-ms-input-placeholder, .scs-secondary-footer-form .hs-form textarea.hs-input:placeholder-shown { color: #96accd; } .scs-secondary-footer-form .hs-form .hs-error-msgs > li > label { color: #f2942d; } .scs-secondary-footer-form .hs-form .actions { margin-top: 0; margin-bottom: 0; padding: 0 20px 0 0; } .scs-secondary-footer-form .hs-form input.hs-button { background-color: #f2942d; background-image: none; border: 0; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; box-shadow: 0 1px 2px #000; color: #fff; font-size: 14px !important; font-family: 'Cabin' ,sans-serif; font-weight: bold; text-shadow: none; -webkit-transition-duration: .4s; -moz-transition-duration: .4s; transition-duration: .4s; margin-top: 0; margin-bottom: 40px; padding-left: 20px; padding-right: 20px; height: 26px; width: 87% !important; } @media only screen and (min-width: 480px) { .scs-secondary-footer-form .hs-form input.hs-button { width: 70% !important; } } .scs-secondary-footer-form .hs-form input.hs-button:hover:not(.inactive), .scs-secondary-footer-form .hs-form input.hs-button:focus:not(.inactive), .scs-secondary-footer-form .hs-form input.hs-button.hovered:not(.inactive) { border: 0; box-shadow: 0 1px 2px #000; } /* END Secondary Footer Styles */ /*####################################################################################################################################################*/ /* Isotope Styles */ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ .grid { text-align: center; background-color: #ffffff; float: none!important; margin: 0 auto; padding-top: 50px; padding-bottom:50px; } .grid .element-item { width: 30%; float: right!important; margin: 10px !important; background-color: #ffffff!important; border: 0; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; transition: none; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; } .image_wrapper { width: 100%; position: relative; overflow: hidden; } .image_wrapper img{ width: 70%; margin: 10px; } /* ---- button ---- */ .button { display: inline-block; padding: 10px 18px; margin-bottom: 10px; background: #EEE; border: none; border-radius: 7px; background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) ); color: #222; font-family: sans-serif; font-size: 16px; text-shadow: 0 1px white; cursor: pointer; } .button:hover { background-color: #8CF; text-shadow: 0 1px hsla(0, 0%, 100%, 0.5); color: #222; } .button:active, .button.is-checked { background-color: #28F; } .button.is-checked { color: white; text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8); } .button:active { box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8); } /* ---- button-group ---- */ .button-group:after { content: ''; display: block; clear: both; } .button-group .button { float: left; border-radius: 0; margin-left: 0; margin-right: 1px; } .button-group .button:first-child { border-radius: 0.5em 0 0 0.5em; } .button-group .button:last-child { border-radius: 0 0.5em 0.5em 0; } .drop_down{ width: 100%; min-height:100px; float: none; margin: 0 auto; background-color: #118dd1; height:auto; text-align: center; vertical-align: middle; display: inline-block; padding: 50px 0 50px 0; font-family: 'Lato', sans-serif; } .drop_down h1{ color: #ffffff; } .drop_down .container { width: 100%; margin: 0 auto; text-align: center; float: none; text-align: center; background-color: ; } .drop_down ul { list-style:none; padding: 0px; margin: 0; display: inline-block; text-align:center!important; height: 100%; float: none; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin-top: 30px; } .drop_down ul li{ display: inline-block; position:relative; margin: 10px; padding-right:10px; padding-left:10px; width: 150px; background-color: #ffffff; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; text-align: center!important; } .drop_down ul li div{ color: #182e45; text-decoration: none; text-align: center; display:block; font-weight: 400; transition-duration:0.4s; transition-timing-function:linear; -webkit-transition-duration:0.4s; /* dla Google Chrome, Safari, Opera 15+ */ display:block; line-height:50px; cursor:pointer; } .drop_down ul li div:hover { color: #000000; display:block; } .drop_down ul ul li div::after { content: ''; position: relative; display: inline-block; width: 10px; height: 10px; top: 15px; margin-left: 6px; border: 1px solid #ccc; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .drop_down ul ul li div.is-checked::after { background-color:#118dd1; border: 1px solid #118dd1; } /* The Dropdown Styles */ /* =================== */ /* Hide Dropdowns by Default */ .drop_down ul ul { display: none; position: absolute; top:40px; z-index: 30; margin:0 auto; padding-left: 0px; } .drop_down ul ul div { display:block; font-weight: 200; text-decoration:none; color:#000000; line-height:40px; background-color: #ffffff; text-align:right; z-index: 30; cursor: pointer; } .drop_down ul ul div:hover { background-color:#ffffff; color: #acacac; } .drop_down ul ul div:active, .drop_down ul ul div.is-checked { background-color:#ffffff; color: #118dd1; } /* Display Dropdowns on Hover */ .drop_down ul li:hover > ul { display:list-item; z-index: 30; margin:0 auto; margin-left: -10px; } /* Fisrt Tier Dropdown */ .drop_down ul ul li { line-height: 40px; display:block; float:none; position: relative; border-bottom:none; z-index: 30; text-align: left; width: 200px; margin-right:0px; margin-left:0px; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; } .drop_down ul ul li:last-of-type { border-bottom-right-radius: 5px; -moz-border-bottom-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; -moz-border-bottom-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; } /* Second, Third and more Tiers */ .drop_down ul ul ul li { position: absolute relative; top:-50px; left:0px; z-index: 35; } /* END Isotope Styles */ /*####################################################################################################################################################*/ /* youtube responsive video */ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /* YouTube Responsive CSS for HubSpot */ .hs-responsive-embed-youtube { position: relative; padding-bottom: 56.25%; /* 16:9 Aspect Ratio */ padding-top: 25px; } .hs-responsive-embed-youtube iframe { position: absolute; width: 100%!important; height: 100%!important; } /* END youtube responsive video */ /*####################################################################################################################################################*/ /* image shadow */ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ #boxshadow { position: relative; -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5); -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5); box-shadow: 1px 2px 4px rgba(0, 0, 0, .5); background: white; } /* Make the image fit the box */ #boxshadow img { width: 100%; } /* END image shadow */ /*####################################################################################################################################################*/ /* Home Page Slider */ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ /*####################################################################################################################################################*/ .hs_cos_flex-slider { margin: 0 0 0px !important; } span#hs_cos_wrapper_module_14830263504243385 { opacity: 1 !important; } /* END Home Page Slider */ /*####################################################################################################################################################*/ /******************************** ****** Simple Calculator ******** ********************************/ .hs-content-path-paint-diagnostic-calculator .topPrag p { margin-bottom: 0 !important; } .simple-calc {font-size: 18px; line-height: 1.2; color: #fff;} .simple-calc__center {float: none; margin: 0 auto; max-width: 500px; padding-left: 20px; padding-right: 20px;} .simple-calc__top { background-color: #f76d43; padding: 30px 0; padding-top: 10px; } .simple-calc__top__row { margin-bottom: 10px; display: flex; align-items: center; justify-content: center; } .simple-calc__top__row__cell {float: left;} .simple-calc__top__row__label {text-align: right; padding-right: 10px; width: 60%;} .simple-calc__top__row__input { padding-left: 10px; width: 40%; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .simple-calc__top__row__input label { display: inline-block; background: #fff; color: #000; line-height: 38px; margin-bottom: 0; padding-left: 5px; padding-right: 5px; } .simple-calc__top__row__input input[type="text"] { height: 38px; line-height: 38px; padding: 0 15px; border: none; color: #39536f; font-size: 18px; font-family: "Lato-Medium",sans-serif; text-align: right; border-radius: 0; } .simple-calc__bottom { position: relative; padding: 70px 0 30px; text-align: center; background-color: #586e86; } .simple-calc__bottom:before { content: ''; background-image: url(https://cdn2.hubspot.net/hubfs/219243/calculator/orange-triangle.png); width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-size: auto 39px; background-position: center top; background-repeat: no-repeat; } .simple-calc__bottom .simple-calc__center {position: relative;} .simple-calc__bottom h1, .simple-calc__bottom h2, .simple-calc__bottom h3, .simple-calc__bottom h4, .simple-calc__bottom h5, .simple-calc__bottom p {color: #fff; margin: 5px 0; line-height: 1.1;} .simple-calc__bottom__resultHeader {margin-bottom: 10px;} .simple-calc__bottom__resultDisplay {font-size: 44px; margin-bottom: 20px; padding: 30px 0;} .simple-calc__bottom__resultCTA h5 {margin-bottom: 15px;} .simple-calc__bottom__resultCTA a.cta_button {font-size: 16px; width: 100%;-moz-box-sizing: border-box!important;-webkit-box-sizing: border-box!important;box-sizing: border-box!important;} @media (max-width: 585px) { .simple-calc__bottom__resultDisplay {font-size: 28px; margin-bottom: 20px; padding: 10px 0;} } .caseStudyPage .products_banner { background: #f8f8f8; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-top: 20px; margin-bottom: 50px; } .caseStudyPage .products_banner h1 { color: rgb(247,109,67) !important; } .caseStudyPage form { background: #f8f8f8; border-radius: 5px; padding: 7%; } .caseStudyPage div, .caseStudyPage p, .caseStudyPage span, .caseStudyPage li { font-family: 'Lato', arial, sans-serif !important; } .caseStudyPage p { font-size: 18px !important; line-height: 20px; color: #333; line-height: 1.5; font-weight: 400; } .caseStudyPage li { color: #333; font-weight: 400; } .caseStudyPage h1, .caseStudyPage h2, .caseStudyPage h3, .caseStudyPage h4, .caseStudyPage h5, .caseStudyPage h6 { font-family: 'Montserrat', sans-serif; margin: 10px 0; text-rendering: optimizelegibility; font-weight: 700 !important; color: #333; } .caseStudyPage .video-container { position: relative; padding-bottom: 0; padding-top: 0; height: initial; } .caseStudyPage .footer-container-wrapper { margin-top: 50px; } .caseStudyPage .products_banner br { display: none !important; } .header-container .hs_cos_wrapper_type_logo { text-align: center; } .contactInfo p { margin-bottom: 7px; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; } .contactInfo { margin-top: 100px; } .hs-content-path-articles .span4.widget-type-rich_text p a { background: rgb(247,109,67); color: #fff; padding: 10px; } .hs-content-path-articles .span4.widget-type-rich_text p a:hover { box-shadow: 0 1rem 2rem -0.5rem rgba(57, 62, 75, 0.2); } #articles .parentGrid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: ; grid-column-gap: 80px; grid-row-gap: 50px; } #articles .parentGrid p a { background: rgb(247,109,67); padding: 10px; color: #fff; } #articles .parentGrid p a:hover { box-shadow: 0 1rem 2rem -0.5rem rgba(57, 62, 75, 0.2); } .sv-completedpage a { color: rgb(247,109,67); } .sv-completedpage { font-family: 'Montserrat', sans-serif; color: #fff; } .sv-completedpage p { font-weight: normal; } ..sv-completedpage::before { display: none; } .resultContainer { margin-top: 25px; } .sv-header__text { color: #000; } input.sv-btn.sv-footer__next-btn, input.sv-btn.sv-footer__prev-btn { background: rgb(247,109,67); border-color: transparent; text-transform: uppercase; font-size: 14px; font-weight: bold; } .sv-progress__bar { background-color: rgb(247,109,67) !important; } input.sv-btn.sv-footer__complete-btn { border-color: transparent; font-weight: bold; text-transform: uppercase; } body .sv-container-modern__title h5 { font-size: 18px; font-weight: normal; margin-top: 10px; } .dealerRow p { margin-bottom: 7px !important; } #surveyElement, #surveyElementES { max-width: 950px; } @media screen and (max-width: 1000px) { #articles .parentGrid { display: grid; grid-template-columns: repeat(2, 1fr); } } @media screen and (max-width: 768px) { #articles .parentGrid { display: grid; grid-template-columns: repeat(1, 1fr); } } @media (min-width: 769px) and (max-width: 1400px) { .global-header { max-width: 95% !important; } }