/** * CSS @imports must be at the top of the file. * Add them above this section. */ @import url(https://fonts.googleapis.com/css?family=Roboto:400,700); /* ========================================================================== HS COS Boilerplate v1.5.0 Reference: http://designers.hubspot.com/docs/tools/boilerplate-css ========================================================================== */ /* These includes are optional, but helpful. */ /* Images */ img { max-width: 100%; border: 0; -ms-interpolation-mode: bicubic; vertical-align: bottom; /* Suppress the space beneath the baseline */ } /* Videos */ video { max-width: 100%; height: auto; } /* Embed Container (iFrame, Object, Embed) */ .hs-responsive-embed { position: relative; height: auto; overflow: hidden; padding-top: 0; padding-left: 0; padding-right: 0; } .hs-responsive-embed iframe, .hs-responsive-embed object, .hs-responsive-embed embed { width: 100%; height: 100%; border: 0; } .hs-responsive-embed, .hs-responsive-embed.hs-responsive-embed-youtube, .hs-responsive-embed.hs-responsive-embed-wistia, .hs-responsive-embed.hs-responsive-embed-vimeo { padding-bottom: 2%; } .hs-responsive-embed.hs-responsive-embed-instagram { padding-bottom: 116.01%; } .hs-responsive-embed.hs-responsive-embed-pinterest { height: auto; overflow: visible; padding: 0; } .hs-responsive-embed.hs-responsive-embed-pinterest iframe { position: static; width: auto; height: auto; } iframe[src^="http://www.slideshare.net/slideshow/embed_code/"] { width: 100%; max-width: 100%; } @media (max-width: 568px) { iframe { max-width: 100%; } } /* Forms */ textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], select { padding: 6px; display: inline-block; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* Menus */ .hs-menu-wrapper ul { padding: 0; } .hs-menu-wrapper.hs-menu-flow-horizontal ul { list-style: none; margin: 0; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul { display: inline-block; margin-bottom: 20px; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul:before { content: " "; display: table; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul:after { content: " "; display: table; clear: both; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-menu-depth-1 { float: left; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul li a { display: inline-block; padding: 10px 20px; white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; text-decoration: none; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children { position: relative; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children ul.hs-menu-children-wrapper { visibility: hidden; opacity: 0; -webkit-transition: opacity 0.4s; position: absolute; z-index: 10; left: 0; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children ul.hs-menu-children-wrapper li a { display: block; white-space: nowrap; width: 140px; overflow: hidden; text-overflow: ellipsis; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children ul.hs-menu-children-wrapper li.hs-item-has-children ul.hs-menu-children-wrapper { left: 180px; top: 0; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children:hover > ul.hs-menu-children-wrapper { opacity: 1; visibility: visible; } .row-fluid-wrapper:last-child .hs-menu-wrapper.hs-menu-flow-horizontal > ul { margin-bottom: 0; } .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch { position: relative; margin-bottom: 20px; min-height: 7em; } .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul { margin-bottom: 0; } .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children { position: static; } .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children ul.hs-menu-children-wrapper { display: none; } .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper { display: block; visibility: visible; opacity: 1; } .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper:before { content: " "; display: table; } .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper:after { content: " "; display: table; clear: both; } .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper > li { float: left; } .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper > li a { display: inline-block; padding: 10px 20px; white-space: nowrap; max-width: 140px; width: auto; overflow: hidden; text-overflow: ellipsis; text-decoration: none; } .hs-menu-wrapper.hs-menu-flow-vertical { width: 100%; } .hs-menu-wrapper.hs-menu-flow-vertical ul { list-style: none; margin: 0; } .hs-menu-wrapper.hs-menu-flow-vertical li a { display: block; white-space: nowrap; width: 140px; overflow: hidden; text-overflow: ellipsis; } .hs-menu-wrapper.hs-menu-flow-vertical > ul { margin-bottom: 20px; } .hs-menu-wrapper.hs-menu-flow-vertical > ul li.hs-menu-depth-1 > a { width: auto; } .hs-menu-wrapper.hs-menu-flow-vertical > ul li a { padding: 10px 20px; text-decoration: none; } .hs-menu-wrapper.hs-menu-flow-vertical > ul li.hs-item-has-children { position: relative; } .hs-menu-wrapper.hs-menu-flow-vertical > ul li.hs-item-has-children ul.hs-menu-children-wrapper { visibility: hidden; opacity: 0; -webkit-transition: opacity 0.4s; position: absolute; z-index: 10; top: 0; left: 180px; } .hs-menu-wrapper.hs-menu-flow-vertical > ul li.hs-item-has-children:hover > ul.hs-menu-children-wrapper { opacity: 1; visibility: visible; } .hs-menu-wrapper.hs-menu-flow-vertical.hs-menu-show-active-branch li a { min-width: 140px; width: auto; } .hs-menu-wrapper.hs-menu-flow-vertical.hs-menu-show-active-branch > ul { max-width: 100%; overflow: hidden; } .hs-menu-wrapper.hs-menu-flow-vertical.hs-menu-show-active-branch > ul li.hs-item-has-children ul.hs-menu-children-wrapper { display: none; } .hs-menu-wrapper.hs-menu-flow-vertical.hs-menu-show-active-branch > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper, .hs-menu-wrapper.hs-menu-flow-vertical.hs-menu-show-active-branch > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper > li.hs-item-has-children > ul.hs-menu-children-wrapper { display: block; visibility: visible; opacity: 1; position: static; } .hs-menu-wrapper.hs-menu-flow-vertical.hs-menu-show-active-branch li.hs-menu-depth-2 > a { padding-left: 4em; } .hs-menu-wrapper.hs-menu-flow-vertical.hs-menu-show-active-branch li.hs-menu-depth-3 > a { padding-left: 6em; } .hs-menu-wrapper.hs-menu-flow-vertical.hs-menu-show-active-branch li.hs-menu-depth-4 > a { padding-left: 8em; } .hs-menu-wrapper.hs-menu-flow-vertical.hs-menu-show-active-branch li.hs-menu-depth-5 > a { padding-left: 140px; } .hs-menu-wrapper.hs-menu-not-show-active-branch li.hs-menu-depth-1 ul { box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.18); -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.18); -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.18); } @media (max-width: 568px) { .hs-menu-wrapper, .hs-menu-wrapper * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; width: 100%; } .hs-menu-wrapper.hs-menu-flow-horizontal ul { list-style: none; margin: 0; display: block; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul { display: block; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-menu-depth-1 { float: none; } .hs-menu-wrapper.hs-menu-flow-horizontal > ul li a, .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children ul.hs-menu-children-wrapper li a, .hs-menu-wrapper.hs-menu-flow-horizontal.hs-menu-show-active-branch > ul li.hs-item-has-children.active-branch > ul.hs-menu-children-wrapper > li a { display: block; max-width: 100%; width: 100%; } } .hs-menu-wrapper.hs-menu-flow-vertical.no-flyouts > ul li.hs-item-has-children ul.hs-menu-children-wrapper, .hs-menu-wrapper.hs-menu-flow-horizontal.no-flyouts > ul li.hs-item-has-children ul.hs-menu-children-wrapper { visibility: visible; opacity: 1; } /* Space Module */ .widget-type-space { visibility: hidden; } /* Blog Author Section */ .hs-author-listing-header { margin: 0 0 .75em 0; } .hs-author-social-links { display: inline-block; } .hs-author-social-links a.hs-author-social-link { width: 24px; height: 24px; border-width: 0px; border: 0px; line-height: 24px; background-size: 24px 24px; background-repeat: no-repeat; display: inline-block; text-indent: -99999px; } .hs-author-social-links a.hs-author-social-link.hs-social-facebook { background-image: url("//static.hubspot.com/final/img/common/icons/social/facebook-24x24.png"); } .hs-author-social-links a.hs-author-social-link.hs-social-linkedin { background-image: url("//static.hubspot.com/final/img/common/icons/social/linkedin-24x24.png"); } .hs-author-social-links a.hs-author-social-link.hs-social-twitter { background-image: url("//static.hubspot.com/final/img/common/icons/social/twitter-24x24.png"); } .hs-author-social-links a.hs-author-social-link.hs-social-google-plus { background-image: url("//static.hubspot.com/final/img/common/icons/social/googleplus-24x24.png"); } /* responsive pre elements */ pre { overflow-x: auto; } /* responsive pre tables */ table pre { white-space: pre-wrap; } /* adding minimal spacing for blog comments */ .comment { margin: 10px 0 10px 0; } /* make sure lines with no whitespace don't interefere with layout */ .hs_cos_wrapper_type_rich_text, .hs_cos_wrapper_type_text, .hs_cos_wrapper_type_header, .hs_cos_wrapper_type_section_header, .hs_cos_wrapper_type_raw_html, .hs_cos_wrapper_type_raw_jinja, .hs_cos_wrapper_type_page_footer { word-wrap: break-word; } /* HTML 5 Reset */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]) { display: none; } /* Support migrations from wordpress */ .wp-float-left { float: left; margin: 0 20px 20px 0; } .wp-float-right { float: right; margin: 0 0 20px 20px; } /* Responsive Google Maps */ #map_canvas img, .google-maps img { max-width: none; } /* line height fix for reCaptcha theme */ #recaptcha_table td {line-height: 0;} .recaptchatable #recaptcha_response_field {min-height: 0;line-height: 12px;} /* ========================================================================== Index: 1. BASE STYLES - Variables - Macros - Base - Typography 2. COS STRUCTURE - Structure - Header - Content - Footer 3. MAIN NAVIGATION - Custom Menu Primary - Mobile Menu 4. HELPER CLASSES 5. TEMPLATE MODULE CLASSES - Common Template Classesk - Site Pages - Landing Pages - System Pages 6. COS COMPONENTS - Blog - Forms - Buttons 7. MISCELLANOUS 8. MOBILE MEDIA QUERIES ========================================================================== */ /* ========================================================================== 1. BASE STYLES ========================================================================== */ /* CUSTOM FONTS - update the fonts as per theme's requirements* [added-a] */ @font-face { font-family: 'fujisans'; src: url('//cdn2.hubspot.net/hubfs/2585850/Fujitsu_2016/Fonts/FujitsuSansRegular.eot'); src: url('//cdn2.hubspot.net/hubfs/2585850/Fujitsu_2016/Fonts/FujitsuSansRegular.eot') format('embedded-opentype'), url('//cdn2.hubspot.net/hubfs/2585850/Fujitsu_2016/Fonts/FujitsuSansRegular.woff') format('woff'), url('//cdn2.hubspot.net/hubfs/2585850/Fujitsu_2016/Fonts/FujitsuSansRegular.ttf') format('truetype'), url('//cdn2.hubspot.net/hubfs/2585850/Fujitsu_2016/Fonts/FujitsuSansRegular.svg#fujisansc') format('svg'); } @font-face { font-family: FujitsuSansBold; src: url("//www.fujitsu.com/incv4/common/fonts/FujitsuSansMedium.eot"); src: url("//www.fujitsu.com/incv4/common/fonts/FujitsuSansMedium.eot") format("embedded-opentype"), url("//www.fujitsu.com/incv4/common/fonts/FujitsuSansMedium.woff") format("woff"), url("//www.fujitsu.com/incv4/common/fonts/FujitsuSansMedium.ttf") format("truetype"); } @font-face { font-family: FujitsuSansLight; src: url("//www.fujitsu.com/incv4/common/fonts/FujitsuSansLight.eot"); src: url("//www.fujitsu.com/incv4/common/fonts/FujitsuSansLight.eot") format("embedded-opentype"), url("//www.fujitsu.com/incv4/common/fonts/FujitsuSansLight.woff") format("woff"), url("//www.fujitsu.com/incv4/common/fonts/FujitsuSansLight.ttf") format("truetype"); } /* ========================================================================== Variables ========================================================================== */ /** * Find the most consistently used font styles, colors, and container widths for your site and assign them to the jinja variables below for easy use and reference. * Apply the variable as shown below. Ignore the jingja comment tags. * */ /* Colors */ /* */ /* */ /* */ /* */ /* */ /* */ /* */ /* */ /* Typography */ /* */ /* */ /* */ /* */ /* Containers */ /* Used on '.page-center' in 'Base' and in the 'Portrait tablet to landscape and desktop' media query */ /* ========================================================================== Macros ========================================================================== */ /** * Create jinja macros for CSS3 properties that need browser prefixes. * * Apply the style as shown below on it's own CSS property line. * Ignore the jinja comment tags. * * */ /** * Example of how to apply the above macro (ignore the jinja comment tags): * a { * color: red; * font-size: 12px; * * } */ /* ========================================================================== Base ========================================================================== */ /** * Box Sizing * Applies a natural box layout model to all elements so that width and padding * are essentially combined, making responsive styles easier to manage. */ *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } html, body { min-height: 100%; margin: 0; padding: 0; } /* Website background color and default font styles */ body { background: #fff; color: #444444; font-family: fujisans, Roboto, Arial, Sans-Serif; font-size: 18px; line-height: 1.35; } /** * Page Center * * Apply .page-center to full-width modules. */ .container-fluid .row-fluid .page-center { float: none; max-width: 1600px; margin: 0 auto; } a { color: #A30B1A; text-decoration:none } a:hover, a:focus { color: #BF0404; } hr { /*color: #ccc; background-color: #ccc; height: 1px; border: none; */ height: 1px; border-bottom: 1px solid #ccc; border-width: 0 0 1px 0; color: #ccc; display:block; } /* Highlighted Text */ ::-moz-selection { color: #fff; background: #444444; text-shadow: none; } ::selection { color: #fff; background: #444444; text-shadow: none; } /* Corrects width issues in table elements created via the wysiwyg editor */ table { max-width: 99.99%; background-color: transparent; border-collapse: collapse; border-spacing: 0; } table tr td img { max-width: initial; } /* hubspot slider */ li.hs_cos_flex-slide-main:first-child { display:block; } li.hs_cos_flex-slide-main { display:none; } /* ========================================================================== Typography ========================================================================== */ /* Basic text */ p { font-family:'fujisans'; } small {} strong {} em {} cite {} code {} pre {} sup, sub { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* Headings */ h1, h2, h3, h4, h5, h6 { font-family:'fujisans';} h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {} h1 { } h2 {} h3 {} h4 {} h5 {} h6 {} /* Lists */ ul, ol { font-family:'fujisans'; } ul ul, ul ol, ol ol, ol ul {} li {} ul.unstyled, ol.unstyled { list-style: none; margin: 0; padding: 0; } ol.procedure { color: #000000; } ol.procedure li { margin-top: 10px; } ol.procedure li img { margin-top: 10px; } /* Quotes */ blockquote {} blockquote p {} blockquote small {} blockquote small:before {} q:before, q:after, blockquote:before, blockquote:after {} /* ========================================================================== 2. COS STRUCTURE ========================================================================== */ /* ========================================================================== Structure ========================================================================== */ /* The outer wrappers of your website */ .header-container-wrapper, .body-container-wrapper, .footer-container-wrapper {} /* The inner wrappers of your website */ .header-container, .body-container, .footer-container {} /* ========================================================================== Header ========================================================================== */ .header-container-wrapper {} .header-container {} /* Logo styling */ .header-container .hs_cos_wrapper_type_logo {} .header-container .hs_cos_wrapper_type_logo a {} .header-container .hs_cos_wrapper_type_logo a img {} /* Custom */ .fuji-header { position:fixed; z-index:99999; min-height:80px; height:80px; border-bottom: 4px solid #F7F9F8;} .fuji-header a { color: #322f31 } .home-icon { margin-top:1.2em; margin-left: 20px !important; margin-right: 5px !important; } .fuji-logo { margin-top:0.8em; } .fuji-logo img { width: 83px !important; height: 40px; max-width:none !important; } .fuji-header p, .fuji-header a, .fuji-header span { line-height:1.2em; font-size:16px;} .fuji-header-mob { display:none !important;} .fuji-menu { } .fuji-menu .hs-menu-wrapper.hs-menu-flow-horizontal > ul { padding-top:10px; padding-left:10px } .fuji-menu li { display:block !important;} .fuji-menu li a:hover { color:#A30B1A; } .fuji-menu .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-menu-depth-1 { padding: 1.2em 10px 1em 10px; } .fuji-menu ul.hs-menu-children-wrapper li { padding: 3px 30px 3px 12px !important; } .fuji-header .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children:hover > ul li.hs-item-has-children:hover > ul.hs-menu-children-wrapper:before { content: '\f0d9' !important; top: 15px; left: -12px; display:none !important; } .fuji-menu li.hs-menu-item.hs-menu-depth-2.hs-item-has-children .hs-menu-children-wrapper { left: 173px !important; top: -22px !important; background: #d4d4d4 !important; } .fuji-menu li.hs-menu-item.hs-menu-depth-2.hs-item-has-children:after {position: absolute; content: '\f105'; top: 4px; right: 12px; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit;} .phone-wrap { margin-top: 1.2em;} .phone-wrap img { margin-top: 16px; margin-right: 14px; width: 26px; height: 44px; vertical-align: top;} .fuji-header .page-center { overflow: visible !important; } .fuji-header .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children:hover>ul.hs-menu-children-wrapper:before { position: absolute; content: '\f0d8'; top: -15px; left: 30px; font-family: font-awesome; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; font-size: 38px; color: #ececec; } .fuji-header .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children:hover>ul.hs-menu-children-wrapper { background: #ececec; margin-top: 10px; padding-top: 5px; padding-bottom: 5px; } .simple-menu a { color:#444; } .simple-menu ul li { width: 100%; display: inline-block; padding: 1em 1em .6em; cursor: pointer; font-size: 1em; position: relative; z-index: 1; border-bottom: 1px solid #e3e3e3; border-left: 2px solid transparent; } .simple-menu ul li:hover { background:#000;} .simple-menu ul li:hover a { color:#fff; } .simple-menu ul li.active { border-left: 2px solid red;} .mobile-menu .hs-menu-wrapper, .mobile-menu .hs-menu-wrapper * { width:auto !important;} .mobile-menu .hs-menu-wrapper.hs-menu-flow-vertical>ul li.hs-item-has-children, .mobile-menu .hs-menu-wrapper.hs-menu-flow-vertical>ul li.hs-item-has-children:hover { height: auto !important; } .mobile-menu .hs-menu-wrapper.hs-menu-flow-vertical>ul li.hs-item-has-children { position: relative; } span.subMenu { font-size: 24px; font-weight: 700; top: 6px; position: absolute; right: 11px; cursor:pointer; padding: 0 10px; } .mobile-menu .hs-menu-wrapper.hs-menu-flow-vertical>ul li.hs-item-has-children ul.hs-menu-children-wrapper { visibility: visible; opacity: 1; } .head-telno { display:inline-block; padding-top:4px;} /* ========================================================================== Content ========================================================================== */ .fuji-template .body-container-wrapper { margin-top:80px;} .body-container-wrapper {} .fuji-template .body-container { min-height:84vh;} /* Tooltip */ /* [Marcelo 19-Apr-2019: I copied the inline CSS in the Settings portion of 'Compare Versions' page] */ .tooltip { position: relative; display: inline-block; } .tooltip i:hover { color:#ccb40d; } .tooltip .tooltiptext { visibility: hidden; width: 300px; background-color: #555; color: #fff; border-radius: 6px; padding: 10px; font-size:13px; margin-left:10px; margin-top:2px; position: absolute; z-index: 1; } .tooltip:hover .tooltiptext { visibility: visible; } .tooltiptext::after { content: ""; position: absolute; left: 10px; margin-left: 10px; } /*.tooltiptext::after { content: ""; position: absolute; bottom: 100%; left: 10px; margin-left: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent #555 transparent; } [Marcelo 01-05-19: I changed tooltipx::after */ .fa-question-circle { font-size: 80% !important; color: #808080; } .smaller { font-size: 80% !important; } /* Tooltip indented to the right */ .indented-tooltip { position: relative; display: inline-block; } .indented-tooltip .indented-tooltiptext { visibility: hidden; width: 160px; background-color: #DDDDDD; color: #000000; border-radius: 6px; padding: 10px; font-size:13px; margin-left:10px; margin-top:2px; position: absolute; z-index: 1; } .indented-tooltip:hover .indented-tooltiptext { visibility: visible; } .indented-tooltiptext::after { content: ""; position: absolute; left: 10px; margin-left: 10px; } /* Flex boxes */ .div_flex_main { display: -webkit-flex !important; /* Safari */ display: flex !important; margin-bottom: 20px; } .div_flex_sub { -webkit-flex: 1; /* Safari 6.1+ */ -ms-flex: 1; /* IE 10 */ flex: 1; } /* Oft-occurring text */ .benefits-at-glance p { color: #000000 !important; font-size: 28px !important; } .you-may-also p { color: #000000 !important; font-size: 24px !important; } .interested-in p { color: #000000 !important; font-size: 26px !important; } .support-plan-features p { color: #000000 !important; font-size: 15px !important; margin: 8px 4px; } /* Indented text */ .indented-level-1 { margin-left: 10px !important; } .indented-level-2 { margin-left: 20px !important; } .indented-level-3 { margin-left: 30px !important; } /* Paragraph styling */ .margin-bottom-none { margin-bottom: 0px !important; } .margin-bottom-small { margin-bottom: 5px !important; } .margin-bottom-medium { margin-bottom: 10px !important; } .margin-left-none { margin-left: 0px !important; } .margin-left-tiny { margin-left: 5px !important; } .margin-left-small { margin-left: 10px !important; } .margin-left-medium { margin-left: 15px !important; } .margin-left-large { margin-left: 20px !important; } /* Lists */ .bullet-list-gray-dark li:before { content: "■" !important; font-family: "Arial Black" !important; font-size: 80%; color: #E0E0E0 !important; padding-right: 0.3em !important; position: absolute !important; left: -18px !important; top: 0px !important; width: 10px !important; float: left !important; display: inline-block !important; } .bullet-list-slate-light li:before { content: "■" !important; font-family: "Arial Black" !important; font-size: 80%; color: #6D6D64 !important; padding-right: 0.3em !important; position: absolute !important; left: -18px !important; top: 0px !important; width: 10px !important; float: left !important; display: inline-block !important; } .list-big-lead { list-style: none; counter-reset:class-counter; } .list-big-lead li { counter-increment: class-counter; display: flex; margin-bottom: 0.5rem; font-size: 22px; padding: 10px; margin-bottom: 0px; } .list-big-lead li::before { content: counter(class-counter); font-weight: bold; font-size: 36px; margin-right: 20px; line-height:1; color: #A40000; } /* Zebras */ .list-zebra-gray-medium-gray-lighter li:nth-child(odd) { background: #E6E6E6; } .list-zebra-gray-medium-gray-lighter li:nth-child(even) { background: #F5F5F0; } /* Online training classes */ .training-online-course-title { color: #A40000; } .training-online-detail-title { color: green; } .training-online-detail-item { color: blue; } .training-online-table-header { background: #454545; color: #FFFFFF !important; padding: 20px 0px; text-align: center; vertical-align: middle !important; border-bottom: 1px solid #595959 !important; font-size: 110%; } .training-online-table-header-col-separator { background: #FFFFFF; color: #FFFFFF; border-top: 1px solid #FFFFFF !important; border-bottom: 1px solid #FFFFFF !important; } .training-online-table-title-cell { background: #EDEDED; padding: 5px 10px 2px !important; } .training-online-table-title-separator { background: #FFFFFF; color: #FFFFFF !important; border-top: 1px solid #FFFFFF !important; border-bottom: 1px solid #FFFFFF !important; } .training-online-table-regular-cell { background: #fafafa; padding: 2px 5px !important; } .training-online-table-col-separator { background: #FFFFFF; color: #FFFFFF !important; border-top: 1px solid #FFFFFF !important; border-bottom: 1px solid #FFFFFF !important; } .training-online-table td { vertical-align: top; } .training-online-table td ul { margin: 10px 5px; } .training-online-table td li { margin-bottom: 10px; } .training-online-table li:before { content: "■"; color: #5c5c5c !important; padding-right: 0.3em !important; position: absolute !important; left: -18px !important; top: -4px !important; width: 12px !important; float: left !important; display: inline-block !important; } /*.training-online-table td ul { margin-left: 0 !important; padding-left: 18px !important; } .training-online-table td ul li { position:relative !important; } .training-online-table td ul li:before { content: "■" !important; font-family: "Arial Black" !important; color: #E0E0E0 !important; position: relative !important; left: -18px !important; top: -4px !important; width: 12px !important; float: left !important; display: inline-block !important; } */ .training-online-columns { float: left; width: 33.3%; padding: 8px; font-size: 90%;} .training-online-price { border: 1px solid #eee; margin: 0; padding: 0;} .training-online-price:hover { box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)} .training-online-price .training-online-header { background-color: #111; color: white; } .training-online-price li { padding: 3px; text-align: left;} .training-online-price .training-online-grey { list-style-type: none; background-color: #eee; font-size: 20px;} .trainig-button { background-color: #4CAF50; border: none; color: white; padding: 10px 25px; text-align: center; text-decoration: none;} .training-online-test-td {border-spacing: 0px 8px; border: 1px solid black; padding: 5px;} .training-online-test-table { border-spacing: 0px 8px !important;} /* Boxes - background, borders, shadow, alignment, hover zoom */ .container-framed-dotted { margin-top: 10px; padding: 10px; border: 1px dotted #7F7F7F; } .container-framed-solid { margin-top: 10px; padding: 10px; border: 1px solid #7F7F7F; } .container-framed-solid-gray-light { margin-top: 10px; padding: 10px; border: 1px solid #F2F2F2; } .container-framed-solid-gray-dark { margin-top: 10px; padding: 10px; border: 1px solid #C0C0C0; } .container-framed-thin-red-dark { margin-top: 10px; padding: 10px; border: 1px solid #A40000; } .container-framed-thin-white-inner { margin-top: 0px; padding: 10px; border: 1px solid #FFFFFF; } .container-framed-thin-slate { margin-top: 10px; padding: 10px; border: 1px solid #363431; } .container-framed-thin-slate-light { margin-top: 10px; padding: 10px; border: 1px solid #6D6D64; } .container-not-framed { margin-top: 10px; padding: 10px; border: 0px; } .border-dotted { border: 1px dotted #7F7F7F; } .border-solid { border: 1px solid #7F7F7F; } .border-solid-gray-light { border: 1px solid #F2F2F2; } .border-solid-gray-dark { border: 1px solid #C0C0C0; } .border-solid-gray-darker { border: 1px solid #AAAAAA; } .border-solid-slate { border: 1px solid #363431; } .border-solid-slate-light { border: 1px solid #6D6D64; } .border-thin-red-dark { border: 1px solid #A40000; } .bkg-color-white { background: #FFFFFF; } .bkg-color-black { background: #000000; color: #FFFFFF; } .bkg-color-gray-lighter { background: #F5F5F0; } .bkg-color-gray-light { background: #F2F2F2; } .bkg-color-gray-medium { background: #E6E6E6; } .bkg-color-gray-dark { background: #E0E0E0; } .bkg-color-gray-darker { background: #C0C0C0; } .bkg-color-green-muted { background: #99FF99; } .bkg-color-red-pure { background: #FF0000; } .bkg-color-red-lighter { background: #FFCCCC; } .bkg-color-red-600 { background: #C90C1F; color: #FFFFFF; } .bkg-color-red-dark { background: #A40000; color: #FFFFFF; } .bkg-color-red-muted { background: #D2232A; color: #FFFFFF; } .bkg-color-slate { background: #363431; color: #FFFFFF; } .bkg-color-slate-light { background: #6D6D64; color: #FFFFFF; } .bkg-color-yellow-light { background: #FFFF99; } .bkg-color-yellow-muted { background: #FFFFE6; } .bkg-color-yellow-pure { background: #FFFF00; } .bkg-color-blue-muted { background: #CCEEFF; } .bkg-color-brown-muted { background: #ECD9C6; } .font-black { color: #000000; } .font-gray-darker { color: #333333; } .font-red-dark { color: #A40000; } .font-red-darker { color: #A30B1A; } .shadow-medium-short { box-shadow: 4px 4px 2px 0px #C0C0C0; } .shadow-medium-long { box-shadow: 6px 6px 3px 0px #C0C0C0; } .shadow-dark-short { box-shadow: 4px 4px 2px 0px #AAAAAA; } .shadow-dark-long { box-shadow: 6px 6px 3px 0px #AAAAAA; } .align-text-center-middle { text-align: center; vertical-align: middle; } .hover-pointer:hover { cursor: pointer; } .hover-default:hover { cursor: default; } .hover-resize:hover { -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } .hover-recolor-gray-medium:hover { background-color: #E6E6E6; } .hover-recolor-gray-dark:hover { background-color: #C0C0C0; } .hover-shadow-dark-long:hover { box-shadow: 6px 6px 3px 0px #AAAAAA; } /* hyperlink style */ .hyperlink-simple { color: #A40000; text-decoration: none; } /* Photos and caption */ .img-photo-border-white { border: 20px solid #FFFFFF; } .img-photo-shadow { box-shadow: 0px 0px 0px 1px #C0C0C0, 0px 0px 0px 2px #D0D0D0, 0px 0px 0px 3px #E0E0E0, 0px 0px 0px 4px #F0F0F0; } .img-photo-caption { margin-top: 10px; font-size: 90% !important; } /* Positioning selectors */ .pos-fixed { position: fixed; left: 20px; } /* Button style */ .container-button-white { font-size: 16px; padding: 3px 0px; background: #FFFFFF; color: #A40000; border: 1px solid #A40000; margin-top: 10px; text-align: center; } .container-button-white a { color: #A40000; } .container-button-gray-dark { font-size: 16px; padding: 3px 0px; background: #FFFFFF; color: #A40000; border: 1px solid #C0C0C0; margin-top: 10px; text-align: center; } .container-button-white a { color: #A40000; } .container-button-white-medium { font-size: 18px; padding: 7px; 7px; background: #FFFFFF; color: #A40000; border: 1px solid #A40000; margin: 10px 0px; text-align: center; box-shadow: 4px 4px 2px 0px #C0C0C0; } .container-button-white-medium:hover { background: #FBEAEB; } /* Knowledge Base styles */ .table-kb { margin-left: 30px; margin-bottom: 30px; border: 1px solid #FFFFFF; } .kb-question-row-header { background-color: #A40000; color: #FFFFFF !important; height: 30px; width: 30px; padding-top: 3px; text-align: center; vertical-align: middle; } .kb-answer-row-header { background-color: #AAAAAA; color: #FFFFFF !important; height: 30px; width: 30px; padding: 0px; text-align: center; vertical-align: middle; } .kb-question-row-detail { color: #000000 !important; font-weight: bold; } .kb-answer-row-detail { color: #000000 !important; } .kb-toc-row { font-size: 16px !important; color: #444444 !important; margin-top: 10px; margin-bottom: 15px; } .table-kb td { margin-left: 30px; border: 1px solid #FFFFFF; vertical-align: top; padding: 3px 5px; color: #000000; } .table-kb td p { margin-top; 5px; margin-bottom: 5px;; } .table-kb td .code-script { margin: 5px !important; font-size: 15px !important; } /* Manuals styles */ .manuals-version-text { font-size: 16px !important; color: #444444 !important; } .manuals-version-link { font-size: 16px !important; color: #444444 !important; } .manuals-task-version { font-size: 16px !important; color: #A40000 !important; margin: 0px 0px 5px 0px; font-weight: bold; } .manuals-task-header { font-size: 16px !important; color: #444444 !important; margin: 5px 0px 3px 0px; font-weight: bold; } .manuals-task-link { font-size: 16px !important; color: #444444 !important; margin: 2px 0px 2px 10px; } .manuals-heading-version-curr-version { font-size: 36px !important; color: #A40000 !important; } .manuals-heading-task-curr-version { font-size: 36px !important; color: #444444 !important; margin-bottom: 0px !important; margin-top: 0px !important; } .manuals-name-curr-version { font-size: 22px !important; color: #A40000 !important; margin-bottom: 10px !important; } .manuals-desc-curr-version { font-size: 18px !important; color: #444444 !important; margin-bottom: 0px !important; } .manuals-open-curr-version { font-size: 18px !important; color: #A40000 !important; margin-bottom: 0px !important; margin-top: 0px !important; } .manuals-heading-version-old-version { font-size: 28px !important; color: #A40000 !important; } .manuals-heading-task-old-version { font-size: 28px !important; color: #444444 !important; margin-bottom: 0px !important; margin-top: 0px !important; } .manuals-name-old-version { font-size: 20px !important; color: #A40000 !important; margin-bottom: 10px !important; } .manuals-desc-old-version { font-size: 16px !important; color: #444444 !important; margin-bottom: 0px !important; } .manuals-open-old-version { font-size: 16px !important; color: #A40000 !important; margin-bottom: 0px !important; margin-top: 0px !important; } /* PRIMEWEB styles */ .primeweb-toc-link { font-size: 14px !important; color: #A40000 !important; margin: 2px 0px 2px 2px; } .primeweb-heading-resource-type { font-size: 36px !important; color: #444444 !important; } /* Blog post styles */ .blog-img { border: 1px solid #AAAAAA; margin-bottom: 20px !important; } .blog-img-w-shadow { border: 1px solid #AAAAAA; box-shadow: 6px 6px 3px 0px #C0C0C0; margin-bottom: 20px !important; } .blog-screenshot { border: 1px solid #AAAAAA; box-shadow: 6px 6px 3px 0px #C0C0C0; margin-bottom: 20px !important; } .blog-code-excerpt { border: 1px solid #AAAAAA; box-shadow: 6px 6px 3px 0px #C0C0C0; margin-bottom: 20px !important; } .blog-caption { margin-top: 0px; font-size: 90% !important; margin-bottom: 20px !important; } .blog-content ul { list-style: square; margin-left: 20px; } /* Unique Pages ========================================================================== */ /* Homepage */ .fuji-slider { position:relative; overflow:hidden;} .fuji-slider .caption.vertical-center { left: 18.5em; max-width: 780px; } .red-callout { position: absolute; display: inline-block !important; z-index: 3; margin-left: 5.2em !important; background: url(https://cdn2.hubspot.net/hubfs/2585850/Fujitsu_2016/Images/red-bg-min.png) no-repeat; width: auto !important; background-size: 100%; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left: -17.5em; } .red-callout h2 { width: 210px; height: 250px; padding-left: 16px; padding-top:15px; color: #fff; font-size: 30px; line-height: 1.2; } .fuji-slider h2 { font-size:35px;} .fuji-slider p { font-size:22px;} .fuji-template .text-carousel .hs_cos_flex-slides a:hover { border-bottom: 1px solid #9b9b9b; color:#fff; } /* Ash Page Css */ .span4.course-thumb { border-top: 3px solid #A30B1A; padding-top: 5px; width: 30%; margin-right: 10px; } .course-wrap { margin:1em 0 2em; } .course-thumb p { font-size: 16px; margin-top:10px; min-height: 135px; } .course-thumb h3 { margin: 10px 0; min-height: 54px; font-size: 20px; } .course-wrap { margin:1em 0 2em; } .course-wrap .card-wrap a { display: none; color: #fff; text-decoration: underline; font-size: 17px;} .course-wrap .card-wrap:hover a { display:block;} .course-wrap .card-wrap p { font-size: 17px; } .course-wrap .bg-img-wrap.card-wrap { display:inline-block; height: 310px; width: 260px; padding-left: 0; margin-bottom:15px; margin-left: 6px; } .no-privacylink { display:none; } .hs_message { padding-left:1em;} .fujitsu-form .hs_message label { text-transform: initial; } .fujitsu-form .hs_message textarea { border: 1px solid #c7c7c7; margin-top: 5px; } .survey-form .inputs-list.multi-container { margin-top: 4px !important; padding-bottom: 6px !important; } .survey-form .inputs-list.multi-container li { display: inline-block; padding-right: 2em; } .survey-form .inputs-list.multi-container li span { padding-left: 7px; } .survey-form .hs_cos_wrapper_type_form .hs-form-field > label > span { font-weight: 600 !important; font-family: fujisans, Arial, Sans-Serif !important; font-size: 17px; letter-spacing: 0.3px; } .fujitsu-form .survey-form form textarea { border: 1px solid #717171; background: rgba(132, 132, 132, 0.09); margin-top: 10px; min-height: 100px; } .bg-img-wrap.card-wrap { height: 48vh; position: relative; overflow: hidden; } .card-content { position: absolute; width: 100% !important; bottom: 0; background: rgba(0, 0, 0, .7); padding: 10px; transition: bottom .3s, background .3s, height .3s; height:90px; left:0; } /* End ash */ .bg-right { background-position:right !important} .bg-img-wrap.card-wrap:hover .card-content { background: rgba(175,39,46,.7); height:100%;} .bg-img-wrap.card-wrap:hover .card-content h3 { text-align:left;} .course-wrap .card-content h3 { margin-top:0} .card-content h3 { text-align: Center; color: #fff; } .card-content p { height: 0 !important; opacity: 0; visibility: hidden; display: none; color:#fff; font-size:18px; } .bg-img-wrap.card-wrap:hover .card-content p { height: auto !important; display: block; opacity: 1; visibility: visible; } .bg-img-wrap.card-wrap.thumb-card { height:25vh; } .thumb-card { overflow:hidden;} .thumb-card a { color:#000;} .thumb-card a:hover img { opacity:0.85;} .bg-img-wrap.card-wrap.thumb-card .card-content p { text-align:left} .ease-fx * { box-sizing: inherit; transition-property: all; transition-duration: .6s; transition-timing-function: ease; } .area-icon { text-align: center; margin: 0 auto; height: 140px; width: 140px; font-size: 4em; border-radius: 50%; } .btn { cursor: default; display: block; font-size:16px; font-weight: 400; line-height: 45px; margin: 0 auto 1em; max-width: 160px; position: relative; text-decoration: none; text-transform: uppercase; vertical-align: middle; width: 140px } .btn-1 { background: transparent; font-weight: 100; } .btn-1 svg { height: 140px; left: 0; position: absolute; top: 0; width: 200px; } .btn-1 circle { fill: none; stroke: #4a4a4a; stroke-width: 4; stroke-dasharray: 422, 0; } .btn-1:hover { background: rgba(0,0,0, 0); font-weight: 900; letter-spacing: 1px; } .btn-1:hover circle { stroke-width: 8; stroke-dasharray:40, 200; stroke-dashoffset: 5; transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1); stroke: #A30B1A } .vidImg { position:relative;} .vidImg img { border: 2px solid #585858 !important; } .vidImg a:focus { outline:0;} .vidImg a:before { position: absolute; content: ""; top: 0; width: 100%; z-index: 4; text-align: center; background: url(//cdn2.hubspot.net/hubfs/2585850/Fujitsu_2016/Images/utube-icon2.png) no-repeat center center; height: 100%; background-size: 90px; left:0; right:0; } .fuji-template.fuj-hometemplate h3, .fuji-template.fuj-hometemplate h3 span { color:#4A4A4A; font-weight:400;} .card-content h3 { color:#fff !important; font-weight:400 !important; margin-top:6px;} .dg-wrap { position:relative;} .dg-img { position:absolute; bottom:0;} .dg-fwrap { position:relative; float:right !important;} .fujitsu-form.whitepaper-dl { background: #333333; border: 0; border-radius: 0; text-align: left; margin-bottom:30px; } .fujitsu-form.whitepaper-dl form label { text-transform: inherit; font-size: 20px !important; color: #fff !important; margin-bottom: 10px; } .fujitsu-form.whitepaper-dl .hs_submit { text-align: left; } .fujitsu-form.whitepaper-dl input[type="submit"] { background-color: #A30B1A; color: #fff; font-size: 18px; border: 0; margin-top:1.5em; } .fujitsu-form.whitepaper-dl .privacyLink { font-size: 14px; text-align: right; margin-top: 0.6em; color: #fff; text-decoration: none; display: inline-block; float: right; position: relative; top: -35px; } .denotes { position: absolute; bottom: 75px; right: 150px; color: black; text-align: left; display: inline-block !important; float: left !important; z-index: 0; width: 160px !important; } .denotes p { margin-bottom: 0; color: #fff; font-size: 14px; } /* Services */ .hero-banner { height:500px; padding-top:110px; background-color:#555;} .fuji-template .tab-content h2 { border-left: 2px solid #A30B1A; padding-left: 20px; margin-left: -24px } /* About Us */ /* Contact Us */ .basic-form form { width:90%;} .basic-form form .hs-form-field { margin-bottom: 10px; margin-top: 25px; } .basic-form form label { display:inline-block; margin-bottom: 6px; font-weight: bold } .basic-form form input, .basic-form form textarea { display: block; width: 100%; height: 50px; padding: 6px 12px; font-size: 14px !important; line-height: 1.42857143; color: #555555; background-color: #ffffff; background-image: none; border: 1px solid #e4e4e4; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075) 0 10px rgba(0, 0, 0, 0.175); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075) 0 10px rgba(0, 0, 0, 0.175); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075) 0 10px rgba(0, 0, 0, 0.175); -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; } .basic-form form textarea { height:215px; } .basic-form form input[type="submit"] { padding: 8px 20px !important; color: #322f31; width:auto; background-color: #fff; border: 2px solid #322f31; margin-top:20px; } .contact-aside { max-width: 480px; background-color: #EDEDED; float: right !important; } .cmap-wrap { overflow:hidden;} .fujitsu-form { background: #fff; padding: 2em; padding-top: 0.7em; border-radius: 4px; border:2px solid #000; margin-top:10px; } .fujitsu .contact-form { position: absolute; max-width: 540px !important; background: #fff; left: 0; right: 0; padding: 2em; padding-top: 0.7em; border-radius: 4px; } .fujitsu-form form input:focus, .fujitsu-form form textarea:focus { border-bottom: 3px solid red; font-size:18px; } .fujitsu-form form input, .fujitsu-form form select, .fujitsu-form form textarea, .fujitsu-form form select:focus { border: 0; border-bottom: 3px solid #000; font-size: 12px; padding-bottom:4px; font-weight:normal; } .fujitsu-form form select { height:38px;} .fujitsu-form form *:focus { outline: 0; border: 0; } .fujitsu-form form label, .fujitsu-form label { font-size: 15px !important; color: #000000 !important; margin-top: 16px; display: block; } .fujitsu-form ul.hs-error-msgs.inputs-list { margin: 10px 0; font-size: 12px; } .fujitsu-form ul.hs-error-msgs.inputs-list * { text-align: right; text-transform: none !important; color: #868686; font-size: 12px !important; margin-top: 0; } .fujitsu-form .hs_submit { text-align: center; } .fujitsu-form input[type="submit"] { background-color: #000; color: #fff; font-size: 12px; text-transform: uppercase; padding: 8px 30px; margin-top: 15px; } .fujitsu-form input[type="submit"]:hover { background-color:red; } .fujitsu-form select option { background: #333; color: #fff; font-size: 12px; line-height: 26px !important; } .fujitsu-form select option:checked { background: #A30B1A; box-shadow: 0 0 10px 100px #1882A8 inset; color: #fff; } .fujitsu-form.clean-form { padding: 0; margin-top: 0; border: none; } .fujitsu-form.clean-form input[type="submit"], .fujitsu-form.clean-form input[type="submit"]:focus { width: auto; margin-bottom: 10px; font-size: 20px; padding: 8px 30px !important; border-bottom: 0; } .fujitsu-form.clean-form form input, .fujitsu-form.clean-form form select, .fujitsu-form.clean-form form textarea, .fujitsu-form.clean-form form select:focus { font-weight:normal;} .hs_what_type_of_training_interests_you_ span, .hs_dba_skill_level span, .hs_developer_skill_level span, .hs_ha_skill_level span { font-weight: bold; font-size: 15px; } .hs_what_type_of_training_interests_you_ .input span, .hs_dba_skill_level .input span, .hs_developer_skill_level .input span, .hs_ha_skill_level .input span { font-weight: normal; font-size: 14px; } .hs_dba_skill_level ul li, .hs_developer_skill_level ul li, .hs_ha_skill_level ul li { display: inline-block; } .privacyLink { display:none;} .fujitsu-form .privacyLink { display: block; font-size: 0px; text-align: center; margin-top: 0.6em; color: #000; text-decoration: underline; } .fujitsu-form .form-notes, .fujitsu-form .privacyLink { display:none } .fujitsu-form.form-reply .form-notes, .fujitsu-form.form-reply .privacyLink { display:block } /* New Contact Us Page */ .contact-simple { padding-right:2.5em;} .contact-simple p { font-size:16px; } .contact-simple-form::placeholder, .contact-simple-form select, .contact-simple-form input, .contact-simple-form textarea { color:#696969 } .contact-simple-form { padding-left: 1em; } .contact-simple-form form .hs-form-field input, .contact-simple-form form .hs-form-field textarea { border: 1px solid rgba(204, 204, 204, 1); background-color: rgba(242, 242, 242, 1); font-size: 16px !important; text-transform: capitalize; padding: 1em; margin-bottom:1em; } .contact-simple-form form .hs-form-field textarea { text-transform: none !important; margin-top:0 } .contact-simple-form form .hs-form-field select { position: relative; padding-left: 14px; order: 1px solid rgba(204, 204, 204, 1); background-color: rgba(242, 242, 242, 1); font-size: 16px !important; margin-bottom: 1em; display: block; height: 45px; border-radius: 0px; -webkit-border-radius: 0px; moz-border-radius: 0px; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; } .contact-simple-form form .hs-form-field > label { display:none } .contact-simple-form form .hs-form-field.hs-fieldtype-radio label { display:block } .contact-simple-form form .hs-form-field.hs-fieldtype-radio * { text-transform:none} .contact-simple-form form.hs-form .hs-form-field ul.inputs-list li input { width: auto; margin-right: 5px; padding: 0 !important; vertical-align: top; margin-bottom:0 } .contact-simple-form form .hs_message { padding-left: 0; } .contact-simple-form form .hs-button { background: #A30B1A; border: none; font-size: 13px; color: #fff; text-transform: uppercase; padding: 0.6em 4.5em; letter-spacing: 0.8px; } /* "Contact us" form small */ /* [Added by Marcelo (FAST) on 10-Jul-2019 */ .contact-form-small::placeholder, .contact-form-small select, .contact-form-small input, .contact-form-small textarea { color:#696969 } .contact-form-small { padding-left: 0.5em; padding-right: 1.0em; } .contact-form-small form .hs-form-field input, .contact-form-small form .hs-form-field textarea { border: 1px solid rgba(180, 180, 180, 1); background-color: rgba(242, 242, 242, 1); font-size: 13px !important; text-transform: capitalize; padding: 1.0em; margin-bottom:1.0em; } .contact-form-small form .hs-form-field textarea { text-transform: none !important; margin-top:0 } .contact-form-small form .hs-form-field select { position: relative; padding-left: 1.0em; border: 1px solid rgba(180, 180, 180, 1); background-color: rgba(242, 242, 242, 1); font-size: 13px !important; margin-bottom: 1.0em; display: block; height: 40px; border-radius: 0px; -webkit-border-radius: 0px; moz-border-radius: 0px; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; } .contact-form-small form .hs-form-field > label { display:none } .contact-form-small form .hs-form-field.hs-fieldtype-radio label { display:block } .contact-form-small form .hs-form-field.hs-fieldtype-radio * { text-transform:none} .contact-form-small form.hs-form .hs-form-field ul.inputs-list li input { width: auto; margin-right: 5px; padding: 0 !important; vertical-align: top; margin-bottom:0 } .contact-form-small form .hs_message { padding-left: 0; } .contact-form-small form .hs-button { background: #A30B1A; border: none; font-size: 13px; color: #fff; text-transform: uppercase; padding: 0.6em 4.5em; letter-spacing: 0.8px; } /* Products */ .product-menu ul { min-height: 63px; line-height: 63px } .product-menu a { padding: 18px 30px; } .product-menu a:hover { background-color: rgba(0,0,0,0.1); } .product-videos-wrap iframe { min-height: 320px; } table.table-comparison th { border-radius: 4px 4px 0 0; font-size: 20px; padding: 8px 0; } .sand { background-color: #dcdcd4; margin-right: 1px; border-right: 1px solid #ffffff; } .khaki { background-color: #cfcdb2; } table.table-comparison tr > td:first-child { text-align:left; } table.table-comparison td { padding: 1em; border: 1px solid #c3c3c3; text-align:center; } table.table-comparison tr:nth-child(even) { background-color: #fdfdfd; } .table-check { background: url(//cdn2.hubspot.net/hubfs/2585850/Fujitsu_2016/Images/check-mark.png) no-repeat center center; background-size: 100%; width: 43px; height: 44px; display: inline-block; } /* Resources */ .table-resources { border-collapse: separate; border:1px solid rgb(209,209,209); border-right:2px solid rgb(209,209,209); } .table-resources a { color:#000;} .table-resources * { text-align:left; } .table-resources th { background-color: rgb(209,209,209); padding:4px 5px ;} .table-resources td { padding:4px 5px ; border-left:1px solid rgb(209,209,209); border-bottom:1px solid rgb(209,209,209)} .table-resources img { height: 24px; margin-top: -3px; vertical-align: middle; margin-left: 6px; margin-right: 6px; } /* Support Plans */ .hero-banner.banner-callout { padding-top:3rem; overflow:hidden;} .callout-inner .red-callout { position:relative; left: 0; margin-left: 0 !important; /* background-size: 78%; */ background-size: 184px; transform:none; } .vertical-center.callout-headline { left:15rem; } /* table */ .table-simple { margin-left: 20px; } .table-simple-header { background: #E8E8E8; } .table-simple-col-header { background: #E8E8E8; text-align: center; vertical-align:middle !important; } .table-simple-row-header { background: #E8E8E8; } .table-simple-header-small { background: #E8E8E8; font-size: 60% !important; } .table-simple-col-header-small { background: #E8E8E8; font-size: 60% !important; text-align: center; vertical-align: middle !important; } .table-simple-row-header-small { background: #E8E8E8; font-size: 60% !important; } .table-simple-header-w-emphasis { background: #E8E8E8; font-size: 90% !important; color:#A30B1A; text-align: center; } .table-simple-col-header-w-emphasis { background: #E8E8E8; font-size: 90% !important; color:#A30B1A; text-align: center; vertical-align: middle !important; } .table-simple-row-header-w-emphasis { background: #E8E8E8; font-size: 90% !important; color:#A30B1A; text-align: center; } .table-simple-header-empty-top-left { background: #FFFFFF; border-top: 1px solid #FFFFFF !important; border-left: 1px solid #FFFFFF !important; } .table-simple-cell-regular { background: #FFFFFF; } .table-simple td { font-size: 90%; vertical-align: top; padding: 3px 4px; border: 1px solid #C3C3C3; color: #000000; } .table-simple td ul { margin: 0px; padding-left: 20px; } .table-simple td ul li:before { width: 10px; } /* table-fujitsu selector are being used only in the "Support - Compare Plans" page (as of 11-May-2019) */ .table-fujitsu-header { background: #A40000; color: #FFFFFF !important; } .table-fujitsu-col-header { background: #A40000; color: #FFFFFF !important; padding: 3px 4px !important; text-align: center; vertical-align:middle !important; } .table-fujitsu-col-separator { background: #FFFFFF; color: #FFFFFF !important; padding: 0px 1px !important; border-top: 1px solid #FFFFFF !important; border-bottom: 1px solid #FFFFFF !important; font-size: 1px !important; } .table-fujitsu-row-header { background: #A40000; color: #FFFFFF !important; padding: 3px 4px !important; border-bottom: 1px solid #FFFFFF !important; } .table-fujitsu-header-small { background: #A40000; color: #FFFFFF !important; padding: 3px 4px !important; font-size: 60% !important; } .table-fujitsu-col-header-small { background: #A40000; color: #FFFFFF !important; padding: 3px 4px !important; font-size: 60% !important; text-align: center; vertical-align: middle !important; } .table-fujitsu-row-header-small { background: #A40000; color: #FFFFFF !important; padding: 3px 4px !important; font-size: 60% !important; border-bottom: 1px solid #FFFFFF !important; } .table-fujitsu-header-w-emphasis { background: #A40000; color: #FFFFFF !important; padding: 3px 4px !important; font-size: 90% !important; color:#A30B1A; text-align: center; } .table-fujitsu-col-header-w-emphasis { background: #A40000; color: #FFFFFF !important; padding: 3px 4px !important; font-size: 90% !important; color:#A30B1A; text-align: center; vertical-align: middle !important; } .table-fujitsu-row-header-w-emphasis { background: #A40000; color: #FFFFFF !important; padding: 3px 4px !important; font-size: 90% !important; color:#A30B1A; text-align: center; border-bottom: 1px solid #FFFFFF !important; } .table-fujitsu-header-empty { background: #FFFFFF; padding: 3px 4px !important; border: 1px solid #FFFFFF !important; border-bottom: 1px solid #A40000 !important; } .table-fujitsu-header-empty-top-left { background: #FFFFFF; padding: 0px 0px !important; border-top: 1px solid #FFFFFF !important; border-left: 1px solid #FFFFFF !important; } .table-fujitsu-header-empty-col-separator { background: #FFFFFF; color: #FFFFFF; padding: 0px 2px !important; border: 1px solid #FFFFFF !important; } .table-fujitsu td { font-size: 80%; vertical-align: top; border: 1px solid #A40000; color: #000000; } .table-fujitsu-regular-cell { padding: 3px 4px !important; } .table-fujitsu td ul { margin: 0px; padding-left: 20px; } .table-fujitsu td ul li:before { width: 10px; } /* PRIMEWEB table styles */ .table-primeweb-col-header { background: #E6E6E6; color: #444444 !important; font-weight: bold; font-size: 80% !important; } .table-primeweb-col-title { background: #F2F2F2; color: #A40000 !important; font-weight: bold; font-size: 80% !important; } .table-primeweb-col-type { text-align: center; } .table-primeweb-col-version { text-align: center; } .table-primeweb-col-name { } .table-primeweb-col-edition { text-align: center; } .table-primeweb-col-platform { text-align: center; } .table-primeweb-col-size { text-align: right; } .table-primeweb-col-date { text-align: center; } .table-primeweb-col-desc { } .table-primeweb-col-level { text-align: center; } .table-primeweb td { color: #444444; font-size: 70%; vertical-align: top; border: 1px solid #C0C0C0; padding: 3px 3px !important; } td.table-primeweb-col-category { color: #4A4A4A !important; font-size: 32px !important; border: 0px !important; padding-top: 30px !important; } td.table-primeweb-col-manual-header { color: #7F7F7F !important; font-size: 28px !important; border: 0px !important; padding-top: 5px !important; } /* Medium table styles */ .table-medium-wrapX { overflow-x: scroll; } .table-medium { margin-left: 20px; } .table-medium-col-header { background: #e8e8e8 !important; text-align: center; vertical-align:middle !important; } .table-medium-row-header { background: #e8e8e8 !important; } .table-medium-col-header-small { background: #e8e8e8 !important; font-size: 90% !important; text-align: center; vertical-align:middle !important; } .table-medium-row-header-small { background: #e8e8e8 !important; font-size: 90% !important; } .table-medium-col-header-w-emphasis { background: #e8e8e8 !important; font-size: 90% !important; color:#A30B1A; text-align: center; vertical-align:middle !important; } .table-medium-row-header-w-emphasis { background: #e8e8e8 !important; font-size: 90% !important; color:#A30B1A; text-align: center; } .table-medium-header-empty-top-left { background:#ffffff !important; border-top: 1px solid #ffffff !important; border-left: 1px solid #ffffff !important; } .table-medium td { font-size: 90%; vertical-align:top; padding: 5px 10px; border-left: 1px solid #ffffff; border-right: 1px solid #ffffff; border-top: 1px solid #c3c3c3; border-bottom: 1px solid #c3c3c3; } .table-medium td ul { margin: 0px; padding-left: 20px; } .table-medium td ul li:before { width:10px; } /* Kiosk Inner */ .kiosk-lp-inner .header-container-wrapper { height:150px;} .kiosk-lp-inner .body-container-wrapper { height: 950px; } .kiosk-lp-inner .footer-container-wrapper { background: #000; color: #fff; padding:15px 40px; height: 180px; } .kiosk-lp-inner .footer-container-wrapper * { font-size: 28px; } .kiosk-logo img { margin-top: -8px; } .row-seamless .row-fluid .span4 { width: 33.33333333% } .span8.widget-span.widget-type-text.kiosk-banner-bg { background: url(https://cdn2.hubspot.net/hubfs/2585850/Fujitsu_2016/kiosk/banner-gradient.png); background-color: #000; background-repeat: no-repeat; background-position: right center; background-size:cover; height: 220px; width:66.66%;} .kiosk-banner-img { background-size: cover; height: 220px; margin: 0; padding: 0; width: 33.33333333% !important; margin-left: 0 !important; background-position:center center; } .kiosk-title h1 { color: #fff; padding-left: 64px; padding-top: 66px; font-size: 60px; letter-spacing: 1px; font-weight: bolder !important; } .kiosk-content-pad { padding: 6em 3em 8em; height:730px;} .kiosk-content-pad h2 { font-size: 42px; } .kiosk-content-pad h4 { font-size: 30px; } /* View the brochure */ .brochure-wrap { padding: 10px; border: 2px dotted #cacaca; background: #e6e6e6; } .sec-body .brochure-wrap p { font-size: 14px; line-height: 1.4em; } .sec-body .brochure-wrap a.cta_button { padding: 10px 12px !important; line-height: 1.4em !important; font-size: 13px !important; } @media only screen and (max-width: 40em) { .remove-responsive p, .remove-responsive * { font-size: inherit; } } @media only screen and (max-width:767px) { .remove-responsive .row-fluid [class*="span"] { display: inline-block !important; float: left !important; width:none !important; } .remove-responsive .span2mob { width:940px !important;} .remove-responsive .span2mob2 { width:910px !important;} .remove-responsive .span8mob { width: 1280px !important; } .remove-responsive .span4mob { width: 640px !important; background-position: center center !important; } .remove-responsive .span3mob, .remove-responsive .span3.widget-span.span3mob { width: 630px !important; } .remove-responsive p, .remove-responsive * { font-size: inherit; } .remove-responsive table td { display: inline-block; } } /* Modular & Reusable Components ========================================================================== */ /* Callouts */ /* Social Media Custom Icons */ /* Additional Menus aside from the Main Nav */ /* ========================================================================== Footer ========================================================================== */ .footer-container-wrapper {} .footer-container {} .fuji-footer * { font-size: 16px } .fuji-footer a { margin-right:1.5em;} /* ========================================================================== 3. MAIN NAVIGATION ========================================================================== */ /* ========================================================================== MENU NAVIGATION - from HS Boiler Template ========================================================================== */ .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children ul.hs-menu-children-wrapper li a, .hs-menu-wrapper.hs-menu-flow-vertical>ul li.hs-item-has-children ul.hs-menu-children-wrapper li a { width: 250px; white-space: normal; text-overflow: inherit; line-height:1.5em; } .hs-menu-wrapper.hs-menu-flow-vertical>ul li.hs-item-has-children { height: 33px; } .hs-menu-wrapper.hs-menu-flow-vertical>ul li.hs-item-has-children:hover { height: auto; } .hs-menu-wrapper.hs-menu-flow-vertical>ul li.hs-item-has-children ul.hs-menu-children-wrapper { position:relative; left:0px;} .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children ul.hs-menu-children-wrapper li a { font-size:16px; width:max-content;} /* ========================================================================== Mobile Menu - Hubspot Standard Toggle Menu ========================================================================== */ /** * Special Note * * When the menu is open, a class of .mobile-open is applied to the body. You can * use this for custom styling on any element when the menu is in the open position. */ /* Variables ========================================================================== */ /* Set Mobile Menu Background Color */ /* Set Link Color */ /* Set Link Hover Color */ /* Menu Reset - Remove styling from desktop version of custom-menu-primary */ /* Place any additional CSS you want removed from the mobile menu in this reset */ .custom-menu-primary, .custom-menu-primary *{ display: block; float: none; position: static; top: auto; right: auto; left: auto; bottom: auto; padding: 0px; margin: 0px; background-image: none; background-color: transparent; border: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; max-width: none; width: 100%; height: auto; line-height: 1; font-weight: normal; text-decoration: none; text-indent: 0px; text-align: center; color: #ffffff; } .custom-menu-primary, .custom-menu-primary a { color:#fff !important;} /* Toggle Button ========================================================================== */ a.mobile-trigger { display: inline-block !important; /* Hide button on Desktop */ cursor: pointer; /* Mouse pointer type on hover */ position: absolute; /*******************************************/ top:1.5em; right: 15%; /*******************************************/ width: auto; /* Button width */ height: auto; /* Button height */ padding: 17px 12px; background: #5a5c61; z-index: 99999999999; -webkit-transition: background-color 0.2s linear; font-size: 16px; font-weight: normal; text-align: left; text-transform: uppercase; -moz-border-radius-bottomleft: 6px; -webkit-transition:color .2s ease-in; -moz-transition:color .2s ease-in; transition:color .2s ease-in; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; border:none; } a.mobile-trigger:hover { text-decoration: none; /* Removes link text underline on button */ color: #ffffff; } a.mobile-trigger span{ display: inline; } a.mobile-trigger span:before{ position: absolute; content: ''; /* Change the text on the closed toggle button */ font-family:"LatoBlack"; } a.mobile-trigger span:after{ position: relative; right: 2px; content: ''; /* Change the text on the open toggle button */ background-color: #000000; opacity: 0; transition: opacity .4s ease-in-out; -moz-transition: opacity .4s ease-in-out; -webkit-transition: opacity .4s ease-in-out; } /* Change button when menu is open */ .mobile-open a.mobile-trigger{ -webkit-transition:background-color 0.2s linear; /* Button color transition effect */ -moz-transition:background-color 0.2s linear; /* Button color transition effect */ transition:background-color 0.2s linear; /* Button color transition effect */ background: transparent; /* Changes button background to be slightly darker than open menu color */ } .mobile-open a.mobile-trigger span:after{ opacity: 1; } /* Toggle Button Icon & Animations ========================================================================== */ a.mobile-trigger i { display: inline; position: relative; top: -5px; -webkit-transition-duration: 0s; -webkit-transition-delay: .2s; -moz-transition-duration: 0s; -moz-transition-delay: .2s; transition-duration: 0s; transition-delay: .2s; } a.mobile-trigger i:before, a.mobile-trigger i:after { position: absolute; content: ''; } a.mobile-trigger i, a.mobile-trigger i:before, a.mobile-trigger i:after { width: 24px; /* Icon line width */ height: 2px; /* Icon line height */ background-color: #ffffff; /* Icon color */ display: inline-block; } a.mobile-trigger i:before { margin-top: -6px; /* Position top line */ -webkit-transition-property: margin, -webkit-transform; -webkit-transition-duration: .2s; -webkit-transition-delay: .2s, 0; left:0; } a.mobile-trigger i:after { margin-top: 6px; /* Position bottom line */ -webkit-transition-property: margin, -webkit-transform; -webkit-transition-duration: .2s; -webkit-transition-delay: .2s, 0; left:0; } .mobile-open a.mobile-trigger i { background-color: rgba(0,0,0,0.0); -webkit-transition-delay: .2s; -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0); -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0); box-shadow: 0px 1px 1px rgba(0, 0, 0, 0); } .mobile-open a.mobile-trigger i:before { margin-top: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition-delay: 0, .2s; -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0); -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0); box-shadow: 0px 1px 1px rgba(0, 0, 0, 0); left:0; } .mobile-open a.mobile-trigger i:after { margin-top: 0; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition-delay: 0, .2s; -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0); -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0); box-shadow: 0px 1px 1px rgba(0, 0, 0, 0); left:0; } /* Child Toggle Button ========================================================================== */ a.child-trigger { display: block !important; /* Hide button on Desktop */ cursor: pointer; /* Mouse pointer type on hover */ position: absolute; top: 0px; right: 0px; width: 55px !important; /* Button width */ min-width: 55px !important; height: 45px !important; /* Button height */ padding: 0 !important; border-left: 1px dotted rgba(255, 255, 255, .20); } a.child-trigger:hover { text-decoration: none; } /* Child Toggle Button Icon & Animations ========================================================================== */ a.child-trigger span { position: relative; top: 50%; /* Centers icon inside button */ margin: 0 auto !important; -webkit-transition-duration: .2s; -moz-transition-duration: .2s; transition-duration: .2s; } a.child-trigger span:after { position: absolute; content: ''; } a.child-trigger span, a.child-trigger span:after { width: 10px; /* Icon line width */ height: 1px; /* Icon line height */ background-color: #ffffff; /* Icon color */ display: block; } a.child-trigger span:after { -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transition-duration: .2s; -moz-transition-duration: .2s; transition-duration: .2s; } a.child-trigger.child-open span:after { -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); -webkit-transition-duration: .2s; -moz-transition-duration: .2s; transition-duration: .2s; } a.child-trigger.child-open span { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition-duration: .2s; -moz-transition-duration: .2s; transition-duration: .2s; } /* Menu Styles on Mobile Devices ========================================================================== */ /* Hide menu on mobile */ .custom-menu-primary.js-enabled .hs-menu-flow-horizontal, .custom-menu-primary.js-enabled .hs-menu-children-wrapper{ display: none; } /* Make child lists appear below parent items */ .custom-menu-primary ul.hs-menu-children-wrapper { visibility: visible !important; opacity: 1 !important; position: static !important; display: none; } /* Mobile Menu Styles */ .custom-menu-primary.js-enabled .hs-menu-flow-horizontal{ position: absolute; /**************************************************************/ top: 0; /* Positions the menu to drop from the very top of the screen */ left: 0px; /**************************************************************/ width: 100%; -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.65); -moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.65); box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.65); height:100%; background: rgba(67, 67, 67, 0.93); position:fixed; } .custom-menu-primary .hs-menu-flow-horizontal{ padding: 40px 0 0 0; /* Padding to add room for close button */ background-color: #000000; /* Menu background color set off global mobile-menuColor variable */ width: 100%; /* Full screen width */ z-index: 8888; } /* Level 1 Menu List Styles */ .custom-menu-primary .hs-menu-flow-horizontal > ul > li{ position: relative; } .custom-menu-primary .hs-menu-flow-horizontal > ul > li a{ font-size:96px; /* Font size of top level list items */ overflow: visible; line-height: 1.5em; color: #fff !important; text-transform: uppercase; font-family: "LatoHeavy" } .custom-menu-primary .hs-menu-flow-horizontal > ul > li a:hover { color:#ffc915 !important } .hs-menu-wrapper.hs-menu-flow-horizontal>ul li a { max-width:none !important; padding:0; white-space: inherit !important;} /* Level 1 and Higher Menu List Styles */ .custom-menu-primary .hs-menu-flow-horizontal ul li a{ padding: 0 10px; } .custom-menu-primary .hs-menu-flow-horizontal ul li a:hover{ color: #ffffff; /* link hover color set by global mobile-aColorHover variable */ } /* Level 2 and Higher Menu List Styles */ .custom-menu-primary .hs-menu-flow-horizontal > ul ul li{ background-color: rgba(255, 255, 255, .08); } .custom-menu-primary .hs-menu-flow-horizontal > ul ul li a{ text-indent: 10px; /* Indent Child lists */ font-size: 16px; /* Font size of child lists */ } /* Level 3 and Higher Menu List Styles */ .custom-menu-primary .hs-menu-flow-horizontal > ul ul ul li a{ text-indent: 30px; /* Indent Child lists */ } .custom-menu-primary .hs-menu-flow-horizontal > ul ul ul ul li a{ text-indent: 50px; /* Indent Child lists */ } /* Added normalize hubspot module */ .widget-type-header, .widget-type-rich_text { min-height:0px !important;} /* ========================================================================== 4. HELPER CLASSES ========================================================================== */ /* Display and Alignment */ .fl { float: left} .fr { float: right} .clearfix { &:before, &:after { content: ""; display: table; } &:after { clear: both; } } .pos-relative { position:relative;} .pos-absolute { position:absolute;} .hidden { display: none !important; } .visible { display: block !important; } .min-height0 { min-height:0 !important} .align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; } .align-just { text-align: justify; } .valign-bot { vertical-align:bottom;} .vertical-center { position: absolute; top: 50%; left:0; right:0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .vertical-bot-center { position: absolute; top: 60%; left:0; right:0; -webkit-transform: translateY(-40%); -ms-transform: translateY(-40%); transform: translateY(-40%); } .visible-hidden { visibility:hidden;} /* Padding and Margin */ .pad-mar-0 { padding: 0; margin: 0 } .pad-0 { padding: 0; } .pad-5px { padding: 5px; } .pad-top-0 { padding-top: 0; } .pad-bot-0 { padding-bottom: 0; } .pad-bot-10px { padding-bottom: 10px; } .pad-bot-3 { padding-bottom: 3em } .pad-top-1 { padding-top: 1em; } .pad-top-2 { padding-top: 2em; } .pad-top-3 { padding-top: 3em; } .pad-left-1 { padding-left: 1.2em; } .pad-lr-1 { padding: 0 1.5em; } .pad-r-1 { padding-right: 1.5em; } .mar-0 { margin: 0 !important; } .mar-top-0 { margin-top: 0px; } .mar-top-1 { margin-top: 1em; } .mar-top-2 { margin-top: 2em; } .mar-top-50px { margin-top: 50px; } .mar-r-1 { margin-right: 1em; } .mar-r-2 { margin-right: 2em; } .mar-l-1 { margin-left: 1em; } .mar-bot-1 { margin-bottom: 1em; } .mar-bot-2 { margin-bottom: 2em; } /* Width */ .fit { max-width: 100%; } .width-25 { width: 25% } .width-50, .row-fluid .span6.width-50 { width: 50% } .width-40 { width: 40% } .width-60 { width: 60% } .width-100 { width: 100%; } .full-height { height: 100%; } .max-width-80px { max-width: 80px; } / /* List */ ul.unstyled, ol.unstyled, .unstyled ul, .unstyled ol { list-style: none; padding: 0; margin:0;} .list-inline li { display:inline-block;} /* Others */ /* Fade content */ .fade * { animation: fadein 0.6s; -moz-animation: fadein 0.6s; /* Firefox */ -webkit-animation: fadein 0.6s; /* Safari and Chrome */ -o-animation: fadein 0.6s; /* Opera */ } @keyframes fadein { from { opacity:0; } to { opacity:1; } } /* Img to background image */ .bg-img-wrap, .hs-rss-item { background-size:cover; background-repeat:no-repeat; background-position:top center; } .bg-img, .bg-img img, .hs-rss-featured-image, .slider-bg li img { display:none !important;} /* Customzed hubspot default slider */ .slider-bg { position: relative; overflow:hidden;} .slider-bg ul { margin:0; padding:0;} .slider-bg ul.hs_cos_flex-slides li { height:70vh; background-size:cover; background-repeat:no-repeat; background-position:right center; overflow:hidden;} .slider-bg .hs_cos_flex-control-paging { position: absolute; z-index: 2; bottom: 2.5em; left: 0; right: 0; max-width: 200px; margin: 0 auto; } .slider-bg .hs_cos_flex-control-paging > li { list-style: none; display: inline-block; height: 13px; overflow: hidden; } .slider-bg .hs_cos_flex-control-paging > li a { color: transparent; background: #fff; margin: 0 4px; width: 10px; cursor:pointer; font-size:20px; } .slider-bg .hs_cos_flex-control-paging > li a.hs_cos_flex-active, .slider-bg .hs_cos_flex-control-paging > li a:hover { background-color:#A30B1A} .slider-bg ul.hs_cos_flex-direction-nav { display:none ;} .text-carousel { position:relative; overflow:hidden} .text-carousel ul { margin:0; padding:0;} .text-carousel ul.hs_cos_flex-direction-nav { position: absolute; right: 2em; list-style: none; z-index:2; } .text-carousel ul.hs_cos_flex-direction-nav li { display: inline; margin: 0 8px; } .text-carousel .hs_cos_flex-slider .hs_cos_flex-slides img { width:50px; height:30px; display:inline-block; float:left; margin-right:30px;} .text-carousel .hs_cos_flex-direction-nav li a, .text-carousel .hs_cos_flex-direction-nav li a:hover { color: transparent; } .text-carousel .hs_cos_flex-direction-nav a { background: url(//cdn2.hubspot.net/hubfs/2585850/Fujitsu_2016/Images/text-carousel-nav.png) no-repeat 0 0; background-size: 28px; width: 14px; height: 30px; display: inline-block; } .text-carousel .hs_cos_flex-control-paging { display:none;} .text-carousel a.hs_cos_flex-prev { background-position: 0px 4px; } .text-carousel a.hs_cos_flex-next { background-position: -13px 4px; } .text-carousel .caption { padding-right:3em;} /* Circled image */ .img-circle img { border-radius:50%;} @media (max-width: 768px) { .hide-br-mob br { display:none; } .mar-0-mob { margin:0 !important;} .pad-right-4 { padding-right:0 !important;} } /* 4a - CUSTOM GLOBAL HELPER CLASSES */ /* Added normalize hubspot module */ .widget-span { min-height:0px !important;} /* CUSTOM GLOBAL CLASSES -- adjust your style as per theme's requirements [added-a] */ html { font-size: 16px; } @media (max-width: 900px) { html { font-size: 15px; } } @media (max-width: 400px) { html { font-size: 13px; } } h1, .h1 { font-size: 2.4rem; font-weight: 600 !important; line-height:1.4em;} h2, .h2 { font-size: 2.2rem; } h3, .h3, h3 a { font-size: 1.3em; color: #A30B1A; line-height:1.45em; padding:0; font-weight:normal; margin:0; margin-bottom:10px; } h3 span { color: #A30B1A } /* h4, .h4 { font-size: 1.4em; } */ h1, h2, h4, h5, h6, .h1, .h2, .h4, .h5, .h6 { font-family: 'fujisans' , Arial, Verdana, sans-serif !important; color: #4A4A4A; padding:0; font-weight:normal; margin:0; margin-bottom:10px;} p { margin:0; margin-bottom:20px; } img { max-width:100%; height:auto;} .img-right { position:relative; z-index:9;} /* Fonts */ .calist * { font-family: 'calist', sans-serif; font-weight:normal; } .centurygothic * { font-family: 'centurygothic', sans-serif; font-weight:normal; } .sm-font *, .sm-font { font-size:12px;} .underline { text-decoration:underline !important;} .allcaps { text-transform:uppercase;} /* Padding */ .pad-0-2 { padding:0.2em;} .pad-0-5 { padding:0.5em;} .pad-1 { padding:1em;} .pad-2 { padding:2em;} .pad-4 { padding:2em;} .pad-left-1 { padding-left:1em;} .pad-right-1 { padding-right:1em;} .pad-right-4 { padding-right:4em;} .pad-leftright-1 { padding:0 1.5em;} .pad-topbot-0-5 { padding:0.5em 0;} .pad-topbot-1 { padding:1em 0;} .pad-topbot-2 { padding:2em 0;} .pad-topbot-3 { padding:3em 0;} .pad-topbot-5 { padding:5em 0;} .pad-top-3 { padding-top:3em;} .pad-bot-3 { padding-bottom:3em;} .pad-bot-1 { padding-bottom:1em;} .mar-left-1 { margin-left:1.4em !important;} .mar-left-0 { margin-left:0 !important;} .mar-left-5px { margin-left: 5px !important;} .mar-left-10px { margin-left:10px !important;} /* Secton header and section body */ .sec-head h1 { } .sec-head h2 { display: inline-block; margin: 8px 0; border-left: 2px solid red; padding-left: 0.6em; } .sec-head h2 { } .sec-head h3 { } .sec-head h4 { } .sec-head p { font-family: 'calistb',sans-serif; font-size: 2.2em; margin-top: 0; } .sec-body { min-height:0px;} .sec-body p { font-size:22px;} .sec-body ul { list-style:none; } .pos-rel { position: relative; } .hs-richtext p { font-size: 90% !important; margin-bottom: 10px !important } .inputs-list p { font-size: 90% !important; margin-bottom: 10px !important } /* Color: Font and Background */ .white, .white * { color: #fff; } .gray { color: #4A4A4A; } .red { color: #A30B1A;} .dark-gray { color: #eee; } .black, .black * { color:#444444;} .bg-white { background-color: #fff } .bg-red { background-color: #A30B1A;} .bg-gray { background-color: #595959; } .bg-lightgray { background-color: #f7f9f8 } .bg-lightgray2 { background-color: #f5f5f5; } .bg-medgray { background-color: #dad9d6 } .bg-medgray2 { background-color:#d1d1d1 } /* Overlay */ .white-overlay:before { position: absolute; width: 100%; height: 100%; content: ''; background: rgba(213, 222, 229,0.8); top: 0; z-index: 0; } .white-mid-overlay:before { position: absolute; width: 100%; height: 54%; content: ''; bottom: 0; z-index: 0; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+100;White+to+Transparent */ background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */ } .smooth-transition * { -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; -webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1); transition-timing-function: cubic-bezier(0.25,0.1,0.25,1); } /* Others */ .border-yellow { border:2px solid #F2A900; } .border-gray-r { border-right: 1px solid rgba(204, 204, 204, 1); } .border-r-3pxred { border-right: 3px solid #A30B1A; padding-right: 15px; } /* CTA buttons */ #banner-cta { background: rgb(251,0,0) !important; color: rgb(255,255,255) !important; -webkit-font-smoothing: antialiased !important; cursor: pointer !important; -moz-user-select: none !important; -webkit-user-select: none !important; -o-user-select: none !important; user-select: none !important; display: inline-block !important; font-weight: normal !important; text-align: center !important; text-decoration: none !important; font-family: sans-serif !important; border-radius: 4px !important; border-width: 0px !important; transition: all .4s ease !important; -moz-transition: all .4s ease !important; -webkit-transition: all .4s ease !important; -o-transition: all .4s ease !important; text-shadow: none !important; line-height: 1.5em !important; padding: 3px 18px !important; font-size: 17px; } .cta_button { text-decoration:none; display:inline-block; text-transform:uppercase; font-size:14.5px; font-family: 'Montserrat', sans-serif; font-weight:700; padding: .5em 2.2em; border-radius: 6px; letter-spacing:1px; border:2px solid transparent; border-color:#F2A900; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; position: relative; } .cta_button:focus, .cta_button:active { border:2px solid #F2A900; } .cta_button:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; overflow: hidden; border-radius: 4px; } .cta_button:hover:before { webkit-transform: scaleX(1); transform: scaleX(1); } .cta_button.yellow-bg { color:#fff;} .cta_button.yellow-bg:before { background: #fff; } .cta_button.yellow-bg:hover { background: #da9506; color: #2a1e56; } .cta_button.border-yellow:before { background: #f6a704 } .cta_button.border-yellow:hover { background: #fff; color: #2e1a46; } .cta_button.border-white { color:#fff; border: 2px solid #fff; padding: 8px 2.5em; } .cta_button.border-white:before { background: #ffffff } .cta_button.border-white:hover { background: #e5e5e5; color: #f6a704; } /* Width */ .maxwidth-1000{ max-width: 1000px !important; } .maxwidth-90{ max-width: 900px; } .maxwidth-600 { max-width: 600px !important; } /* Custom form */ .simple-form form input, .simple-form form textarea { padding: 4px 10px; } .page-content h1 { color:#A30B1A;} .page-content ul { margin-left:0; padding-left:18px;} .page-content ul li { position:relative;} .page-content ul li:before { content: "■"; font-family: "Arial Black"; color: #A40000; padding-right: 0.3em; position: absolute; left: -18px; top: -4px; width: 12px; float: left; display: inline-block; } .page-content ul li span { padding-left:0; display:inline-block;} /* ========================================================================== 5. TEMPLATE MODULE SELECTORS ========================================================================== */ /* Common Template Selectors ========================================================================== */ body.one-column {} body.two-column {} body.three-column {} .content-wrapper {} .main-content {} .sidebar{} .sidebar.right{} .sidebar.left{} /* Common One Column Selectors */ body.site-page.one-column, body.landing-page.one-column, body.error-template.one-column, body.password-template.one-column, body.subscription-template.one-column {} body.site-page.one-column .main-content, body.landing-page.one-column .main-content, body.error-template .main-content, body.password-template .main-content, body.subscription-template .main-content {} /* Common Two Column Selectors */ body.site-page.two-column, body.landing-page.two-column, body.blog {} body.site-page.two-column .main-content, body.landing-page.two-column .main-content, body.blog .blog-content {} /* Common Three Column Selectors */ body.site-page.three-column, body.landing-page.three-column {} body.site-page.three-column .main-content, body.landing-page.three-column .main-content {} /* Custom Landing Page */ .landing-page-temp p { line-height:1.45em} /* Site Pages ========================================================================== */ /* One Column Template */ body.site-page.one-column {} body.site-page.one-column .content-wrapper {} body.site-page.one-column .main-content {} /* Two Column Template */ body.site-page.two-column {} body.site-page.two-column .content-wrapper {} body.site-page.two-column .main-content {} body.site-page.two-column .sidebar.right {} /* Three Column Template */ body.site-page.three-column {} body.site-page.three-column .content-wrapper {} body.site-page.three-column .main-content {} /* Landing Pages ========================================================================== */ /* One Column Template */ body.landing-page.one-column {} body.landing-page.one-column .content-wrapper {} body.landing-page.one-column .main-content {} /* Two Column Template */ body.landing-page.two-column {} body.landing-page.two-column .content-wrapper {} body.landing-page.two-column .main-content {} body.landing-page.two-column .sidebar.right {} /* Three Column Template */ body.landing-page.three-column {} body.landing-page.three-column .content-wrapper {} body.landing-page.three-column .main-content {} /* System Pages ========================================================================== */ /* Error Templates 404, 500 */ body.error-template.one-column {} body.error-template.one-column .content-wrapper {} body.error-template.one-column .main-content {} /* Password template */ body.password-template.one-column {} body.password-template.one-column .content-wrapper {} body.password-template.one-column .main-content {} /* Email Subscribition templates */ body.subscription-template.one-column {} body.subscription-template.one-column .content-wrapper {} body.subscription-template.one-column .main-content {} /* ========================================================================== 6. COS COMPONENTS ========================================================================== */ /* ========================================================================== Blog ========================================================================== */ /* Blog Post and Listing Body Class */ body.blog {} /* Blog Post */ body.hs-blog-post {} /* Blog Listing */ body.hs-blog-listing {} /* Blog Columns Wrapper */ .blog .content-wrapper {} /* Blog Content Column ========================================================================== */ .blog .blog-content {} /* Use this to style the main wrapper for the blog listing pages */ .blog-listing-wrapper {} /* Use this to style the main wrapper for the blog post pages */ .blog-post-wrapper {} /* Blog Title */ .hs-blog-header h1 {} .hs-blog-header h1 a{} /* Blog Post Title */ .post-header h2 {} .post-header h2 a {} /* Blog Author and Avatar */ #hubspot-author_data {} #hubspot-author_data a.author-link {} #hubspot-author_data .hs-author-avatar {} #hubspot-author_data .hs-author-avatar img {} /* Use this to set up different styling for your blog posts */ .blog-listing-wrapper .post-listing .post-item {} .blog-listing-wrapper .post-listing .post-item .post-body {} .blog-post-wrapper .post-body {} /* Post Featured Image on Listings Page */ .hs-featured-image-wrapper {} .hs-featured-image-wrapper .hs-featured-image-link {} .hs-featured-image-wrapper .hs-featured-image-link img.hs-featured-image{ border-width: 0; max-height: 170px; max-width: 210px; height: auto; width: auto; display: inline-block !important; float: right; margin: 20px 0 20px 20px; } /* Read More Link */ a.more-link {} /* Blog Topics List */ #hubspot-topic_data {} #hubspot-topic_data a.topic-link {} /** * Blog Social Sharing icons * * Overrides defaults to better align icons and prevent overlapping */ .hs-blog-social-share { padding: 10px 0 0 0; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; height: auto; } /** * Blog Commments * * Custom styles are listed below, as the COS does not provide default styles. */ #comments-listing { border-bottom: 1px solid #ccc; margin-bottom: 30px; margin-top: 30px; } .comment { margin: 10px 0; border-top: 1px solid #ccc; padding: 15px 0; } .comment-date { font-size: 13px; text-align: right; } .comment-from { font-weight: bold; } .comment-body { padding: 10px 0; } /* Pagination */ .blog-pagination {} .blog-pagination a {} .blog-pagination a.previous-posts-link {} .blog-pagination a.all-posts-link {} .blog-pagination a.next-posts-link {} /** * Blog Author Page * * ALWAYS be sure to set styles to these selectors, as the COS does not provide default styles */ .hs-author-profile {} .hs-author-profile h2.hs-author-name {} .hs-author-profile .hs-author-bio {} .hs-author-profile .hs-author-avatar {} .hs-author-profile .hs-author-avatar img {} h3.hs-author-listing-header {} /** * Blog All Posts Page * * ALWAYS be sure to set styles to these selectors, as the COS does not provide default styles */ body.hs-content-path-blog-all {} div.post-listing-simple {} div.post-listing-simple .post-item {} h2.post-listing-simple {} h2.post-listing-simple a {} /* Blog Sidebar ========================================================================== */ .blog .blog-sidebar {} /* Blog Modules */ .blog .blog-sidebar .widget-span {} /* Custom CSS */ .fujitsublog-template .hs-blog-social-share { display:none;} .fujitsublog-template .post-item { width: 31%; display: inline-block; vertical-align: top; margin: 0 0.5%; border: 1px solid #dad9d6; border-top: 5px solid #000; position:relative; margin-bottom:1em; } .fujitsublog-template .post-img { display: block; width: 100%; } .fujitsublog-template .post-img.bg-img-wrap { height: 200px; position:relative; background-position: center center; background-size: 100%; } .fujitsublog-template .post-item:hover .post-img.bg-img-wrap:after { content: ''; position: absolute; height: 100%; width: 100%; background: rgba(142, 5, 5, 0.7); } .fujitsublog-template .customized-socialshare { display: none; border-top:0; } .fujitsublog-template .post-item:hover .customized-socialshare { display: block; position: absolute; top: 18%; margin: 0 auto; left: 0; right: 0; text-align: center; } .fujitsublog-template .post-header { min-height: 48px; } .fujitsublog-template #hubspot-author_data, .fujitsublog-template #hubspot-topic_data { display:none;} .fujitsublog-template .post-header h2 { font-size: 1.2em; text-transform: uppercase; margin-top: 0.6em; line-height: 1.2em; } .fujitsublog-template .post-item-cont p { font-size: 18px; margin:0; } .fujitsublog-template .fuj-bloglist .post-body img { display:none; } .fujitsublog-template .post-item-cont { padding: 0 0.6em; min-height: 260px; overflow: hidden; } .fujitsublog-template .fuj-bloglist .post-body { min-height: 125px; font-size: 16.5px !important; color: #000 !important; font-weight: normal !important; } .fujitsublog-template .fuj-bloglist .post-body * { color: #000; font-weight: normal !important; } .fujitsublog-template .more-link:hover:after { right: 1.1em; opacity: 1; } .fujitsublog-template .more-link:after { content: '\f178'; right: 1em; top: 4px; color: #fff; font-family: FontAwesome; font-style: normal; font-weight: normal; transition: all .5s; -webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1); transition-timing-function: cubic-bezier(0.25,0.1,0.25,1); opacity: 0; font-size: 1.2em; transition: all .2s; transition-timing-function: cubic-bezier(0.25,0.1,0.25,1); -webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1); position: absolute; } .fujitsublog-template .more-link:hover { background-color: red; padding-right: 4em; } .fujitsublog-template .more-link { background-color: #000; color: #fff; font-size: 16px; text-transform: uppercase; padding: 8px 30px; margin-top: 15px; position: relative; transition: all .2s; transition-timing-function: cubic-bezier(0.25,0.1,0.25,1); -webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1); } .more-link-wrap { display: block; width: 100%; text-align: center; margin-bottom: 1.2em; } .blog-pagination { text-align: center; margin-top: 2em; } a.all-posts-link { font-size: 16px; text-transform: uppercase; } .2.widget-span.widget-type-blog_subscribe { margin-left: 0; } .fuj-subscribe h3 p { font-size: 18px !important; color: #000; line-height: 24px; } .fuj-subscribe form { background: #333; color: #fff; padding: 1em; } .fuj-subscribe label { margin: 6px 0; display: block; } .fuj-subscribe input[type="submit"] { font-size: 20px; text-decoration: none !important; background: #A30B1A; border: 0; padding: 6px 20px; font-size: 18px; text-transform: uppercase; color: #fff; font-weight: 500; letter-spacing: 0.4px; } .fuj-subscribe input[type="email"] { margin-bottom:0.6em;} .fujblog-sidebar h2 { border-bottom: 1px dotted #000; } .fuj-subscribe form .hs_submit input { margin: 10px 0; } /* Blog Theme 2 */ .fujitsublog-template.fblogv2 .post-item { width: 100%; border: 0; background: #fff; padding: 1em; } /*.fujitsublog-template.fblogv2 .hero-banner { height:48vh; position:relative } */ .fujitsublog-template.fblogv2 .hs-blog-header { position: absolute; display: inline; max-width: 1012px; padding-left: 18px; bottom: 0; padding-bottom:1em } .fujitsublog-template.fblogv2 .post-title ,fujitsublog-template.fblogv2 .post-title * { font-size: 28px; line-height: 1.4em text-decoration: none; font-weight: 600 } .fujitsublog-template.fblogv2 .hs-featured-image-wrapper * { color: #4d4d4d !important; font-size:20px !important; font-weight:600; } .fujitsublog-template.fblogv2 a.more-link:hover:after { display: none; } .fujitsublog-template.fblogv2 .hs-featured-image.post-img { float: none; margin: 0; max-width: 100%; margin-bottom: 1em; max-height:none; } .more-link-wrap.post-more-wrap { text-align:left} .more-link-wrap.post-more-wrap .more-link { text-transform: capitalize; text-align: left; padding: 0; margin-left: 0; background: none; font-size: 18px !important; color: #A30B1A !important; font-weight:300; } .fujitsublog-template.fblogv2 #hubspot-author_data { font-size:17px;} .fujitsublog-template.fblogv2 #hubspot-author_data, .fujitsublog-template.fblogv2 #hubspot-topic_data { display:block;} .author-img { width: 120px; margin-top: 10px; margin-bottom:1em } a.author-link { color: inherit; } .post-item a:hover { text-decoration:underline;} .fujitsublog-template.fblogv2.hs-blog-post .blog-home-title { display:none} .fujitsublog-template.fblogv2.hs-blog-listing .blog-inner-title, .fujitsublog-template.fblogv2.hs-blog-listing .listing-hide { display:none} .fujitsublog-template.fblogv2 .customized-socialshare { display:block} .fujitsublog-template.fblogv2.hs-blog-post .post-body img { margin-bottom:1em; display:block} .author-details { font-size: 16px; line-height: 24px; padding-right: 2em; padding-top:10px; } .author-details * { font-size: 16px; } a.sm-font.back-homeblog { font-weight: 100 !important; display: inline-block; font-size: 15px; } .fujitsublog-template.fblogv2.hs-blog-listing .hs-featured-image-wrapper * { } .fujitsublog-template.fblogv2 .hs-blog-header a:hover { color:inherit !important; text-decoration:underline; } .fujitsublog-template.fblogv2 .fujblog-sidebar p, .fujitsublog-template.fblogv2 .fujblog-sidebar ul li a { font-size: 0.9em; } .fujitsublog-template.fblogv2 .fujblog-sidebar h2 { font-size: 1.4em; } .three-col .hs-rss-item.hs-with-featured-image { width: 32.33%; float: left; display: inline-block; margin: .50%; position: relative; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; height: 300px; background-size: cover; background-repeat: no-repeat; background-position: 0 0; } .hs-rss-item.hs-with-featured-image .hs-rss-item-text { width:100%; } .hs-rss-description a { color:#fff; text-decoration:underline; } .hs-rss-description { opacity: 0; visibility: hidden; display: none; } .hs-rss-item.hs-with-featured-image .hs-rss-item-text { position: absolute; width: 100% !important; bottom: 0; background: rgba(0,0,0,.7); padding: 1em; transition: bottom .3s,background .3s,height .3s; height: 108px; left: 0; padding-top:10px; } .hs-rss-item.hs-with-featured-image:hover .hs-rss-item-text { background: rgba(175,39,46,.7); height: 100%; color:#fff; } .hs-rss-item.hs-with-featured-image:hover .hs-rss-item-text .hs-rss-description { opacity: 1; visibility: visible; display: block; } .hs-rss-item.hs-with-featured-image .hs-rss-item-text a { color:#fff;} .hs-rss-title { font-size: 1.1em; font-family:'fujisans'; } .hs-rss-item.hs-with-featured-image:hover .hs-rss-item-text .hs-rss-title { margin-bottom:10px; display:block;} .section.post-body table td:before { display:none; } .section.post-body table td { padding: 8px 10px; overflow: hidden; } .table-style table td:before { display: none !important; } .table-style table td { display: table-cell !important; } .table-style table td { padding: 10px 15px; overflow: hidden; } .table-style table td:first-child { width: 20%; } .section.post-body table td p { margin-bottom: 0; } .section.post-body table tr:nth-child(even), .table-style table tr:nth-child(even) {background: #f1f2f2} .section.post-body table tr:nth-child(odd), .table-style table tr:nth-child(odd) {background: #e6e7e8} /* .blog-main-details { background: #e6e7e8; padding: 10px; } .blog-subhead { padding: 1.5em 1em; } .blog-subhead h2 { font-size: 26px; color: #333132 !important; } */ .bckimg { background-repeat: no-repeat!important; background-position: right top!important; background-size: 800px auto!important; } .bckimageurl img { display: none; } /* Blog Post Theme 2017 */ span.icon-infinity { background: url(https://cdn2.hubspot.net/hubfs/2585850/Fujitsu_2016/Fujitsu-favicon-RGB.png) no-repeat center center; display: inline-block; background-size: 100%; width: 38px; margin-right: 10px; } ul.red-list { list-style: none; margin: 0; padding: 0; margin-bottom: 1em; } ul.red-list li { margin-bottom: 6px; } ul.red-list li:before { content: "• "; color: red; font-size: 20px; padding-right:4px; } span.big-no { display: inline-block; font-size: 40px; width: 35px; vertical-align: top; } span.no-details { display: inline-block; width: 82%; } .img-shadow-curve { -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5); -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5); box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5); border-radius:9px; margin-bottom: 8px !important; } span.photo-desc { background: #f5f5f5; text-align: center; display: block; padding: 10px; border-radius: 6px; } .section.post-body .auto-width td { width: auto; } .legend p, .legend { font-size: 90% !important; margin-top: 10px !important; } .code-script { background-color: #F6F6F4; color:#101010; border: 1px solid #AAAAAA; padding: 5px; font-family: monospace !important; font-size: 14px !important; white-space: pre !important; overflow-x: auto !important; margin-left:15px; margin-right:30px; margin-bottom:20px !important; box-shadow: 6px 6px 3px 0px #C0C0C0; } .code-script h6 { font-size: 18px; margin-top: 20px; } span.tab1 { width: 10px; display: inline-block; } span.tab2 { width: 30px; display: inline-block; } span.monospace { font-family: monospace; font-size: 95%; } span.mono { font-family: monospace; font-size: 95%; } span.placeholder { font-style: oblique; color: #A40000; } span.placeholder-non-coloured { font-style: oblique; } .show-syntax { background-color: #F6F6F4; border: 1px dotted #C0C0C0; padding-left: 2px; padding-right: 2px; } .show-syntax-hlight-red-lighter { background-color: #FFCCCC; border: 1px dotted #C0C0C0; padding-left: 2px; padding-right: 2px; } .show-syntax-hlight-yellow { background-color: #FFFF00; border: 1px dotted #C0C0C0; padding-left: 2px; padding-right: 2px; } .section.post-body table.simple-table tr { background: transparent; } a .section.post-body table.simple-table tr td { padding: 0; } .simple-table th { text-align: left; font-weight: normal; } .colspan-full { width: 100% !important } /* all blog post */ .post-listing-simple .fast-alllist h3 { font-size: 24px; margin-top: 6px; margin-bottom: 12px; } .post-listing-simple .fast-alllist a p { color:#444;} .post-listing-simple .fast-alllist a:hover { text-decoration:none;} .post-listing-simple .post-item { box-shadow: 0 0 0 1px rgba(187, 187, 187, 0.1); transition: all 200ms ease-out; } .post-listing-simple .post-item:hover { box-shadow: 0 0 10px rgb(183, 183, 183); } /* Blog Update as of June 25, 2018 */ .fujitsublog-template.fblogv2.fuji-template.hs-blog-listing .callout-headline { padding-top:4em;} .fujitsublog-template.fblogv2.fuji-template .hero-banner { height: auto; padding-bottom: 1.5em; } .fujitsublog-template.fblogv2.fuji-template a.sm-font.back-homeblog { position:relative; top:0em} .fujitsublog-template.fblogv2.fuji-template .callout-headline { padding-left: 2.2em; } .fujitsublog-template.fblogv2.fuji-template span.blog-inner-title { display: inline-block; position: relative; margin: 0.8em 0; } @media(max-width:1300px){ .slider-bg ul.hs_cos_flex-slides li { height: 450px !important; } } @media(max-width:1200px){ .slider-bg ul.hs_cos_flex-slides li { height: 450px !important; } body .bg-img-wrap.card-wrap { height:400px; } } @media(max-width:991px){ body .slider-bg ul.hs_cos_flex-slides li { height: 450px !important; } body .bg-img-wrap.card-wrap { height:340px; } } @media(max-width:767px){ body .slider-bg ul.hs_cos_flex-slides li { height: 430px !important; } body .bg-img-wrap.card-wrap { height:400px; } body .span3.widget-span.widget-type-cell.card-wrap.bg-img-wrap.thumb-card { height:200px; } } @media(max-width:480px){ body .slider-bg ul.hs_cos_flex-slides li { height: 500px !important; } } @media only screen and (max-width: 1850px) { .bckimg { background-size: 750px auto!important; } } @media only screen and (max-width: 1730px) { .bckimg { background-size: 700px auto!important; } } @media only screen and (max-width: 1630px) { .bckimg { background-size: 550px auto!important; } } @media only screen and (max-width: 1429px) { .bckimg { background-image: 500px auto!important; } .bckimageurl img { padding-top: 60px; display: none; } } @media only screen and (max-width: 1160px) { .bckimg { background-image: none !important; } .bckimageurl img { padding-top: 60px; display: block; } } @media only screen and (max-width:1024px) { .fujitsublog-template.fblogv2 .hs-blog-header { width:100% !important; padding-top:1em; left:0 } /*.fujitsublog-template.fblogv2 .hero-banner { padding-top:8em; } */ .back-homeblog { position:relative !important; top:0em !important; margin-bottom:15px} .fujitsublog-template.fblogv2.fuji-template .hero-banner { height: auto; min-height: 300px; padding-bottom: 20px; } } @media(max-width:900px) { .fujitsublog-template.fblogv2.fuji-template .callout-headline { padding-left: 4em; } } @media only screen and (max-width:768px) { .three-col .hs-rss-item.hs-with-featured-image { width: 100%; float: none; display: inline-block; height:auto; min-height: 260px; } } @media only screen and (max-width:767px) { .pad-mob { padding: 40px 0px 10px 0px !important;} .pad-top0-mob { padding-top:0;} .span4.author-details * { font-size: inherit !important; } .span4.author-details { text-align: left; padding-top: 10px; } /* .fujitsublog-template.fblogv2 .hero-banner { height: auto; padding-top: 2em; } */ .fujitsublog-template.fblogv2 .hs-blog-header { position: relative; display:inline-block; bottom:-2em } .post-body.fastblog-innerbody span div, .post-body.fastblog-innerbody img { margin: 0 !important; width: auto !important; float: none !important; } .post-body.fastblog-innerbody span div.code-script { margin-bottom: 20px !important; } span.photo-desc { margin-bottom:16px;} .dg-img { position:relative} .dg-fwrap { float:none !important} .fujitsublog-template.fblogv2.fuji-template .callout-headline { padding-left: 0em; } .fujitsublog-template.fblogv2.fuji-template.hs-blog-listing .callout-headline { padding-top:0em;} } @media(max-width:640px) { .fujitsublog-template.fblogv2.fuji-template .callout-headline { margin-top: 2em; } } /* ========================================================================== Forms ========================================================================== */ /* All Global Forms ========================================================================== */ /* Form Field */ body .hs-form-field {} /* Descriptions */ body .hs-field-desc {} /* Labels */ body label {} body .hs-form-field > label {} /* One Line Inputs */ body input[type="text"], body input[type="password"], body input[type="datetime"], body input[type="datetime-local"], body input[type="date"], body input[type="month"], body input[type="time"], body input[type="week"], body input[type="number"], body input[type="email"], body input[type="url"], body input[type="search"], body input[type="tel"], body input[type="color"], body input[type="file"], body textarea, body select { width: 100%; font-family: fujisans, Roboto, Arial, Sans-Serif; font-size: 18px; } body input[type="text"]:focus, body input[type="password"]:focus, body input[type="datetime"]:focus, body input[type="datetime-local"]:focus, body input[type="date"]:focus, body input[type="month"]:focus, body input[type="time"]:focus, body input[type="week"]:focus, body input[type="number"]:focus, body input[type="email"]:focus, body input[type="url"]:focus, body input[type="search"]:focus, body input[type="tel"]:focus, body input[type="color"]:focus, body input[type="file"]:focus, body textarea:focus, body select:focus {} /* Separate Styles for Multiple Line Inputs */ body textarea {} body textarea:focus {} /* Separate Styles for Drop Downs */ body select {} body select:focus {} /* Multiple Selection Inputs */ body form.hs-form .hs-form-field ul.inputs-list { list-style: none; padding: 0; margin: 0px; } body form.hs-form .hs-form-field ul.inputs-list li input {} body input[type="radio"] {} body input[type="checkbox"] {} /* Required */ body input:focus:required:invalid, body textarea:focus:required:invalid, body select:focus:required:invalid {} body input:focus:required:invalid:focus, body textarea:focus:required:invalid:focus, body select:focus:required:invalid:focus {} /* Placeholder Text */ ::-webkit-input-placeholder { /* Webkit Browsers */ /* color: #555; opacity: 1; */ } :-moz-placeholder { /* Firefox 18- */ /* color: #555; opacity: 1; */ } ::-moz-placeholder { /* Firefox 19+ */ /* color: #555; opacity: 1; */ } :-ms-input-placeholder { /* IE10 */ /* color: #555; opacity: 1; */ } /* Form Module ========================================================================== */ /* Form Field */ .hs_cos_wrapper_type_form .hs-form-field {} /* Descriptions */ .hs_cos_wrapper_type_form .hs-field-desc {} /* Labels */ .hs_cos_wrapper_type_form label {} .hs_cos_wrapper_type_form .hs-form-field > label {} /* One Line Inputs */ .hs_cos_wrapper_type_form input[type="text"], .hs_cos_wrapper_type_form input[type="password"], .hs_cos_wrapper_type_form input[type="datetime"], .hs_cos_wrapper_type_form input[type="datetime-local"], .hs_cos_wrapper_type_form input[type="date"], .hs_cos_wrapper_type_form input[type="month"], .hs_cos_wrapper_type_form input[type="time"], .hs_cos_wrapper_type_form input[type="week"], .hs_cos_wrapper_type_form input[type="number"], .hs_cos_wrapper_type_form input[type="email"], .hs_cos_wrapper_type_form input[type="url"], .hs_cos_wrapper_type_form input[type="search"], .hs_cos_wrapper_type_form input[type="tel"], .hs_cos_wrapper_type_form input[type="color"], .hs_cos_wrapper_type_form input[type="file"], .hs_cos_wrapper_type_form textarea, .hs_cos_wrapper_type_form select {} .hs_cos_wrapper_type_form input[type="text"]:focus, .hs_cos_wrapper_type_form input[type="password"]:focus, .hs_cos_wrapper_type_form input[type="datetime"]:focus, .hs_cos_wrapper_type_form input[type="datetime-local"]:focus, .hs_cos_wrapper_type_form input[type="date"]:focus, .hs_cos_wrapper_type_form input[type="month"]:focus, .hs_cos_wrapper_type_form input[type="time"]:focus, .hs_cos_wrapper_type_form input[type="week"]:focus, .hs_cos_wrapper_type_form input[type="number"]:focus, .hs_cos_wrapper_type_form input[type="email"]:focus, .hs_cos_wrapper_type_form input[type="url"]:focus, .hs_cos_wrapper_type_form input[type="search"]:focus, .hs_cos_wrapper_type_form input[type="tel"]:focus, .hs_cos_wrapper_type_form input[type="color"]:focus, .hs_cos_wrapper_type_form input[type="file"]:focus, .hs_cos_wrapper_type_form textarea:focus, .hs_cos_wrapper_type_form select:focus {} /* Separate Styles for Multiple Line Inputs */ .hs_cos_wrapper_type_form textarea {} .hs_cos_wrapper_type_form textarea:focus {} /* Separate Styles for Drop Downs */ .hs_cos_wrapper_type_form select {} .hs_cos_wrapper_type_form select:focus {} /* Multiple Selection Inputs */ .hs_cos_wrapper_type_form form.hs-form .hs-form-field ul.inputs-list li input {} .hs_cos_wrapper_type_form input[type="radio"] {} .hs_cos_wrapper_type_form input[type="checkbox"] {} /* Blog Comment Form ========================================================================== */ /* Label */ #comment-form .hs-form-field > label {} #comment-form label {} /* Inputs */ #comment-form input[type="text"] {} #comment-form input[type="text"]:focus {} #comment-form textarea {} #comment-form textarea:focus {} #comment-form input[type="checkbox"] {} /* Error */ body .hs-common-error-message {} /* Blog Subscription Form ========================================================================== */ /* Label */ #hs_form_target_blog_subscription .hs-form-field > label {} #hs_form_target_blog_subscription label {} /* Inputs */ #hs_form_target_blog_subscription input[type="email"] {} #hs_form_target_blog_subscription input[type="email"]:focus {} #hs_form_target_blog_subscription input[type="radio"], #hs_form_target_blog_subscription input[type="checkbox"] { width: auto; margin-right: 10px; } /* Google Search Form ========================================================================== */ /* Label */ .widget-type-google_search label {} /* Input */ .widget-type-google_search input[type="text"] {} .widget-type-google_search input[type="focus"] {} /* Multi Column Form ========================================================================== */ body .hs-form fieldset.form-columns-1 {} body .hs-form fieldset.form-columns-1 .hs-form-field {} body .hs-form fieldset.form-columns-2 {} body .hs-form fieldset.form-columns-2 .hs-form-field {} body .hs-form fieldset.form-columns-3 {} body .hs-form fieldset.form-columns-3 .hs-form-field {} /* Multiple Selection Inputs */ body form.hs-form .hs-form-field ul.inputs-list li input {} body input[type="radio"] {} body input[type="checkbox"] {} body form.hs-form fieldset { max-width: none; } body form.hs-form fieldset .hs-form-field { padding: 0 10px 0 0; } body form.hs-form fieldset[class*="form-columns"] .input { margin-right: 0; } body form.hs-form fieldset[class*="form-columns"] .hs-input { width: 100%; } body form.hs-form fieldset[class*="form-columns"] .hs-input[type="checkbox"] { width: auto; } body form.hs-form fieldset.form-columns-3 .hs-form-field { width: 33.33%; } @media (max-width: 400px) { body form.hs-form fieldset .hs-form-field { padding: 0; } body form.hs-form fieldset.form-columns-3 .hs-form-field, body form.hs-form .form-columns-2 .hs-form-field .hs-input, body form.hs-form .form-columns-3 .hs-form-field .hs-input { width: 100%; } body form.hs-form .form-columns-3 .hs-form-field .hs-input[type="checkbox"] { width: auto; } } /* ========================================================================== Buttons ========================================================================== */ /* All Global Buttons (Excluding CTAs) ========================================================================== */ body .hs-button.primary, body input[type="submit"], body input[type="button"] { cursor: pointer; -webkit-appearance: none; font-family: fujisans, Roboto, Arial, Sans-Serif; font-size: 18px; text-decoration: none !important; } body .hs-button.primary:hover, body input[type="submit"]:hover, body input[type="button"]:hover {} body .hs-button.primary:focus, body input[type="submit"]:focus, body input[type="button"]:focus {} a.cta-training { background-color: #000; color: #fff; font-size: 16px; text-transform: uppercase; padding: 8px 30px; margin-top: 15px; border-bottom: 3px solid #000; } a.cta-training:hover { background-color: red; } /* Form Module Button ========================================================================== */ .hs_cos_wrapper_type_form .hs-button.primary.large {} .hs_cos_wrapper_type_form .hs-button.primary.large:hover {} .hs_cos_wrapper_type_form .hs-button.primary.large:focus {} /* Blog Comment Button ========================================================================== */ #add-comment-button.hs-button.primary {} #add-comment-button.hs-button.primary:hover {} #add-comment-button.hs-button.primary:focus {} /* Blog Subscription Button ========================================================================== */ #hs_form_target_blog_subscription .hs-button.primary.large {} #hs_form_target_blog_subscription .hs-button.primary.large:hover {} #hs_form_target_blog_subscription .hs-button.primary.large:focus {} /* Google Search Button ========================================================================== */ .widget-type-google_search .hs-button.primary {} .widget-type-google_search .hs-button.primary:hover {} .widget-type-google_search .hs-button.primary:focus {} /* CTA Buttons ========================================================================== */ /** * Override global CTA styles by wrapping the CTA module in a module group * that has an ID, and use that ID to prefix your CTA selector. Example shown below. * * All overriding properties require !important tags. */ #module-group-ID .cta_button {} #module-group-ID .cta_button:hover {} #module-group-ID .cta_button:focus {} .fuji-template .cta_button { font-weight:normal; padding: 10px 30px; font-size: 18px; border-radius: 4px; border: 1px solid white; display: inline-block; font-family: 'fujisans', Arial, Sans-Serif;} .fuji-template .cta_button:hover { background-color: #fff; border-color: #adadad; color:#A30B1A; } .fuji-template .cta_button.cta-simple { text-decoration: underline; padding: 0; font-size: inherit; } .fuji-template .cta_button.cta-simple:hover { background: none; border-color: transparent; color: #b10404; } /* ========================================================================== 7. MISCELLANOUS ========================================================================== */ /** * Styles that do not fit into available sections above can go here. * For example, one would place 3rd party plugin overriding styles here. * * This section is NOT for 'Custom' styles. All custom styles must go in the * proper sections above. * * For instance, custom header and footer styles must go in the HEADER and * FOOTER sections. Custom styles for anything in-between the header and footer * (such as, styles that are unique to the HOMEPAGE only), must go in the * CONTENT section. */ /* Tabs */ ul.tabs{ margin: 0px; padding: 0px; list-style: none; position:relative; } ul.tabs li{ background: none; color: #000; display: inline-block; padding: 1em 1em 0.6em; cursor: pointer; font-size: 1em; position: relative; z-index: 1; transition: color 1s; border-bottom: 1px solid #e3e3e3; border-left:2px solid transparent; } ul.tabs.vertical li { width:100%;} ul.tabs li:hover { background-color:#555; color: #fff;} ul.tabs li.current{ border-left:2px solid #A30B1A } .tab-content{ display: none; padding: 2em; padding-top:0.25em; font-size:1.1em; } .tab-content h3, .tab-content p { font-size:20px} .tab-content a { text-decoration:underline;} .tab-content.current{ display: block; } .tab-content * { animation: fadein 0.6s; -moz-animation: fadein 0.6s; /* Firefox */ -webkit-animation: fadein 0.6s; /* Safari and Chrome */ -o-animation: fadein 0.6s; /* Opera */ } .tab-content img { margin-bottom:10px;} .tab-content ul, ul.red-bullet { padding-left:0;} .tab-content ul li, ul.red-bullet li { position:relative; padding-left:1.5em;} .tab-content ul li:before, ul.red-bullet li:before { content: "¦"; font-family:"Arial Black"; color: red; /* or whatever color you prefer */ padding-right: 1em; position:absolute; left:0; top:-4px; } @keyframes fadein { from { opacity:0; } to { opacity:1; } } /* responsive table table { margin: 1em 0; min-width: 300px; } table th { display: none; } table td { display: block; } table td:first-child { padding-top: .5em; } table td:last-child { padding-bottom: .5em; } table td:before { content: attr(data-th) ": "; font-weight: bold; width: 6.5em; display: inline-block; } table.support-plans-table td:first-child:before { content: ''; text-align: center; width: auto; } @media (min-width: 480px) { table td:before { display: none; } } @media (min-width: 480px) { table th, table td { display: table-cell; } } */ a#cta_button_2585850_5d5638dd-641e-4cf9-b534-57756b517fe0 { display:inline-block} /* ========================================================================== 8. MOBILE MEDIA QUERIES ========================================================================== */ @media only screen and (max-width: 1350px ) { .denotes { position: relative; bottom: 9px; right: 0; } .denotes p { margin-top: 30px; } } /* ========================================================================== RESPONSIVE - mobile first - ========================================================================== */ /* Screen sizes smaller than site maxWidth (.page-center) ========================================================================== */ @media only screen and (max-width:480px ) { .section.post-body table { min-width:100% !important; } .section.post-body table td { width:100% !important; } .section.post-body table .blank-td { display:none; } .course-wrap .row-number-2 { text-align: center; } } /* Small screens */ @media only screen and (max-width:500px ) { .table-comparison * { text-align:left !important;} .table-check { vertical-align:top;} table.table-comparison tr > td:first-child { background: #dcdcd4} table.table-comparison td:before { width:100%; display:block } table.table-comparison td:first-child { padding: 10px; text-align: center !important; } .product-menu ul { margin-bottom:10px; } .product-menu ul li { display:block; width:100%; border-bottom:1px solid #c1bdb1 } .product-menu ul li:last-child { border:0} .product-menu ul li:hover a { background:transparent} .product-menu ul li a { padding:0; width:100%; display:inline-block} .red-callout h2 { padding:0.3em;} .slider-bg ul.hs_cos_flex-slides li { height:600px !important;} .fuji-slider p { font-size:20px; line-height:1.3em;} } /* Define mobile styles */ @media only screen and (max-width:375px ) { body img.showOnMobile { height: 200px !important; width: 100% !important; display: block !important; position: absolute; top: 0px; left: 0px; } } /* max-width 640px, mobile-only styles, use when QAing mobile issues */ @media only screen and (max-width: 40em) { .width-50 { width:100% !important;} .hs-rss-item { width: 100%; float:none;} .pad-r-1, .mar-r-1 , .mar-l-1 { padding-right:0; margin-right:0; margin-left:0} .pad-t1-mob { padding-top:1em;} h1, h1 * { font-size:2rem} h2, h2 * { font-size: 1.8rem !important; } /* p, * { font-size:1.2rem; } */ /* Marcelo: Commented on 29-Aug-2019 - was overriding other !important setting in code-script */ .tab-content h3, .tab-content p, .sec-body p, .fuji-footer * { font-size:inherit;} .sec-padding-lg { padding:2.5em 0;} .align-right, .align-left { text-align:center;} a#cta_button_2585850_5d5638dd-641e-4cf9-b534-57756b517fe0 { float: left; margin-top: 0 !important; margin-left:1em; } .span6.logo-mob { text-align:center; margin-bottom:10px; } .span6.cta-phone, .span6.logo-mob { width:100% !important;} .hidden-mob { display:none !important;} .span3.widget-span { width:98% !important; margin-left:0 !important; } .pad-1 { padding:10px;} .pad-topbot-5 { padding:2em 0;} .red-callout { top:2em; background:none; margin-right: 1em; left: 0 !important; margin-left: 1em !important; background-color:#A30B1A; } .red-callout h2 { width: 100%; height: auto; display: inline-block; padding: 0.5em; margin-bottom: 0; } .red-callout h2 br { display:none;} .fuji-slider .caption.vertical-center { left:0 !important; padding-left: 1em !important; padding-bottom: 2em; padding-right:2em; } .fuji-slider .caption { padding-top:7.5em !important;} .slider-bg ul.hs_cos_flex-slides li { height:85vh;} .fullwidth-mob { width:100% !important;} .fullwidth-mob .pad-right-4 { padding-right:0em;} .fujitsublog-template .post-item { width: 99% !important; } .fujitsublog-template .post-body { margin-bottom: 1.2em; } .fujitsublog-template .post-body, .fujitsublog-template .post-header, .fujitsublog-template .post-item-cont { min-height: 0; } .slider-bg ul.hs_cos_flex-slides li:before { position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0, 0.4); } .fuji-template .cta_button { padding: 4px 6px; text-align: center; } .fuji-template #hs_cos_wrapper_module_14785645704851012 { padding-right: 0px !important; } .fujitsu-form { padding:1.2em;} .hs_recaptcha.field.hs-form-field * { min-width: 256px !important; width: 256px !important; } .fujitsu-form input[type="submit"] { padding:8px 10px;} .fujitsu-form .hs_submit { width:100%;} .fuji-template .rc-anchor-normal .rc-anchor-content { width:164px;} .fuji-template .rc-anchor-normal .rc-anchor-checkbox-label { width: 112px !important; } .fuji-template .rc-anchor-normal { width:250px !important} /* Support Pages */ .vertical-center.callout-headline { left: 0em; position: relative; transform: none; padding-top: 2em; } .callout-inner .red-callout { top:1rem; } /* Simple table - remove responsive */ .code-script table.simple-table * { font-size: 12px !important; } .section.post-body .simple-table th { text-align: left; font-weight: normal; display: inline-block !important; width: 120px !important } .section.post-body table.simple-table td { display: inline-block; width: 120px !important } .simple-table-wrap { overflow-x: scroll; } .simple-table { width: 600px; overflow-x: scroll; max-width: 600px; } } /* Medium screens */ /* min-width 641px, medium screens */ @media only screen and (min-width: 40.063em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */ @media only screen and (min-width: 40.063em) and (max-width: 64em) { .slider-bg ul.hs_cos_flex-slides li { height: 36vh; } .fuji-slider .caption.vertical-center { left: 13.5em; } .red-callout { background-size: 90%; } .red-callout h2 { padding-right:1em;} .fuji-slider h2 { font-size: 25px; } .fuji-slider p { font-size: 20px !important; line-height: 26px; width: 300px; } .slider-bg .hs_cos_flex-control-paging { bottom:0.2em;} .fullwidth-mob { width:100% !important;} a#cta_button_2585850_5d5638dd-641e-4cf9-b534-57756b517fe0 { display:inline-block} } /* FWT first slider banner fix on smartphone */ @media only screen and (max-width:420px) { .fuji-slider.fwt-slider .hs_cos_flex-slides li:first-child { background-image: url(https://cdn2.hubspot.net/hubfs/2585850/Fujitsu_2016/Banners/human-centric-innovation-mob4.jpg) !important; background-position:center center !important;} } /* Large screens */ @media only screen and (min-width: 42.063em) { a#cta_button_2585850_5d5638dd-641e-4cf9-b534-57756b517fe0 { padding: 5px 5px !important; font-size: 15px; } .fuji-logo { margin-right: 20px; } } /* min-width 1025px, large screens */ /* added */ @media only screen and (max-width: 54em) { .span3.widget-span { width:98% !important; margin-left:0 !important; } .fuji-slider .caption { padding-right:1em;} .align-center-mob, .align-center-mob * { text-align:center !important;} .pad-left-0-mob { padding-left:0 !important;} .pad-bot-1-mob { padding-bottom: 1em;} .tab-content { padding-top:2em; padding-left:1em;} .tab-content img { float: none; } .table-check { background-size: 60%; } table.table-comparison th { padding:8px; font-size:inehrit; line-height:1.2em;} .contact-aside { float:left !important; margin-top:2em;} .slider-bg ul.hs_cos_flex-slides li { background-position: 86% 0; } } @media only screen and (max-width: 64.063em) { .fuji-slider .caption br { display:none;} .fuji-header-mob { display:block !important; border-bottom: 4px solid #f7f9f8;} .fuji-header { display:none !important;} /* Mobile Menu */ .menu-button { display: inline-block; vertical-align: top; margin-top: 3px; font-size: 30px; margin-left: 15px; color: #000; cursor:pointer } .fuji-template .body-container-wrapper { margin-top:0;} .mobile-menu ul li { padding: 6px 1em; border-top: 1px solid #fdfdfd; } .mobile-menu ul li:hover { } .mobile-menu ul { background: #e2e2e2; } .mobile-menu ul li a { color: #000; padding: 3px 0 !important; display: block; } .mobile-menu ul li a:hover { color: #A30B1A; } .mobile-logomenu-wrap .span6 { width:48%; display: inline; } .mobile-logomenu-wrap .align-right { text-align:right;} .mobile-logomenu-wrap .pad-right-1 { padding-right:0;} a#cta_button_2585850_5d5638dd-641e-4cf9-b534-57756b517fe0 { margin-top: 0em; margin-right: 1em; margin-bottom: 8px; } .span3.widget-span { width: 48%; margin-left: 0; margin: 6px; padding: 10px; } .thumb-card { text-align:center; margin-left: 0 !important; } .locations-icon * { display:none;} .contact-template .hero-banner { height:auto !important; padding-bottom:2em;} .contact-template .contact-form { position: relative; } .mar-top0-mob { margin-top:0 !important; } /* new contact us page */ .contact-simple { padding-right: 0; border-right: none !important; } .contact-simple-form { padding-left: 0; } } @media only screen and (max-width: 80em) { /* customized */ .fuji-header .page-center { max-width:100%; padding:0 10px;} .fuji-header * { font-size: 17px; } .fuji-header .cta_button * { font-size: 15px; } .container-fluid .row-fluid .page-center { overflow:hidden; } .img-right { float:none !important; } .page-center { padding:0 1em;} .fuji-menu ul { margin-left:8px;} .fuji-menu li { padding: 0 10px; } .slider-bg ul.hs_cos_flex-slides li { padding-bottom:1.5em } .red-callout { } .fuji-slider .caption.vertical-center { left:13.5em; padding-bottom: 2em; } a#cta_button_2585850_5d5638dd-641e-4cf9-b534-57756b517fe0 { text-align:center; padding: 5px 5px !important; font-size: 15px; } .fujitsublog-template .post-item { width: 48%; } .span3.widget-span.widget-type-cell.card-wrap.bg-img-wrap.thumb-card { width: 48%; height: 30vh; margin-bottom: 1em; float: left; display: inline-block; margin-left: 0 !important; margin: 1%; } .mar-top-1-mob { margin-top:1em !important;} .mar-left-0-mob { margin-left:0px !important;} .pad-0-mob { padding:0px !important;} .fujitsu-form { padding:1em;} .fujitsu-form input[type="submit"] { max-width: 100%; width: 100%; word-wrap: initial !important; white-space: inherit; } .rc-anchor-normal { width: 250px !important; } .rc-anchor-normal .rc-anchor-content { width: 145px !important; } .rc-anchor-normal .rc-anchor-checkbox-label { width: 70px !important; } .hs_recaptcha.hs-form-field { width: 240px; overflow-x: scroll; overflow-y: hidden; } .pad-left-0-mob { padding-left:0 !important;} } @media only screen and (min-width: 64.063em) and (max-width: 96em) { .page-center { padding:0 2em;} /* a#cta_button_2585850_5d5638dd-641e-4cf9-b534-57756b517fe0 { padding: 5px 8px !important; font-size: 17px; } */ .mar-left-0-mob { margin-left:0px !important;} .mar-top-1-mob { margin-top:1em !important;} .pad-left-0-mob { padding-left:0 !important;} .contact-template .contact-form { position: relative; } .contact-template .hero-banner { height:auto !important; padding-bottom:2rem;} .location-pointer { display:none;} } /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */ /* XLarge screens */ @media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */ @media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */ /* XXLarge screens */ @media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens */ /* ====================================================================================================================================== ADDITIONAL CUSTOM MODULES ==================================================================================================================================== */ /* Hero Banner Simple ------------------ */ .hero-banner-simple { background-size: cover; background-repeat: no-repeat; background-position: center; } /* Hero Banner Small Image Banner ------------------ */ .hero-banner-small-image { background-size: cover; background-repeat: no-repeat; background-position: center; } /* Hero Banner Large Image Banner ------------------ */ .hero-banner-large.hero-banner-bg-image { position: relative; background-size: cover; background-repeat: no-repeat; background-position: center; } .hero-banner-large.hero-banner-bg-image.with-overlay:after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); } .hero-banner-large.hero-banner-bg-image.with-overlay .page-center { position: relative; z-index: 3; } @media (min-width:770px) { .hero-banner-large.hero-banner-bg-image.simple-parallax { background-attachment: fixed; } } /* Hero Banner Slider ------------------ */ .slick-prev, .slick-next { z-index: 10; } .hero-slider.slick-slider { position: relative; margin-bottom: 0; } .hero-slider .hero-slider-bg { position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; } .hero-slider .hero-slider-bg.with-overlay:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: ; opacity: ; } .hero-slider .hero-slider-bg.with-overlay > * { position: relative; z-index: 2; } .hero-slider button.slick-next { right: 20px; } .hero-slider button.slick-prev { left: 20px; } .hero-slider .slick-dots { bottom: 20px; } .hero-slider .slick-dots li { width: 10px; height: 10px; padding: 0px; } .hero-slider .slick-dots li button { width: 10px; height: 10px; margin: 0px 2px; padding: 0px; } .hero-slider .slick-dots li button:before { content: ""; width: 10px; height: 10px; background: #fff; font-size: 20px; color: #fff; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } @media (min-width:767px) and (max-width:1250px) { .container-fluid .row-fluid .hero-slider .page-center { padding-left: 45px; padding-right: 45px; } } @media( max-width:1200px) { .pad-topbot-2 { padding:2em 15px;} } @media (max-width:767px) { .slick-prev, .slick-next { display: none!important; } } @media (max-width:480px) { .hero-slider h1 { font-size: 40px; } } /* Hero Banner Video Background ------------------ */ .hero-banner-video.with-overlay { position: relative; } .hero-banner-video.with-overlay:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: ; opacity: ; } .hero-banner-video.with-overlay > * { position: relative; z-index: 3; } .hero-banner-video video { max-width: none!important; } /* Testimonial Slider with Background ------------------ */ .testimonial-slider-wrapper { position: relative; text-align: left; } .testimonial-slider-wrapper .testimonial-slider-header { font-weight: 300; text-align: center; margin-bottom: 30px; } .testimonial-slider-wrapper img { margin: auto; width: 120px; max-width: 100%; border-radius: 100%; float: right; } .testimonial-slider-wrapper p.testimonial-text { font-size: 20px; line-height: 1.2; } .testimonial-slider-wrapper p.testimonial-detail { color: ; } .testimonial-slider-wrapper .slick-dots { z-index: 9; width: auto; float: none; display: inline-block; bottom: 25px; } @media (max-width:767px) { .testimonial-slider-wrapper img { float: none; } } /* Hero Banner ----------------------- */ .hero-banner { height: auto; font-size: 20px; background-size: cover; background-position: right center; position: relative; } .hero-banner:before { content: ""; background: ; height: 100%; width: 100%; position: absolute; top: 0; left: 0; opacity: ; } .hero-banner .hero-image { display: none; } .hero-banner .page-center { position: relative; } .hero-content { color: #fff; } .hero-content h1 { color: #fff; text-transform: uppercase; font-size: 78px; font-weight: bold; } .hero-content a:not(.btn) { color: #fff; text-decoration: underline; } @media (min-width:768px) and (max-width:950px) { .hero-content h1 { font-size: 60px; } } @media (max-width:769px) { .hero-banner { background-attachment: initial; } .hero-content h1 { font-size: 40px; margin: 0px 0px 5px; } } /* -------------------------------------------------- Vertical Alignment -------------------------------------------------- */ .equal-heights .row-fluid-wrapper .row-fluid { display: flex; flex-wrap: wrap; } @media (min-width:768px) { .vertical-align-center > .row-fluid-wrapper > .row-fluid { -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -ms-flex-align: center; -webkit-align-items: center; align-items: center; display: -ms-flexbox; display: -webkit-flex; display: flex; } .vertical-align-center-2col-reverse > .row-fluid-wrapper > .row-fluid { -ms-flex-direction:row-reverse; -webkit-flex-direction:row-reverse; flex-direction:row-reverse } .vertical-align-center-2col-reverse > .row-fluid-wrapper > .row-fluid > .widget-span:first-child { margin-left: 2.564102564%; } .vertical-align-center-2col-reverse > .row-fluid-wrapper > .row-fluid > .widget-span:nth-child(2) { margin-left: 0; } } .row-fluid .contact-simple-form input[type="email"]{ text-transform:initial !important; } /* ACS Graduate Day */ .font-acs-graduate-day, .font-acs-graduate-day p, .font-acs-graduate-day li, .font-acs-graduate-day h3, .font-acs-graduate-day h4 { font-size: 22px; font-family: FujitsuSansLight !important; color: #000000; } .font-acs-graduate-day h1 { font-size: 50px; font-family: FujitsuSansLight !important; color: #000000; } .font-acs-graduate-day h2 { font-size: 26px; font-family: FujitsuSansLight !important; color: #A30B1A; } @media only screen and (max-width: 600px) { /* Mobile phone values */ .hide-img-on-mob { background-image: none !important; } .font-acs-graduate-day, .font-acs-graduate-day p, .font-acs-graduate-day li, .font-acs-graduate-day h3, .font-acs-graduate-day h4 { font-size: 18px; font-family: FujitsuSansLight !important; color: #000000; } .font-acs-graduate-day h1 { font-size: 28px; font-family: FujitsuSansLight !important; color: #000000; } .font-acs-graduate-day h2 { font-size: 20px; font-family: FujitsuSansLight !important; color: #A30B1A; } } /* Non-mobile */ .pad-20-but-10-on-mob { padding: 20px !important; } .mar-20-but-10-on-mob { margin: 20px !important; } .mar-0-20-but-0-10-on-mob { margin: 0px 20px !important; } .mar-0-10-10-10-but-0-5-5-5-on-mob { margin: 0px 10px 10px 10px !important; } .mar-left-10-but-5-on-mob { margin-left: 10px !important; } @media only screen and (max-width: 600px) { /* Mobile phone values */ .pad-20-but-10-on-mob { padding: 10px !important; } .mar-20-but-10-on-mob { margin: 10px !important; } .mar-0-20-but-0-10-on-mob { margin: 0px 10px !important; } .mar-0-10-10-10-but-0-5-5-5-on-mob { margin: 0px 5px 5px 5px !important; } .mar-left-10-but-5-on-mob { margin-left: 5px !important; } }