/* Theme Name: Centercode 2017 Theme URI: http://wordpress.org/themes/blankslate Author: TidyThemes Author URI: http://tidythemes.com/ Description: UPDATE - 4.0+ is here, completely overhauled, yet again. As always, use caution when upgrading (tidythemes.com/concept/#upgrading) and learn the TidyThemes concept (tidythemes.com/concept).   → CAUTION: If you're child theming or have clients that are child theming on top of BlankSlate (not the recommended use), please do not blindly upgrade to newer versions.   → DESCRIPTION: BlankSlate is the definitive WordPress HTML5 boilerplate starter theme. We've carefully constructed the most clean and minimalist theme available anywhere for designers/developers to use as a base/foundation to build websites for clients or to build completely custom themes from scratch to release faster. Clean, semi-minified, unformatted and valid code, SEO-friendly, no programmer comments, standardized and as white label as possible and most importantly, CSS reset for cross-browser-compatability and no intrusive visual CSS styles added whatsoever. A perfect skeleton theme that blows any others like it (the subsequent underscores.me for example) completely out of the water, as they're simply too overcomplicated for what people really want in this kind of theme. Now comes with jQuery enqueued and ready to go.   → SUPPORT: Please use the official support forum (tidythemes.com/forum). Comments and suggestions for improving BlankSlate, please see "TidyThemes Sucks!" (tidythemes.com/tidythemes-sucks). Just getting started? Want to learn CSS? (tidythemes.com/want-to-learn-css)   → WHAT'S NEW?: We stripped down as much custom, extraneous, superfluous junk code as we could and greatly improved the HTML5 structure. Chip Bennett (make.wordpress.org/themes/author/chipbennett), a highly experienced programmer and official WordPress administrator, worked closely with us to audit the theme code for quality. See (themes.trac.wordpress.org/changeset?old_path=/blankslate/3.3&new_path=/blankslate/4.0) just how much we've revamped things. Last, but not least, BlankSlate has now been opened up on GitHub (github.com/tidythemes/blankslate) if anyone would like to make suggested code additions/improvements. Thank you for using BlankSlate. Version: 4.0.3 License: GNU General Public License License URI: https://www.gnu.org/licenses/gpl.html Tags: black, blue, white, light, one-column, fluid-layout, responsive-layout, custom-menu, featured-images, microformats, sticky-post, threaded-comments, translation-ready Text Domain: blankslate BlankSlate WordPress Theme © 2011-2015 TidyThemes BlankSlate is distributed under the terms of the GNU GPL */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{font-size:100%;font:inherit;padding:0;border:0;margin:0;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}.clear{clear:both} .sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}.screen-reader-text{clip:rect(1px, 1px, 1px, 1px);position:absolute !important} /* Table of Contents ------------------------------------------------------------------------------- - Global Styles - TODO Add Common Structural/Color/Text Elements - Header - Hamburger Menu - Scrolling Header - Footer - Marketo Form - Thirds (Card layout) - Blog Feed - Blog Pagination - Blog Single Post - Issues - Home Page - Solutions Page - Products Page - Platform Page - CV 101 Page - Team Page - Customers Page - Resources Sub-Menu - Resources Banner - Premium Content - Webinar - Case Studies - Events - CV101 Page - Privacy Policy - GDPR - Certification Page - Conference Recordings - Audience Page Blocks - Newsroom Page ------------------------------------------------------------------------------- */ :root { --cc-red: #E24933; --cc-orange: #f89a3e; --cc-yellow: #f9d470; --cc-blue: #63c9d3; --cc-dark-blue: #146c98; --bb-magenta: #9a189c; --bb-purple: #653bab; --cc-midtone-red-magenta: #c33460; --cc-midtone-magenta-purple: #8327a3; --cc-midtone-purple-blue: #6484c0; --cc-gray-1: #eff0f3; --cc-gray-2: #d9dce4; --cc-gray-3: #aeb1bc; --cc-gray-4: #888a94; --cc-gray-5: #6a6d7a; --cc-gray-6: #343742; --cc-black: #161b2f; --cc-blacker: #111423; } html { font-family: freight-sans-pro, sans-serif; font-size: 16px; } body { position: relative; } /* Global ------------------------------------------------------------------------------- */ a { text-decoration: none; } h1 { font-size: 52px; font-weight: 400; letter-spacing: 0.25px; } h2 { font-size: 36px; font-weight: 500; line-height: 44px; } h3 { font-size: 20px; font-weight: 500; line-height: 24px; color: #161b2f; } p { font-size: 18px; line-height: 32px; } b, strong { font-weight: 600; } input { border:none; background-image:none; background-color:transparent; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .clearfix:after { content: " "; visibility: hidden; display: block; height: 0; clear: both; } .wrapper { max-width: 1180px; margin: 0 auto; } .link-wrapper { position:absolute; width:100%; height:100%; top:0; left: 0; z-index: 1; /* fixes overlap error in IE7/8, make sure you have an empty gif */ /* TODO make an empty gif */ background-image: url(img/common/empty.gif); } /* Animate everything at this speed except those specified in not clause */ a.container-link, :not(.platform-subnav), :after { -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; } /* Not sure why *everything* was being animated, but having a transition rule matching the html element can cause weird jitter */ html { -webkit-transition: none !important; -moz-transition: none !important; -ms-transition: none !important; -o-transition: none !important; transition: none !important; } /* Overwrite and speed up animation */ a:not(.container-link), .article-container, .post-image img, .entry-title, .entry-meta-summary__category a, .pc-piece__title, .webinar__title { -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } /* Adjust anchor postition for fixed header strip */ .section-anchor-offset { position: relative; top: -72px; } #solutions-managed-tests { position: relative; top: -74px; } #solutions-managed-programs { position: relative; top: -160px; } #solutions-platform-subscription { position: relative; top: -260px; } /* Width utilities */ .width-70\% { width: 70%; } .width-75\% { width: 75%; } .width-80\% { width: 80%; } .width-85\% { width: 85%; } .width-90\% { width: 90%; } .width-95\% { width: 95%; } .banner-content-max-width-xs { max-width: 826px; /* 70% */ } .banner-content-max-width-sm { max-width: 885px; /* 75% */ } .banner-content-max-width-md { max-width: 944px; /* 80% */ } .banner-content-max-width-lg { max-width: 1003px; /* 85% */ } .banner-content-max-width-xl { max-width: 1062px; /* 90% */ } .banner-content-max-width-xxl { max-width: 1121px; /* 95% */ } .simple-centered { margin-left: auto; margin-right: auto; } /* Common Structures ------------------------------------------------------------------------------- */ .section { padding: 70px 0; } .half-section { width: 50%; } .flex-vertically-centered { display: flex; align-items: center; } .flex-vertically-centered-wrap { display: flex; align-items: center; flex-wrap: wrap; } /* Bootstrap Affix */ .affix { position: fixed !important; } /* Bootstrap Carousel */ .carousel-indicators li { width: 5px; height: 5px; border: 1px solid #c33460; -webkit-transition: opacity .5s ease-in-out; -moz-transition: opacity .5s ease-in-out; -ms-transition: opacity .5s ease-in-out; -o-transition: opacity .5s ease-in-out; transition: opacity .5s ease-in-out; } .carousel-indicators .active { width: 7px; height: 7px; background-color: #c33460; opacity: 1; } /* Bootstrap Carousel Fade Transition (for Bootstrap 3.3.x) CSS from: http://codepen.io/transportedman/pen/NPWRGq and: http://stackoverflow.com/questions/18548731/bootstrap-3-carousel-fading-to-new-slide-instead-of-sliding-to-new-slide Inspired from: http://codepen.io/Rowno/pen/Afykb */ .carousel-fade .carousel-inner .item { opacity: 0; transition-property: opacity; position: absolute; opacity: 0; top: 0; left: 0; display: block; } .carousel-fade .carousel-inner .active { opacity: 1; position: relative; } .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { left: 0; opacity: 0; z-index: 1; } .carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right { opacity: 1; } .carousel-fade .carousel-control { z-index: 2; } /* WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers." Need to override the 3.3 new styles for modern browsers & apply opacity */ @media all and (transform-3d), (-webkit-transform-3d) { .carousel-fade .carousel-inner > .item.next, .carousel-fade .carousel-inner > .item.active.right { opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .carousel-fade .carousel-inner > .item.prev, .carousel-fade .carousel-inner > .item.active.left { opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .carousel-fade .carousel-inner > .item.next.left, .carousel-fade .carousel-inner > .item.prev.right, .carousel-fade .carousel-inner > .item.active { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } /* Common Text Styles ------------------------------------------------------------------------------- */ p { color: #6a6d7a; } a.learn-more { text-transform: uppercase; font-size: 14px; letter-spacing: 1px; font-weight: 600; display: block; color: #161b2f; opacity: 0.75; } a.learn-more:hover { opacity: 1; } .banner a:not(.button) { color: #fff; font-weight: 500; } .banner h1 { margin: 8px 0 20px 0; } .banner p { letter-spacing: 0.5px; font-weight: 300; font-size: 21px; line-height: 34px; color: rgba(255, 255, 255, 0.8); } .banner p:not(:last-child) { padding-bottom: 20px; } .banner-content-with-background-image { position: relative; margin-left: auto; margin-right: auto; padding-left: 30px; padding-right: 30px; text-align: center; z-index: 1; } .products-banner p { margin: 0 auto; } .lato-number { font-family: 'Lato', sans-serif; } .section-title { width: 100%; margin-bottom: 50px; font-size: 44px; font-weight: 400; line-height: 50px; } .centered-title { text-align: center; } .section-title-with-divider { font-size: 44px; font-weight: 400; position: relative; margin-bottom: 50px; } .section-title-with-divider:after { height: 3px; width: 50px; border-radius: 3px; position: absolute; display: block; content: ""; background-color: black; margin: 25px 0 0 0; } .section-title-with-divider.centered-title:after { left: 50%; transform: translate(-50%, 0); } .banner .section-title-with-divider.centered-title { font-size: 52px; margin-bottom: 60px; } .banner .section-title-with-divider:after { width: 100px; background-color: #c33460; margin-top: 30px; left: 50%; transform: translate(-50%, 0); } .section-subtitle { display: inline-block; margin: 0 auto 5px auto; text-align: center; text-transform: uppercase; font-size: 18px; font-weight: 500; letter-spacing: 1px; color: #aeb1bc; position: relative; z-index: 1; } .section-subtitle:before { content: ''; width: 80px; border-top: 1px solid #d9dce4; position: absolute; z-index: -1; left: -90px; top: 50%; transform: translate(0, -50%); } .section-subtitle:after { content: ''; width: 80px; border-top: 1px solid #d9dce4; position: absolute; z-index: -1; right: -90px; top: 50%; transform: translate(0, -50%); } .section-description { margin: 0 auto 50px auto; width: 80%; text-align: center; } /* Common Backgrounds ------------------------------------------------------------------------------- */ .gray-background { background-color: #eff0f3; } .section-magenta-purple.colored-background { background-image: radial-gradient(at 40% top,#9a189c 5%, #8327a3 60%, #653bab 110%); } .section-purple-blue.colored-background { background-image: radial-gradient(at 20% top,#653bab -10%, #6484c0 60%, #63c9d3 110%); } .section-blue-teal.colored-background { background-image: radial-gradient(at 20% top,#653bab -10%, #6484c0 60%, #63c9d3 110%); } .section-black-gray.colored-background { background-image: radial-gradient(at 20% top,#161b2f 20%, #343742 140%); } /* Background-Dependent Color Styles ------------------------------------------------------------------------------- */ .section-red-magenta a { color: #c33460; } .section-red-magenta h2 { color: #c33460; } .section-red-magenta .section-title-with-divider:after { background-color: #c33460; } .section-red-magenta.colored-background .section-title-with-divider:after { background-color: rgba(255, 255, 255, 0.5); } .section-red-magenta.colored-background a { color: rgba(255, 255, 255, 0.5); } .section-magenta-purple h2 { color: #9a189c; } .section-magenta-purple .section-title-with-divider:after { background-color: #9a189c; } .section-magenta-purple.colored-background .section-title-with-divider:after { background-color: #be6bc0; } .section-magenta-purple.colored-background a { color: #be6bc0; } .section-purple-blue h2 { color: #6484c0; } .section-purple-blue .section-title-with-divider:after { background-color: #6484c0; } .section-purple-blue.colored-background .section-title-with-divider:after { background-color: #653bab; } .section-purple-blue a { color: #6484c0; } .section-purple-blue .button { border-radius: 5px; background-color: #6484c0; margin: 20px 0; font-weight: 500; } .section-blue-teal.colored-background a { color: #63c9d3; } .section-blue-teal.colored-background .section-title-with-divider:after { background-color: #63c9d3; } .colored-background h2 { color: white; } .colored-background .section-description { color: white; opacity: .75; } .colored-background p { color: white; opacity: 0.8; } /* Button Styles ------------------------------------------------------------------------------- */ .button { text-transform: uppercase; color: white; background-color: red; margin: 0 10px; padding: 15px 30px; text-align: center; letter-spacing: 2px; border-radius: 24px; cursor: pointer; cursor: hand; position: relative; z-index: 1; display: inline-block; font-size: 14px; } .button:after { position: absolute; background: white; content: ''; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; z-index: 2; opacity: 0; } .button:hover:after { opacity: 0.15; } .gradient-button.red-magenta { background: linear-gradient(90deg, #E24933, #9a189c); } .gradient-button.red-midtone-red { background: linear-gradient(90deg, #E24933, #c33460); } .gradient-button.midtone-red-magenta { background: linear-gradient(90deg, #c33460, #9a189c); } .gradient-button.midtone-magenta-purple { background: linear-gradient(90deg, #9a189c, #8327a3); } .gradient-button.midtone-blue-purple { background: linear-gradient(90deg, #6484c0, #653bab); } .gradient-button.blue-purple { background: linear-gradient(90deg, #64AACB, #644BAF); } .section a.button { color: white; } .more-button { background-color: #aeb1bc; width: 50%; margin: 0 auto; padding: 15px; border-radius: 5px; cursor: pointer; cursor: hand; box-shadow: 0 1px 5px 0 rgba(106, 109, 122, .3); display: block; } .more-button:after { border-radius: 5px; } /* Icon Card Styles ------------------------------------------------------------------------------- */ .card-list { display: flex; flex-wrap: wrap; } .card-list.two-col .icon-card-container { box-sizing: border-box; width: 50%; padding: 8px 0; } .card-list.two-col .icon-card-container:nth-of-type(2n + 1) { padding-right: 8px; } .card-list.two-col .icon-card-container:nth-of-type(2n) { padding-left: 8px; } .icon-card { height: 100%; box-sizing: border-box; border-radius: 3px; padding: 25px; position: relative; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } /* icon-card-hover denotes cards with hover effects */ .icon-card.icon-card-hover { padding: 25px 25px 0 25px; } .icon-card.icon-card-hover:hover { background-color: #eff0f3; } .colored-background .icon-card, .gray-background .icon-card { background-color: rgba(255,255,255,0.6); } .colored-background .icon-card.icon-card-hover:hover, .gray-background .icon-card.icon-card-hover:hover { background-color: rgba(255,255,255,0.80); } .icon-card img { position: absolute; top: 50%; width: 50px; height: 50px; background-color: white; border-radius: 25px; transform: translate(0, -50%); } .icon-card .card-info { margin-left: 75px; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .icon-card.no-icon .card-info { margin-left: 0; } .icon-card.icon-card-hover:hover .card-info { transform: translate(0, -28px); } .icon-card h3 { /* TODO Pull out styles */ font-size: 20px; font-weight: 500; line-height: 24px; color: #161b2f; margin-bottom: 8px; } .icon-card p, .section-info .icon-card p { color: #343742; line-height: 24px; font-size: 16px; opacity: 1; } .cv-benefits .icon-card p { line-height: 32px; font-size: 18px; } .icon-card .disappears { opacity: 1; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .icon-card.icon-card-hover:hover .disappears { opacity: 0; } .card-info a.learn-more { margin: 10px 0 0 0; opacity: 0; } .icon-card:hover .card-info a { opacity: 1; } .section-red-magenta .icon-card a { color: #c33460; } .section-magenta-purple .icon-card a { color: #9a189c; } .section-purple-blue .icon-card a { color: #6484c0; } .section-blue-teal .icon-card a { color: #57a7bb; } /* Header ------------------------------------------------------------------------------- */ #header { background-color: white; position: relative; z-index: 100; } #header.black-theme { background-color: #161b2f; } .header__stripe { width: 100%; height: 4px; background: linear-gradient(-90deg, #9A189C, #E24932); -webkit-backface-visibility:hidden; } .header__stripe.announcement { height: auto; padding: 12px 0; } .header__stripe.announcement p { color: rgba(255,255,255, 0.75); text-align: center; font-size: 16px; font-weight: 500; } .header__stripe.announcement a { color: rgba(255,255,255, 0.75); border-bottom: 1px dotted rgba(255,255,255, 0.75); } .bullhorn { width: 16px; height: 17px; background-image: url(img/events/bullhorn-icon.svg); background-repeat: no-repeat; display: inline-block; padding-right: 6px; line-height: 18px; } .header-top { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #eff0f3; padding-top: 12px; padding-bottom: 12px; } #header.black-theme .header-top { border-bottom: 1px solid rgba(255,255,255,0.15); } .logo-and-tagline { display: flex; align-items: center; } .logo-link { display: block; } .logo-link__logotype { background-image: url(https://cdn2.hubspot.net/hubfs/6039523/images/logos/Centercode-Logo.svg); background-repeat: no-repeat; width: 236px; height: 48px; margin-top: 2px; margin-bottom: 2px; position: relative; } .tagline { color: #343742; letter-spacing: 1px; font-size: 15px; font-weight: 400; margin-left: 20px; opacity: .75; } #header.black-theme .tagline { color: white; } .tagline:hover { opacity: 1; } #main-menu { height: 44px; margin-left: -20px; -moz-transition: none; -webkit-transition: none; -o-transition: color 0 ease-in; transition: none; } #main-menu .menu-menu-1-container { height: 100%; } #main-menu .menu { display: flex; align-items: stretch; height: 100%; } #main-menu li { display: flex; align-items: center; margin: 0 25px; position: relative; } #main-menu a, .mobile-nav a { color: #343742; opacity: 0.75; -webkit-backface-visibility:hidden; text-transform: uppercase; font-size: 14px; font-weight: 600; letter-spacing: 2px; -webkit-transition: opacity .3s ease; -moz-transition: opacity .3s ease; -ms-transition: opacity .3s ease; -o-transition: opacity .3s ease; transition: opacity .3s ease; } #header.black-theme #main-menu ul.menu > li > a { color: white; font-weight: 500; letter-spacing: 2.5px; } /* Highlight the current menu item. * When in the blog, in single blog post, or archive view, the resources menu * should be highlighted. */ /* TODO Confusing to figure out overrides. Reorganize this now that all of the menu requirements are finalized... */ #header #main-menu .current-menu-item:not(.solutions-menu-button) > a, #header #main-menu .menu > .current-menu-parent > a, #header #main-menu .menu > .current_page_ancestor > a, #header #main-menu li.menu-item-has-children.current-menu-item:after, #header #main-menu li.current-menu-parent:after, .single #header #main-menu .resources-menu.menu-item-has-children a, .single #header #main-menu li.resources-menu.menu-item-has-children:after, .archive #header #main-menu .resources-menu.menu-item-has-children a, .archive #header #main-menu li.resources-menu.menu-item-has-children:after, #header .header-scroll-nav.affix #main-menu .current-menu-item:not(.solutions-menu-button) > a, #header .header-scroll-nav.affix #main-menu .menu > .current-menu-parent > a, #header .header-scroll-nav.affix #main-menu .menu > .current-page-ancestor:not(.solutions-menu) a, #header.black-theme .header-scroll-nav.affix #main-menu li.current-menu-item.menu-item-has-children:after, .single #header .header-scroll-nav.affix #main-menu .resources-menu.menu-item-has-children a, .single #header .header-scroll-nav.affix #main-menu li.resources-menu.menu-item-has-children:after, .archive #header .header-scroll-nav.affix #main-menu .resources-menu.menu-item-has-children a, .archive #header .header-scroll-nav.affix #main-menu li.resources-menu.menu-item-has-children:after { opacity: 1; } #header:not(.black-theme) #main-menu .menu > .current-menu-item > a, #header:not(.black-theme) #main-menu .menu > .current-menu-parent > a, #header:not(.black-theme) #main-menu .menu > .current_page_ancestor > a, #header:not(.black-theme) #main-menu .menu > li.current-menu-item.menu-item-has-children:after, #header:not(.black-theme) #main-menu .menu > li.current-menu-parent:after, #header:not(.black-theme) #main-menu .menu > li.current_page_ancestor:after { color: #c33460 !important; opacity: 1 !important; } #header .header-scroll-nav.affix #main-menu .menu > .current-menu-item > a, #header .header-scroll-nav.affix #main-menu .menu > .current-menu-parent > a, #header .header-scroll-nav.affix #main-menu .menu > .current_page_ancestor > a, #header .header-scroll-nav.affix #main-menu .menu > li.current-menu-item.menu-item-has-children:after, #header .header-scroll-nav.affix #main-menu .menu > li.current-menu-parent:after, #header .header-scroll-nav.affix #main-menu .menu > li.current_page_ancestor:after, .single #header .header-scroll-nav.affix #main-menu .menu > .resources-menu.menu-item-has-children > a, .single #header .header-scroll-nav.affix #main-menu .menu > li.resources-menu.menu-item-has-children:after, .archive #header .header-scroll-nav.affix #main-menu .menu > .resources-menu.menu-item-has-children > a, .archive #header .header-scroll-nav.affix #main-menu .menu > li.resources-menu.menu-item-has-children:after { color: #c33460 !important; } /* Highlight sub-men item for current page under solutions or platform */ #header #main-menu .sub-menu .current-menu-item > a, #header .header-scroll-nav.affix #main-menu .menu-item .sub-menu .current-menu-item > a { opacity: 1; font-weight: 600; } /* Highlight the Solutions menu item when on the Software page */ .page-template-template-platform #main-menu .products-menu-item a, .page-template-template-platform #header .header-scroll-nav.affix #main-menu .products-menu-item a { opacity: 1; font-weight: 600 !important; } .page-template-template-platform #header .header-scroll-nav.affix #main-menu .products-menu-item a { color: #c33460 !important; } #main-menu a:hover, .mobile-nav a:hover { opacity: 1; } #main-menu .menu > li.menu-item-has-children > a { user-select: none; } #main-menu .menu > li.menu-item-has-children > a::after { content: '\f0d7'; /* caret for nav items that have submenus */ font-family: "Font Awesome 5 Pro"; font-weight: 900; opacity: 0.75; /* Remove transition on color */ -moz-transition: none; -webkit-transition: none; -o-transition: none; transition: none; margin-left: 4px; } #header.black-theme .header-scroll-nav.affix #main-menu li.menu-item-has-children:after { color: #6a6d7a; } #header.black-theme #main-menu li.menu-item-has-children:after { color: white; } #main-menu .menu > .menu-item > .sub-menu { display: none; position: absolute; flex: none; left: -1px; top: 44px; background-color: white; width: 800px; height: 326px; box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.2); border-radius: 3px; z-index: 999; padding: 25px 0 25px 25px; box-sizing: content-box; background-color: #eff0f3; } #main-menu .menu > .services-menu > .sub-menu { width: 200px; height: auto; } #main-menu .menu > .company-menu > .sub-menu { width: 200px; height: auto; } #main-menu .menu > .solutions-menu.menu-item > .sub-menu { width: 580px; height: 182px; } #main-menu .menu .resources-menu .sub-menu { left: 50%; transform: translate(-50%, 0); } #main-menu .menu > .menu-item > .sub-menu:after { bottom: 100%; left: 50px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-bottom-color: #eff0f3; border-width: 10px; margin-left: -10px; } #main-menu .menu .resources-menu .sub-menu:after { left: 50%; } #main-menu .resources-menu .sub-menu li { margin: 0; float: left; width: 20%; height: 50%; text-align: center; } #main-menu .resources-menu .sub-menu a { color: black; padding: 12px 0; text-decoration: none; display: block; width: 100%; } #main-menu .platform-menu .sub-menu a { display: block; } #main-menu .platform-submenu .sub-menu a { padding: 12px 0; } #main-menu .platform-submenu.nav-cv-101 > a { padding: 12px 0; } .touch-disabled #main-menu .menu > .menu-item.active > .sub-menu, .touch-enabled #main-menu .menu > .menu-item.touched > .sub-menu { display: block; } .header-contact { display: flex; align-items: center; } .header-contact a:not(.button) { color: #6a6d7a; font-size: 14px; letter-spacing: 1px; opacity: .75; } .header-contact__demo span { font-size: 15px; line-height: 38px; margin-left: 9px; display: inline-block; color: #343742; } #header.black-theme .header-contact__demo span { color: white; } #header.black-theme .header-scroll-nav.affix .header-contact__demo span { color: #343742; } #header.black-theme .header-top .header-contact a .lato-number { color: white; font-weight: 300; } .header-contact a .lato-number { color: #6a6d7a; font-weight: 400; letter-spacing: 2px; } .header-scroll-nav.affix .header-contact a .lato-number { color: #6a6d7a; font-weight: 400; } .header-contact a:not(.button):hover { opacity: 1; } .header-contact .fa.fa-tv { font-size: 14px; color: #c33460; } .header-contact__demo svg { color: #c33460; } .header-contact__demo svg * { fill: url(#fa-gradient); } .header-contact .button { padding: 12px 15px; border-radius: 5px; margin-left: 15px; margin-right: 0; } .header-contact .button:after { border-radius: 5px; } #main-menu .menu > .menu-item > a { cursor: pointer; } /* * Solutions Menu & Platform Menu */ .touch-disabled #main-menu .menu > .menu-item.solutions-menu.active > .sub-menu, .touch-disabled #main-menu .menu > .menu-item.platform-menu.active > .sub-menu, .touch-disabled #main-menu .menu > .menu-item.services-menu.active > .sub-menu, .touch-disabled #main-menu .menu > .menu-item.company-menu.active > .sub-menu, .touch-enabled #main-menu .menu > .menu-item.solutions-menu.touched > .sub-menu, .touch-enabled #main-menu .menu > .menu-item.platform-menu.touched > .sub-menu, .touch-enabled #main-menu .menu > .menu-item.services-menu.touched > .sub-menu, .touch-enabled #main-menu .menu > .menu-item.company-menu.touched > .sub-menu { display: flex; justify-content: space-between; } #main-menu .menu > .menu-item.solutions-menu > .sub-menu { padding: 25px; } #main-menu .menu > .menu-item.platform-menu > .sub-menu { padding: 25px 25px 90px 25px; } #main-menu .solutions-sub-menu > a, #main-menu .platform-sub-menu > a, #main-menu .services-sub-menu > a, #main-menu .company-sub-menu > a { color: #c33460; font-size: 16px; display: inline-block; margin-bottom: 10px; letter-spacing: 1px; opacity: 1; } #main-menu .solutions-sub-menu .menu-item:last-of-type > a { color: #c33460; text-decoration: underline; display: inline-block; margin-top: 8px; font-weight: 600; font-size: 14px; opacity: 1; } .solutions-sub-menu + .solutions-sub-menu { padding-left: 25px; } .solutions-sub-menu + .solutions-sub-menu { border-left: 1px solid #d9dce4; } #main-menu .solutions-menu li, #main-menu .platform-menu li, #main-menu .services-menu li, #main-menu .company-menu li { display: block; margin: 0; } #main-menu .menu-item .highlight { width: auto; } #main-menu .solutions-sub-menu .sub-menu a, #header .header-scroll-nav.affix #main-menu .solutions-sub-menu .sub-menu a, #main-menu .platform-sub-menu .sub-menu a, #header .header-scroll-nav.affix #main-menu .platform-sub-menu .sub-menu a, #main-menu .services-sub-menu .sub-menu a, #header .header-scroll-nav.affix #main-menu .services-sub-menu .sub-menu a, #main-menu .company-sub-menu .sub-menu a, #header .header-scroll-nav.affix #main-menu .company-sub-menu .sub-menu a { text-transform: none; font-weight: 500; letter-spacing: 0; font-size: 15px; padding: 8px 0; display: inline-block; } #main-menu .platform-sub-menu .sub-menu a { font-size: 16px; } #main-menu .services-sub-menu .menu-item:last-of-type a, #main-menu .company-sub-menu .menu-item:last-of-type a { padding-bottom: 0; } #main-menu li.solutions-menu-button { position: absolute; left: 25px; } .solutions-menu-button a { padding: 12px 25px !important; border-radius: 24px; color: white !important; background: #c33460; font-weight: 400 !important; letter-spacing: 1px !important; opacity: 1 !important; } #main-menu .solutions-menu-link { position: absolute; right: 80px; } .solutions-menu-link a { text-decoration: underline; color: #c33460 !important; opacity: 1 !important; text-transform: none !important; letter-spacing: 1px !important; } #main-menu .solutions-cta-sub-menu { position: absolute; bottom: 55px; left: 0; width: 100%; } #main-menu .menu > .menu-item.platform-menu > .sub-menu { padding: 25px; width: 660px; } #main-menu .menu .platform-menu > .sub-menu { height: auto; width: auto; } #main-menu .platform-sub-menu .highlight a { color: #4c7a34; } #main-menu .menu .platform-menu .nav-cv-101 { width: 37%; } /* Hamburger Menu ------------------------------------------------------------------------------- */ .hamburger, .cross { display: none; background:none; padding: 0 0 0 15px; color: #aeb1bc; border:0; font-size: 28px; cursor:pointer; outline:none; } .cross { font-size: 24px; } .hamburger:hover .fa-bars, .cross:hover .fa-times { color: #9a189c; } .mobile-nav { display: none; text-align: center; position: fixed; top: 76px; width: 100%; z-index: 1000; /* Remove transitions to fix jQuery animation on slideToggle */ -moz-transition: none; -webkit-transition: none; -o-transition: color 0 ease-in; transition: none; } .header__stripe.announcement ~ .affix-top ~ .mobile-nav { top: unset; } .header__stripe.announcement ~ .affix ~ .mobile-nav { top: 76px; } .mobile-nav:hover .sub-menu { } .mobile-nav li { border-bottom: 1px solid #d9dce4; } .mobile-nav li a { padding: 16px 0; display: block; } .mobile-nav li a:hover { background-color: #d9dce4; } /** Mega Menu ---------------------------------------------------------*/ #mega-menu-wrap-mobile-menu .mega-menu-toggle { display: none !important; } #mega-menu-wrap-mobile-menu .mega-menu-toggle.mega-menu-open + #mega-menu-mobile-menu { background: #d9dce4; } #mega-menu-wrap-mobile-menu { background: transparent !important; } #mega-menu-wrap-mobile-menu #mega-menu-mobile-menu > li.mega-menu-item { width: 100% !important; } #mega-menu-wrap-mobile-menu #mega-menu-mobile-menu > li.mega-menu-item > a.mega-menu-link { text-transform: uppercase !important; color: #6a6d7a !important; padding: 5px 30px !important; height: auto !important; } #mega-menu-wrap-mobile-menu #mega-menu-mobile-menu > li.mega-menu-item > a.mega-menu-link:hover { background: #aeb1bc !important; color: #343742 !important; } /* Is current page's ancestor or is current page */ #mega-menu-wrap-mobile-menu #mega-menu-mobile-menu > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link, #mega-menu-wrap-mobile-menu #mega-menu-mobile-menu > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link, #mega-menu-wrap-mobile-menu #mega-menu-mobile-menu > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link { background: #d9dce4 !important; font-weight: 600 !important; color: #343742 !important; } #mega-menu-wrap-mobile-menu #mega-menu-mobile-menu > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link:hover, #mega-menu-wrap-mobile-menu #mega-menu-mobile-menu > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link:hover, #mega-menu-wrap-mobile-menu #mega-menu-mobile-menu > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link:hover { background: #aeb1bc !important; } /* Submenu li */ #mega-menu-wrap-mobile-menu #mega-menu-mobile-menu > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link { padding: 5px 30px !important; background: #eff0f3 !important; border-bottom: 1px solid #d9dce4; } #mega-menu-wrap-mobile-menu #mega-menu-mobile-menu > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover { background: white !important; } #mega-menu-wrap-mobile-menu #mega-menu-mobile-menu > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:focus { background: #eff0f3 !important; } #mega-menu-wrap-mobile-menu #mega-menu-mobile-menu > li.mega-menu-item.mega-toggle-on > a.mega-menu-link, #mega-menu-wrap-mobile-menu #mega-menu-mobile-menu > li.mega-menu-item > a.mega-menu-link:focus { background: #d9dce4 !important; } #mega-menu-wrap-mobile-menu #mega-menu-mobile-menu li.mega-menu-flyout.mega-menu-item-has-children a.mega-menu-link:after, #mega-menu-wrap-mobile-menu #mega-menu-mobile-menu li.mega-menu-flyout li.mega-menu-item-has-children a.mega-menu-link:after, #mega-menu-wrap-mobile-menu #mega-menu-mobile-menu > li.mega-menu-item-has-children a.mega-menu-link:after { float: none !important; } /* Style Resource Submenu */ #mega-menu-wrap-mobile-menu #mega-menu-mobile-menu { background: #d9dce4 !important; } #mega-menu-wrap-mobile-menu #mega-menu-mobile-menu > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item { display: inline-block !important; width: 100% !important; } #mega-menu-wrap-mobile-menu #mega-menu-mobile-menu > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a { color: #888a94 !important; font-size: 12px !important; } #mega-menu-wrap-mobile-menu #mega-menu-mobile-menu > li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item-has-children > a { color: #c33460 !important; text-transform: uppercase !important; } /* library menu */ #mega-menu-wrap-mobile-menu #mega-menu-mobile-menu > li.mega-menu-flyout:nth-of-type(4) ul.mega-sub-menu li.mega-menu-item:nth-of-type(1) a { text-transform: uppercase !important; } #mega-menu-wrap-mobile-menu #mega-menu-mobile-menu > li.mega-menu-flyout:nth-of-type(4) ul.mega-sub-menu li.mega-menu-item:nth-of-type(2), #mega-menu-wrap-mobile-menu #mega-menu-mobile-menu > li.mega-menu-flyout:nth-of-type(4) ul.mega-sub-menu li.mega-menu-item:nth-of-type(3), #mega-menu-wrap-mobile-menu #mega-menu-mobile-menu > li.mega-menu-flyout:nth-of-type(4) ul.mega-sub-menu li.mega-menu-item:nth-of-type(4), #mega-menu-wrap-mobile-menu #mega-menu-mobile-menu > li.mega-menu-flyout:nth-of-type(4) ul.mega-sub-menu li.mega-menu-item:nth-of-type(5), #mega-menu-wrap-mobile-menu #mega-menu-mobile-menu > li.mega-menu-flyout:nth-of-type(4) ul.mega-sub-menu li.mega-menu-item:nth-of-type(6), #mega-menu-wrap-mobile-menu #mega-menu-mobile-menu > li.mega-menu-flyout:nth-of-type(4) ul.mega-sub-menu li.mega-menu-item:nth-of-type(7) { width: 50% !important; } #mega-menu-wrap-mobile-menu #mega-menu-mobile-menu > li.mega-menu-flyout:nth-of-type(4) ul.mega-sub-menu li.mega-menu-item:nth-of-type(2), #mega-menu-wrap-mobile-menu #mega-menu-mobile-menu > li.mega-menu-flyout:nth-of-type(4) ul.mega-sub-menu li.mega-menu-item:nth-of-type(4), #mega-menu-wrap-mobile-menu #mega-menu-mobile-menu > li.mega-menu-flyout:nth-of-type(4) ul.mega-sub-menu li.mega-menu-item:nth-of-type(6) { border-right: 1px solid #d9dce4 !important; } /** Client Logo Bar ---------------------------------------------------------*/ .clients { background: linear-gradient(-90deg, #9A189C, #E24932); background-image: url(img/common/isometric-background.png), linear-gradient(-90deg, #9A189C, #E24932); background-repeat: no-repeat; background-position: center; } .clients-container { padding: 70px 0 25px 0; opacity: 0.75; text-align: center; } .clients-container__description a { text-transform: uppercase; color: white; font-style: italic; font-weight: 500; letter-spacing: 1.5px; font-size: 14px; } .clients-container__logo { width: 16.66%; height: auto; float: left; } /* Footer ------------------------------------------------------------------------------- */ #footer { color: white; background-color: #161b2f; padding-top: 60px; letter-spacing: 1px; } #footer.white-theme { background-color: white; color: #888a94; } .footer-cta { padding-bottom: 65px; border-bottom: 1px solid rgba(255,255,255, 0.15); margin-bottom: 60px; text-align: center; } .footer-cta__title { font-weight: 400; font-size: 36px; margin-bottom: 40px; } .footer-cta__description { font-size: 22px; opacity: 0.6; font-weight: 300; line-height: 30px; width: 70%; } .footer-cta .button { padding: 20px 40px; font-size: 18px; border-radius: 29px; } .footer-cta .button:after { border-radius: 29px; } #footer a:not(.button), .fine-print { color: white; opacity: 0.6; font-weight: 300; font-size: 15px; letter-spacing: 1.25px; } #footer.white-theme a:not(.button), #footer.white-theme .fine-print { color: #888a94; opacity: 1; font-weight: 400; } #footer a:not(.button):hover { opacity: 1; } .footer-links { display: inline-block; float: left; width: 20%; line-height: 28px; vertical-align: top; } #footer h4 a:not(.button), #footer h4 { text-transform: uppercase; letter-spacing: 2px; opacity: 1; font-weight: 400; } #footer.white-theme h4 a:not(.button) { opacity: 1; font-weight: 500; } #footer h4 a:hover { opacity: 1; text-decoration: underline; } #footer .footer-links:nth-of-type(1) h4 a { color: #E24933; } #footer .footer-links:nth-of-type(2) h4 a { color: #c33460; } #footer .footer-links:nth-of-type(3) h4 a { color: #9a189c; } .footer-links__small-link { font-size: 13px; opacity: 0.5; text-decoration: underline; } .contact-subinfo { margin: 7px 0 7px 0; padding-left: 15px; border-left: 2px dotted rgba(154, 24,156, .4); } .contact-subinfo .lato-number { font-size: 13px; font-weight: 300; } #footer.white-theme .contact-subinfo { border-left: 2px dotted #9a189c; } .footer-news { float: left; display: inline-block; width: 40%; line-height: 28px; vertical-align: top; background-color: #111423; background-color: rgba(17, 20, 35, 0.5); padding: 12px 20px; box-sizing: border-box; margin-top: -12px; border-radius: 7px; } #footer.white-theme .footer-news { background-color: white; } #footer .footer-news h4, .newsletter-title{ color: #653bab; font-size: 15px; } #footer.white-theme .footer-news h4, #footer.white-theme .newsletter-title{ color: #653bab; opacity: 1; } #footer.white-theme .footer-news__blurb { opacity: 1; font-weight: 400; } #footer.white-theme .footer-news h4 { font-weight: 500; } .footer-news__blog-titles { margin: 7px 0 14px 0; padding-left: 15px; border-left: 2px dotted rgba(101, 59, 171, .4); } .colored-background .footer-news__about-centercode { margin-top: 4px; margin-bottom: 16px; border-left: 2px dotted #653bab; padding-left: 15px; opacity: 0.4; font-size: 14px; line-height: 24px; } .white-theme .footer-news__about-centercode { opacity: 1; color: #888a94; } .contact-subinfo li { opacity: 0.7; } #footer.white-theme .contact-subinfo li, #footer.white-theme .footer-news li { opacity: 1; } .contact-subinfo li:nth-of-type(1), .footer-news li:nth-of-type(1) { line-height: 16px; } .contact-subinfo li:nth-of-type(2), .footer-news li:nth-of-type(2) { line-height: 16px; margin: 10px 0; } .contact-subinfo li:nth-of-type(3), .footer-news li:nth-of-type(3) { line-height: 16px; } .contact-subinfo .fa.fa-envelope { font-size: 13px; } #footer.white-theme .contact-subinfo .fa.fa-envelope, #footer.white-theme .contact-subinfo .fa.fa-phone, #footer.white-theme .contact-subinfo .fa.fa-globe { color: #9a189c; } .newsletter-title { text-transform: uppercase; opacity: 0.75; font-size: 14px; letter-spacing: 1.5px; } .footer-branding { background-color: #111423; padding: 20px 0; margin-top: 50px; } #footer.white-theme .footer-branding { background-color: #eff0f3; } .footer-branding-wrapper { display: flex; align-items: center; justify-content: space-between; } .footer-branding-left { display: flex; align-items: center; } .footer-branding-left__logo { width: 45px; height: 45px; background-image: url(img/common/footer-logo.svg); display: inline-block; margin-right: 10px; background-repeat: no-repeat; } #copyright { display: inline-block; } .copyright__mobile { display: none; } #footer .footer-branding-right a{ font-size: 24px; display: inline-block; margin-left: 10px; } .footer-branding-right i { line-height: 24px; vertical-align: middle; } .footer-branding-right .fa.fa-envelope { font-size: 20px; /*color: #6484c0;*/ } .footer-branding-right .fa.fa-phone { /*color: #63c9d3;*/ } #footer a.social-icon-container{ opacity: .6; } #footer a.social-icon-container:hover { opacity: 1; } /* Hubspot Form ------------------------------------------------------------------------------- */ .hbspt-form * { font-family: freight-sans-pro, sans-serif !important; } .hbspt-form .hs-form-field label:not(.hs-error-msg), .hbspt-form .hs-form-field:first-of-type, .hbspt-form .hs_error_rollup { /* Hide the label for the form */ display: none !important; } .hbspt-form .hs-form-field { clear: none !important; display: inline-block !important; box-sizing: border-box; } #footer .hbspt-form .hs-form-field { width: 60% !important; float: left; } .question .hbspt-form { width: 70% !important; margin: 40px auto 0 !important; font-family: freight-sans-pro, sans-serif !important; } .question .hbspt-form .hs-form-field { width: 50% !important; margin-bottom: 22px !important; } .question .hbspt-form .hs-form-field:nth-child(2n) { padding-right: 10px; } .question .hbspt-form .hs-form-field:nth-child(2n + 1) { padding-left: 10px; } .question .hbspt-form .hs-form-field:nth-of-type(6) { width: 100% !important; padding-right: 0 !important; } .question .hbspt-form .hs-form-field:nth-of-type(6) .hs-input { height: 96px; } #footer.white-theme .hbspt-form .hs-email .hs-input { background-color: #eff0f3 !important; } .hbspt-form .hs-input { width: 100% !important; box-shadow: none !important; padding: 7px 0 7px 10px !important; font-size: 16px !important; line-height: 1.5em; box-sizing: border-box; } #footer .hbspt-form .hs-email .hs-input { border: none !important; background-color: rgba(255, 255, 255, 0.35) !important; border-radius: 5px 0 0 5px !important; } .question .hbspt-form .hs-input { -webkit-appearance: none; line-height: 1.5em; color: #000; border: 1px solid #aeb0b6; min-height: 1.9em; border-radius: 3px !important; } .hbspt-form select.hs-input { -webkit-appearance: none; background: #fff url(https://www2.centercode.com/hubfs/images/arrow-down-bk.png) center right no-repeat; } .question .hbspt-form .hs-input.error { border: 1px solid #c33460 !important; } .question .hbspt-form .legal-consent-container p { width: 100% !important; padding: 0; } .hbspt-form .hs-error-msgs { position: relative !important; float: left; left: 4px !important; color: #bf0000; } .hbspt-form .hs-error-msgs .hs-error-msg { display: block; padding: 0; color: #c33460 !important; max-width: 100% !important; background-color: transparent !important; box-shadow: none !important; background-image: none !important; border: none !important; border-radius: 6px; font-size: 11px !important; letter-spacing: 1px; text-shadow: none !important; line-height: 1.2em; } #footer .hbspt-form .hs-submit { text-align: center !important; display: inline-block; position: relative; } .question .hbspt-form .hs-submit { margin-top: 30px !important; } .question .hbspt-form .hs-submit input { color: #fff; background-image: none !important; background-color: #8B8C9F !important; border: none !important; font-size: 15px !important; font-weight: 500; text-transform: uppercase; padding: 10px 30px !important; border-radius: 5px !important; letter-spacing: 1.5px; transition: all 0.4s ease; box-shadow: 0 4px 6px rgba(50,50,93,0.11), 0 1px 3px rgba(0,0,0,0.08); } .question .hbspt-form .hs-TICKET\.subject { display: none !important; } #footer .hbspt-form .hs-submit .actions { margin: 0 !important; } #footer .hbspt-form .hs-submit .hs-button { color: #fff; background: linear-gradient(-90deg, #6484c0, #653bab) !important; border: none !important; font-size: 14px !important; font-weight: 500; height: 38px; text-transform: uppercase; padding: 0.4em 1em; padding-bottom: 0 !important; padding-top: 0 !important; border-radius: 0 5px 5px 0 !important; letter-spacing: 1.5px; transition: all 0.4s ease; box-shadow: 0 4px 6px rgba(50,50,93,0.11), 0 1px 3px rgba(0,0,0,0.08); opacity: 0.8; } /* Thirds (Card Layout) ------------------------------------------------------------------------------- */ .blog-posts, .issue-posts { max-width: 1180px; margin: 0 auto; padding-bottom: 20px; } .blog-posts-container { margin: 0 -15px; display: flex; flex-wrap: wrap; } .blog-posts .type-post { width: 33.33%; box-sizing: border-box; display: flex; align-items: stretch; padding: 0 15px; } /* Blog Feed ------------------------------------------------------------------------------- */ .blog-header { width: 100%; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; } .blog-header.affix { background-color: white; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .blog-arrow-home { width: 10px; height: 20px; margin-right: 10px; opacity: 0.25; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; } .blog-header.affix .blog-arrow-home { opacity: 1; } .blog-logo-container { width: 50px; height: 100%; border-left: 1px solid rgba(232,234,239,0.2); padding-left: 12px; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; } .blog-header.affix .blog-logo-container { border-left: 1px solid rgba(232,234,239,1); } .blog-logo { width: 50px; height: 25px; position: absolute; top: 27px; } .blog-menu { height: 100%; } #header .blog-header.affix #main-menu .blog-menu ul.menu > li > a, #header .blog-header.affix #main-menu li.menu-item-has-children:after { color: #343742 !important; font-weight: 600 !important; letter-spacing: 2.5px; } .blog #header, .archive #header, .single #header { background-color: #161b2f; } .blog .scroll-nav-wrapper, .archive .scroll-nav-wrapper, .single .scroll-nav-wrapper { /* padding-top: 10px; padding-bottom: 10px; */} .blog-banner { background-color: #161b2f; } .blog-banner .wrapper { height: 400px; background-image: url('img/blog/blog-banner.svg'); background-position: center; background-size: 1180px 400px; background-repeat: no-repeat; position: relative; text-align: center; } .blog-headline { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); } .blog-headline h1 { color: white; } .blog-banner p { color: rgba(255,255,255,0.8); letter-spacing: 1px; font-size: 21px; font-weight: 300; line-height: 34px; position: absolute; left: 50%; bottom: 92px; transform: translate(-50%, 0); } .featured-articles { padding-bottom: 45px; } .newsletter-article { width: 33.33%; box-sizing: border-box; padding: 0 15px; display: flex; align-items: stretch; margin-bottom: 33px; } .newsletter-article .article-container { flex-wrap: wrap; padding: 30px; } .newsletter-article p { width: 100%; font-size: 22px; line-height: 36px; color: #6a6d7a; } .newsletter-button { position: absolute; bottom: 30px; margin: 20px 0 0 0; border-radius: 5px; } .newsletter-button:after { border-radius: 5px; } .most-recent { background-color: #eff0f3; padding-top: 50px; } .blog-posts__title { color: #c33460; } .blog-posts .type-post { margin-bottom: 33px; } .post-stripe { background: linear-gradient(#c33460, #9a189c); background: #c33460; width: 6px; position: absolute; top: 0; bottom: 0; } .post-info { padding-left: 6px; } .article-container { box-shadow: 0 1px 5px 0 rgba(106, 109, 122, .3); border-radius: 3px; overflow: hidden; display: flex; position: relative; background-color: white; } .article-container:hover { box-shadow: 0 0 15px 0 rgba(106, 109, 122, .5); } .article-container__link { position:absolute; width:100%; height:100%; top:0; left: 0; z-index: 1; /* fixes overlap error in IE7/8, make sure you have an empty gif */ background-image: url('img/common/empty.gif'); } .post-image { width: 100%; display: inline-block; overflow: hidden; position: relative; } .post-image img { width: 100%; display: block; vertical-align: middle; } .post-image__color { position: relative; top: 0; } .article-container:hover .post-image__color { } .post-details { padding: 15px 20px; } .post-details, .post-details header, .entry-meta-summary, .entry-meta-summary__category { position: relative; /* Make relative so that category sits above article-container__link */ } .post-details .entry-title { font-size: 20px; font-weight: 500; line-height: 24px; color: #161b2f; } .article-container:hover .entry-title { color: #c33460; } .entry-meta-summary { text-transform: uppercase; font-size: 14px; font-weight: 500; letter-spacing: 2px; margin: 5px 0; } .entry-meta-summary__category { float: left; z-index: 2; } .entry-meta-summary__category a { color: #c33460; } .entry-meta-summary__category a:hover { color: #9a189c; } .entry-meta-summary__date { float: right; font-family: 'Lato', sans-serif; font-size: 11px; color: #bec1c9; } .entry-summary { line-height: 24px; color: #888a94; } /* Blog Pagination ------------------------------------------------------------------------------- */ .more { max-width: 1180px; margin: 0 auto; } .loadmore { text-transform: uppercase; color: white; background-color: #aeb1bc; width: 50%; margin: 0 auto; padding: 15px; text-align: center; letter-spacing: 2px; border-radius: 5px; cursor: pointer; cursor: hand; position: relative; z-index: 1; box-shadow: 0 1px 5px 0 rgba(106, 109, 122, .3); } .loadmore:after { position: absolute; background-color: #888a94; content: ''; top: 0; left: 0; width: 100%; height: 100%; border-radius: 5px; background: ; z-index: 2; opacity: 0; } .loadmore:hover:after { opacity: 0.7; } .loadmore span { z-index: 3; position: relative; } /* Blog Single Post - Text Styles ------------------------------------------------------------------------------- */ .single .entry-content { font-size: 16px; color: #6a6d7a; } .single .entry-content h2 { padding-top: 32px; margin-bottom: 12px; font-size: 32px; color: #9a189c; } .single .entry-content h3 { color: #6a6d7a; padding-top: 20px; margin-bottom: 12px; font-size: 28px; } .single .entry-content h4 { color: #343742; padding-top: 16px; margin-bottom: 12px; font-size: 22px; font-weight: 600; } .single .entry-content h5 { color: #6a6d7a; padding-top: 12px; margin-bottom: 12px; font-size: 18px; font-weight: 600; text-transform: uppercase; } .single .entry-content h6 { color: #343742; padding-top: 12px; margin-bottom: 12px; font-size: 18px; font-weight: 600; } .single .entry-content p { margin: 0 0 20px 0; color: #6a6d7a; } .single .entry-content b, .single .entry-content strong { font-weight: 600; } .single .entry-content em { font-style: italic; } .single .entry-content a { color: #ae46b0; } .single .entry-content a:hover { color: #9a189c; } .single .entry-content hr { border-top: 1px solid #d9dce4; } .single .entry-content li { font-size: 18px; line-height: 34px; margin-bottom: 10px; } .single .entry-content ol { line-height: 24px; list-style: decimal; margin-bottom: 20px; padding-left: 3em; } .single .entry-content ol li { padding-left: 1em; } .single .entry-content ul { line-height: 24px; list-style-type: disc; list-style-position: inside; margin-bottom: 20px; text-indent: -1.5em; padding-left: 4em; } .single .entry-content ul ul { margin-top: 20px; } .single .entry-content table { width: 100%; margin-bottom: 2em; line-height: 1.6; } .single .entry-content tr { border-bottom: 1px solid #eee; } .single .entry-content th { color: #343742; padding: 16px; font-size: 18px; font-weight: 600; text-align: left; } .single .entry-content td { padding: 16px; font-size: 16px; } .single .entry-content img { margin: 28px auto; display: block; max-width: 100%; } .single .entry-content img.captioned { margin: 28px auto 0 auto; } .single .entry-content .caption { text-align: center; font-style: italic; text-transform: uppercase; color: #aeb1bc; font-size: 13px; letter-spacing: 1px; margin-bottom: 20px; } .single .entry-content .note { background-color: #eff0f3; padding: 30px; border-radius: 3px; font-size: 18px; } .single .entry-content .note a { font-weight: 600; } blockquote { margin-bottom: 30px; padding: 30px 0 20px 0; border-top: 1px solid #d8a6d9; border-bottom: 1px solid #d8a6d9; background-image: url(img/blog/quotation.svg); background-repeat: no-repeat; background-size: 64px 50px; background-position: center 30px; } blockquote .quoter { font-style: italic; text-transform: uppercase; color: #aeb1bc; font-size: 16px; letter-spacing: 1px; } blockquote.no-attribution { padding: 30px 0; display: flex; align-items: center; background-size: 96px 75px; background-position: left center; } .single .entry-content blockquote p { margin: 70px 0 0 0; font-size: 22px; line-height: 36px; text-align: center; } .single .entry-content blockquote.no-attribution p { margin: 0 0 0 120px; text-align: left; } sup { top: -0.5em; } sub { bottom: -0.5em; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } abbr, acronym { border-bottom: 1px dotted #ae46b0; cursor: help; text-decoration: none; } .single .entry-content a.cta { display: block; text-align: center; background: linear-gradient(90deg, #E24933, #9a189c); color: white; text-transform: uppercase; letter-spacing: 1px; padding: 15px; border-radius: 5px; margin-top: 30px; margin-bottom: 33px; } /* Blog Single Post ------------------------------------------------------------------------------- */ .single .post-container { max-width: 760px; margin: 40px auto 70px auto; } .single .single-unrelated-content .article-container { box-shadow: none; position: static; } .single .single-unrelated-content .article-container:hover { box-shadow: none; } .single .single-unrelated-content .post-info { width: 100%; } .single .single-unrelated-content .post-details { margin: 75px auto 0 auto; padding: 40px 80px; box-sizing: border-box; background-color: white; } .single .single-banner { background-color: #161b2f; overflow: hidden; } .single-banner-container { max-width: 960px; margin: 0 auto; position: relative; overflow: hidden; } .single .single-unrelated-content .post-image__duotone { box-sizing: border-box; display: none; opacity: 1; width: 99.8%; position: absolute; left: 0; bottom: 0; z-index: 0; margin: 0; padding-left: 1px; } .single .single-unrelated-content img.post-image-blur { opacity: 1; width: 100%; position: relative; left: 0; top: 0; z-index: 1; margin: 0 auto; display: block; } .single-title-meta { width: 90%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; text-align: center; } .single .post-categories a { color: #9a189c; text-transform: uppercase; letter-spacing: 2px; font-size: 24px; } .single h1 { padding: 10px 0 0 0; color: white; font-weight: 400; letter-spacing: 1px; line-height: 60px; } .single .entry-meta { color: #ced0d7; text-transform: uppercase; letter-spacing: 1px; font-size: 14px; line-height: 24px; } .entry-meta-top { margin-top: 60px; margin-bottom: 10px; } .single .entry-meta a { color: #ced0d7; } .single .entry-meta a:hover { color: #c33460; } .single .entry-date { float: right; } .single .single-unrelated-content { color: #6a6d7a; } .single .single-unrelated-content .entry-content { box-sizing: border-box; background-color: white; border-radius: 3px; position: relative; } .entry-meta.tags { display: flex; align-items: center; justify-content: center; } .entry-meta.tags svg { margin-right: 15px; } #disqus_thread { max-width: 760px; margin: 0 auto; padding-top: 45px; padding-bottom: 50px; } .addthis_toolbox { position: absolute; top: 0; margin: 5px 0 0 -80px !important; -webkit-transition: all 0s ease; -moz-transition: all 0s ease; -ms-transition: all 0s ease; -o-transition: all 0s ease; transition: all 0s ease; } .addthis_toolbox.affix { top: 90px; } .addthis_toolbox a { float: none !important; display: block; } .addthis_button_expanded { height: 32px !important; margin-bottom: 0 !important; } .addthis_counter { display: none !important; } .at-icon { width: 24px !important; height: 24px !important; background-color: transparent !important; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); fill: white !important; } .at-icon-wrapper { background-color: #e8eaef !important; border-radius: 16px; position: relative; width: 32px !important; height: 32px !important; } #at15pf { display: none; } .single footer { width: 100%; background-color: #eff0f3; } .related-posts { border-bottom: 1px solid #d9dce4; padding: 50px 0 40px 0; } .related-posts h2 { color: #c33460; } .related-posts h2:after { background-color: #c33460; } .related-posts-container { display: flex; margin: 0 -15px; } .related-posts .type-post { width: 33.33%; box-sizing: border-box; display: flex; align-items: stretch; padding: 15px; } /* Blog Archive Pages ------------------------------------------------------------------------------- */ .archive h1 { text-transform: capitalize; } /* Issues ------------------------------------------------------------------------------- */ .issue-posts-wrapper { background-color: #eff0f3; padding-top: 50px; } .issue-posts { justify-content: space-between; padding-bottom: 80px; } .issue .article-container { width: 250px; height: 295px; background: white url(img/issues/spine-bg.png) repeat-y; display: block; padding: 6px 0 0 12px; text-align: center; } .issue-stripe { background: linear-gradient(90deg, #63c9d3, #653bab);; position: absolute; left: 0; right: 0; top: 0; height: 6px; } .issue-info { padding: 25px; height: 100%; box-sizing: border-box; position: relative; } .issue-info__type { color: #aeb1bc; letter-spacing: 1px; } .issue-info__title { font-size: 20px; font-weight: 500; line-height: 24px; color: #161b2f; } .issue img { width: auto; height: 150px; display: block; margin: 0 auto; position: absolute; bottom: 25px; left: 0; right: 0; border-radius: 2px; } /* Home Page ------------------------------------------------------------------------------- */ body.home { background-color: #161b2f; } body.home #header { background-color: transparent; } .home.banner { padding-bottom: 0; overflow-x: hidden; overflow-y: visible; background: linear-gradient(180deg, #161b2f 50%, #2f3446); } .home-banner { position: relative; padding-bottom: 84px; } .home-banner-content { position: relative; pointer-events: none; z-index: 1; } .home-banner h1 { letter-spacing: 1px; line-height: 52px; font-size: 40px; font-weight: 600; } .home-banner h1, .home-banner p, .home-banner-ctas h2 { text-shadow: 0 2px 6px rgba(17,20,30,0.5); } .home-banner .button { box-shadow: 0 4px 12px rgba(17,20,35,0.5); } .home-banner h1::after { content: ""; width: 54px; background-color: white; height: 4px; display: block; margin: 32px 0; } .home-banner .home-banner-content h1 a { color: #b74e86; font-weight: 600; } .home-banner .home-banner-content h1 a:hover, .home-banner .home-banner-content h1 a:focus { text-decoration: underline; } .home-banner p { width: 75%; } .home-banner-content { color: white; margin-left: 30px; } .home-sub-headline { color: white; letter-spacing: 3px; text-transform: uppercase; font-size: 24px; } .home-headline { text-transform: uppercase; letter-spacing: 3px; font-size: 50px; margin: 5px 0 25px 0; } .home-banner .button { box-sizing: initial; display: inline-block; margin: 25px 8px 0; min-width: 220px; padding: 18px 27px; letter-spacing: 1px; border-radius: 32px; } .home-banner-image-container { width: 45%; } .home-banner-image { width: 90%; position: absolute; bottom: -1px; left: 50%; transform: translate(-50%, 0); } .home-banner-badges { margin: 8px 0 32px; width: 50%; display: flex; } .home-banner-badges img { width: 84px; } .home-banner-badges a:first-of-type img { width: 96px; } /* Fallback for IE11 */ *::-ms-backdrop, :root .home-banner-badges img { height: 94px; } *::-ms-backdrop, :root .home-banner-badges a:first-of-type img { height: 106px; } .home-banner-badges a { display: flex; margin: 0 12px; pointer-events: auto; } .home-banner-badges a:first-of-type { margin-left: 0px; } .home-banner-ctas { overflow: auto; } .home-banner-ctas h2 { font-size: 28px; line-height: 28px; letter-spacing: 0.5px; font-weight: 400; } .home-banner-ctas > div { float: left; } .home-banner-ctas .button .fa-external-link-alt { margin-left: 4px; position: relative; top: -1px; } .home-banner-ctas .button:first-of-type { margin-left: 0; } .home-banner-ctas .button { font-size: 18px; pointer-events: auto; } .home-banner-ctas hr { width: 1px; height: 24px; display: inline-block; background-color: white; margin: 0 0 0 12px; position: relative; top: 6px; } .home-banner-ctas > div:first-of-type { margin-right: 24px; } .home-banner-ctas-businesses .button:first-of-type { background: linear-gradient(90deg, #E24933, #c33460); } .home-banner-ctas-businesses .button:last-of-type { background: linear-gradient(90deg, #c33460, #9a189c) } .home-banner-bkg { position: absolute; left: 55%; top: 0; width: 1000px; transform: perspective(500px) rotateY(-16deg) rotateX(12deg) translateX(-430px) translateY(-48px) translateZ(-10px) skewX(-3deg) skewY(-7.5deg); } .home-banner-bkg-column { float: left; } .home-banner-bkg-column:last-of-type { position: relative; } .home-banner-bkg-column > div { width: 300px; height: 200px; margin: 16px 8px; position: relative; box-shadow: 4px 4px 12px rgba(17, 20, 35, 0.75); border-radius: 16px; opacity: 0.5; transition: transform 0.3s cubic-bezier(0, 0, 0, 2), opacity .2s ease-in-out; } .home-banner-bkg-column > div:hover { opacity: 1.0 !important; transform: translate(-5px, -5px) scale(1.025); } .home-banner-bkg-column:first-of-type > div { margin-left: 0; } .home-banner-bkg-column:last-of-type > div { margin-right: 0; } .home-banner-bkg-column > div:first-of-type { margin-top: 0; } .home-banner-bkg-column > div:last-of-type { margin-bottom: 0; } .home-banner-bkg-column > div:after { content: ''; position: absolute; top: -1px; left: -1px; bottom: -1px; right: -1px; border-radius: 16px; background: radial-gradient(transparent 40%, #161b2b 100%); transition: opacity 0.2s ease-in-out; } .home-banner-bkg-column > div:hover:after { opacity: 0.3; } .home-banner-bkg-column:first-of-type > div:nth-child(1) { background: url("/wp-content/themes/centercode-2017/img/home/home-bkg-selfie.jpg"); } .home-banner-bkg-column:first-of-type > div:nth-child(2) { background: url("/wp-content/themes/centercode-2017/img/home/home-bkg-drone.jpg"); } .home-banner-bkg-column:first-of-type > div:nth-child(3) { background: url("/wp-content/themes/centercode-2017/img/home/home-bkg-streaming.jpg"); } .home-banner-bkg-column:nth-of-type(2) > div:nth-child(1) { background: url("/wp-content/themes/centercode-2017/img/home/home-bkg-gamer.jpg"); } .home-banner-bkg-column:nth-of-type(2) > div:nth-child(2) { background: url("/wp-content/themes/centercode-2017/img/home/home-bkg-vr.jpg"); } .home-banner-bkg-column:nth-of-type(2) > div:nth-child(3) { background: url("/wp-content/themes/centercode-2017/img/home/home-bkg-mixer.jpg"); } .home-banner-bkg-column:last-of-type > div:nth-child(1) { background: url("/wp-content/themes/centercode-2017/img/home/home-bkg-camera.jpg"); } .home-banner-bkg-column:last-of-type > div:nth-child(2) { background: url("/wp-content/themes/centercode-2017/img/home/home-bkg-cellphone.jpg"); } .home-banner-bkg-column:last-of-type > div:nth-child(3) { background: url("/wp-content/themes/centercode-2017/img/home/home-bkg-watch.jpg"); } @media only screen and (max-width: 1100px) { .home-banner-ctas .button { font-size: 16px; } .home-banner .button { margin: 25px 6px 0; } .home-banner-ctas hr { margin-left: 6px; } .home-banner-ctas > div:first-of-type { margin-right: 16px; margin-bottom: 24px; } .home-banner h1 .break { display: none; } } @media only screen and (max-width: 1024px) { .home-banner .button { padding: 18px 24px; min-width: initial; } } @media only screen and (max-width: 960px) { .home-banner { padding-bottom: 30px; } .home-banner-content { margin-left: 0; } .home-banner h1 { margin: none; } .home-banner h1::after { margin: 32px auto; } .home-banner p { margin: 0 auto; } .home-banner-badges { margin: 8px auto 32px; width: 450px; justify-content: space-around; } .home-banner-badges a:first-of-type img { width: 84px; } .home-banner-badges a:first-of-type { margin-left: 8px; } .home-banner-ctas > div { float: none; } .home-banner-ctas hr { display: none; } .home-banner-ctas > div:last-of-type { margin-left: 0; } .home-banner .button:only-of-type { margin: 25px 0; } } @media only screen and (max-width: 600px) { .home-banner h1::after { margin: 24px auto; } .home-banner p { font-size: 18px; line-height: 30px; width: 100%; } .home-banner-ctas h2 { font-size: 24px; line-height: 24px; } .home-banner .button { margin: 25px 0 0; width: 300px; } .home-banner-ctas > div:last-of-type { margin-top: 24px; } .home-banner-ctas-businesses .button:first-of-type, .home-banner-ctas-businesses .button:last-of-type { background: linear-gradient(-90deg, #9A189C, #E24932); } } @media only screen and (max-width: 500px) { .home-banner-badges { display: none; } .home-banner-ctas { margin-top: 24px; } .home-banner .button { width: auto; } .home-banner-ctas > div:last-of-type { margin-top: 48px; } } /* Common Animation Elements */ .home-bg-element { position: absolute; } .color-element { opacity: 0; transition: opacity .35s; } .color-element.is-loaded { opacity: 1; } .dots { background-image: url(img/home/dots-car.svg); width: 2px; height: 0; transition: height 0.2s; } .home-icon { color: #63c9d3; transform: scale(0); transition: all 0.3s cubic-bezier(0, 0, 0, 2); /* background-color: #63c9d3; color: white; width: 26px; height: 26px; border-radius: 13px; text-align: center; padding-top: 5px; box-sizing: border-box; font-size: 18px !important; */ } .home-icon.is-loaded { transform: scale(1); } .townhouse { background-image: url(img/home/townhouse-color.svg); width: 257px; height: 301px; left: 780px; bottom: 0; } .house-modern { background-image: url(img/home/house-modern.svg); width: 318px; height: 172px; left: 412px; bottom: 0; } .house-victorian { background-image: url(img/home/house-victorian-simplified.svg); width: 239px; height: 185px; left: 950px; bottom: 0; opacity: 0.9; } /* Bench */ .bench { background-image: url(img/home/bench.svg); width: 60px; height: 53px; left: 700px; bottom: 0; } .bench-color { background-image: url(img/home/bench-color.svg); transition-delay: 1.6s; } .dots-bench { left: 720px; bottom: 55px; opacity: 0.7; } .dots-bench.is-loaded { height: 12px; transition-delay: 1.7s; } .phone-icon { left: 716px; bottom: 65px; font-size: 24px !important; } .phone-icon.is-loaded { transition-delay: 1.9s; } /* Car */ .car { background-image: url(img/home/car.svg); width: 137px; height: 43px; left: 340px; bottom: 0; } .car-color { background-image: url(img/home/car-color.svg); transition-delay: 0.5s; } .dots-car { left: 390px; bottom: 40px; opacity: 0.7; } .dots-car.is-loaded { height: 58px; transition-delay: 0.675s; } .fa-map-marker { left: 381px; bottom: 100px; font-size: 36px !important; } .fa-map-marker.is-loaded { transition-delay: .9s; } /* ?? */ .dots-car-2 { left: 1018px; bottom: 375px; opacity: 0.7; } .dots-car-2.is-loaded { height: 40px; transition-delay: 1.05s; } .fa-wifi { left: 1009px; bottom: 415px; font-size: 18px !important; } .fa-wifi.is-loaded { transition-delay: 1.3s; } /* ?? */ .dots-car-3 { left: 684px; bottom: 410px; opacity: 0.7; } .dots-car-3.is-loaded { height: 60px; transition-delay: 1.2s; } .fa-safari { left: 673px; bottom: 475px; font-size: 24px !important; } .fa-safari.is-loaded { transition-delay: 1.6s; } /* Kitchen Tech */ .dots-kitchen { left: 619px; bottom: 75px; } .dots-kitchen.is-loaded { height: 108px; } .home-icon-kitchen { left: 610px; bottom: 185px; font-size: 24px !important; } /* TV */ .dots-tv { left: 963px; bottom: 238px; } .dots-tv.is-loaded { height: 70px; } .home-icon-tv { left: 950px; bottom: 310px; font-size: 26px !important; } /* wearable */ .dots-wearable { left: 1082px; bottom: 43px; } .dots-wearable.is-loaded { height: 120px; } .home-icon-wearable { left: 1070px; bottom: 164px; font-size: 30px !important; } /* Gaming */ .home-icon-gaming { left: 832px; bottom: 144px; background-color: #63c9d3; color: white; width: 26px; height: 26px; border-radius: 13px; text-align: center; padding-top: 3px; box-sizing: border-box; } /* Laptop */ .home-icon-laptop { left: 890px; bottom: 45px; background-color: #63c9d3; color: white; width: 26px; height: 26px; border-radius: 13px; text-align: center; padding-top: 4px; box-sizing: border-box; } /* Light */ .home-icon-light { left: 1167px; bottom: 66px; background-color: #63c9d3; color: white; width: 26px; height: 26px; border-radius: 13px; text-align: center; padding-top: 5px; box-sizing: border-box; } /* Lock */ .home-icon-lock { left: 536px; bottom: 66px; background-color: #63c9d3; color: white; width: 16px; height: 16px; border-radius: 13px; text-align: center; padding-top: 2px; box-sizing: border-box; font-size: 10px !important; } .home-content { background-color: #d9dce4; height: 200px; } /* Solutions Page ------------------------------------------------------------------------------- */ .banner { background-color: #161b2f; padding-top: 50px; padding-bottom: 50px; } .solutions-banner { overflow: hidden; padding: 0; text-align: center; } .solutions-banner .wrapper { color: white; padding: 80px 0 110px; position: relative; } .solutions-banner-left { margin-right: 50px; } .solutions-sub-headline { color: #c33460; text-transform: uppercase; letter-spacing: 3px; font-weight: 500; background: -webkit-linear-gradient(45deg, #c33460, #9a189c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .solutions-learn-button { background-color: transparent; border: 2px solid #c33460; } .solutions-cta-button { margin: 25px 0; font-size: 16px; padding: 15px 30px; border-radius: 30px; } .solutions-cta-button:after { border-radius: 30px; } .solutions-banner-image { flex: none; width: 500px; height: 500px; background-image: url(img/solutions/solutions-banner-image.svg); } .solution-needs { text-align: center; } .needs { margin-left: -20px; margin-right: -20px; display: flex; flex-wrap: wrap; justify-content: center; } .need { width: 25%; padding: 20px; box-sizing: border-box; text-align: center; } .need-wrapper { height: 100%; box-shadow: 0 1px 5px 0 rgba(106, 109, 122, .4); box-sizing: border-box; position: relative; border-radius: 5px; } .need-wrapper:hover { box-shadow: 0 0 15px 0 rgba(106, 109, 122, .5); } .need-wrapper:after { content: ""; position: absolute; box-shadow: rgba(106, 109, 122, 0.2) 2px 2px 2px; -webkit-transform: rotate(45deg); transform: rotate(45deg); bottom: -10px; left: 50%; border-width: 10px; margin-left: -10px; border-style: solid; border-color: transparent #FFF #FFF transparent; border-bottom-right-radius: 3px; } .need-wrapper:hover:after { box-shadow: rgba(106, 109, 122, 0.2) 2px 2px 2px; } .need .stripe { width: 100%; height: 6px; border-top-left-radius: 5px; border-top-right-radius: 5px; background-color: #eff0f3; } .need-wrapper:hover .stripe { background-color: #c33460; } .need-icon-container { width: 100%; padding-top: 20px; padding-bottom: 26px; background-color: #eff0f3; } .need img { width: 100px; height: 100px; display: block; margin: 0 auto; background-color: rgba(255,255,255,0.6); border-radius: 50px; } .need .need-wrapper:hover img { background-color: white; } .need h3 { padding: 15px 20px 20px 20px; font-size: 18px; color: #6a6d7a; } .need-wrapper:hover h3 { color: #c33460; } .need-platform { display: block; width: 100%; position: absolute; left: 50%; bottom: 12px; transform: translate(-50%, 0); color: #ced0d7; font-weight: 400; font-size: 13px; font-style: italic; letter-spacing: 1px; } .section-red-magenta a.talk-link { margin-top: 50px; border-bottom: 1px solid #d9dce4; padding-bottom: 1px; color: #aeb1bc; display: inline-block; letter-spacing: 1px; font-style: italic; cursor: pointer; cursor: hand; } .section-red-magenta a.talk-link:hover { color: #c33460; border-color: #c33460; } .solutions-contact-info { display: flex; border: 2px solid #eff0f3; } .solutions-contact { width: 33.33%; border-right: 1px solid #eff0f3; display: flex; align-items: center; } .solutions-contact img { width: 125px; height: 125px; float: left; } .solutions-contact p { } .solutions-contact.chat { padding: 15px; box-sizing: border-box; } .solutions-contact.chat div { display: flex; align-items: center; padding: 15px; box-sizing: border-box; background-color: #eff0f3; } /* Solutions Section */ .solutions-section { position: relative; padding-top: 70px; } .section-subtitle-container { text-align: center; margin-bottom: 35px; } .solutions-section p { color: #6a6d7a; } .solutions-section .summary-sentence { font-size: 24px; line-height: 36px; text-align: center; margin-bottom: 20px; } .solutions-section .sub-summary-sentence { text-align: center; font-style: italic; font-size: 16px; color: #a0a2aa; } /* Commmon Solution Elements */ .solution-description { width: 50%; box-sizing: border-box; display: inline-block; position: relative; } .solution h3 { font-size: 28px; letter-spacing: 0.5px; margin-bottom: 15px; } .solution .button { border-radius: 5px; background-color: #888a94; margin: 20px 0 0 0; font-weight: 500; } .solution .button:after { border-radius: 5px; } .button-line-container { padding-right: 20px; background-color: #e8eaef; display: inline-block; } .button-line-container:after { content: ''; position: absolute; width: 100%; height: 2px; background-color: #d9dce4; margin-top: -22px; z-index: -1; } /* Common Solution Containers */ .solution.top { position: relative; z-index: 1; padding-bottom: 200px; } .skewed { content: ''; width: 100%; height: 100%; position: absolute; background: inherit; z-index: 2; top: 0; } .skewed.right { transform-origin: left top; transform: skewY(-8deg); } .skewed.left { transform-origin: right top; transform: skewY(8deg); height: 150%; } .solution.bottom { background-color: #e8eaef; position: relative; } .solution.bottom .wrapper { position: relative; z-index: 3; } /* Solution Specific Styles */ .fully-managed-tests { background-color: #eff0f3; overflow: hidden; } .fully-managed-tests .top { background-color: #eff0f3; } .fully-managed-tests h3 { color: #8327a3; } .product-tests .wrapper { display: flex; align-items: center; justify-content: left; } .product-tests .solution-description { padding-right: 10%; } .product-tests img { width: 40%; height: auto; } .managed-programs.bottom { margin-top: -120px; padding-bottom: 180px; } .managed-programs .wrapper { margin-top: 80px; } .managed-programs .solution-description { float: right; } .managed-programs-image { width: 44%; position: absolute; bottom: -180px; } .cv-platform { overflow: hidden; } .cv-platform .solution.bottom { background-color: #f5f6f8; } .cv-platform .sub-summary-sentence { width: 60%; margin: 0 auto; } .cv-platform h3 { color: #6484c0; } .cv-platform a { color: white; } .managed-implementation .wrapper { display: flex; align-items: center; justify-content: left; flex-direction: row-reverse; } .solution.top.managed-implementation { padding-top: 20px; padding-bottom: 240px; } .managed-implementation img { width: 50%; padding-right: 50px; box-sizing: border-box; } .platform-subscription .solution-description { padding-right: 8%; box-sizing: border-box; } .platform-subscription img { width: 50%; position: absolute; bottom: -90px; } .platform-subscription-container { position: relative; } .platform-subscription-container .wrapper { position: relative; top: -90px; } .page-template-template-solutions .clients { z-index: 3; position: relative; } /* Pricing Page ------------------------------------------------------------------------------- */ .page-template-template-platform .platform-pricing h2 { margin-bottom: 70px; } .pricing { display: flex; flex-wrap: wrap; margin-left: -25px; margin-right: -25px; } .price-container { width: 33.33%; padding: 25px; box-sizing: border-box; } .price { height: 100%; background-color: white; padding: 30px; border-radius: 5px; box-sizing: border-box; box-shadow: 0 1px 5px 0 rgba(106, 109, 122, .3); text-align: center; } .price h3 { text-transform: uppercase; font-size: 24px; letter-spacing: 1px; font-weight: 600; margin-bottom: 30px; position: relative; } .price h3:after { content: ''; height: 3px; background-color: #eff0f3; width: 60px; left: 50%; bottom: -20px; position: absolute; transform: translate(-50%, 0); } .price p { line-height: 24px; color: #888a94; } .price-string { margin-top: 20px; margin-bottom: 15px; } .super { vertical-align: 24px; font-weight: 600; font-family: Lato; color: #6a6d7a; display: inline-block; margin-right: 1px; font-size: 20px; } .price-number { font-family: Lato; font-size: 54px; color: #6a6d7a; font-weight: 600; } .per-month { text-transform: uppercase; display: inline-block; color: #aeb1bc; font-size: 14px; margin-left: 2px; letter-spacing: 1px; } .price .button { border-radius: 5px; background-color: #aeb1bc; margin: 20px 0 0 0; font-weight: 500; width: 60%; } .standard .price { border-top: 8px solid #aeb1bc; } .standard h3 { color: #aeb1bc; } .impact .price { border-top: 38px solid #6484c0; margin-top: -30px; height: calc(100% + 30px); position: relative; } .impact h3 { color: #6484c0; } .impact .price .button { background-color: #6484c0; } .most-popular { width: 100%; text-align: center; position: absolute; left: 0; top: -25px; color: white; text-transform: uppercase; letter-spacing: 1px; opacity: 0.6; } .enterprise .price { border-top: 8px solid #6a6d7a; } .enterprise h3 { color: #6a6d7a; } .enterprise .price-number { font-size: 40px; display: block; margin-bottom: 5px; } .enterprise .price .button { background-color: #6a6d7a; } .platform-pricing .finial-divider { background-color: #d9dce4; margin-top: 14px; margin-bottom: 30px; } .platform-pricing .button-container { margin-top: 0; } .pricing-caption { width: 100%; display: block; text-align: center; font-style: italic; color: #888a94; font-size: 18px; } .page-template-template-platform .clients { background: linear-gradient(-90deg, #63c9d3, #6484c0); background-image: url(img/common/isometric-background.png), linear-gradient(-90deg, #63c9d3, #6484c0); } .page-template-template-platform footer .gradient-button.midtone-red-magenta { background: linear-gradient(90deg, #653bab, #6484c0); } .button-container { width: 100%; margin-top: 40px; text-align: center; } .pricing-pdf-button { width: 40%; background-color: #888a94; border-radius: 5px; } /* Product Page ------------------------------------------------------------------------------- */ .products-banner { overflow: hidden; padding-top: 0; padding-bottom: 0; text-align: center; } .products-wrapper.wrapper { color: white; padding: 80px 0 110px; position: relative; background-position: center right; background-repeat: no-repeat; background-size: auto 100%; } .products-banner-left { width: 50%; position: relative; } .products-banner-image { display: none; } /* Platform Editions-Specific Elements */ .platform-editions .learn-more { margin: 20px 0 15px 0; } .platform-editions .card-list { width: 40%; position: relative; } .platform-editions .button { border-radius: 5px; background-color: #c33460; margin: 20px 0; font-weight: 500; } .bullet-line { position: absolute; width: 2px; height: 66.66%; background-color: #eff0f3; top: 50%; left: 14px; transform: translate(0, -50%); } .platform-image-link { display: block; width: 60%; box-sizing: border-box; padding-left: 50px; } .platform-image-link img { width: 100%; } .edition-container { flex-basis: 100%; margin-left: 50px; padding: 0; } .platform-editions .article-container__link { left: -50px; right: 0; width: auto; } .edition-bullet { width: 30px; height: 30px; border-radius: 15px; top: 50%; left: -50px; position: absolute; background-color: #eff0f3; transform: translate(0, -50%); } .edition-bullet-hover { width: 12px; height: 12px; border-radius: 6px; position: absolute; background-color: #d9dce4; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .platform-editions .icon-card:hover .edition-bullet-hover { background-color: #c33460; } .platform-editions .card-info { margin-left: 0; } .edition-parens { text-transform: uppercase; font-size: 14px; color: #aeb1bc; } /* Platform Services-Specific Elements */ .platform-services .section-info { width: 33.33%; box-sizing: border-box; padding-right: 25px; } .platform-services .learn-more { margin-top: 40px; } .platform-services .card-list { width: 66.66%; } /* Managed Services-Specific Elements */ .managed-services-image { width: 40%; margin-left: -6.66%; } .managed-services .section-info { width: 66.66%; } .managed-services .learn-more { margin: 20px 0 20px 0; } .managed-services-text { margin-bottom: 20px; } /* Other Services-Specific Elements */ .other-services .section-info { width: 33.33%; box-sizing: border-box; padding-right: 25px; } .other-services .learn-more { margin-top: 40px; } .other-services .card-list { width: 66.66%; } /* Products Client Bar */ .page-template-template-products .clients { background-color: #63c9d3; background-image: url(img/common/isometric-background.png); } /* Platform Page ------------------------------------------------------------------------------- */ /* TODO - this section needs to be reorganized */ .platform-video { width: 40%; border-radius: 3px; } .analyze video { border: 1px solid #d9dce4; } .platform-banner { background-color: #161b2f; background-size: cover; text-align: center; color: white; display: flex; align-items: center; justify-content: space-around; padding-top: 0; padding-bottom: 0; } .platform-banner .wrapper { background-image: url(img/platform/platform-banner.png); background-size: cover; background-position: center center; padding-top: 110px; padding-bottom: 150px; width: 100%; } .platform-banner h1 { letter-spacing: 0.5px; line-height: 50px; font-size: 40px; font-weight: 600; } .platform-banner h1:after { width: 100px; background-color: #c33460; margin-top: 30px; } .platform-banner p { margin: 0 auto; color: rgba(255, 255, 255, 0.8); } .platform-button { text-transform: uppercase; color: white; background: linear-gradient(90deg, #E24933, #9a189c); margin: 0 15px; padding: 15px 30px; text-align: center; letter-spacing: 2px; border-radius: 24px; cursor: pointer; cursor: hand; position: relative; z-index: 1; box-shadow: 0 1px 5px 0 rgba(106, 109, 122, .3); display: inline-block; font-size: 14px; } /* Hack to get gradient hover transition on button */ .platform-button:after { position: absolute; background: linear-gradient(90deg, #9a189c, #653bab); content: ''; top: 0; left: 0; width: 100%; height: 100%; border-radius: 24px; z-index: 2; opacity: 0; } .platform-button:hover:after { opacity: 0.7; } .platform-button span { z-index: 3; position: relative; } .tour-button { background: transparent; border: 1px solid white; box-sizing: border-box; margin-left: 0; font-size: 15px; } .tour-button:hover:after { opacity: 1; } .tour-button:after { background: rgba(255,255,255,0.2); } .tour-button { margin-top: 25px; } .platform-banner .button, .cv-101-banner .button { box-sizing: initial; display: inline-block; margin: 25px 8px 0; min-width: 220px; } .platform-banner .button { /*margin-top: 35px;*/ } .platform-highlights { text-align: center; } .platform-highlights__title { color: #161b2f; } .highlights { display: flex; justify-content: center; } .highlight-divider { position: relative; background-color: #eff0f3; } .highlight-divider div { /* Hack to get full-height container div */ width: 2px; position absolute; top: 0; bottom: 0; } .highlight { width: 33%; position: relative; } .highlight__title { font-weight: 500; font-size: 22px; margin-bottom: 20px; } .highlight-1:hover .highlight__title { color: #c33460; } .highlight-2:hover .highlight__title { color: #8327a3; } .highlight-3:hover .highlight__title { color: #6484c0; } .highlight__title:after { height: 3px; width: 100px; display: block; content: ""; background-color: #d9dce4; margin: 20px auto 0 auto; border-radius: 2px; } .highlight-1:hover .highlight__title:after { background-color: #c33460; } .highlight-2:hover .highlight__title:after { background-color: #8327a3; } .highlight-3:hover .highlight__title:after { background-color: #6484c0; } .highlight__description { line-height: 20px; width: 250px; margin: 0 auto; color: #888a94; } .highlight-image { max-width: 250px; height: auto; margin: 0 auto 30px auto; position: relative; background-repeat: no-repeat; } .highlight-image:after { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; -webkit-backface-visibility:hidden; background-repeat: no-repeat; } .highlight-1 .highlight-image:after { background-image: url(img/platform/icon-platform-recruit-hover.svg); } .highlight-2 .highlight-image:after { background-image: url(img/platform/icon-platform-manage-hover.svg); } .highlight-3 .highlight-image:after { background-image: url(img/platform/icon-platform-analyze-hover.svg); } .highlight:hover .highlight-image:after { opacity: 1; } .platform-subnav { background-color: #eff0f3; /*background: linear-gradient(90deg, #E24933, #9a189c);*/ padding: 10px 0 10px 0; position: absolute; width: 100%; opacity: 0; box-shadow: 0 0 10px 0 rgba(106, 109, 122, .5); } .platform-subnav-wrapper { display: flex; justify-content: space-around; } .platform-subnav .highlight-divider { background-color: #d9dce4; } .platform-subnav .highlight-divider div { /* Hack to get full-height container div */ width: 1px; } .subnav-item { display: flex; align-items: center; } .subnav-icon-wrapper { position: relative; } .subnav-icon { width: 50px; height: 50px; } .subnav-platform-icon { position: relative; display: inline-block; } .subnav-link:nth-of-type(1) .subnav-platform-icon { background-image: url(img/platform/subnav-platform-recruit.svg); } .subnav-link:nth-of-type(3) .subnav-platform-icon { background-image: url(img/platform/subnav-platform-manage.svg); } .subnav-link:nth-of-type(5) .subnav-platform-icon { background-image: url(img/platform/subnav-platform-analyze.svg); } .subnav-link .subnav-platform-icon:after { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; opacity: 0; -webkit-backface-visibility:hidden; } .subnav-link:nth-of-type(1) .subnav-platform-icon:after { background-image: url(img/platform/subnav-platform-recruit-hover.svg); } .subnav-link:nth-of-type(3) .subnav-platform-icon:after { background-image: url(img/platform/subnav-platform-manage-hover.svg); } .subnav-link:nth-of-type(5) .subnav-platform-icon:after { background-image: url(img/platform/subnav-platform-analyze-hover.svg); } .subnav-link:hover .subnav-platform-icon:after, .subnav-link.active .subnav-platform-icon:after { opacity: 1; } .subnav-link a { display: block; } .subnav-title { display: inline-block; text-transform: uppercase; letter-spacing: 2px; font-size: 15px; margin-left: 10px; color: #aeb1bc; } .subnav-link:nth-of-type(1):hover .subnav-title, .subnav-link:nth-of-type(1).active .subnav-title { color: #c33460; } .subnav-link:nth-of-type(3):hover .subnav-title, .subnav-link:nth-of-type(3).active .subnav-title { color: #8327a3; } .subnav-link:nth-of-type(5):hover .subnav-title, .subnav-link:nth-of-type(5).active .subnav-title { color: #6484c0; } .recruit, .manage, .analyze { } .recruit { background-color: #e8eaef; } .manage { background-color: #d9dce4; background: linear-gradient(135deg, #9a189c, #653bab); } .page-template-template-platform h2 { margin-bottom: 40px; } .page-template-template-platform .section-subtitle-container { margin-bottom: 20px; } .platform-section-text { width: 80%; text-align: center; margin: 0 auto; } .recruit .section-subtitle { color: #c33460; } .recruit .section-subtitle:before, .recruit .section-subtitle:after { border-top-color: #c33460; } .recruit h2 { color: #343742; } .recruit p { color: #6a6d7a; } .recruit h3 { color: #c33460; margin-bottom: 20px; font-size: 26px; line-height: 32px; } .recruit .finial-divider { background-color: #d9dce4; margin-bottom: 0; } .recruit .finial-divider:before, .recruit .finial-divider:after { background-color: transparent; } .analyze h2 { color: #343742; } .analyze h2:after { background-color: #653bab; } .analyze p { color: #6a6d7a; } .analyze .section-subtitle { color: #aeb1bc; } .analyze .section-subtitle:before, .analyze .section-subtitle:after { border-top-color: #aeb1bc; } .page-template-template-platform .analyze .learn-more { margin-top: 25px; } .page-template-template-platform .recruit .button { margin: 25px 0 0 0; border-radius: 5px; background: #c33460; } .page-template-template-platform .manage .button { margin: 25px 0 0 0; border-radius: 5px; background: white; color: #9a189c; font-weight: 500; } .page-template-template-platform .manage .button:hover { background: #be6bc0; } .page-template-template-platform .analyze .button { margin: 25px 0 0 0; border-radius: 5px; background: #653bab; } .page-template-template-platform .framework .button { margin: 25px 0 0 0; border-radius: 5px; background: white; color: #6484c0; font-weight: 500; } .analyze img.platform-screenshot { display: block; margin: 40px auto 0; width: 50%; } .finial-divider { width: 100%; height: 2px; margin-bottom: 20px; background-color: #eff0f3; position: relative; } .finial-divider:before, .finial-divider:after { content: ''; width: 7px; height: 7px; background-color: inherit; border-radius: 4px; position: absolute; top: 50%; transform: translate(0, -50%); } .finial-divider:after { right: 0; } .analyze h3 { color: #653bab; margin-bottom: 20px; font-size: 26px; line-height: 32px; } .analyze .feature { width: 33.33%; padding-bottom: 0 } .analyze a { color: #653bab; } .manage { padding-bottom: 0; } .manage .section-subtitle { color: #be6bc0; } .manage .section-subtitle:before, .manage .section-subtitle:after { border-top-color: #be6bc0; } .platform-features .section-subtitle { font-size: 20px; } .manage-features { /*background-color: rgba(22, 27, 47, 0.2);*/ padding-bottom: 60px; } .platform-features { padding-top: 10px; } .analyze-features { padding-top: 60px; padding-bottom: 50px; } .manage h3 { color: white; opacity: 1; margin-bottom: 20px; font-size: 26px; line-height: 32px; } .manage .feature p { color: #be6bc0; opacity: 1; } .platform-subsection { margin: 60px 0; display: flex; align-items: center; justify-content: flex-start; } .platform-subsection .platform-section-text { width: 60%; padding-right: 60px; box-sizing: border-box; text-align: left; margin: 0; } .platform-subsection img { width: 50%; } .platform-subsection p { line-height: 32px; font-size: 18px; } .manage .platform-subsection { display: flex; flex-direction: row-reverse; } .manage .platform-subsection .platform-section-text { padding-right: 0; padding-left: 70px; } .features-section { background-color: #e8eaef; padding-top: 80px; text-align: center; } .features-section h2 { color: #aeb1bc; font-size: 18px; } .features-section h2:before, .features-section h2:after { border-top: 1px solid #aeb1bc; } .features { display: flex; flex-wrap: wrap; justify-content: center; margin-left: -20px; margin-right: -20px; } .page-template-template-platform .learn-more { margin-top: 20px; } .feature { width: 33.33%; padding: 25px 20px 0 20px; box-sizing: border-box; text-align: left; } .feature img { width: 60px; height: 60px; display: none; } .feature h3 { font-size: 20px; font-weight: 500; letter-spacing: 0.5px; line-height: 28px; margin-bottom: 5px; } .manage .feature h3 { font-weight: 400; } .recruit-features h3 { color: #c33460; } .analyze-features .feature { width: 25%; } .analyze-features h3 { color: #6484c0; } .feature p { margin-top: 5px; color: #6a6d7a; font-size: 16px; line-height: 26px; } .analyze .finial-divider { margin-bottom: 0; } .framework { padding-bottom: 20px; } .framework .platform-subsection { margin-top: 0; justify-content: flex-end; flex-direction: row-reverse; } .framework .platform-subsection .platform-section-text { width: 66.66%; padding-right: 0; } .framework .platform-subsection img { width: 33.33%; box-sizing: border-box; padding-right: 70px; } .framework p { opacity: 1; color: rgba(255, 255, 255, 0.8); } .framework .features { margin-top: 20px; margin-bottom: 20px; } .framework .features li { position: relative; width: 33.33%; } .framework .features li h3 { color: #a2b5d9; } .framework .features li:before { position: absolute; left: 0; top: 31px; font-family: "Font Awesome 5 Pro"; font-weight: 900; content: '\f058';; color: #a2b5d9; } .framework .feature p { color: rgba(255, 255, 255, 0.8); } /* Services Page ------------------------------------------------------------------------------- */ .services-banner { padding-top: 70px; text-align: center; } .services-banner h1 { color: white; } .services-cards { margin-top: 60px; margin-bottom: -230px; } .services-cards .highlight__title { margin-top: 20px; } .services-cards .contact-card p { opacity: 1; font-weight: 400; font-size: 16px; line-height: 28px; color: #6a6d7a; } .services-recruit { margin-top: 130px; } .services-recruit h3 { color: #c33460; } .services-recruit p { color: #6a6d7a; } .services-manage h3 { color: #8327a3; } .services-manage p { color: #6a6d7a; } .services-manage .platform-subsection .platform-section-text { margin-top: 0; padding-left: 8%; padding-right: 0; } .services-manage a.learn-more { color: #8327a3; } .services-analyze h3 { color: white; } .services-analyze .platform-section-text { margin-bottom: 60px; } .services-analyze p { color: white; } .services-analyze a.learn-more { color: white; } .page-template-template-services a.learn-more { margin-top: 20px; } .page-template-template-services .managed-services p { color: #6a6d7a; } .services-recruit .platform-subsection .platform-section-text { width: 60%; margin: 0; } .services-recruit .learn-more { border-bottom: 1px solid #d9dce4; padding-bottom: 40px; } .services-recruit .features { margin: 15px 0 0 -25px; justify-content: flex-start; } .services-recruit .features li { position: relative; width: 50%; } .services-recruit .features li:before { position: absolute; left: 0; top: 28px; font-family: "Font Awesome 5 Pro"; font-weight: 900; content: '\f058';; color: #c33460; } .services-recruit .feature { padding: 25px; } /* Testers Page ------------------------------------------------------------------------------- */ .testers-banner { padding-top: 10px; padding-bottom: 0; } .testers-banner .wrapper { position: relative; box-sizing: border-box; overflow: hidden; } .testers-banner h1 { color: white; } .testers-banner-text { width: 50%; position: absolute; left: 0; top: 50%; transform: translate(0, -50%); z-index: 1; } .testers-banner-img { position: relative; right: 9%; width: 122%; z-index: 0; display: block; } .testers-banner-img-mobile { display: none; } .testers-intro { text-align: center; color: #6a6d7a; overflow: hidden; } .testers-intro .about-highlight { margin-top: 20px; display: block; color: #6a6d7a; font-size: 32px; font-style: italic; line-height: 36px; } .testers-intro p { font-size: 18px; } .betabound-begins .wrapper { display: flex; align-items: center; } .betabound-begins .left { width: 50%; padding-right: 50px; box-sizing: border-box; } .betabound-screenshot { width: 50%; margin-bottom: -8px; } .betabound-begins p { color: #6a6d7a; } .tester-quotes { position: relative; padding: 0; } .tester-photos-1 { position: relative; width: 50%; left: 0; } .tester-photos-2 { position: absolute; width: 50%; right: 0; } .tester-quotes .wrapper { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; padding: 50px 0; } .tester-quotes .wrapper h2 { width: 50%; padding-right: 80px; box-sizing: border-box; margin-bottom: 0; text-align: right; font-weight: 400; font-size: 44px; } .tester-quotes .right { width: 50%; background-color: rgba(17, 20,35, 0.8); padding: 30px; box-sizing: border-box; border-radius: 3px; text-align: center; border-radius: 5px; } .tester-quotes .quote { position: absolute; left: 50%; top: 30px; transform: translate(-50%, 0); width: 48px; height: 36px; } .tester-quotes .carousel { display: flex; align-items: center; } .tester-quotes .carousel-inner { margin-top: 30px; } .tester-quotes .carousel-indicators { position: relative; bottom: auto; } .bb-beyond .wrapper { display: flex; align-items: center; flex-flow: row-reverse; } .bb-beyond-text { width: 50%; } .bb-beyond img { width: 50%; padding-left: 10%; padding-right: 10%; box-sizing: border-box; } .testers-cta h2 { font-size: 36px; } .testers-cta-options { display: flex; justify-content: center; margin-left: -30px; margin-right: -30px; align-items: stretch; } .testers-cta-option { width: 50%; padding: 0 30px; box-sizing: border-box; position: relative; } .testers-cta-option-wrapper { height: 100%; box-shadow: 0 1px 5px 0 rgba(106, 109, 122, .3); box-sizing: border-box; padding: 30px; position: relative; } .testers-cta-option:first-child { border-right: 1px solid #eff0f3; } .testers-cta-icon { width: 125px; height: 125px; background-color: #d9dce4; border-radius: 75px; margin: 0 auto; margin-bottom: 30px; position: absolute; top: 50%; transform: translate(0, -50%); } .testers-cta-text { padding-left: 155px; box-sizing: border-box; } .testers-cta-option p { font-size: 17px; line-height: 30px; } .testers-cta .button { border-radius: 5px; background-color: #888a94; background: linear-gradient(90deg, #c33460, #9a189c); margin: 20px 0 0 0; font-weight: 500; padding: 15px; } .testers-cta-option:first-child .button { background: linear-gradient(90deg, #E24933, #c33460); } .testers-cta .button:after { border-radius: inherit; /* TODO do this to other buttons */ } /* Team Page ------------------------------------------------------------------------------- */ .core-values { margin: 80px 0 90px 0; text-align: center; } .core-value-title { color: #6a6d7a; font-weight: 400; font-size: 34px; width: 80%; margin: 0 auto; line-height: 46px; } .core-value-title span { } .passionate { color: #9a189c; } .collaborative { color: #E24933; } .impactful { color: #146c98; } .curious { color: #7dbc42; } .virtuous { color: #63c9d3; } .adaptable { color: #f9d470; } .core-value-icons { margin: 50px -10px 0 -10px; } .core-value-icon { float: left; width: 16.66%; padding: 10px; box-sizing: border-box; } /* Customers Page ------------------------------------------------------------------------------- */ .customers-banner { padding: 0; overflow: hidden; background-color: #161b2f; } .customers-banner p { color: rgba(255, 255, 255, 0.8); } .customers-wrapper.wrapper { color: white; background-repeat: no-repeat; background-position: center bottom; background-size: 100% auto; text-align: center; padding: 110px 0 130px; position: relative; z-index: 1; } .customers-banner h1 { letter-spacing: 0.5px; line-height: 50px; font-size: 40px; font-weight: 600; } .customers-banner-content { margin: 0 auto; position: relative; z-index: 1; } .customers-section { background: #eff0f3; overflow: hidden; } .customers-section h2 { width: 70%; margin: 0 auto 30px auto; } .search-clients { margin: 0 auto; text-align: center; } .narrow-clients { text-transform: uppercase; color: #bec1c9; letter-spacing: 1px; font-size: 24px; margin-bottom: 20px; display: inline-block; } #search { width: 100%; background-color: #fff; color: #6a6d7a; font-size: 16px; padding: 15px 20px; box-sizing: border-box; border-radius: 25px; border: 1px solid #aeb1bc; text-align: center; outline: none; } ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #aeb1bc; font-style: italic; letter-spacing: .5px; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #aeb1bc; opacity: 1; font-style: italic; letter-spacing: .5px; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #aeb1bc; opacity: 1; font-style: italic; letter-spacing: .5px; } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #aeb1bc; font-style: italic; letter-spacing: .5px; } ::-ms-input-placeholder { /* Microsoft Edge */ color: #aeb1bc; font-style: italic; letter-spacing: .5px; } .logos { margin: 20px -10px; } .logos li { width: 12.5%; padding: 10px 10px; box-sizing: border-box; float: left; } .logo-wrapper { background-color: #fff; border: 1px solid #d6d7dc; border-radius: 10px; width: 100%; padding-bottom: 100%; position: relative; } .logo-wrapper img { width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .color-bg { opacity: 0; cursor: default; width: 100%; height: 100%; color: rgba(255,255,255, .6); letter-spacing: 1px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 5px; } .color-bg div { width: 100%; padding: 10px; box-sizing: border-box; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; font-size: 12px; line-height: 1.2; } .logos b { display: block; font-size: 16px; color: #fff; font-weight: 500; font-style: normal; width: 100%; } .logo-wrapper:hover img { opacity: 0; } .logo-wrapper:hover div { opacity: 1; } .logos .tags { display: none; } .logo-owners { text-align: center; color: #aeb1bc; letter-spacing: .5px; font-style: italic; } /* Scrolling Header ------------------------------------------------------------------------------- */ .header-scroll-nav { background-color: rgba(255,255,255,0); -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; } .scroll-nav-wrapper { display: flex; justify-content: space-between; -webkit-transition: all 0s ease; -moz-transition: all 0s ease; -ms-transition: all 0s ease; -o-transition: all 0s ease; transition: all 0s ease; } .header-scroll-nav .logo-link__logotype { display: none; } .scroll-nav-left { display: flex; align-items: center; } .header-scroll-nav.affix { background-color: rgba(255,255,255,1); box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); width: 100%; top: 0; z-index: 1000; } .admin-bar .header-scroll-nav.affix { top: 32px; } .header-scroll-nav.affix.with-subnav { box-shadow: none; } .header-scroll-nav .header__stripe, .header-scroll-nav .footer-branding-left__logo, .header-scroll-nav .header-contact { display: none; } .header-scroll-nav.affix .header__stripe { display: block; } .header-scroll-nav.affix .footer-branding-left__logo, .header-scroll-nav.affix #main-menu { display: inline-block; margin-left: 0; } .header-scroll-nav.affix .header-contact { display: flex; align-items: center; } .header-scroll-nav.affix .scroll-nav-wrapper { padding-top: 10px; padding-bottom: 10px; } #header .header-scroll-nav.affix #main-menu .menu > .menu-item > a { color: #343742; } /* Resources Sub-Menu ------------------------------------------------------------------------------- */ #main-menu .resources-menu .sub-menu a { color: #343742; -webkit-backface-visibility:hidden; font-size: 14px; font-weight: 600; letter-spacing: 1px; opacity: 1; text-transform: uppercase; -webkit-transition: opacity .3s ease; -moz-transition: opacity .3s ease; -ms-transition: opacity .3s ease; -o-transition: opacity .3s ease; transition: opacity .3s ease; } #main-menu .resources-menu .sub-menu li.nav-cv-101, #main-menu .platform-menu .sub-menu li.nav-cv-101, #header .header-scroll-nav.affix #main-menu .resources-menu .sub-menu li.nav-cv-101{ width: 35%; height: 100%; text-align: left; margin: 0; border-right: 1px solid #d9dce4; box-sizing: border-box; padding-right: 25px; margin-right: 25px; color: #343742; display: block; } #main-menu .resources-menu .sub-menu li.nav-cv-101 a:not(.nav-learn-more), #main-menu .platform-menu .sub-menu li.nav-cv-101 a:not(.nav-learn-more), #header .header-scroll-nav.affix #main-menu .resources-menu .sub-menu li.nav-cv-101 a:not(.nav-learn-more) { color: #c33460 !important; margin-top: -18px; padding-bottom: 0; margin-bottom: 40px; font-size: 40px; text-transform: none; line-height: 44px; } #main-menu .resources-menu .sub-menu li.nav-cv-101 a:not(.nav-learn-more):after, #main-menu .platform-menu .sub-menu li.nav-cv-101 a:not(.nav-learn-more):after, #header .header-scroll-nav.affix #main-menu .resources-menu .sub-menu li.nav-cv-101 a:not(.nav-learn-more):after { height: 3px; width: 50px; border-radius: 3px; position: absolute; display: block; content: ""; background-color: #d9dce4; margin: 20px 0 0 0; } .resources-menu .nav-cv-101 .sub, .platform-menu .nav-cv-101 .sub { font-weight: 400; text-transform: none; display: block; color: #888a94; line-height: 24px; } .platform-menu .nav-cv-101 .sub { max-width: 100%; } #main-menu .platform-menu .sub-menu li.nav-cv-101 { margin-right: 0; padding-right: 24px; width: 277px; display: flex; flex-flow: column wrap; align-items: flex-start; max-width: 100%; } #main-menu .platform-menu .sub-menu li.nav-cv-101 a:not(.nav-learn-more) { font-size: 24px; font-weight: 600; line-height: 30px; margin-bottom: 10px; margin-top: -8px; } #main-menu .platform-menu .sub-menu li.nav-cv-101 a:not(.nav-learn-more) .sub { flex: 1 0 0%; } #main-menu .platform-menu .sub-menu li.nav-cv-101 a:not(.nav-learn-more):after { display: none; } #main-menu .platform-sub-menu:nth-of-type(2) { width: 187px; } #main-menu .platform-sub-menu:nth-of-type(3) { width: 138px; } #main-menu .resources-menu .sub-menu .nav-learn-more, #main-menu .platform-menu .sub-menu .nav-learn-more, #header .header-scroll-nav.affix #main-menu .resources-menu .sub-menu .nav-learn-more { margin: 20px 0 0 0; text-transform: none; color: white !important; font-weight: 500; background-color: #c33460; width: auto; display: inline-block; padding: 12px 25px; } #main-menu .resources-menu .sub-menu .nav-resource a { padding-top: 100px; padding-bottom: 0; line-height: 18px; } #main-menu .resources-menu .nav-resource a:before { content: ' '; width: 80px; height: 80px; position: absolute; left: 50%; top: 25px; transform: translate(-50%, 0); background-color: #d9dce4; border-radius: 80px; -webkit-transition: all .6s ease; -moz-transition: all .6s ease; -ms-transition: all .6s ease; -o-transition: all .6s ease; transition: all .6s ease; background-repeat: no-repeat; } #main-menu .resources-menu .nav-resource a:hover:before { background-color: #bec1c9; } #main-menu .resources-menu .sub-menu .nav-premium-content a:hover, #header .header-scroll-nav.affix #main-menu .resources-menu .sub-menu .nav-premium-content a:hover { color: #c33460 !important; } #main-menu .resources-menu .nav-premium-content a:before { background-image: url(img/resources/nav-icon-gray-premium-content.svg); } #main-menu .resources-menu .nav-premium-content a:hover:before { background-image: url(img/resources/nav-icon-premium-content.svg); } #main-menu .resources-menu .sub-menu .nav-webinars a:hover, #header .header-scroll-nav.affix #main-menu .resources-menu .sub-menu .nav-webinars a:hover { color: #9a189c !important; } #main-menu .resources-menu .nav-webinars a:before { background-image: url(img/resources/nav-icon-gray-webinars.svg); } #main-menu .resources-menu .nav-webinars a:hover:before { background-image: url(img/resources/nav-icon-webinars.svg); } #main-menu .resources-menu .sub-menu .nav-events a:hover, #header .header-scroll-nav.affix #main-menu .resources-menu .sub-menu .nav-events a:hover { color: #653bab !important; } #main-menu .resources-menu .nav-events a:before { background-image: url(img/resources/nav-icon-gray-events.svg); } #main-menu .resources-menu .nav-events a:hover:before { background-image: url(img/resources/nav-icon-events.svg); } #main-menu .resources-menu .sub-menu .nav-case-studies a:hover, #header .header-scroll-nav.affix #main-menu .resources-menu .sub-menu .nav-case-studies a:hover { color: #6466b7 !important; } #main-menu .resources-menu .nav-case-studies a:before { background-image: url(img/resources/nav-icon-gray-case-studies.svg); } #main-menu .resources-menu .nav-case-studies a:hover:before { background-image: url(img/resources/nav-icon-case-studies.svg); } #main-menu .resources-menu .sub-menu .nav-brochures a:hover, #header .header-scroll-nav.affix #main-menu .resources-menu .sub-menu .nav-brochures a:hover { color: #649ac6 !important; } #main-menu .resources-menu .nav-brochures a:before { background-image: url(img/resources/nav-icon-gray-brochures.svg); } #main-menu .resources-menu .nav-brochures a:hover:before { background-image: url(img/resources/nav-icon-brochures.svg); } #main-menu .resources-menu .sub-menu .nav-blog a:hover, #header .header-scroll-nav.affix #main-menu .resources-menu .sub-menu .nav-blog a:hover { color: #63c9d3 !important; } #main-menu .resources-menu .nav-blog a:before { background-image: url(img/resources/nav-icon-gray-blog.svg); } #main-menu .resources-menu .nav-blog a:hover:before { background-image: url(img/resources/nav-icon-blog.svg); } /* Resources Subnav Banner ------------------------------------------------------------------------------- */ .resources-subnav { list-style: none; padding-top: 7px; padding-bottom: 5px; border-bottom: 1px solid #eff0f3; background-color: white; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; -webkit-backface-visibility:hidden; } .resources-subnav.affix { background-color: #d9dce4; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); border-bottom: none; width: 100%; z-index: 1000; top: 72px; } .resources-subnav li { width: 15%; float: left; text-align: center; text-transform: uppercase; font-size: 12px; letter-spacing: 1px; font-weight: 500; border-left: 1px solid #e8eaef; box-sizing: border-box; position: relative; } .resources-subnav.affix li { border-left: 1px solid #ced0d7; } .resources-subnav li:first-child { width: 8%; border-left: none; } .resources-subnav__icon { margin: 0 auto; width: 40px; height: 40px; position: relative; } .resources-subnav__icon:after { content: ''; position: absolute; width: 100%; height: 100%; left: 0; top: 0; opacity: 0; } .resources-subnav li > div:hover .resources-subnav__icon:after { opacity: 1; } .resources-home-arrow { width: 10px; height: 20px; background-image: url(img/resources/arrow-left.svg); position: relative; } .resources-subnav.affix .resources-home-arrow { background-image: url(img/resources/arrow-left-dark.svg); } .resources-home-arrow:after { content: ''; position: absolute; width: 100%; height: 100%; left: 0; top: 0; opacity: 0; background-image: url(img/resources/arrow-left-d6656e.svg); } .resources-subnav li > div:hover .resources-home-arrow:after { opacity: 1; } .resources-subnav li:first-child { height: 54px; } .resources-subnav li:first-child > div { height: 100%; display: flex; align-items: center; justify-content: center; margin-top: 2px; } .resources-subnav li:first-child .resources-subnav__icon { width: 54px; height: 54px; margin: 0; background-image: url(img/resources/subnav-grayscale-folder.svg); } .resources-subnav.affix li:first-child .resources-subnav__icon { background-image: url(img/resources/subnav-grayscale-dark-folder.svg); } .resources-subnav li:first-child .resources-subnav__icon:after { background-image: url(img/resources/subnav-color-folder.svg); } .resources-subnav li:nth-of-type(2) .resources-subnav__icon { background-image: url(img/resources/subnav-grayscale-premium-content.svg); } .resources-subnav li.current:nth-of-type(2) .resources-subnav__icon, .resources-subnav li:nth-of-type(2) .resources-subnav__icon:after { background-image: url(img/resources/subnav-color-premium-content.svg); } .resources-subnav li:nth-of-type(3) .resources-subnav__icon { background-image: url(img/resources/subnav-grayscale-webinars.svg); } .resources-subnav li.current:nth-of-type(3) .resources-subnav__icon, .resources-subnav li:nth-of-type(3) .resources-subnav__icon:after { background-image: url(img/resources/subnav-color-webinars.svg); } .resources-subnav li:nth-of-type(4) .resources-subnav__icon { background-image: url(img/resources/subnav-grayscale-events.svg); } .resources-subnav li.current:nth-of-type(4) .resources-subnav__icon, .resources-subnav li:nth-of-type(4) .resources-subnav__icon:after { background-image: url(img/resources/subnav-color-events.svg); } .resources-subnav li:nth-of-type(5) .resources-subnav__icon { background-image: url(img/resources/subnav-grayscale-case-studies.svg); } .resources-subnav li.current:nth-of-type(5) .resources-subnav__icon, .resources-subnav li:nth-of-type(5) .resources-subnav__icon:after { background-image: url(img/resources/subnav-color-case-studies.svg); } .resources-subnav li:nth-of-type(6) .resources-subnav__icon { background-image: url(img/resources/subnav-grayscale-brochures.svg); } .resources-subnav li.current:nth-of-type(6) .resources-subnav__icon, .resources-subnav li:nth-of-type(6) .resources-subnav__icon:after { background-image: url(img/resources/subnav-color-brochures.svg); } .resources-subnav li:nth-of-type(7) .resources-subnav__icon { background-image: url(img/resources/subnav-grayscale-blog.svg); } .resources-subnav li:nth-of-type(7) .resources-subnav__icon:after { background-image: url(img/resources/subnav-color-blog.svg); } .resources-subnav span { color: #888a94; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .resources-subnav li.current span { font-weight: 600; } .resources-subnav li.current:nth-of-type(2) span, .resources-subnav li:nth-of-type(2):hover span { color: #c33460; } .resources-subnav li.current:nth-of-type(3) span, .resources-subnav li:nth-of-type(3):hover span { color: #ae46b0; } .resources-subnav li.current:nth-of-type(4) span, .resources-subnav li:nth-of-type(4):hover span { color: #653bab; } .resources-subnav li.current:nth-of-type(5) span, .resources-subnav li:nth-of-type(5):hover span { color: #6466b7; } .resources-subnav li.current:nth-of-type(6) span, .resources-subnav li:nth-of-type(6):hover span { color: #6484c0; } .resources-subnav li:nth-of-type(7):hover span { color: #63c9d3; } /* Resources Banner ------------------------------------------------------------------------------- */ .resource-banner { color: white; padding-bottom: 0; padding-top: 80px; overflow: hidden; } .page-template-template-resources .resource-banner { /* The summary page doesn't have the sub-headline "Resources" - Reduce the padding */ padding-top: 60px; } .resource-wrapper { position: relative; } .resource-banner-left { display: inline-block; margin-right: 500px; margin-bottom: 70px; position: relative; } @keyframes bannerSlideUp { 0% { opacity: 0; } 100% { transform: translate(0, -50px); opacity: 1; } } .resource-banner-image { width: 450px; height: 300px; position: absolute; right: 0; bottom: 0; } .folder-mq { display: none; } .folder { opacity: 0; width: 450px; height: 180px; position: absolute; bottom: -100px; perspective: 500px; animation: folderSlideUp .75s ease-out 1s forwards; } .folder-bg { width: 585px; height: 585px; background-image: url(img/resources/folder-bg.svg); position: absolute; bottom: -160px; left: -67.5px; opacity: 0.6; } .folder-back { width: 240px; height: 180px; background-image: url(img/resources/folder-back.svg); position: absolute; left: 105px; bottom: 0px; } .folder-front { width: 240px; height: 180px; background-image: url(img/resources/folder-front.svg); position: absolute; left: 105px; bottom: -25px; transform-origin: 0 108%; transform: rotateX(0deg); animation: folderUnfold 0.5s ease 1.65s forwards; } .folder-arrow { width: 132px; height: 145px; background-image: url(img/resources/arrow.svg); position: absolute; bottom: 0; left: 159px; animation: arrowUp 0.4s ease-out 1.75s forwards; opacity: 0; display: none; } .gradient-mask { width: 450px; height: 100px; position: absolute; left: 0; bottom: -30px; background: linear-gradient(rgba(22,27,47, 0), rgba(22,27,47, 1)); } @keyframes folderAppear { 0% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: .75; } } @keyframes folderSlideUp { 0% { opacity: 0; } 100% { transform: translate(0, -100px); opacity: 1; } } @keyframes folderUnfold { 0% { transform: rotateX(0deg); } 100% { transform: rotateX(-35deg); } } .resource-ball { display: block; width: 50px; height: 50px; background-size: 50px 50px; border-radius: 25px; position: absolute; left: 200px; bottom: 0; transform: scale(.1); } .resource-ball-1 { width: 35px; height: 35px; background-size: 35px 35px; -webkit-animation: ball1 0.4s ease-out 1.75s forwards; animation: ball1 0.4s ease-out 1.75s forwards; } .resource-ball-2 { -webkit-animation: ball2 0.4s ease-out 1.75s forwards; animation: ball2 0.4s ease-out 1.75s forwards; } .resource-ball-3 { width: 75px; height: 75px; background-size: 75px 75px; border-radius: 40px; left: 187.5px; -webkit-animation: ball3 0.4s ease-out 1.75s forwards; animation: ball3 0.4s ease-out 1.75s forwards; } .resource-ball-4 { -webkit-animation: ball4 0.4s ease-out 1.75s forwards; animation: ball4 0.4s ease-out 1.75s forwards; } .resource-ball-5 { width: 35px; height: 35px; background-size: 35px 35px; -webkit-animation: ball5 0.4s ease-out 1.75s forwards; animation: ball5 0.4s ease-out 1.75s forwards; } .resource-banner-premium-content { background-image: url(img/resources/icon-premium-content.svg); } .resource-banner-premium-content.current-resource { background-image: url(img/resources/icon-premium-content-hover.svg); } .resource-banner-webinars { background-image: url(img/resources/icon-webinars.svg); } .resource-banner-webinars.current-resource { background-image: url(img/resources/icon-webinars-hover.svg); } .resource-banner-case-studies { background-image: url(img/resources/icon-case-studies.svg); } .resource-banner-case-studies.current-resource { background-image: url(img/resources/icon-case-studies-hover.svg); } .resource-banner-events { background-image: url(img/resources/icon-events.svg); } .resource-banner-events.current-resource { background-image: url(img/resources/icon-events-hover.svg); } .resource-banner-brochures { background-image: url(img/resources/icon-brochures.svg); } .resource-banner-brochures.current-resource { background-image: url(img/resources/icon-brochures-hover.svg); } @keyframes ball1 { 0% { opacity: 0; } 100% { transform: translate(-153px, -165px) scale(1); opacity: 1; } } @keyframes ball2 { 0% { opacity: 0; } 100% { transform: translate(-110px, -235px) scale(1); opacity: 1; } } @keyframes ball3 { 0% { opacity: 0; } 100% { transform: translate(0, -265px) scale(1); opacity: 1; } } @keyframes ball4 { 0% { opacity: 0; } 100% { transform: translate(110px, -235px) scale(1); opacity: 1; } } @keyframes ball5 { 0% { opacity: 0; } 100% { transform: translate(169px, -165px) scale(1); opacity: 1; } } @keyframes arrowUp { 0% { opacity: 0; } 100% { transform: translate(0, -100px); opacity: 1; } } /* Premium Content ------------------------------------------------------------------------------- */ .premium-content { justify-content: space-between; margin: -15px; } .premium-content__title { margin-bottom: 35px; color: #c33460; } .premium-content__section-description { width: 70%; text-align: center; flex: none; margin-bottom: 35px; color: #888a94; font-size: 18px; } .pc-article { width: 50%; display: inline-block; box-sizing: border-box; padding: 15px; } .pc-article-container { display: block; } .pc-thumbnail { width: 40%; float: left; border-right: 1px solid #eff0f3; box-sizing: border-box; } .pc-meta { width: 60%; padding: 28px; box-sizing: border-box; float: left; } .pc-meta span { text-transform: uppercase; color: #c33460; font-weight: 500; font-size: 12px; letter-spacing: 2px; } .pc-meta h3 { margin: 10px 0 15px; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .pc-article-container:hover h3 { /* TODO Make this a common transition */ color: #c33460; } .pc-meta p { color: #888a94; } /* Webinar ------------------------------------------------------------------------------- */ .upcoming-webinars h2, .webinars h2 { /* Space out the h2 from the section a little more than on other pages */ margin-bottom: 80px; } .upcoming-webinars h2:after, .webinars h2:after { margin-top: 40px; } .upcoming-webinar { border-bottom: 1px solid #d9dce4; padding: 40px 0; } .upcoming-webinar:nth-of-type(1) { padding-top: 0; } .upcoming-webinar:last-child { padding-bottom: 0; border-bottom: none; } .calendar-icon { width: 150px; height: 150px; margin-right: 40px; border-radius: 100px; background-color: #eff0f3; flex: none; display: flex; align-items: center; justify-content: center; font-family: 'Lato', sans-serif; } .calendar-icon span { display: block; text-align: center; text-transform: uppercase; margin: 0 auto; } .calendar-icon-header { width: 90px; background-color: #c33460; border-top-left-radius: 5px; border-top-right-radius: 5px; padding: 5px 0; color: white; letter-spacing: 2px; position: relative; } .calendar-icon-header:before, .calendar-icon-header:after { width: 6px; height: 20px; position: absolute; top: -10px; border-radius: 2px; background-color: #6a6d7a; content: ''; } .calendar-icon-header:before { left: 17px; } .calendar-icon-header:after { right: 17px; } .calendar-icon-page { width: 90px; height: 60px; background-color: white; } .day { line-height: 40px; font-size: 35px; color: #6a6d7a; } .time { line-height: 20px; font-size: 12px; color: #aeb1bc; letter-spacing: 1px; } .upcoming-webinar-details { position: relative; } .upcoming-webinar h3 { margin-bottom: 5px; margin-right: 150px; } .upcoming-webinar h3 a { color: #6a6d7a; } .upcoming-webinar h3:hover a { color: #c33460; } .webinar-speaker { font-size: 14px; color: #aeb1bc; } .upcoming-webinar p { margin: 20px 150px 0 0; color: #888a94; } .upcoming-webinar .button { margin: 0; border-radius: 5px; padding: 10px 30px; position: absolute; right: 0; top: 50%; transform: translate(0, -50%); } .upcoming-webinar .button:after { border-radius: 5px; } .webinars-legend { display: flex; justify-content: center; } .webinar-type-filter { padding: 12px; margin: 0 10px 40px 10px; text-transform: uppercase; letter-spacing: 1px; color: #9a189c; border: 1px solid #9a189c; border-radius: 3px; cursor: pointer; cursor: hand; } .webinar-type-filter.selected { background-color: #9a189c; color: white; } .webinars-container { margin-left: -15px; margin-right: -15px; } .webinar { display: flex; flex-wrap: wrap; align-items: stretch; } .webinar-article { width: 33.33%; display: inline-block; box-sizing: border-box; padding: 15px; } .webinar-article.inactive { /*display: none;*/ } .webinar-article-container { display: block; height: 100%; box-shadow: 0 1px 6px 0 rgba(106, 109, 122, .4); background-color: #f1f1f1; } .webinar-article img { width: 100%; border-bottom: 1px solid #eff0f3; display: block; } .webinar-meta { padding: 28px; box-sizing: border-box; } .webinar-meta h3 { line-height: 26px; margin-bottom: 10px; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .webinar-article-container:hover h3 { color: #c33460; } .webinar-meta p { color: #888a94; } /* Case Studies ------------------------------------------------------------------------------- */ .cs-article { position: relative; width: 33.33%; display: inline-block; box-sizing: border-box; padding-top: 15px; padding-bottom: 15px; } .cs-article-container { display: block; height: 100%; background-color: white; box-shadow: 0 1px 6px 0 rgba(106, 109, 122, .4); } .cs-article-container:hover .cs-container-hover { opacity: 1; } .cs-thumbnail { width: 100%; box-sizing: border-box; padding: 0 20px; } .cs-description { padding: 0 28px 28px 28px; text-align: center; font-size: 16px; line-height: 22px; font-weight: 500; } .cs-article:nth-of-type(3n+1) { padding-right: 20px; } .cs-article:nth-of-type(3n+2) { padding-left: 10px; padding-right: 10px; } .cs-article:nth-of-type(3n) { padding-left: 20px; } .cs-container-hover { position: absolute; background-color: #c33460; opacity: 0; width: 100%; height: 100%; top: 0; box-sizing: border-box; padding: 28px 28px; text-align: center; } .quote-mark { width: 32px; height: 25px; background-image: url(img/resources/quote-mark.svg); margin: 0 auto 16px auto; opacity: 0.5; } .cs-quote { font-size: 13px; line-height: 24px; color: white; letter-spacing: 1px; } .customer-details { margin-top: 10px; font-size: 12px; font-style: italic; letter-spacing: 1px; color: white; opacity: 0.5; } .customer-details__name { text-transform: uppercase; font-weight: 600; } /* Events ------------------------------------------------------------------------------- */ .events-section h2 { margin: 0 auto 20px auto; width: 58%; } .events-pr { text-align: center; color: #888a94; margin-bottom: 40px; } .events-section a { color: #9a189c; } .legend { border-top: 1px solid #eff0f3; padding-top: 20px; padding-left: 30px; box-sizing: border-box; text-align: center; } .legend-divider { width: 1px; height: 100%; border-left: 1px solid #eff0f3; margin-right: 4px; } .event-action-filter { color: #aeb1bc; cursor: pointer; cursor: hand; text-transform: uppercase; letter-spacing: 1px; font-size: 14px; margin-bottom: 8px; display: inline-block; margin: 20px; } .event-action-filter.filter-on { color: #9a189c; } .event-action-filter.filter-on .legend-circle { background-color: #9a189c; } .event-action.filter-on { background-color: #9a189c; opacity: 1; } .legend h4 { padding-bottom: 10px; margin-bottom: 20px; font-weight: 500; color: #6a6d7a;; font-size: 18px; } .legend-circle { color: white; background-color: #d9dce4; width: 26px; height: 26px; margin-right: 10px; display: inline-block; border-radius: 13px; text-align: center; line-height: 26px; } .events { display: flex; flex-wrap: wrap; margin: 0 -28px; } .event { width: 33.33%; color: #888a94; padding: 16px 20px; box-sizing: border-box; text-align: center; display: flex; flex-direction: column; } .ticket-top-border { border-style: solid; border-width: 18px 28px 23px; -moz-border-image: url(img/events/ticket-border-top.png) 36 56 46 repeat; -webkit-border-image: url(img/events/ticket-border-top.png) 36 56 46 repeat; -o-border-image: url(img/events/ticket-border-top.png) 36 56 46 repeat; border-image: url(img/events/ticket-border-top.png) 36 56 46 fill repeat; display: flex; flex-grow: 1; /* Only stretch this container */ } .event-summary { border: 1px solid rgba(154, 24, 156, .2); border-radius: 3px; margin-top: 10px; padding: 20px; } .event-type { text-transform: uppercase; color: #9a189c; opacity: 1; letter-spacing: 3px; padding: 0 10px 0; font-size: 14px; margin-bottom: 4px; display: block; } .event-summary h3 { padding: 6px 20px; } .event-summary h3 a { color: #9a189c; } .event-summary img { padding: 4px 0 10px 0; width: 100%; box-sizing: border-box; } .event-summary p { color: #888a94; } .event-summary .speaker-image { width: 75px; height: 75px; padding: 0; margin: 20px 0 17px 0; } .webinar-speaker { line-height: 18px; } .webinar-speaker__name { color: #63c9d3; font-weight: 600; } .webinar-speaker__title { font-size: 14px; color: #aeb1bc; } .ticket-bottom-half { width: 100%; flex-grow: 0; /* Don't stretch this container */ } .event-divider { margin: 0 29px; border-top: 1px dashed #aeb1bc; border-left: none; margin-top: -1px; } .ticket-bottom-border { width: 100%; box-sizing: border-box; border-style: solid; border-width: 18px 28px 10px; -moz-border-image: url(img/events/ticket-border-bottom.png) 36 56 38 repeat; -webkit-border-image: url(img/events/ticket-border-bottom.png) 36 56 38 repeat; -o-border-image: url(img/events/ticket-border-bottom.png) 36 56 38 repeat; border-image: url(img/events/ticket-border-bottom.png) 36 56 38 fill repeat; } .event-bottom-container { border: 1px solid #d9dce4; border-radius: 3px; padding: 20px 10px; margin: 4px 0 7px; } .event-date__start, .event-date__end { text-transform: uppercase; font-weight: 500; font-size: 20px; font-family: 'Lato', sans-serif; line-height: 26px; } .event-date__divider { font-style: italic; font-size: 14px; padding: 5px 0 8px 0; } .event-bottom__location { border-top: 1px solid #d9dce4; margin-top: 23px; padding-top: 20px; position: relative; text-transform: uppercase; letter-spacing: 2px; } .event-map-marker-container { background-color: #f9f9fa; width: 30px; height: 30px; border-radius: 15px; position: absolute; top: -14px; left: 50%; transform: translate(-50%, 0); } .event-map-marker { font-size: 24px !important; } .event-signup { width: 100%; box-sizing: border-box; border-style: solid; border-width: 9px 28px 27px; -moz-border-image: url(img/events/ticket-border-signup.png) 9 56 27 repeat; -webkit-border-image: url(img/events/ticket-border-signup.png) 9 56 27 repeat; -o-border-image: url(img/events/ticket-border-signup.png) 9 56 27 repeat; border-image: url(img/events/ticket-border-signup.png) 9 56 27 fill repeat; } .event-action { display: inline-block; background-color: #aeb1bc; margin: 6px 1px 4px 1px; width: 26px; height: 26px; border-radius: 15px; line-height: 26px; color: white; opacity: 0.5; font-size: 14px; } .signup-button { padding: 9px 20px; width: 100%; box-sizing: border-box; margin: 8px 0 10px; background-color: #8327a3; } /* Brochures ------------------------------------------------------------------------------- */ .centercode-brochures .webinar-article { width: 25%; } .centercode-brochures .webinar-meta { padding: 20px; } .centercode-brochures .webinar-article-container:hover h3 { color: #6484c0; } /* CV101 Page ------------------------------------------------------------------------------- */ .intro-to-cv .wrapper { flex-direction: row-reverse; } .product-development-lifecycle { width: 50%; padding-right: 60px; box-sizing: border-box; } .what-is-cv-info { width: 50%; } .methodology { width: 100%; margin: 30px 0; box-sizing: border-box; border-left: 8px solid #9a189c; border-radius: 5px; padding: 20px 30px 10px 30px; position: relative; background-color: #eff0f3; display: flex; align-items: center; } .methodology-icon { width: 150px; height: 150px; background-color: rgba(255, 255, 255, 0.7); border-radius: 75px; } .methodology h3 { flex: none; text-align: left; color: #9a189c; font-size: 26px; margin-bottom: 20px; border-bottom: 1px solid #d9dce4; padding-top: 10px; padding-bottom: 20px; font-weight: 600; position: relative; } .methodology__definition { padding: 5px 0 5px 30px; line-height: 1.5; color: #6a6d7a; } .methodology-description p { padding-bottom: 15px; letter-spacing: 0.1px; } .methodology-description p:last-child { padding-bottom: 20px; } .methodology-description .methodology-emphasis { font-size: 20px; letter-spacing: 0; font-weight: 500; } .methodology-problem { margin-top: 20px; font-style: italic; } .methodology-problem__answers { font-size: 18px; color: #888a94; } .methodology-problem__question { font-size: 20px; color: #9a189c; font-weight: 500; } .methodology__definition h3 { font-size: 36px; color: #000; /*display: block;*/ } .methodology-subtext-container { color: #9a189c; font-weight: 500; } .methodology-subtext-separator { position: relative; font-size: 21px; top: -4px; } .methodology-subtext { font-size: 30px; } .methodology-detail { background-color: #c33460; border-radius: 5px; color: white; display: inline-block; font-weight: 600; font-size: 14px; letter-spacing: 2px; margin: 0 10px 10px 0; padding: 5px 12px 4px; text-align: center; text-transform: uppercase; } .cv-benefits-graph { text-align: center; } .cv-benefits-graph .section-description { width: 85%; } #cv-benefits-svg { width: 75%; margin: 0 auto; display: block; } .cv-benefits .icon-card h3 { font-size: 22px; margin-bottom: 12px; } .graph-container { width: 75%; margin: 0 auto; position: relative; } .roi-graph-placeholder { position: relative; height: auto; width: 100%; } #roi-graph { position: absolute; height: auto; left: 0; top: 0; width: 100%; } .graph-anchor { position: absolute; } .graph-dot { position: absolute; width: 28px; height: 28px; border-radius: 14px; left: 50%; top: 50%; transform: translate(-50%, -50%); } .graph-dot:before { content: ''; width: 14px; height: 14px; border-radius: 7px; position: absolute; left: 7px; top: 7px; -webkit-transition: background-color .25s ease; -moz-transition: background-color .25s ease; -ms-transition: background-color .25s ease; -o-transition: background-color .25s ease; transition: background-color .25s ease; } .up-line .graph-dot { background-color: #6484c0; } .up-line .graph-dot:before { background-color: #a2b5d9; } .up-line.quality { left: 18.5698%; top: 65.6712%; } .up-line.reviews { left: 34.3159%; top: 53.1833%; } .up-line.sales { left: 61.8716%; top: 31.7047%; } .up-line.cust-sat { left: 73.6811%; top: 22.5138%; } .up-line.planning { left: 85.4828%; top: 13.1955%; } .down-line .graph-dot { background-color: #aeb1bc; } .down-line .graph-dot:before { background-color: #6484c0; } .down-line.quality-cost { left: 18.5698%; top: 16.1733%; } .down-line.dev-time { left: 34.3159%; top: 28.361%; } .down-line.time-to-market { left: 61.8716%; top: 49.8314%; } .down-line.returns { left: 73.6811%; top: 59.0249%; } .down-line.support-cost { left: 85.4828%; top: 68.3186%; } .graph-dot:hover:before { background-color: white; } .graph-anchor .popover { position: absolute !important; width: 200px; left: -100px !important; top: -170px !important; background-color: white; color: #6a6d7a; border-radius: 5px; } .graph-anchor .popover-title { background-color: white; border-bottom: none; font-size: 16px; text-transform: uppercase; padding-top: 16px; border-top-left-radius: 5px; border-top-right-radius: 5px; color: #6484c0; } .popover.top > .arrow { border-top-color: white; } .popover-content { padding: 16px; font-size: 14px; line-height: 18px; padding-top: 0; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .graph-anchor .popover .fade { } .circle-popover { background-color: rgba(0,0,0,0.85); border-radius: 5px; bottom: 42px; box-shadow: 0 0 5px rgba(0,0,0,0.4); color: #fff; opacity: 0; font-size: 12px; font-family: 'Helvetica',sans-serif; left: -95px; padding: 7px 10px; position: absolute; width: 200px; z-index: 4; } #up-planning:hover .circle-popover { opacity: 1; } .ppp { width: 50%; box-sizing: border-box; padding-left: 50px; } .centercode-helps .button { margin-top: 40px; } /* Resources Page ------------------------------------------------------------------------------- */ .what-is-cv { text-align: center; } .what-is-cv .section-description { margin-bottom: 40px; } .cv-101-button { border-radius: 5px; } .cv-101-button:after { border-radius: 5px; } .more-resources { margin-top: 80px; position: relative; display: flex; flex-wrap: wrap; } .more-resources h4 { position: absolute; left: 50%; top: -7px; transform: translate(-50%, 0); font-size: 16px; text-transform: uppercase; letter-spacing: 2px; font-weight: 600; color: #888a94; padding: 0 15px; background-color: white; } /* TODO move to common? */ .icon-link { flex: 1 1 33%; padding: 50px; box-sizing: border-box; display: inline-block; border-top: 1px solid #eff0f3; } .icon-link > div { position: relative; } .more-resources div:nth-of-type(3n+2) { border-left: 1px solid #eff0f3; border-right: 1px solid #eff0f3; } .icon-link__icon { width: 100px; height: 100px; background-color: #eff0f3; border-radius: 50px; margin: 0 auto 20px auto; position: relative; } .icon-link__icon:after { position: absolute; width: 100px; height: 100px; left: 0; top: 0; content: ""; opacity: 0; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .icon-link > div:hover .icon-link__icon:after { opacity: 1; } .icon-link:nth-of-type(1) .icon-link__icon { background-image: url(img/resources/nav-icon-gray-premium-content.svg); } .icon-link:nth-of-type(1) .icon-link__icon:after { background-image: url(img/resources/nav-icon-premium-content.svg); } .icon-link:nth-of-type(2) .icon-link__icon { background-image: url(img/resources/nav-icon-gray-webinars.svg); } .icon-link:nth-of-type(2) .icon-link__icon:after { background-image: url(img/resources/nav-icon-webinars.svg); } .icon-link:nth-of-type(3) .icon-link__icon { background-image: url(img/resources/nav-icon-gray-events.svg); } .icon-link:nth-of-type(3) .icon-link__icon:after { background-image: url(img/resources/nav-icon-events.svg); } .icon-link:nth-of-type(4) .icon-link__icon { background-image: url(img/resources/nav-icon-gray-case-studies.svg); } .icon-link:nth-of-type(4) .icon-link__icon:after { background-image: url(img/resources/nav-icon-case-studies.svg); } .icon-link:nth-of-type(5) .icon-link__icon { background-image: url(img/resources/nav-icon-gray-brochures.svg); } .icon-link:nth-of-type(5) .icon-link__icon:after { background-image: url(img/resources/nav-icon-brochures.svg); } .icon-link:nth-of-type(6) .icon-link__icon { background-image: url(img/resources/nav-icon-gray-blog.svg); } .icon-link:nth-of-type(6) .icon-link__icon:after { background-image: url(img/resources/nav-icon-blog.svg); } .what-is-cv img { width: 100px; height: 100px; background-color: #eff0f3; border-radius: 50px; margin-bottom: 20px; } .more-resources h3 { text-transform: uppercase; font-weight: 500; color: #6a6d7a; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .icon-link:nth-of-type(1) > div:hover h3 { color: #c33460; } .icon-link:nth-of-type(2) > div:hover h3 { color: #ae46b0; } .icon-link:nth-of-type(3) > div:hover h3 { color: #653bab; } .icon-link:nth-of-type(4) > div:hover h3 { color: #6466b7; } .icon-link:nth-of-type(5) > div:hover h3 { color: #6484c0; } .icon-link:nth-of-type(6) > div:hover h3 { color: #63c9d3; } .more-resources p { margin: 10px 0 0 0; line-height: 30px; color: #aeb1bc; } .icon-link > div:hover p { color: #888a94; } .featured-resources { padding-bottom: 75px; } .featured-resources .card-list { margin-left: -10px; margin-right: -10px; } .featured-resources .icon-card { border-left: 8px solid #9a189c; } .featured-resources .icon-card-container { box-sizing: border-box; width: 33.33%; padding: 10px; } .featured-resources .icon-card { padding-right: 50px; } .featured-resources .card-info { margin-left: 0; } .featured-resources p { text-transform: uppercase; color: #9a189c; letter-spacing: 2px; font-size: 14px; margin-bottom: 4px; } .featured-resources h3 { height: 48px; color: #6a6d7a; } .arrow-right { width: 10px; height: 20px; background-image: url(img/resources/arrow-right.svg); position: absolute; right: 20px; top: 50%; transform: translate(0, -50%); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .featured-resources .icon-card:hover .arrow-right { background-image: url(img/resources/arrow-right-c274c4.svg); } /* Company Page ------------------------------------------------------------------------------- */ .company-banner { padding-top: 0; padding-bottom: 0; position: relative; overflow: hidden; } .company-banner .wrapper { color: white; text-align: center; padding-top: 110px; padding-bottom: 130px; position: relative; z-index: 1; } .company-banner h1 { width: 75%; margin-left: auto; margin-right: auto; letter-spacing: 0.5px; line-height: 50px; font-size: 40px; font-weight: 600; text-align: center; } .company-banner img { position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0); z-index: 0; } .about { padding-bottom: 80px; } .about .wrapper { text-align: center; } .about h2 { color: #c33460; } .about p { width: 75%; margin: 0 auto; text-align: center; color: #6a6d7a; } .about-highlight { font-size: 24px; line-height: 32px; } .about .section-subtitle { margin-bottom: 15px; } .management-section { padding: 70px 0 0 0; padding: 70px 0 75px 0; } .management-section .wrapper { position: relative; padding: 0; } .management-section h2 { color: #9a189c; } .management-section h2:after { background-color: #aeb1bc; } .mgmt-container { margin-left: -15px; margin-right: -15px; display: flex; flex-wrap: wrap; justify-content: center; } .mgmt-photo { width: 25%; margin: 15px 0; box-sizing: border-box; padding: 0 15px; float: left; position: relative; } .mgmt-container img { width: 100%; box-sizing: border-box; padding: 7px; background-color: white; border: 1px solid #d9dce4; position: relative; } .manager-info { position: absolute; left: 22px; right: 22px; top: 7px; bottom: 10px; background-color: white; border: 1px solid #d9dce4; background-color: rgba(22,27,47, 0.5); opacity: 0; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .mgmt-photo:hover .manager-info { opacity: 1; } .manager-info-wrapper { width: 100%; padding: 0 10px; box-sizing: border-box; position: absolute; bottom: 24px; text-align: center; } .manager-info-wrapper h3 { color: white; text-transform: uppercase; letter-spacing: 1px; font-size: 16px; line-height: 16px; } .manager-info-wrapper p { color: white; letter-spacing: 1px; opacity: 0.7; font-size: 13px; line-height: 15px; } .centercode-life { padding-top: 90px; padding-bottom: 90px; } .centercode-life .wrapper { display: flex; align-items: center; } .centercode-life h2:after { background-color: #c33460; } .centercode-life .left-side { width: 50%; display: inline-block; float: left; padding-right: 70px; box-sizing: border-box; } .centercode-life .left-side p { font-size: 18px; line-height: 32px; } .centercode-life .button { background-color: white; border-radius: 5px; } .centercode-life a.button { color: #343742; margin: 25px 0 0 0; font-weight: 500; } .centercode-life .right-side { width: 50%; display: inline-block; background-color: #161b2f; padding: 30px 30px 45px; box-sizing: border-box; border-radius: 3px; text-align: center; } img.quote { width: 64px; height: 50px; } .colored-background .employee-quote { font-style: italic; font-size: 15px; letter-spacing: 1px; margin-top: 10px; opacity: 1; color: rgba(255,255,255,0.6); } .employee-quote .quoter { color: #c33460; text-transform: uppercase; font-weight: 500; font-style: normal; font-size: 14px; display: block; margin-top: 5px; } .collage img { display: block; } /* .collage img:hover { -webkit-filter: none; filter: none; }*/ .collage .dont-panic, .collage .codeless-integrations { float: left; width: 30%; } .container-2x4 { float: left; width: 10%; } .container-2x4 img { width: 100%; } .collage .lobby { width: 15%; float: left; } .container-3x4 { width: 15%; height: 100%; float: left; } .collage .tech-quote { width: 100%; } .container-3x2 { width: 100%; float: left; } .collage .booth { width: 66.66%; height: 50%; float: left; } .collage .pool { width: 33.33%; height: 50%; } .company-contact { padding-top: 65px; padding-bottom: 80px; } .company-contact h2 { margin-bottom: 60px; } .company-contact p { text-align: center; } .contact-cards { margin-left: -15px; margin-right: -15px; margin-bottom: 60px; display: flex; flex-wrap: wrap; } .section .contact-card a { color: #c33460; font-weight: 500; } /* Contact Page ------------------------------------------------------------------------------- */ .contact-banner { text-align: center; position: relative; height: 350px; color: white; background-image: url(img/contact/girl-holding-phone.png); background-repeat: no-repeat; background-position: center bottom; padding-top: 0; } .contact-banner .wrapper { height: 100%; display: flex; align-items: center; justify-content: center; } .contact-banner h1 { margin-top: -60px; font-weight: 500; } .contact-card-section { position: relative; clear: both; } .contact-card-section .contact-cards { margin-top: -130px; } .contact-card-container { width: 33.33%; padding: 0 15px; box-sizing: border-box; } .contact-card { width: 100%; height: 100%; padding: 25px; box-sizing: border-box; background-color: white; border-radius: 3px; text-align: center; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .contact-card img { width: 75px; height: 75px; display: block; margin: 0 auto; } .contact-card h3 { color: #c33460; text-transform: uppercase; font-weight: 600; margin-top: 15px; position: relative; display: inline-block; } .contact-card h3:before { content: ''; width: 30px; border-top: 1px solid #c33460; position: absolute; left: -40px; top: 50%; transform: translate(0, -50%); } .contact-card h3:after { content: ''; width: 30px; border-top: 1px solid #c33460; position: absolute; right: -40px; top: 50%; transform: translate(0, -50%); } .contact-card p { color: #888a94; margin: 15px 0 20px; } .contact-card a { color: #c33460; } .contact-card .button { padding: 10px 10px; border-radius: 5px; background: white; font-weight: 500; border: 1px solid #c33460; color: #c33460; } .question { padding-top: 0; padding-bottom: 80px; } .question .wrapper { text-align: center; } .question h2 { margin-bottom: 20px; color: #c33460; } .question p { width: 60%; margin: 0 auto; color: #6a6d7a; } .question p a { color: #c33460; } .map-section { height: 400px; position: relative; } .map-section h2 { font-size: 27px; font-weight: 500; margin-bottom: 30px; } .map-section h2 a { color: #c33460; } .map-section h2:after { background-color: #eff0f3; margin-top: 15px; } .map-section p { font-weight: 500; } .map-section .lato-number { font-size: 16px; font-weight: 400; } .map-section a { color: #6a6d7a; } .map-section a:hover { color: #c33460 } .map-section .fa { color: #c33460; padding-right: 10px; } .map-section .fa-envelope { font-size: 16px; } .map-info { position: absolute; max-width: 1180px; width: 100%; height: 1px; top: 0; left: 50%; transform: translate(-50%, 0); } .headquarters { width: 40%; height: 400px; position: absolute; top: 0; } .address { position: absolute; top: 50%; transform: translate(0, -50%); } #map { width: 100%; height: 100%; display: inline-block; } .gm-style-mtc { display: none; } .gmnoprint a, .gmnoprint span, .gm-style-cc { display:none; } .gmnoprint div { background:none !important; } /** Marketo Form ---------------------------------------------------------*/ .question .form { background-size: cover; /* TODO make this configurable */ background-position: center center; } .question .form-container { max-width: 860px; margin: 0 auto; padding: 90px 0 110px 0; text-align: center; } .question .form-container__title { font-size: 32px; font-weight: 500; color: white; } .question .form-container__description { font-size: 18px; font-weight: 300; color: white; padding-top: 25px; opacity: 0.6; } /* Careers ------------------------------------------------------------------------------- */ .careers-banner { text-align: center; position: relative; padding-top: 0; padding-bottom: 13px; overflow: hidden; } .careers-banner .wrapper { position: relative; height: 100%; margin-top: -50px; } .careers-banner-text { top: 0; position: absolute; left: 5%; width: 90%; height: 100%; display: flex; align-items: flex-end; justify-content: center; } .careers-banner h1 { position: relative; z-index: 1; font-size: 42px; color: white; margin-top: 120px; } .careers-banner a { margin-top: 10px; margin-bottom: 90px; margin-left: 0; } .careers-banner img { position: relative; display: block; top: -10px; width: 826px; left: 50%; transform: translate(-50%, 0); } /* Jazz ------------------------------------------------------------------------------- */ #resumator-wrapper { position: relative; } .resumator-department-heading { float: left; width: 350px; margin: 0 !important; padding-top: 20px; } .resumator-department-heading:before { width: 100%; height: 1px; background-color: #d9dce4; content: ''; position: absolute; margin-top: -20px; } .resumator-job { margin-left: 350px; padding-bottom: 20px !important; } .resumator-job-title { float: left; border-top: none !important; } .resumator-job-location { display: none; } .resumator-job-info { float: right !important; margin-top: 25px !important; color: #aeb1bc !important; text-transform: uppercase; font-size: 14px; letter-spacing: 1px; } .resumator-job-info-details { clear: both !important; } a.resumator-job-link, .resumator-job-description-text a { color: #c33460 !important; } .resumator-hide-details { font: 12px/1.3em Arial,Verdana,sans-serif !important; } #resumator-logo { margin-top: 50px !important; text-align: center !important; } /* Privacy Policy ------------------------------------------------------------------------------- */ .privacy-policy-banner { background-color: #161b2f; padding-top: 50px; } .privacy-policy-banner h1 { text-align: center; letter-spacing: 0; margin-bottom: 30px; color: white; } .privacy-policy-banner p { margin-bottom: 0; color: white; color: rgba(255,255,255,0.8); } .privacy-policy-banner a { color: #c33460; } .policy-summary { width: 80%; background-color: #eff0f3; border-left: 8px solid #c33460; border-right: 8px solid #c33460; padding: 40px; margin: 5px auto 60px auto; border-radius: 5px; font-size: 18px; color: #6a6d7a; } .privacy-policies ol.policy-list { width: 80%; margin: 0 auto; } .privacy-policies li:first-child h2, .privacy-policies li:first-child .policy-content { padding-top: 0; } .privacy-policies li:last-child .policy-content { padding-bottom: 0; } .privacy-policies h2 { padding-top: 40px; float: left; width: 250px; text-align: right; letter-spacing: 0; line-height: 32px; } .policy-content { margin-left: 300px; border-left: 1px solid #eff0f3; padding: 30px 0 30px 50px; } .privacy-policies h3 { padding-top: 0; color: #6a6d7a; margin-bottom: 12px; font-size: 24px; line-height: 28px } .privacy-policies ol.lettered-list { padding-left: 1em; } .privacy-policies ol.lettered-list > li { padding-left: 0.5em; padding-bottom: 10px; } .privacy-policies ol.lettered-list { list-style-type: lower-alpha; color: #6a6d7a; padding-top: 20px; margin-bottom: 12px; font-size: 24px; font-weight: 500; } .privacy-policies .lettered-list p { font-weight: 400; } .privacy-policies ul { line-height: 28px; list-style-type: disc; list-style-position: outside; margin-bottom: 10px; padding-left: 2em; margin-top: 10px; } .privacy-policies ul li { font-size: 16px; font-weight: 400; } /* GDPR Page ------------------------------------------------------------------------------- */ .page-template-template-gdpr h1 { margin-bottom: 0; font-size: 72px; } .page-template-template-gdpr .single { padding-top: 50px; } .page-template-template-gdpr .policy-summary { width: 100%; box-sizing: border-box; margin-bottom: 40px; border-left: 8px solid #9a189c; border-right: 8px solid #9a189c; display: flex; align-items: center; } .gdpr-icon { width: 120px; height: 120px; background-size: 120px 120px; background-image: url(img/gdpr/gdpr-icon.svg); flex: none; margin-right: 36px; } .page-template-template-gdpr .policy-summary a { color: #9a189c; } .page-template-template-gdpr .entry-content:before { content: " "; display: table; } .page-template-template-gdpr .entry-content:after { content: " "; clear: both; display: table; } .toc-container { width: 33.33%; display: table; float: left; position: relative; min-height: 1px; box-sizing: border-box; } .toc { -webkit-backface-visibility: hidden; border: 1px solid #eff0f3; border-radius: 5px; padding: 25px; margin-top: 16px; width: 315px; box-sizing: border-box; position: relative; } .toc.affix-top { position: relative; } .toc.affix { top: 90px; } .toc.affix-bottom { position: absolute; } .single .entry-content h2.toc-header { text-transform: uppercase; letter-spacing: 0.5px; color: #343742; font-size: 20px; padding-top: 0; margin: 10px 0 30px 0; line-height: 20px; } .toc-header:after { height: 3px; width: 50px; border-radius: 2px; position: absolute; display: block; content: ""; background-color: #9a189c; margin: 20px 0 0 0; left: 1.25em; } .single .entry-content ul.toc { list-style-type: none; margin-bottom: 0; padding-left: 3em; } .single .entry-content ul.toc, .single .entry-content ul.toc li { margin-bottom: 0; } .single .entry-content ul.toc li.toc-chapter { margin-bottom: 8px; } .single .entry-content ul.toc li.toc-subchapter { text-indent: 0em; padding-left: 1em; font-size: 16px; position: relative; line-height: 20px; margin-bottom: 12px; } .single .entry-content ul.toc li.toc-subchapter:before { content: " "; width: 6px; height: 6px; position: absolute; left: -8px; top: 5px; border: 1px solid #d9dce4; border-radius: 4px; } .single .entry-content .toc .toc-chapter a { font-weight: 500; } .single .entry-content .toc a { font-weight: 400; color: #6a6d7a; -webkit-transition: letter-spacing 0s; -moz-transition: letter-spacing 0s; -ms-transition: letter-spacing 0s; -o-transition: letter-spacing 0s; transition: letter-spacing 0s; } .single .entry-content .toc .active a { color: #9a189c; font-weight: 600; letter-spacing: -0.5px; } .gdpr-content { display: table; width: 66.66%; float: left; } .page-template-template-gdpr .single .entry-content h2 { font-weight: 600; } .page-template-template-gdpr .single .entry-content h3 { color: #343742; line-height: 40px; } .page-template-template-gdpr .single .entry-content ul { padding-left: 2.5em; } .page-template-template-gdpr .single .entry-content li h4 { display: inline-block; text-indent: 0em; font-size: 18px; color: #6a6d7a; margin-bottom: 0; padding-top: 4px; } .page-template-template-gdpr .single .entry-content li p { text-indent: 0; margin-bottom: 8px; line-height: 28px; font-size: 16px; } /* Certification Page ------------------------------------------------------------------------------- */ .page-template-template-certification .banner { background-image: url(img/certification/certification-banner.png); background-position: center bottom; background-repeat: no-repeat; } .page-template-template-certification .banner .wrapper { padding-bottom: 90px; } .certification { padding: 70px 0 90px 0; } .certification-subsection { margin: 0 0 40px 0; display: flex; align-items: center; justify-content: flex-start; } .certification-section-text { width: 70%; } .certification .features { display: flex; margin: 0 0 20px 0; } .certification .feature { width: 50%; position: relative; padding: 20px 30px 0 20px; } .certification .features li:before { position: absolute; left: 0; top: 30px; font-family: "Font Awesome 5 Pro"; font-weight: 900; content: '\f058'; color: #c33460; } .seal-ribbon { width: 30%; padding: 0 0 0 60px; box-sizing: border-box; object-fit: contain; } .seal-ribbon.seal-mobile { display: none; } .certification .button { background-color: #c33460; width: 50%; padding: 15px; line-height: 18px; } .certification-professionals h2 { margin-bottom: 60px; } .page-template-template-certification .policy-summary { display: flex; width: 100%; align-items: center; margin-bottom: 0; box-sizing: border-box; background-color: white; } .graduation-icon { width: 120px; height: 120px; background-size: 120px 120px; background-image: url(img/certification/graduation-cap-icon.svg); flex: none; margin-right: 36px; background-color: #eff0f3; border-radius: 60px; } .certification-table { padding-top: 10px; } .tablepress { border: 1px solid #d9dce4 !important; border-collapse: separate !important; border-radius: 3px; overflow: hidden; } .tablepress-table-name { margin-bottom: 12px; font-weight: 400; } .dataTables_wrapper { position: relative; } .dataTables_filter { position: absolute; right: 0; top: -48px; } .dataTables_filter label { width: 400px; display: inline-block !important; padding-left: 75px; box-sizing: border-box; position: relative; } .dataTables_filter label:before { content: 'Search:'; position: absolute; left: 8px; top: 50%; transform: translate(0, -50%); text-transform: uppercase; letter-spacing: 1px; color: #c33460; } .dataTables_filter label input { width: 100% !important; margin: 0 !important; border: 1px solid #aeb1bc; padding: 4px 8px !important; display: block !important; font-size: 18px !important; border-radius: 3px; position: relative; background-color: white; } .dataTables_filter label input:focus { outline-width: 0; } .tablepress caption { display: none; } .tablepress thead th, .tablepress thead th.column-2, .tablepress thead th.column-4 { font-family: freight-sans-pro, sans-serif; font-weight: 500 !important; background-color: #c33460 !important; color: white; letter-spacing: 0.5px; font-size: 18px; padding: 12px 8px; } .tablepress td { font-weight: 500; } .tablepress .column-2, .tablepress .column-4 { font-family: 'Lato', sans-serif; font-size: 14.5px; } .dataTables_info, .dataTables_paginate { padding-top: 8px !important; text-transform: uppercase; color: #c33460 !important; font-family: 'Lato', sans-serif; letter-spacing: 1px; font-size: 10px; } .dataTables_info { padding-left: 8px !important; } .dataTables_paginate { margin-right: 8px !important; } .paginate_button.disabled { display: none; } #tablepress-1_wrapper .dataTables_paginate a { color: #c33460 !important; text-decoration: none !important; } #tablepress-1_wrapper .paging_simple .paginate_button.next:after, #tablepress-1_wrapper .paging_simple .paginate_button.previous:before { text-shadow: none !important; color: #c33460; font-size: 10px !important; line-height: 15px !important; } /* Conference Recordings ------------------------------------------------------------------------------- */ .page-template-template-conference-recordings .banner { color: white; text-align: center; padding-top: 90px; padding-bottom: 120px; background-image: url(img/conference-videos/conference.png); background-position: center bottom; background-repeat: no-repeat; } .page-template-template-conference-recordings h1 { margin-bottom: 80px; } .page-template-template-conference-recordings h1:after { height: 5px; width: 50px; border-radius: 3px; position: absolute; display: block; content: ""; background-color: #9a189c; margin: 40px 0 0 0; left: 50%; transform: translate(-50%, 0); } .page-template-template-conference-recordings .banner p { max-width: 900px; margin: 0 auto; color: white; } .page-template-template-conference-recordings #content { padding-top: 90px; } .page-template-template-conference-recordings .single .entry-content:after { content: ' '; display: table; clear: both; margin-bottom: 20px; } .mobile-recordings-nav { display: none; margin-bottom: 10px; } .mobile-nav-header { display: block; padding: 0 0 10px 10px; font-size: 24px; letter-spacing: 1px; font-weight: 500; } .recording-content { margin-left: 400px; min-height: 440px; } .col-sm-3 { width: 350px; float: left; } .single .entry-content ul.toc-sidenav { list-style-type: none; width: 350px; text-indent: 0; padding-left: 0; margin-bottom: 0; } .toc-sidenav.affix { top: 90px; } .single .entry-content ul.toc-sidenav li { margin-bottom: 0; border-radius: 5px; font-size: 16px; font-weight: 500; -webkit-transition: letter-spacing 0s; -moz-transition: letter-spacing 0s; -ms-transition: letter-spacing 0s; -o-transition: letter-spacing 0s; transition: letter-spacing 0s; } .single .entry-content ul.toc-sidenav li:hover { background-color: #eff0f3; } .single .entry-content ul.toc-sidenav li.active { background-color: #9a189c; } .single .entry-content ul.toc-sidenav li.active a { color: white; } .single .entry-content ul.toc-sidenav a { color: #888a94; display: block; padding: 0 10px; -webkit-transition: letter-spacing 0s; -moz-transition: letter-spacing 0s; -ms-transition: letter-spacing 0s; -o-transition: letter-spacing 0s; transition: letter-spacing 0s; } .single .entry-content ul.toc-sidenav a:hover { color: #9a189c; } .page-template-template-conference-recordings .single .entry-content h2 { margin-bottom: 35px; font-size: 36px; padding-top: 0; } .recording-link { display: flex; align-items: center; justify-content: space-between; } .single .entry-content .recording-link h3 { padding-bottom: 8px; color: #343742; font-size: 24px; } .single .entry-content .recording:not(:first-of-type) { padding-top: 25px; } .single .entry-content .recording-link.coming-soon h3 { } .single .entry-content .recording-link.coming-soon { pointer-events: none; cursor: default; } .recording-link i { font-family: FontAwesome; float: right; width: 10px; flex: none; font-size: 24px; padding-right: 16px; } .coming-soon-label { background-color: #9a189c; padding: 8px 8px; color: white; border-radius: 4px; text-transform: uppercase; letter-spacing: 1.5px; font-size: 14px; line-height: 18px; } .recording { border-bottom: 1px solid #d9dce4; } .recording-details { /* Remove transitions to fix jQuery animation on slideToggle */ -moz-transition: none; -webkit-transition: none; -o-transition: color 0 ease-in; transition: none; padding-bottom: 25px; } .single .entry-content p.recording-speaker { font-size: 14px; text-transform: uppercase; letter-spacing: 1px; color: #9a189c; margin-bottom: 8px; line-height: 18px; } .video-browser { position: relative; width: 100%; margin: 20px auto; } .video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; } .video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .hidden { left: -999999px; top: -999999px; position: absolute; } /* 404 Page ------------------------------------------------------------------------------- */ .not-found-banner { padding-top: 20px; } .not-found-banner .wrapper { text-align: center; } .not-found-banner h1 { font-weight: 900; font-size: 200px; letter-spacing: 6px; color: #d9dce4; opacity: 0.75; margin-bottom: 10px; } .not-found-banner h2 { font-weight: 600; color: #d9dce4; opacity: 0.5; font-size: 32px; } .not-found-info { text-align: center; } /* Blank Page Template ------------------------------------------------------------------------------- */ .page-template-template-blank .wrapper.entry-content { padding-top: 70px; padding-bottom: 70px; max-width: 960px; } .page-template-template-blank h1 { margin-bottom: 0; } /* Product Page Template ------------------------------------------------------------------------------- */ /* LP Content CSS */ .content-details-container { margin-left: -30px; margin-right: -30px; } .content-details-container__title { font-size: 32px; font-weight: 500; color: #2B2E35; margin-bottom: 80px; text-align: center; } .detail-grid { display: flex; flex-wrap: wrap; align-items: stretch; margin-bottom: -30px; } .detail-grid-item { float: left; width: 33.33%; display: flex; align-items: stretch; } .detail { padding: 0 30px 30px 30px; box-sizing: border-box; margin: 0 30px; background-color: #EFEFF0; margin-bottom: 70px; width: 100%; } .detail__number { width: 48px; height: 48px; margin: 0 auto; background: linear-gradient(-90deg, #9A189C, #E24932); border-radius: 24px; position: relative; top: -24px; text-align: center; vertical-align: middle; font-family: 'Lato', sans-serif; line-height: 48px; color: white; font-size: 18px; } .detail-summary { width: 100%; height: 90px; margin-top: -30px; margin-bottom: 20px; display: flex; align-items: stretch; } .icon-container { border-bottom: 5px solid #c33460; display: flex; align-items: center; height: 85px; } .detail-grid-item:first-child .icon-container { border-bottom-color: #d23e4a; } .detail-grid-item:last-child .icon-container { border-bottom-color: #af267e; } .icon-container__icon { color: #c33460; display: table-cell; font-size: 38px; vertical-align: middle; } .detail-grid-item:first-child .icon-container__icon { color: #d23e4a; } .detail-grid-item:last-child .icon-container__icon { color: #af267e; } .title-container { padding-left: 18px; display: flex; align-items: center; flex-grow: 2; border-bottom: 2px solid #CED0D7; } .title-container__title { color: #2B2E35; font-size: 17px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .detail__blurb { line-height: 1.6em; } .content-details-container .more-info a + a { margin-left: 20px; } /** Media Queries ---------------------------------------------------------*/ @media only screen and (max-width: 1240px) { .content-details-container { margin: 0; } .detail { /*margin: 0;*/ } .detail-grid { display: flex; align-items: stretch; } .detail-grid-item { display: flex; align-items: stretch; } .detail-grid-item:nth-child(1) .detail, .detail-grid-item:nth-child(4) .detail, .detail-grid-item:nth-child(7) .detail { margin-right: 20px; } .detail-grid-item:nth-child(2) .detail, .detail-grid-item:nth-child(5) .detail, .detail-grid-item:nth-child(8) .detail { margin-left: 10px; margin-right: 10px; } .detail-grid-item:nth-child(3) .detail, .detail-grid-item:nth-child(6) .detail, .detail-grid-item:nth-child(9) .detail { margin-left: 20px; } } @media only screen and (max-width: 960px) { .content-image-container { margin-right: 25px; } .content-details-container .more-info a + a { margin-left: 10px; } } @media only screen and (max-width: 860px) { .content { padding-top: 70px; } .content-container { display: block; text-align: center; } .content-intro-mq { display: block; } .content-image-container { margin: 30px 0; display: inline-block; } .content-intro .content-intro__type, .content-intro .content-intro__title { display: none; } .content-intro__description { margin-top: 0; } .detail-grid { display: block; } .detail-grid-item { width: 100%; } .detail-grid-item:nth-child(1) .detail, .detail-grid-item:nth-child(2) .detail, .detail-grid-item:nth-child(3) .detail, .detail-grid-item:nth-child(4) .detail, .detail-grid-item:nth-child(5) .detail, .detail-grid-item:nth-child(6) .detail, .detail-grid-item:nth-child(7) .detail, .detail-grid-item:nth-child(8) .detail, .detail-grid-item:nth-child(9) .detail { margin: 0 0 60px 0; } .detail-grid-item:last-chid .detail{ margin: 0; } .content-details-container .more-info a + a { margin-left: 0; } } @media only screen and (max-width: 640px) { /** Content ---------------------------------------------------------*/ .content-details-container__title { margin-bottom: 60px; } } @media only screen and (max-width: 520px) { .content-image-container { height: 260px; } .content-bg { width: 260px; height: 260px; } .content-thumbnail { } .content-overlay { width: 260px; height: 260px; } /** Content - Premium Content & Webinar & Other Specific Rules ---------------------------------------------------------*/ .content-thumbnail.premium-content { width: 84.651px; height: 108.837px; background-size: 84.651px 108.837px; top: 103px; left: 99px; } .content-thumbnail.webinar { width: 206.855px; height: 114.92px; background-size: 206.855px 114.92px; left: 53.145px; top: 96.793px; } } /* LP Product CSS */ .product { background-color: #161B2F; text-align: center; position: relative; overflow: hidden; } .product-container { position: relative; } .product-text { height: 475px; display: flex; align-items: center; width: 80%; margin: 0 auto; position: relative; } .content-intro__description a { color: #ae46b0; outline: 0; } /* .post-image__duotone { position: absolute; display: block; left: 50%; bottom: 0; transform: translate(-50%, 0); }*/ .blur-container { width: 1180px; padding-bottom: 475px; position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 0); } .blur { position: absolute; background-image: url(https://www2.centercode.com/hubfs/images/graphics/banner-img-filter.svg); background-size: 100% 100%; width: 100%; height: 100%; } .content-intro__title { color: white; } .content-intro-mq { margin: 0 auto; } .content-intro__description { opacity: 1; color: rgba(255,255,255,0.75); margin-bottom: 0; } .content-intro-description-mq { background-color: #EFEFF0; display: none; padding: 40px; } .content-intro-description-mq .content-intro__description { color: black; margin-bottom: 0; } .content-details-container__title { color: #6a6d7a; } .detail-grid-item:nth-of-type(1) .detail__number, .detail-grid-item:nth-of-type(4) .detail__number, .detail-grid-item:nth-of-type(7) .detail__number { background: linear-gradient(-90deg, #c33460, #E24933); } .detail-grid-item:nth-of-type(2) .detail__number, .detail-grid-item:nth-of-type(5) .detail__number, .detail-grid-item:nth-of-type(8) .detail__number { background: #c33460; } .detail-grid-item:nth-of-type(3) .detail__number, .detail-grid-item:nth-of-type(6) .detail__number, .detail-grid-item:nth-of-type(9) .detail__number { background: linear-gradient(-90deg, #9a189c, #c33460); } .more-info { width: 100%; text-align: center; } .more-info-button { margin: 40px auto 0 auto; background: linear-gradient(-90deg, #9A189C, #c33460); border-radius: 5px; padding: 20px 40px; font-size: 18px; border-radius: 29px; } .solutions { padding-top: 70px; padding-bottom: 70px; background-color: #EFEFF0; } .solutions h2 { color: #6a6d7a; margin-bottom: 60px; line-height: 36px; } .criteria { margin-left: -20px; margin-right: -20px; display: flex; flex-wrap: wrap; } .criterion { width: 25%; text-align: center; border-left: 1px solid #d9dce4; padding: 20px; box-sizing: border-box; float: left; } .criterion:first-child { border-left: none; } .solution-icon { width: 100px; height: 100px; border-radius: 50px; background-color: white; text-align: center; line-height: 100px; font-size: 50px; margin: 0 auto 20px auto; color: #aeb1bc; } .solutions h3 { margin-bottom: 10px; color: #6a6d7a; font-size: 20px; font-weight: 500; } .criterion p { color: #888a94; line-height: 24px; font-size: 18px; } @media only screen and (max-width: 1100px) { .criterion p { font-size: 16px; } .post-image__duotone { width: auto; } } @media only screen and (max-width: 960px) { .criterion { width: 50%; } .criterion p { font-size: 18px; } .criterion:first-child { border-bottom: 1px solid #d9dce4; padding-bottom: 40px; } .criterion:nth-child(2) { border-bottom: 1px solid #d9dce4; padding-bottom: 40px; } .criterion:nth-child(3) { border-left: none; padding-top: 40px; } .criterion:nth-child(4) { padding-top: 40px; } } @media only screen and (max-width: 860px) { .content-intro { display: none; } .post-image__duotone { width: 800px; } .product-text { height: 337px; } .blur-container { width: 840px; padding-bottom: 337px; } .content-intro-description-mq { display: block; } } @media only screen and (max-width: 560px) { .content-intro-description-mq { padding: 30px 0; } .content-intro-description-mq .content-intro__description { font-size: 16px; text-align: center; } .solutions { padding-bottom: 50px; } .solutions h2 { margin-bottom: 10px; } .criterion { width: 100%; border: none; padding: 40px; } .criterion:nth-child(3) { border-bottom: 1px solid #d9dce4; } } /* Merge-in Product CSS */ .product-banner { padding: 0; overflow: hidden; } .product-banner .wrapper { padding: 70px 0; position: relative; } .product-banner h1 { color: white; font-size: 52px; font-weight: 400; padding-bottom: 10px; margin-bottom: 35px; } .product-banner h1:after { background-color: #c33460; } .product-page-description { position: relative; margin-left: auto; margin-right: auto; z-index: 1; } .product-banner .product-page-description p { padding-bottom: 20px; rgba(255, 255, 255, 0.75); text-align: center; } .content-details h2 { margin-bottom: 70px; } .product-cta { width: calc(100% + 40px); display: flex; margin-top: 60px; margin-left: -20px; margin-right: -20px; } .product-cta-button-container { width: 50%; display: inline-block; box-sizing: border-box; padding: 0 20px; margin-bottom: 10px; } .full-width-cta-button { justify-content: center; } .full-width-cta-button .product-cta-button-container { width: auto; } .full-width-cta-button .product-cta-button-container .button { padding: 30px 50px; } .product-cta-button-container .button { width: 100%; box-sizing: border-box; background-color: #888a94; padding: 30px 25px; border-radius: 5px; margin: 0; font-size: 24px; } .banner-image-container { background-repeat: no-repeat; background-position: center -60px; box-sizing: border-box; height: 100%; position: absolute; top: 0px; width: 100%; z-index: 0; } .product-image { width: 100%; position: relative; } .section.product-platform-section .section-title { margin-bottom: 30px; } .section.product-platform-section .section-description { font-size: 24px; margin: 0; width: 100%; } .section.product-platform-section .product-cta { margin-top: 50px; } @media only screen and (max-width: 560px) { .product-cta { display: block; } .product-cta-button-container { width: auto; display: block; } .product-cta-button-container .button { padding: 22px 25px; display: block; font-size: 20px; line-height: 28px; } } /* Audience Page Blocks ------------------------------------------------------------------------------- */ /* Universal Block Styles */ /* Remove top/bottom margins from first and last child */ .remove-block-margins > :first-child { margin-top: 0 !important; } .remove-block-margins > :last-child { margin-bottom: 0 !important; } .section-block { background-repeat: no-repeat; background-position: center bottom; position: relative; } .section-block i, .section-block em { font-style: italic; } .section-block .section-anchor-offset { position: absolute; top: -72px; } .section-block .reverse-order { flex-direction: row-reverse; } .section-block .subheading { display: block; font-size: 18px; text-transform: uppercase; letter-spacing: 2px; color: #c33460; font-weight: 500; margin-bottom: 20px; } .section-block h1 { font-size: 52px; line-height: 60px } .section-block h1:after { background-color: #c33460; } .section-block h2 { width: 100%; text-align: center; margin: -10px auto 50px; } .section-block h2.divider:after { content : ''; height: 3px; width: 50px; border-radius: 3px; position: absolute; display: block; content: ""; background-color: #c33460; margin: 25px 0 0 0; left: 50%; transform: translate(-50%, 0); } .section-block h3 { font-size: 28px; line-height: 36px; } .section-block#block_solutions-product h3, .section-block#block_solutions-industry h3, .section-block#block_solutions-role h3 { line-height: 30px; } .section-block#block_solutions-role .subheading { font-size: 20px; } .section-block#block_solutions-role h3 { font-size: 18px; font-weight: 400; } .section-block#block_solutions-role h3 a { color: #6a6d7a; } .section-block h4 { font-size: 22px; font-weight: 500; margin-top: 16px; margin-bottom: 8px; } .section-block p { line-height: 30px; } .section-block ul li { line-height: 24px; margin-bottom: 10px; } .section-block .h2-description { max-width: 960px; margin: 0 auto; text-align: center; margin-bottom: 50px; } .section-block .h2-description p { font-size: 20px; } .section-block a { color: #c33460; } .section-block .block-cta:not(.button) { margin-top: 12px; font-size: 20px; font-weight: 500; text-decoration: underline; } .section-block .button { border-radius: 5px; font-size: 18px; line-height: 22px; } .block-image img { width: 100%; } .block-image.is-photo img { border-radius: 20px; box-shadow: 0 3px 10px 0 rgba(0, 0, 0, .18); } /* Proportionally scale the icon circle background to fit the container */ .blocks-icon-container { max-width: 150px; } .blocks-icon-scaler { height: 0; padding-bottom: 100%; /* Square */ position: relative; } .blocks-icon-circle { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background-color: #eff0f3; } .blocks-icon-container svg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #c33460; } /* H1 Description Image Block */ .h1_description_image .wrapper { display: flex; align-items: center; } .h1_description_image .block-description { width: 60%; box-sizing: border-box; padding-right: 30px; } .h1_description_image .button { margin: 24px 0 0 0; } .h1_description_image .button.secondary-button { margin: 0 0 0 12px; background: transparent; color: #c33460; } @media only screen and (max-width: 600px) { .h1_description_image .button.secondary-button { margin-left: 0px; margin-right: 0px; margin-top: 24px; } } .h1_description_image .block-image { width: 40%; box-sizing: border-box; padding-left: 30px; } /* H1 Center Icon Block */ .h1_center_icon.navy { background-color: #161b2f; } .h1_center_icon { text-align: center; } .h1_center_icon .wrapper { max-width: 960px; } .h1_center_icon img { margin-bottom: 32px; max-width: 200px; border-radius: 100px; } .h1_center_icon.navy h1 { color: white; } .h1_center_icon h1:after { left: 50%; transform: translate(-50%, -50%); } .h1_center_icon.navy p { color: rgba(255,255,255,0.75); } .h1_center_icon .button { margin-top: 24px; } /* Anchor Links */ .anchor_links { padding-bottom: 0; } .anchor_links .links { margin: 0 auto; text-align: center; } .anchor_links .link-container:first-child { padding-left: 0; margin-left: 0; border-left: none; } .anchor_links .link-container { padding-left: 20px; margin-left: 20px; border-left: 1px solid #aeb1bc; display: inline-block; margin-bottom: 20px; } .anchor_links a { font-size: 16px; text-transform: uppercase; letter-spacing: 1px; color: #6a6d7a; } .anchor_links a:hover { color: #c33460; } /* H3 Description Image Block */ .h3_description_image .h3-description-image-entry, .h3_description_icon .h3-description-image-entry { display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 70px; position: relative; } .h3_description_image .tight-entries .h3-description-image-entry { margin-bottom: 20px; } .h3_description_image .h3-description-image-entry .section-anchor-offset, .h3_description_icon .h3-description-image-entry .section-anchor-offset { top: -120px; } .h3_description_image .block-description, .h3_description_icon .block-description { padding-right: 30px; box-sizing: border-box; } .h3_description_image .block-description.fortySixty { width: 40%; } .h3_description_image .block-description.fiftyFifty { width: 50%; } .h3_description_image .block-description.sixtyForty { width: 60%; } .h3_description_image .block-description.seventyThirty, .h3_description_icon .block-description.seventyThirty { width: 70%; } .h3_description_image .seventyThirty { max-width: 960px; } .h3_description_image .reverse-order .block-image, .h3_description_icon .reverse-order .block-image { padding-left: 0; padding-right: 30px; } .h3_description_image .reverse-order .block-description, .h3_description_icon .reverse-order .block-description { padding-right: 0; padding-left: 30px; } .h3_description_image .subheading, .h3_description_icon .subheading { margin-bottom: 12px; } .h3_description_image h3, .h3_description_icon h3 { margin-bottom: 12px; } .h3_description_image p, .h3_description_icon p { margin-bottom: 12px; } .h3_description_image p + .button { margin-top: 8px; } .h3_description_image ul, .h3_description_icon ul { color: #6a6d7a; font-size: 18px; margin-bottom: 12px; list-style-type: disc; padding-left: 1em; } .h3_description_image .block-image, .h3_description_icon .block-image { padding-left: 30px; box-sizing: border-box; } .h3_description_image .block-image.fortySixty { width: 60%; } .h3_description_image .block-image.fiftyFifty { width: 50%; } .h3_description_image .block-image.sixtyForty { width: 40%; } .h3_description_image .block-image.seventyThirty, .h3_description_icon .block-image.seventyThirty { width: 30%; } .h3_description_image .button, .h3_description_icon .button { margin-left: 0; margin-right: 0; } /* H3 Description Icon */ .h3_description_icon .wrapper { max-width: 960px; } .h3_description_icon .h3-description-image-entry { margin-bottom: 60px; flex-wrap: nowrap; } .h3_description_icon .block-description { padding-right: 40px; } .h3_description_icon .reverse-order .block-description { padding-left: 40px; } .h3_description_icon .blocks-icon-container { width: 150px; max-width: 150px; flex: none; } .h3_description_icon .block-image { text-align: center; } /* Half Page Image */ .half_page_image { padding: 0; } .whole-page-wrapper { display: flex; } .half-page-image { width: 50%; background-size: cover; } .half-page-image-mobile { display: none; } .half-page-content { width: 50%; padding: 70px 0; } .half-page-content-wrapper { max-width: 590px; padding-left: 70px; box-sizing: border-box; } .half_page_image .reverse-order .half-page-content-wrapper { padding-left: 0; padding-right: 70px; float: right; } .half-page-content img { margin-bottom: 20px; } .half-page-content h3 { margin-bottom: 12px; } .section-block .customer-quote { font-style: italic; font-size: 22px; line-height: 36px; } .block-customer-name { margin-top: 20px; display: block; font-size: 20px; font-weight: 500; color: #c33460; } .block-customer-position { margin-top: 6px; text-transform: uppercase; letter-spacing: 1px; font-size: 14px; display: block; color: #888a94; } .half_page_image .block-cta { margin-top: 10px; display: block; } /* H3 Center Body Block */ .h3_center_body { text-align: center; } .h3_center_body .h3-center-body-entry { margin-bottom: 70px; position: relative; } .h3_center_body .h3-center-body-entry .section-anchor-offset { top: -120px; } .h3_center_body h3, .h3_center_body p, .h3_center_body img { width: 100%; max-width: 800px; margin: 0 auto; } .h3_center_body h3 { font-size: 28px; margin-bottom: 28px; } .h3_center_body p { margin-bottom: 12px; } .h3_center_body img { display: block; margin-top: 30px; margin-bottom: 10px; } .h3_center_body .button { margin-top: 30px; width: 280px; box-sizing: border-box; } .h3_center_body .button:nth-of-type(2) { margin-left: 30px; margin-top: 0; } /* Common Card Styles */ .block-cards { display: flex; flex-wrap: wrap; text-align: center; margin-left: -20px; margin-right: -20px; justify-content: center; } .block-card { padding: 20px; box-sizing: border-box; } .block-card-wrapper { height: 100%; } /* CTA Cards */ .cta_cards { padding-bottom: 50px; } .cta_cards h2:not(.divider) { margin-bottom: 40px; } .cta_cards .block-card { width: 33.33%; margin-bottom: 10px; } .cta_cards .block-card-wrapper { padding: 30px 20px 20px 20px; box-shadow: 0 1px 5px 0 rgba(106, 109, 122, .3); position: relative; box-sizing: border-box; background-color: white; } .cta_cards .subheading { font-size: 14px; letter-spacing: 1px; margin-top: 10px; margin-bottom: 10px; line-height: 18px; } .cta_cards h3 { margin-bottom: 10px; font-size: 22px; line-height: 32px; } .cta_cards .block-card-wrapper p { margin-bottom: 50px; } .cta_cards img { width: 100%; margin: 10px auto; } .cta_cards .blocks-icon-container { margin: 20px auto 15px; } .cta_cards .button { font-size: 14px; padding: 15px; position: absolute; left: 0; bottom: 0; width: 50%; margin: 0; box-sizing: border-box; border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; background: #c33460; } .cta_cards .block-card-wrapper .button.single-cta { width: 100%; } .cta_cards .block-card-wrapper .button.dual-cta { border-bottom-right-radius: 0; } .cta_cards .block-card-wrapper .button:nth-of-type(2) { left: 50%; border-bottom-left-radius: 0; border-left: 1px solid white; } /* Image Cards */ .image_cards { padding-bottom: 50px; } .image_cards .block-cards.card-border { margin-bottom: 20px; } .image_cards .thirds .block-card { width: 33.33%; } .image_cards .fourths .block-card { width: 25%; } .image_cards .fifths .block-card { width: 20%; } .image_cards .block-card-wrapper { box-sizing: border-box; } .image_cards h3 { margin-bottom: 8px; font-size: 22px; } .image_cards p { font-size: 16px; line-height: 28px; } .image_cards img { margin-top: 20px; margin-bottom: 20px; max-width: 200px; width: 100%; } .image_cards .fifths img { } .image_cards .blocks-icon-container { margin: 20px auto; } .image_cards .card-border .block-card-wrapper { box-shadow: 0 1px 5px 0 rgba(106, 109, 122, .3); background-color: white; padding: 24px 20px 20px 20px; border-radius: 3px; } /* Icon Description Tiles */ .icon_description_tiles { padding-bottom: 40px; } .icon_description_tiles h2 { margin-bottom: 40px; } .icon_description_tiles h2.divider { margin-bottom: 50px; } .icon_description_tiles .subheading { font-size: 14px; letter-spacing: 1px; margin-bottom: 8px; } .icon_description_tiles h3 { font-size: 22px; font-weight: 500; margin-bottom: 6px; } .icon_description_tiles h3 a { color: #161b2f; } .icon_description_tiles .block-cta:not(.button) { margin-top: 10px; font-size: 18px; font-weight: 400; display: inline-block; } .icon_description_tiles#block_solutions-role .block-cta:not(.button) { margin-top: 2px; } .tiles { margin-left: -12px; margin-right: -12px; display: flex; flex-wrap: wrap; } .tiles.whole { max-width: 800px; margin: 0 auto; } .tile { margin-bottom: 30px; } .icon_description_tiles .tile.thirds { width: 33.33%; } .icon_description_tiles .tile.half { width: 50%; margin-bottom: 10px; } .icon_description_tiles .tile.whole { width: 100%; } .tile-wrapper { padding: 12px; display: flex; } .block-icon { width: 60px; flex: none; text-align: center; /* width: 72px; height: 72px; border-radius: 36px; background-color: #eff0f3; position: relative;*/ } .icon_description_tiles .tiles.large-icon { margin-left: -30px; margin-right: -30px; } .icon_description_tiles .large-icon .block-icon { width: 200px; margin-top: 0; } .icon_description_tiles#block_solutions-product .large-icon .block-icon { width: 235px; margin-left: -35px; } .icon_description_tiles#block_solutions-industry .large-icon .block-icon img { border-radius: 100px; } .icon_description_tiles .large-icon .tile-wrapper { align-items: center; padding: 30px; } .block-icon.has-subheading { /*margin-top: 24px;*/ } .block-icon img { max-width: 100%; } .icon_description_tiles .blocks-icon-container { max-width: 100%; } /* .block-icon i, .block-icon svg { color: #c33460; }*/ .icon_description_tiles .block-description { padding-left: 16px; } .icon_description_tiles .block-description.no-left-padding { padding-left: 0; } .icon_description_tiles p { line-height: 24px; font-size: 16px; } /* Brand Carousel */ .brand_carousel h2 { margin-bottom: 30px; } .brand_carousel .block-card { width: 16.6666%; } .brand_carousel img { width: 100%; } /* Phases */ .phase-steps { display: flex; } .step { width: 33.33%; box-sizing: border-box; } .step .step-icon-container { padding: 20px 0; margin-bottom: 30px; position: relative; min-width: 150px; } .step:first-child .step-icon-container { width: 100%; } .step:last-child .step-icon-container { width: 100%; } .step-number { position: absolute; color: white; font-size: 14px; left: 30px; top: 5px; font-family: 'Lato', sans-serif; display: none; } .step-number:before { content: ''; background-color: #d9dce4; width: 24px; height: 24px; border-radius: 12px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: -1; } .step .icon { max-width: 150px; margin: 0 auto; display: block; } .phases .blocks-icon-container { margin: 0 auto; } .step h3 { margin-bottom: 8px; } .arrows { display: flex; } .arrow { width: 100%; height: 16px; position: relative; } .step:first-child .arrow:before, .step:not(:first-child):not(:last-child) .arrow:before, .step:last-child .arrow:before, .step:last-child .arrow:after { border-top: 8px solid transparent; border-bottom: 8px solid transparent; content: ''; height: 0; position: absolute; width: 0; } .step .arrow:after { content: ''; background-color: white; position: absolute; width: 7px; height: 16px; } /* .step:first-child .arrow:after, .step:nth-of-type(2) .arrow:after { content: ''; background-color: white; position: absolute; width: 7px; height: 16px; }*/ .step:first-child .arrow { background-color: #e14934; border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .step:not(:last-child) .arrow:after { right: -2px; top: 0; z-index: 2; } .step:nth-of-type(2) .arrow{ background-color: #c33460; } .phase-steps.phase-fourths .step:nth-of-type(2) .arrow { background-color: #d23e4a; } .phase-steps.phase-fourths .step:nth-of-type(3) .arrow { background-color: #af267e; } .step:not(:first-child):not(:last-child) .arrow:before { border-left: 8px solid #e14934; left: -5px; top: 0; z-index: 3 } .phase-steps.phase-fourths .step:nth-of-type(3) .arrow:before { border-left: 8px solid #d23e4a; } .step:first-child .arrow:before { border-left: 8px solid white; right: -10px; top: 0; z-index: 2; } .step:last-child .arrow:before { border-left: 8px solid white; left: 2px; top: 0; z-index: 2; } .step:last-child .arrow:after { border-left: 8px solid #c33460; left: -5px; top: 0; z-index: 3 } .phase-steps.phase-fourths .step:last-child .arrow:after { border-left-color: #af267e; } .step:last-child .arrow { background-color: #9a189c; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } /* HACK to get third of four arrows to display correctly */ .third-arrow { border-left: 8px solid white; border-top: 8px solid transparent; border-bottom: 8px solid transparent; content: ''; height: 0; position: absolute; width: 0; left: 2px; } .step-details { padding: 30px 30px; } .step-details p { font-size: 16px; line-height: 24px; color: #6a6d7a; } .step-details a { font-weight: 500; } /* Override default related posts style to prevent unsavory horizontal scrolling on smaller screens */ .rp4wp-related-posts { width: auto !important; } /* Newsroom Template ------------------------------------------------------------------------------- */ .newsroom-banner { color: white; padding-bottom: 0; padding-top: 80px; overflow: hidden; } .newsroom-banner h1 { font-size: 44px; line-height: 1.25; } .newsroom-wrapper { position: relative; } .newsroom-banner-left { display: inline-block; margin-right: 500px; margin-bottom: 70px; position: relative; } .newsroom-banner-image { width: 400px; height: 400px; position: absolute; right: 24px; bottom: 0; background-image: url(img/newsroom/icon-newsroom.svg); } .newsroom .section h2 { text-align: center; font-weight: normal; font-size: 44px; margin-bottom: 72px; } .newsroom .section h2:after { content : ''; height: 3px; width: 50px; border-radius: 3px; position: absolute; display: block; content: ""; margin: 25px 0 0 0; left: 50%; transform: translate(-50%, 0); } .newsroom .section.recent-stories h2 { color: #B32977; } .newsroom .section.recent-stories h2:after { background-color: #B32977; } .newsroom .section.research { background-color: #EFF0F3; } .newsroom .section.research h2 { color: #653BAB; } .newsroom .section.research h2:after { background-color: #653BAB; } .newsroom .section.company-news h2 { color: #6484C1; } .newsroom .section.company-news h2:after { background-color: #6484C1; } .newsroom .section.all-stories h2 { color: #B32977; } .newsroom .section.all-stories h2:after { background-color: #B32977; } .newsroom-cards { display: flex; flex-wrap: wrap; margin: 0 -15px; } .newsroom-cards .type-post { box-sizing: border-box; width: 33.33%; display: flex; align-items: stretch; padding: 0 15px; margin-bottom: 33px; } @media only screen and (max-width: 1080px) { .newsroom-cards .type-post { width: 50%; } } @media only screen and (max-width: 700px) { .newsroom-cards .type-post { width: 100%; } } .newsroom .research .pc-meta p { font-size: 16px; line-height: 1.5; } .newsroom .research .pc-meta span { color: #653BAB; } .newsroom .research .pc-article-container:hover h3 { color: #653BAB; } .newsroom .research .pc-thumbnail { width: 30%; } .newsroom .research .pc-meta { width: 70%; padding: 21px; } @media only screen and (max-width: 1080px) { .newsroom .research .pc-thumbnail { width: 20%; } .newsroom .research .pc-meta { width: 80%; } .newsroom .research .pc-meta p { font-size: 18px; line-height: 32px; } } @media only screen and (max-width: 900px) { .newsroom .research .pc-thumbnail { width: 30%; } .newsroom .research .pc-meta { width: 70%; } } @media only screen and (max-width: 700px) { .newsroom .research .pc-thumbnail { width: 40%; } .newsroom .research .pc-meta { width: 60%; } } @media only screen and (max-width: 650px) { .newsroom .research .pc-meta p { line-height: 24px; } .newsroom .research .pc-meta { width: 100%; padding: 20px; } } @media only screen and (max-width: 560px) { .newsroom .research .pc-thumbnail { width: 100%; border-bottom: 1px solid #eff0f3; border-right: none; } .newsroom .research .pc-meta { width: 100%; padding: 20px; } } .newsroom-card { width: 100%; min-height: 250px; background-color: #fff; position: relative; box-shadow: 0 1px 5px 0 rgba(106, 109, 122, .3); border-radius: 3px; overflow: hidden; display: flex; } .newsroom-card:hover { box-shadow: 0 0 15px 0 rgba(106, 109, 122, .5) } .newsroom .section .button { border-radius: 5px; margin: 11px auto; display: block; width: 128px; } .newsroom .section.research .button { background-color: #653BAB; margin-top: 44px; } .newsroom .section.company-news .button { background-color: #6484C1; } .newsroom .section .button:hover { filter: brightness(105%); } .newsroom .entry-meta-summary { padding: 4px 0; } .newsroom .entry-meta-summary span { float: left; } .newsroom .entry-meta-summary__category { display: none; } .newsroom .entry-meta-summary__date { float: left; } .newsroom .research .post-stripe { background-color: #653BAB; } .newsroom .company-news .post-stripe { background-color: #6484C1; } .newsroom .recent-stories { overflow: auto; } .newsroom .recent-stories .feed-container { box-sizing: border-box; float: left; width: 50%; } .newsroom .all-stories .feed-container { padding: 0 60px; } @media only screen and (max-width: 560px) { .newsroom .all-stories .feed-container { padding: 0; } } .newsroom .feed-item { border-bottom: 1px solid #D9DCE4; padding-bottom: 12px; margin-bottom: 12px; } .newsroom .feed-item:last-of-type { border-bottom: none; } .newsroom .feed-item-source { font-family: 'Lato', sans-serif; font-size: 11px; color: #6A6D7A; text-transform: uppercase; } .newsroom .feed-item-headline { margin: 6px 0 12px; color: #343742; font-weight: normal; } .newsroom .feed-item-headline:hover { color: #B32977; } .newsroom .feed-item-date { font-family: 'Lato', sans-serif; font-size: 11px; color: #bec1c9; text-transform: uppercase; letter-spacing: 1px; } .newsroom .recent-stories .button { background: linear-gradient(90deg, #c33460, #9a189c); line-height: initial; margin: 22px 0 0; } .newsroom .recent-stories .card-container { box-sizing: border-box; float: right; width: 45%; } .newsroom .recent-stories .card { width: 100%; box-sizing: border-box; padding: 0 30px; position: relative; margin-bottom: 36px; } .newsroom .recent-stories .card-wrapper { height: 100%; box-shadow: 0 1px 5px 0 rgba(106, 109, 122, .3); box-sizing: border-box; padding: 30px; position: relative; } .newsroom .recent-stories .card:hover .card-wrapper { box-shadow: 0 0 15px 0 rgba(106, 109, 122, .5); } .newsroom .recent-stories .card-icon { width: 96px; height: 96px; background-color: #d9dce4; border-radius: 48px; margin: 0 auto; position: absolute; } .newsroom .recent-stories .card-content { padding-left: 128px; box-sizing: border-box; min-height: 96px; } .newsroom .recent-stories .card-content h3 { font-weight: normal; } .newsroom .recent-stories .card-content p { font-size: 14px; line-height: 1.5; margin: 6px 0 12px; } .newsroom .recent-stories .card-content a { text-transform: uppercase; color: #B52A74; } .newsroom .recent-stories .card-content a:after { content: '\203a'; position: relative; left: 6px; top: -1px; } /* Video Cards Block ------------------------------------------------------------------------------- */ .video-cards { display: flex; flex-flow: row wrap; } .video-cards.thirds { margin: 0 -18px; } .video-cards.fourths { margin: 0 -12px; } .video-card { box-sizing: border-box; display: flex; align-items: stretch; } .video-cards.thirds .video-card { width: 33.33%; padding: 18px; } .video-cards.fourths .video-card { width: 25%; padding: 12px; } .video-cards.thirds.is-collapsed .video-card:nth-child(n+4) { display: none; } .video-cards.fourths.is-collapsed .video-card:nth-child(n+5) { display: none; } .video-card-wrapper { box-shadow: 0 1px 5px 0 rgba(106, 109, 122, .3); display: flex; flex-flow: column; width: 100%; } .video-card-thumbnail img { display: block; width: 100%; } .video-card-meta { background-color: #F1F2F5; flex: 1 0 auto; display: flex; flex-flow: column; } .video-cards.thirds .video-card-meta { padding: 18px; } .video-cards.fourths .video-card-meta { padding: 12px; } .video-card-strapline span { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; } .video-card-title { margin: 8px 0; } .video-card-title h3 { font-size: 20px; line-height: 28px; } .video-card-icons { margin: 8px 0; } .video-card-icons i, .video-card-icons svg { margin: 0 6px 0 0; color: #6a6d7a; } .video-cards a { color: #343742; } .video-card-icons a { color: #6a6d7a; } .video-card-description { margin: 8px 0; } .video-card-description p { font-size: 14px; line-height: 20px; } .video-card-attribution { margin-top: auto; font-size: 18px; color: #343742; } .video-card-attribution span { display: inline-block; margin-top: 24px; } .button.video-cards-toggle { background: linear-gradient(90deg, #6484c0, #653bab); border-radius: 5px; font-size: 15px; line-height: 8px; font-weight: 300; width: 24%; margin: 36px auto; display: block; border: none; box-shadow: 0 4px 6px rgba(50,50,93,0.11), 0 1px 3px rgba(0,0,0,0.08); font-family: freight-sans-pro, sans-serif; } .button.video-cards-toggle:focus { outline: none; } @media only screen and (max-width: 900px) { .video-cards.thirds .video-card, .video-cards.fourths .video-card { width: 50%; } .video-cards.thirds.is-collapsed .video-card:nth-of-type(n+4) { display: block; } .video-cards.thirds.is-collapsed .video-card:nth-of-type(n+5) { display: none; } } @media only screen and (max-width: 700px) { .video-cards.thirds .video-card, .video-cards.fourths .video-card { width: 100%; } .video-cards.thirds.is-collapsed .video-card:nth-of-type(n+3), .video-cards.fourths.is-collapsed .video-card:nth-of-type(n+3) { display: none; } .button.video-cards-toggle { width: 80% } } /* Delta 2020 Recap Page ------------------------------------------------------------------------------- */ .page-delta-2020 #block_keynote { background-color: #161b2f; background: linear-gradient(180deg, #161B2E, rgba(22,27,47,0.68) 68%,rgba(22,27,47,0)); position: relative; } .page-delta-2020 #block_keynote::after { content: ""; background: url(img/common/isometric-background.png), #474A57; width: 100%; height: 100%; position: absolute; top: 0; z-index: -1; } .page-delta-2020 #block_keynote h1, .page-delta-2020 #block_keynote p { color: white; } .page-delta-2020 #block_keynote p { letter-spacing: .25px; } .page-delta-2020 #block_keynote .block-image img { border-radius: 500px; width: 300px; height: 300px; border: 3px solid white; box-shadow: 0 0 15px rgba(0,0,0,0.5); display: block; margin: auto; } .page-delta-2020 #block_keynote .subheading { color: #6484C0; font-family: 'Lato', sans-serif; } .page-delta-2020 #block_keynote h1::after { background-color: #6484C0; } .page-delta-2020 #block_keynote .button { background: linear-gradient(90deg, #6484c0, #653bab); border-radius: 52px; box-shadow: 0 3px 8px rgba(0,0,0,.15); } .page-delta-2020 #block_keynote .button.secondary-button { background: transparent; border: 1px solid white; box-sizing: border-box; color: white; padding: 14px 29px; } .page-delta-2020 .video_cards h2 { display: flex; flex-direction: row; font-size: 24px; text-transform: uppercase; letter-spacing: 2px; } .page-delta-2020 .video_cards h2::before, .page-delta-2020 .video_cards h2::after { content: ""; width: 96px; border-bottom: 2px solid; margin: auto; } .page-delta-2020 .video_cards h2::before { margin-right: 12px; } .page-delta-2020 .video_cards h2::after { margin-left: 12px; } .page-delta-2020 #block_program-development, .page-delta-2020 #block_engagement { padding-bottom: 0; } .page-delta-2020 #block_program-development h2, .page-delta-2020 #block_program-development a:hover, .page-delta-2020 #block_program-development .video-card-strapline { color: #6479BD; } .page-delta-2020 #block_engagement h2, .page-delta-2020 #block_engagement a:hover, .page-delta-2020 #block_engagement .video-card-strapline { color: #C53460; } .page-delta-2020 #block_community h2, .page-delta-2020 #block_community a:hover, .page-delta-2020 #block_community .video-card-strapline { color: #653bab; } .page-delta-2020 #block_program-development .video-cards-toggle { background: linear-gradient(90deg, #6484c0, #653bab); } .page-delta-2020 #block_engagement .video-cards-toggle { background: linear-gradient(90deg, #E24933, #9a189c); } .page-delta-2020 #block_community .video-cards-toggle { background: linear-gradient(90deg, #9a189c, #653bab); } .page-delta-2020 .video-card-thumbnail { overflow: hidden; position: relative; } .page-delta-2020 .video-card .video-card-thumbnail a::after { display: none; content: none; } .page-delta-2020.gated .video-card .video-card-thumbnail a::after { width: 100%; height: 100%; display: block; position: absolute; background-color: black; opacity: 0; content: "Sign up to Unlock"; color: white; top: 0; text-align: center; font-size: 28px; padding-top: 25%; font-weight: 300; letter-spacing: .5px; transition: all .3s ease-in-out; } .page-delta-2020.gated .video-card:hover .video-card-thumbnail a::after { opacity: 0.7; } .page-delta-2020 .video-card-thumbnail img { width: 377px; } .page-delta-2020 #block_summary { background-color: #F1F2F5; color: #343742; overflow: hidden; } .page-delta-2020 .summary { width: 60%; float: right; z-index: 1; position: relative; } .page-delta-2020 .summary::after { content: ""; background: url("/wp-content/themes/centercode-2017/img/delta-2020/Delta_BG.png"); background-size: 850px; background-repeat: no-repeat; width: 200%; height: 200%; position: absolute; top: -40px; left: -800px; z-index: -1; } .page-delta-2020 .summary-image { margin: 0 auto 50px; display: flex; flex-direction: row; } .page-delta-2020 .summary-image::before, .page-delta-2020 .summary-image::after { content: ""; width: 160px; border-bottom: 2px solid #7C7F8A; margin: auto; } .page-delta-2020 .summary-image img { width: 300px; } .page-delta-2020 .summary-headline { font-size: 48px; line-height: 60px; margin-bottom: 30px; } .page-delta-2020 .summary-body { text-align: center; width: 90%; margin: auto; } .page-delta-2020 .summary-icons { display: flex; justify-content: space-around; padding: 36px; } .page-delta-2020 .summary-icon-group { text-align: center; width: 180px; } .page-delta-2020 .summary-icon { width: 40px; margin: 0 auto 8px; color: #C53460; } .page-delta-2020 .summary-icon svg * { fill: url(#fa-gradient); } .page-delta-2020 .summary-icon-metric, .page-delta-2020 .summary-icon-label { display: block; text-transform: uppercase; font-family: 'Lato', sans-serif; color: #C53460; } .page-delta-2020 .summary-icon-metric { font-size: 28px; margin-bottom: 8px; } .page-delta-2020 .summary-icon-label { font-size: 12px; letter-spacing: .25px; } .page-delta-2020 .summary-form label { display: none; } .page-delta-2020 .summary-form { text-align: center; margin-top: 12px; } .page-delta-2020 .summary-form form * { font-family: freight-sans-pro, sans-serif !important; } .page-delta-2020 .summary-form .hs-form-field { display: inline-block; width: 40%; } .page-delta-2020 .summary-form .hs-input { width: 100% !important; box-shadow: none !important; padding: 7px 0 7px 10px !important; font-size: 16px !important; line-height: 1.5em; box-sizing: border-box; background-color: white; border-radius: 5px 0 0 5px !important; border: none !important; } .page-delta-2020 .summary-form .hs-submit { text-align: center !important; display: inline-block; position: relative; } .page-delta-2020 .summary-form .hs-submit .hs-button { color: #fff; background: linear-gradient(-90deg, #6484c0, #653bab) !important; border: none !important; font-size: 14px !important; font-weight: 500; height: 38px; text-transform: uppercase; padding: 0.4em 1em; padding-bottom: 0 !important; padding-top: 0 !important; border-radius: 0 5px 5px 0 !important; letter-spacing: 1.5px; transition: all 0.4s ease; box-shadow: 0 4px 6px rgba(50,50,93,0.11), 0 1px 3px rgba(0,0,0,0.08); opacity: 0.8; } .page-delta-2020 .summary-form .hs-error-msgs { position: relative !important; float: left; left: 12px !important; top: 8px !important; color: #fb0000; } .page-delta-2020 .summary-form .hs-error-msg { display: block; padding: 0; color: #c33460 !important; max-width: 100% !important; background-color: transparent !important; box-shadow: none !important; background-image: none !important; border: none !important; border-radius: 6px; font-size: 11px !important; letter-spacing: 1px; text-shadow: none !important; line-height: 1.2em; } .page-delta-2020 .summary-form .submitted-message { overflow: hidden; } .page-delta-2020 .summary-form .cookie-reset-container { text-align: center; margin-bottom: 14px; } .page-delta-2020 i { font-style: normal; } _:-ms-input-placeholder, :root .page-delta-2020 .video_cards h2 { /* ie10-11 workaround */ display: block; text-align: center; } _:-ms-input-placeholder, .page-delta-2020 .summary-image img { /* ie10-11 workaround */ margin: auto; width: 300px; } _:-ms-input-placeholder, :root .page-delta-2020 .video_cards h2::before, :root .page-delta-2020 .video_cards h2::after, :root .page-delta-2020 .summary-image::before, :root .page-delta-2020 .summary-image::after { /* ie10-11 workaround */ content: none; } @media only screen and (max-width: 1080px) { .page-delta-2020 .video-card-thumbnail img { width: 100%; } } @media only screen and (max-width: 900px) { .page-delta-2020 .summary { width: 100%; float: none; } .page-delta-2020 .summary::after { background: none; } } @media only screen and (max-width: 700px) { .page-delta-2020 #block_keynote .block-image { display: none; } .page-delta-2020 .summary-headline { font-size: 36px; line-height: 42px; } .page-delta-2020 .summary-icons { padding: 36px 0; } .page-delta-2020 .summary-image img { margin: auto; } .page-delta-2020 .video_cards h2 { display: block; text-align: center; } .page-delta-2020 .summary-image::before, .page-delta-2020 .summary-image::after, .page-delta-2020 .video_cards h2::before, .video_cards h2::after { content: none; } .page-delta-2020 .summary-form .hs-form-field { width: 100%; } .page-delta-2020 .summary-form .hs-submit { margin-top: 16px; } .page-delta-2020 .summary-form .hs-submit .hs-button { border-radius: 5px !important; } } @media only screen and (max-width: 600px) { .page-delta-2020 #block_keynote .button.secondary-button { padding: 15px 30px; } } .break { white-space: pre; } .break::before { content: "\A"; } /* Slide-in CTA */ #slidebox { border-top: 3px solid #b74e86; position: fixed; bottom: 0px; left: -350px; -moz-box-shadow: 0px 0px 7px #aaa; -webkit-box-shadow: 0px 0px 7px #aaa; box-shadow: 0px 0px 7px #aaa; background-color: #efefef; z-index: 1000; display: none; } #slidebox.active { left: 0px; } #slidebox a.close { position: absolute; cursor: pointer; top: 12px; right: 12px; font-size: 24px; color: gray; } @media only screen and (min-height: 600px) { #slidebox { display: initial; } }