/* SET TYPOGRAPHY RULES BELOW ONLY AFTER COMPLETING ALL THE FOLLOWING* * * Settings > Typekit Fonts * Add Typekit kit code after creating kit via OMS login * * Theme Customizer > General Settings > Typography * Set base body size, body line-height, link color, body color, header color * Header font sizes and line-heights set below in code * Reversed font colors for dark bkgds set below * * Theme Customizer > Mobile Styles > Phone * Set row height and body copy for mobile * Leave section height and header alone * * Theme Customizer > Mobile Styles > Tablet * Set row height and body copy for tablet * Leave section height and header alone * * ///////////////////////////////////////////////////////// */ body.orbit { background: #fff; } body.orbit ::-moz-selection { background: #4DA6FF; color: #fff; } body.orbit ::selection { background: #3D60A6; color: #fff; } /*------------------------------------------------------------------------------------------------------------------------------- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ ================================================================================================================================= TEXT STYLES ================================================================================================================================= \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ ---------------------------------------------------------------------------------------------------------------------------------*/ /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- BASE CORE TEXT STYLING ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= TEXT HYPERLINKS ===============================================================================*/ /* --------------- Resting State --------------- */ /* Basic */ a, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #3d60a6; } .et_pb_bg_layout_dark a, .et_pb_bg_layout_dark h1 a, .et_pb_bg_layout_dark h2 a, .et_pb_bg_layout_dark h3 a, .et_pb_bg_layout_dark h4 a, .et_pb_bg_layout_dark h5 a, .et_pb_bg_layout_dark h6 a { color: #fff; } p a { font-weight: 600; position: relative; } /* More Interactive Text Links in Text Modules and in Blurb Modules */ /* NOTE: This excludes a handful of button classes. */ .et_pb_section .et_pb_text p a:not(.cta-button):not(.cta-button-reverse):not(.cta-button-ghost):not(.cta-link), .et_pb_section .et_pb_blurb p a:not(.cta-button):not(.cta-button-reverse):not(.cta-button-ghost):not(.cta-link), .et_pb_post .entry-content p a:not(.cta-button):not(.cta-button-reverse):not(.cta-button-ghost):not(.cta-link), .et_pb_section .et_pb_text li a:not(.cta-button):not(.cta-button-reverse):not(.cta-button-ghost):not(.cta-link), .et_pb_section .et_pb_blurb li a:not(.cta-button):not(.cta-button-reverse):not(.cta-button-ghost):not(.cta-link), .et_pb_post .entry-content li a:not(.cta-button):not(.cta-button-reverse):not(.cta-button-ghost):not(.cta-link) { text-decoration: none; background-image: linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.2)), /* idle color */ linear-gradient(#4da6ff, #4da6ff); /* hover color */ background-size: 100% 2px, /* idle color */ 0 2px; /* hover color */ background-position: 100% 100%, /* idle color */ 0 100%; /* hover color */ background-repeat: no-repeat; transition: background-size .2s ease-out, background-position .2s ease-out; padding-bottom: 1px; } /* --------------- Hover State --------------- */ /* Basic */ a:hover, h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { text-decoration: none; } .et_pb_bg_layout_dark a:hover, .et_pb_bg_layout_dark h1 a:hover, .et_pb_bg_layout_dark h2 a:hover, .et_pb_bg_layout_dark h3 a:hover, .et_pb_bg_layout_dark h4 a:hover, .et_pb_bg_layout_dark h5 a:hover, .et_pb_bg_layout_dark h6 a:hover { color: #fff; } /* 981px and above --------------*/ @media all and (min-width: 981px) { /* More Interactive Text Links in Text Modules and in Blurb Modules */ /*NOTE: Animations are located towards bottom of stylesheet */ .et_pb_section .et_pb_text p a:not(.cta-button):not(.cta-button-reverse):not(.cta-button-ghost):not(.cta-link):hover, .et_pb_section .et_pb_blurb p a:not(.cta-button):not(.cta-button-reverse):not(.cta-button-ghost):not(.cta-link):hover, .et_pb_post .entry-content p a:not(.cta-button):not(.cta-button-reverse):not(.cta-button-ghost):not(.cta-link):hover, .et_pb_section .et_pb_text li a:not(.cta-button):not(.cta-button-reverse):not(.cta-button-ghost):not(.cta-link):hover, .et_pb_section .et_pb_blurb li a:not(.cta-button):not(.cta-button-reverse):not(.cta-button-ghost):not(.cta-link):hover, .et_pb_post .entry-content li a:not(.cta-button):not(.cta-button-reverse):not(.cta-button-ghost):not(.cta-link):hover { background-size: 0 2px, /* idle color */ 100% 2px; /* hover color */ background-position: 100% 100%, /* idle color */ 0 100%; /* hover color */ color: #213459; } /* Color Variation for text that's on a Dark Background */ /*NOTE: Animations are located towards bottom of stylesheet */ .et_pb_bg_layout_dark.et_pb_text p a:not(.cta-button):not(.cta-button-reverse):not(.cta-button-ghost):not(.cta-link):hover, .et_pb_bg_layout_dark.et_pb_blurb p a:not(.cta-button):not(.cta-button-reverse):not(.cta-button-ghost):not(.cta-link):hover { box-shadow: 0 -13px 0 #4DA6FF inset; } } /*================================================================================= BODY, PARAGRAPH, LISTS, and more BASIC TYPOGRAPHIC ELEMENTS ===============================================================================*/ /* --------------- Basic Styling --------------- */ body.orbit, body.orbit p, body.orbit #main-content ul, body.orbit #main-content ol { font-family: lato, sans-serif; font-weight: 400; color: #666; font-size: 17px; line-height: 1.8; padding: 0; letter-spacing: .25px; } body.orbit p, body.orbit #main-content ul, body.orbit #main-content ol { margin: 0 0 25px; } /* --------------- Strong --------------- */ body.orbit strong { font-weight: 600; } body.orbit .et_pb_bg_layout_dark strong { color: #fff; } /* --------------- Lists --------------- */ body.orbit #main-content .et_pb_section .et_pb_module ul, body.orbit #main-content .et_pb_section .et_pb_module ol, body.orbit #main-content .et_pb_post ul, body.orbit #main-content .et_pb_post ol, body.orbit.blog #content-area #sidebar ul.categories, body.orbit.category #content-area #sidebar ul.categories, body.orbit.archive #content-area #sidebar ul.categories, body.orbit.author #content-area #sidebar ul.categories, body.orbit #main-content .bio-content ul, body.orbit #main-content .bio-content ol { list-style-position: outside; padding-left: 30px; } body.orbit #main-content .et_pb_section .et_pb_module ul, body.orbit #main-content .et_pb_post ul, body.orbit #main-content .bio-content ul { list-style-type: none; } body.orbit #main-content .et_pb_section .et_pb_module ol, body.orbit #main-content .bio-content ol { list-style-type: decimal; } body.orbit #main-content .et_pb_section .et_pb_module li, body.orbit #main-content .et_pb_post li, body.orbit #main-content .bio-content li { margin: 0 0 10px; } body.orbit #main-content .et_pb_section .et_pb_module li:last-of-type, body.orbit #main-content .et_pb_post li:last-of-type, body.orbit #main-content .bio-content li:last-of-type { margin-bottom: 0; } /* Unordered List Items */ body.orbit #main-content .et_pb_section .et_pb_module ul li, body.orbit #main-content .et_pb_post ul li, body.orbit #main-content .bio-content ul li { position: relative; } body.orbit #main-content .et_pb_section .et_pb_module ul li:before, body.orbit #main-content .et_pb_post ul li:before, body.orbit #main-content .bio-content ul li:before { content: ''; position: absolute; height: 5px; width: 5px; background: #4DA6FF; top: 12px; left: -20px; border-radius: 100%; } /* Nested List */ body.orbit #main-content .et_pb_section .et_pb_module li ul, body.orbit #main-content .et_pb_section .et_pb_module li ol, body.orbit #main-content .et_pb_section .et_pb_module ul ul, body.orbit #main-content .et_pb_section .et_pb_module ul ol, body.orbit #main-content .et_pb_section .et_pb_module ol ul, body.orbit #main-content .et_pb_section .et_pb_module ol ol, body.orbit #main-content .et_pb_post li ul, body.orbit #main-content .et_pb_post li ol, body.orbit #main-content .et_pb_post ul ul, body.orbit #main-content .et_pb_post ul ol, body.orbit #main-content .et_pb_post ol ul, body.orbit #main-content .et_pb_post ol ol, body.orbit #main-content .bio-content li ul, body.orbit #main-content .bio-content li ol, body.orbit #main-content .bio-content ul ul, body.orbit #main-content .bio-content ul ol, body.orbit #main-content .bio-content ol ul, body.orbit #main-content .bio-content ol ol { margin-top: 10px; margin-bottom: 10px; } body.orbit #main-content .et_pb_section .et_pb_module li ul, body.orbit #main-content .et_pb_post li ul, body.orbit #main-content .bio-content li ul { list-style-type: none; } body.orbit #main-content .et_pb_section .et_pb_module li ul li:before, body.orbit #main-content .et_pb_post li ul li:before, body.orbit #main-content .bio-content li ul li:before { background: none; border-radius: 100%; border: 1px solid #4DA6FF; } /* --------------- Paragraph Intro & Blockquote Common Styling --------------- */ body.orbit p.intro { font-size: 23px; line-height: 1.6; } /* --------------- Blockquotes --------------- */ body.orbit blockquote { position: relative; background: rgba(0,0,0,.03); border: none; border-left: 3px solid #3d60a6; margin: 50px auto; padding: 50px; width: 90%; border-radius: 0 5px 5px 0; } body.orbit blockquote p { font-size: 20px; line-height: 1.6; } body.orbit blockquote :last-child { margin-bottom: 0; } /* Dark BG Variation */ body.orbit .et_pb_bg_layout_dark blockquote { background: rgba(255,255,255,.1); } /* --------------- Superscript --------------- */ body.orbit sup { font-size: 50%; bottom: .7em; } /* --------------- Dividers Styling --------------- */ body.orbit hr, body.orbit .et_pb_divider { border: none; height: 1px; margin: 45px 0 45px; padding: 0; background: rgba(0,0,0,.2); } /*================================================================================= HEADERS ===============================================================================*/ /* --------------- H1 --------------- */ body.orbit:not(.et-fb) #page-container #et-boc .et-l h1, body.orbit #page-container h1 { font-family: lato, sans-serif; font-weight: 400; color: #272B33; font-size: 75px; line-height: 1.2; margin: 0 0 15px; padding: 0; text-transform: uppercase; } /* --------------- H2 --------------- */ body.orbit #page-container h2 { font-family: lato, sans-serif; font-weight: 400; color: #272B33; font-size: 35px; line-height: 1.2; margin: 0 0 25px; padding: 0; } /* --------------- H3 --------------- */ body.orbit #page-container h3 { font-family: lato, sans-serif; font-weight: 400; color: #272B33; font-size: 26px; line-height: 1.3; margin: 0 0 15px; padding: 0; } /* --------------- H4 --------------- */ body.orbit #page-container h4 { font-family: lato, sans-serif; font-weight: 400; color: #272B33; font-size: 20px; line-height: 1.3; margin: 0 0 15px; padding: 0; } /* --------------- H5 --------------- */ body.orbit #page-container h5 { font-family: lato, sans-serif; font-weight: 400; color: #272B33; font-size: 17px; line-height: 1.4; letter-spacing: .5px; margin: 0 0 10px; padding: 0; text-transform: uppercase; } /* --------------- H6 --------------- */ body.orbit #page-container h6 { font-family: lato, sans-serif; font-weight: 400; color: #272B33; font-size: 17px; line-height: 1.4; letter-spacing: .5px; margin: 0 0 10px; padding: 0; } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- MY CUSTOM TEXT STYLES ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= PRE-TITLE ===============================================================================*/ /* NOTE: This is the small text that appears above headers, typically at the beginning of various sections. */ body.orbit .pre-title { font-size: 12px; line-height: 1; letter-spacing: 2px; text-transform: uppercase; margin: 0px 0 15px!important; font-weight: 400; color: #213459; } body.orbit .pre-title:after { content: ''; display: block; height: 1px; width: 40px; background: #ccc; margin-top: 20px; } body.orbit .et_pb_text_align_center .pre-title:after { margin-left: auto; margin-right: auto; } /* On Dark Background */ body.orbit .et_pb_bg_layout_dark .pre-title { color: rgba(255,255,255,1); } /*body.orbit .et_pb_bg_layout_dark .pre-title:after { background: rgba(255,255,255,.4); }*/ /*================================================================================= SPECIALTY UNORDERED LISTS ===============================================================================*/ /* --------------- Common Styling for these special lists --------------- */ /* Pseudo Element - General Common Styling, in case you want to introduce other graphic variations. */ body.orbit #main-content .et_pb_section .et_pb_module ul.check li:before, body.orbit #main-content .et_pb_post ul.check li:before { font-family: "ETmodules"; position: absolute; top: 0 !important; background: none; /* This avoids conflict on base styling */ height: unset; /* This avoids conflict on base styling */ width: unset; /* This avoids conflict on base styling */ } /* --------------- Check Icon --------------- */ body.orbit #main-content .et_pb_section .et_pb_module ul.check li:before, body.orbit #main-content .et_pb_post ul.check li:before { font-size: 22px; content: "\4e"; left: -30px; color: #4DA6FF; top: -3px !important; } /* Variation for when on dark background */ body.orbit #main-content .et_pb_section .et_pb_text.et_pb_bg_layout_dark ul.check li:before { color: rgba(255,255,255,1); } /*================================================================================= TEXT SMALL ===============================================================================*/ /* NOTE: This decreases the font size of paragraph text. I chose to limit its use to only paragraph text. */ body.orbit p.text-small { font-size: 15px; } /*================================================================================= KEEP RIGHT ===============================================================================*/ .oms-text-keepright { text-align: right !important; } /*================================================================================= TEXT COLUMNS ===============================================================================*/ /* --------------- 2 Columns --------------- */ /* 768px and above --------------*/ @media all and (min-width: 768px) { .oms-text-col-2 { -webkit-columns: 150px 2; -moz-columns: 150px 2; columns: 150px 2; -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; } } /*================================================================================= FORCED TEXT ALIGNMENT ===============================================================================*/ /* Forces Text to be Centered */ .et_pb_text_align_center { text-align: center; } /*================================================================================= HEADER EMPHASIS (horizontal lines) ===============================================================================*/ .header-emphasis { overflow: hidden; } .header-emphasis h3, .header-emphasis h4 { position: relative; display: inline-block; } .header-emphasis h3:before, .header-emphasis h3:after, .header-emphasis h4:before, .header-emphasis h4:after { content: ''; position: absolute; height: 1px; width: 200%; top: 50%; background: rgba(0,0,0,.15); transform: translateY(50%); } .header-emphasis h3:before, .header-emphasis h4:before { right: 100%; margin-right: 15px; } .header-emphasis h3:after, .header-emphasis h4:after { left: 100%; margin-left: 15px; } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- SPECIFIC VARIATIONS ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= VARIATIONS FOR DARK BACKGROUNDS ===============================================================================*/ /* NOTE: this code needs to come after the other text styling above in order for the cascading to work correctly. */ /* --------------- General (Headers) --------------- */ body.orbit .et_pb_bg_layout_dark { color: rgba(255,255,255,1); } /* --------------- Body Copy & List Items --------------- */ body.orbit .et_pb_bg_layout_dark p, body.orbit .et_pb_bg_layout_dark li { color: rgba(255,255,255,1); } /* --------------- Emphasized Text --------------- */ body.orbit .et_pb_bg_layout_dark em { color: #fff; } /* --------------- Dividers Styling --------------- */ body.orbit .et_pb_bg_layout_dark hr, body.orbit .et_pb_bg_layout_dark .et_pb_divider { background: rgba(255,255,255,.25); } /*================================================================================= EXTRA SPACING ===============================================================================*/ /* NOTE: Extra spacing for instances when these particular elements follow anything else inline within the same module/container. */ /* h2, in both pageblocks and in Blog Posts */ .entry-content p:not(.pre-title) + h2, .entry-content ul + h2, .entry-content ol + h2 { margin-top: 75px !important; } /* h3, in both pageblocks and in Blog Posts */ .entry-content p:not(.pre-title) + h3, .entry-content ul + h3, .entry-content ol + h3, .et_pb_text p:not(.pre-title) + h3 { margin-top: 50px !important; } /* In the event that a header is the last child within a module, give it a margin bottom of 25px. This doesn't happen often, but it does, for example, occur in the testimonial blocks. */ body.orbit h1:last-child, body.orbit h2:last-child, body.orbit h3:last-child, body.orbit h4:last-child, body.orbit h5:last-child, body.orbit h6:last-child { margin-bottom: 25px; } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- MEDIA QUERIES FOR TEXT STYLING ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /* 767px and below --------------*/ @media all and (max-width: 767px) { body.orbit p, body.orbit #main-content ul, body.orbit #main-content ol { font-size: 15px; line-height: 1.65; } body.orbit #main-content .et_pb_section .et_pb_module ul li:before, body.orbit #main-content .et_pb_post ul li:before { top: 10px; } body.orbit p.intro { font-size: 17px; } body.orbit blockquote { padding: 25px 20px; width: 100%; } body.orbit blockquote p { font-size: 17px; } body.orbit:not(.et-fb) #page-container #et-boc .et-l h1, body.orbit #page-container h1 { font-size: 28px; } body.orbit #page-container h2 { font-size: 23px; } body.orbit #page-container h3 { font-size: 19px; } body.orbit #page-container h4 { font-size: 17px; } body.orbit #page-container h5 { font-size: 15px; } body.orbit #page-container h6 { font-size: 15px; } body.orbit .pre-title { font-size: 10px; } /* Extra spacing for instances when these particular elements follow anything else inline within the same module/container. */ /* h2, in both pageblocks and in Blog Posts */ .entry-content p:not(.pre-title) + h2, .entry-content ul + h2, .entry-content ol + h2 { margin-top: 50px !important; } /* h3, in both pageblocks and in Blog Posts */ .entry-content p:not(.pre-title) + h3, .entry-content ul + h3, .entry-content ol + h3, .et_pb_text p:not(.pre-title) + h3 { margin-top: 35px !important; } body.orbit #main-content .et_pb_section .et_pb_module ul.check li:before, body.orbit #main-content .et_pb_post ul.check li:before { top: -2px !important; } } /* 768px to 980px --------------*/ @media all and (min-width: 768px) and (max-width: 980px) { body.orbit p, body.orbit #main-content ul, body.orbit #main-content ol { font-size: 16px; } body.orbit p.intro { font-size: 20px; } body.orbit blockquote p { font-size: 20px; } body.orbit:not(.et-fb) #page-container #et-boc .et-l h1, body.orbit #page-container h1 { font-size: 38px; } body.orbit #page-container h2 { font-size: 28px; } body.orbit #page-container h3 { font-size: 21px; } body.orbit #page-container h4 { font-size: 18px; } body.orbit #page-container h5 { font-size: 16px; } body.orbit #page-container h6 { font-size: 16px; } body.orbit .pre-title { font-size: 12px; } /* Extra spacing for instances when these particular elements follow anything else inline within the same module/container. */ /* h2, in both pageblocks and in Blog Posts */ .entry-content p:not(.pre-title) + h2, .entry-content ul + h2, .entry-content ol + h2 { margin-top: 75px !important; } /* h3, in both pageblocks and in Blog Posts */ .entry-content p:not(.pre-title) + h3, .entry-content ul + h3, .entry-content ol + h3, .et_pb_text p:not(.pre-title) + h3 { margin-top: 50px !important; } } /* 980px and below --------------*/ @media all and (max-width: 980px) { /* Divider Styling */ body.orbit hr, body.orbit .et_pb_divider { margin-top: 30px; margin-bottom: 30px; } } /*------------------------------------------------------------------------------------------------------------------------------- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ ================================================================================================================================= HEADER ELEMENTS ================================================================================================================================= \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ ---------------------------------------------------------------------------------------------------------------------------------*/ /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- MAIN HEADER CONTAINER ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= Base Styling ===============================================================================*/ #main-header { background: linear-gradient(135deg,rgba(255,255,255,0.95) 0%,rgba(255,255,255,0.91) 100%); /*height: 120px; display: flex;*/ transition: all .2s ease-out; -webkit-box-shadow: unset !important; -moz-box-shadow: unset !important; box-shadow: unset !important; } #main-header .et_menu_container { display: flex; align-items: center; } /*-------------- Sticky/Fixed State --------------*/ .et-fixed-header#main-header { background: linear-gradient(135deg,rgba(255,255,255,1) 0%,rgba(255,255,255,0.98) 100%); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2) !important; -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2) !important; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2) !important; } /*================================================================================= MEDIA QUERIES ===============================================================================*/ /* 980px and below --------------*/ /* NOTE: This media query size needs to be the exact same as the breakpoint that makes the mobile nav visible. */ @media all and (max-width: 980px) { #main-header { height: 60px; position: fixed !important; } body.orbit #main-header .et_menu_container { height: 60px; width: 100%; /* This is needed to force the mobile menu full-screen, otherwise, it will only be the designated width of the general body.orbit .container */ } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- HEADER LOGO ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /* NOTE: There's a handful of overrides here because the Divi version is a nightmare.*/ /*================================================================================= BASE STYLING ===============================================================================*/ body.orbit #main-header .logo_container { position: unset; transition: all .3s ease-out; } span.logo_helper { display: unset; } /* 980px and below --------------*/ /* NOTE: This media query size needs to be the exact same as the breakpoint that makes the mobile nav visible. */ @media all and (max-width: 980px) { body.orbit #main-header .logo_container { height: unset; width: 140px; /*This will need to be adjusted from site to site, because every client's logo has different proportions. */ padding-left: 15px; } .et_header_style_left #logo { max-width: 100%; /*overrides the default Divi max-width for the image file.*/ } } /* 981px and above --------------*/ @media all and (min-width: 981px) { /*-------------- Idle Base State --------------*/ body.orbit #main-header .logo_container { flex: 0 0 25%; max-width: 250px; } /*-------------- Sticky/Fixed State --------------*/ body.orbit .et-fixed-header#main-header .logo_container { max-width: 150px; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- PRIMARY NAVIGATION ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= Base Styling ===============================================================================*/ /* --------------- Resting State --------------- */ /* Overrides default Divi padding, I believe this works better on all viewports. */ .et_header_style_left #et-top-navigation { padding: 0 !important; margin-left: auto; display: flex !important; align-items: unset !important; /* Overwrites the styling in the header.scss. */ } /* Primary Navigation - When the Search Input is closed, javascript briefly adds .et_pb_menu_visible allowing the menu to fade back into sight... I want to delay the transition slightly for better experience. */ body.orbit #main-header .et_menu_container.et_pb_menu_visible #et-top-navigation { transition-delay: .6s; } /* Nav Container */ nav#top-menu-nav { float: unset; margin-left: auto; } /* List Item */ body.orbit #main-header .et_menu_container #et-top-navigation #top-menu > li { display: table-cell; vertical-align: middle; padding-right: 0; } /* List Item Anchor element */ body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu li.menu-item a { font-family: lato, sans-serif; font-size: 18px; color: #000; line-height: 1.2; font-weight: 400; padding: 0 15px; transition: all .2s ease-out; height: 120px; display: flex; align-items: center; } /* List Item that has a sub menu dropdown */ body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu li.menu-item.menu-item-has-children a { padding-right: 30px; } /* Pseudo Element - Border Bottom */ #top-menu-nav > ul > li > a:before { content: ''; display: block; position: absolute; background: #3d60a6; bottom: 0; left: 0; right: 0; height: 4px; width: 100%; z-index: 10000; -webkit-transform: scaleY(0); -moz-transform: scaleY(0); -ms-transform: scaleY(0); -o-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 0 100%; -ms-transform-origin: 0 100%; transform-origin: 0 100%; transition: transform .2s ease-out; -webkit-backface-visibility: hidden; } /* Pseudo Element - Caret */ body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu li.menu-item.menu-item-has-children > a:after { transform: translateY(-50%); top: 50%; right: 15px; color: #3d60a6; content: "\33"; /* downward chevron */ font-family: "ETmodules"; } /* --------------- Active State --------------- */ /* Active Menu Item & Current Menu Ancestor */ #top-menu-nav > ul > li.current-menu-item:not(.menu-btn) > a, #top-menu-nav > ul > li.current-menu-ancestor:not(.menu-btn) > a { color: #4da6ff !important; background: rgb(247,247,247); background: linear-gradient(0deg,rgba(250,250,250,1) 0%,rgba(247,247,247,1) 100%); } #top-menu-nav > ul > li.current-menu-item > a:before, #top-menu-nav > ul > li.current-menu-ancestor > a:before { -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); } /* --------------- Hover State --------------- */ /* Parent List Item On Hover State */ #top-menu-nav > ul > li > a:hover, #top-menu-nav > ul > li.menu-item-has-children:hover > a { /* This keeps parent item highlighted when user hovers over dropdown */ /*color: #fff;*/ background: rgb(247,247,247); background: linear-gradient(0deg,rgba(250,250,250,1) 0%,rgba(247,247,247,1) 100%); } /* Pseudo Element On Hover State */ #top-menu-nav > ul > li > a:hover:before, #top-menu-nav > ul > li.menu-item-has-children:hover a:before { -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); } /*-------------- Sticky/Fixed State --------------*/ /* Navigation buttons */ body.orbit .et-fixed-header #top-menu a { color: #272B33 !important; } body.orbit .et-fixed-header#main-header #et-top-navigation nav#top-menu-nav ul#top-menu li.menu-item a { height: 70px; } body.orbit .et-fixed-header #top-menu li.current-menu-ancestor:not(.menu-btn) > a, body.orbit .et-fixed-header #top-menu li.current-menu-item:not(.menu-btn) > a { color: #213459!important; background: rgb(247,247,247); background: linear-gradient(0deg,rgba(250,250,250,1) 0%,rgba(247,247,247,1) 100%); font-weight: 700; } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- SEARCH ELEMENTS ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*-------------- Common Styling --------------*/ body.orbit #et_search_icon, body.orbit span.et_close_search_field { display: flex; align-items: center; justify-content: center; height: 100%; width: 40px; } body.orbit #et_search_icon:before, body.orbit span.et_close_search_field:after { color: #3d60a6; } /*-------------- Search Container --------------*/ body.orbit #main-header .et_menu_container #et-top-navigation #et_top_search { float: unset; /* Overrides default styling */ width: unset; /* Overrides default styling */ margin: 0 0 0 10px; right: unset; top: unset; } /*-------------- Search span - magnifying glass --------------*/ body.orbit #et_search_icon:before { position: relative; top: 0 !important; font-size: unset !important; } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- PRIMARY NAVIGATION - Sub Menu ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= Base Styling ===============================================================================*/ /* --------------- Resting State --------------- */ #top-menu-nav .nav > li > ul.sub-menu { border-top: none; /*removes the dumb border top*/ width: auto; /*enables the width of the dropdown to be the same as the parent item.*/ min-width: 200px; background: #fff; padding: 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); border-radius: 0 0 3px 3px; z-index: 99999; -webkit-transform: translateY(5px); -ms-transform: translateY(5px); transform: translateY(5px); transition: all .2s ease !important; /* The !important is necessary to override a faulty conflict on the dev CSS. */ } #top-menu-nav li li { padding: 0; /*removes the padding on the list item; we'll keep the padding on the anchor tag*/ /*font-size: 13px;*/ /*Don't need this because font-size is done by targeting the anchor within*/ width: 100%; } body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu li.menu-item > ul.sub-menu li a { width: 100%; padding: 8px 10px; transition: all .2s ease-out; height: unset; border: none; font-weight: 400; color: #666; font-size: 14px; } /* --------------- Active State --------------- */ /* Active Sub Menu Item */ #top-menu-nav li.current-menu-ancestor:not(.mega-menu) li.current-menu-item > a, #top-menu-nav li.current-menu-ancestor:not(.mega-menu) li.current-menu-ancestor > a { color: #fff !important; font-weight: 600 !important; background: #333; } /* --------------- Hover State --------------- */ /* Hover over primary nav item */ body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu li.menu-item:not(.mega-menu) > ul.sub-menu li a:hover { background: #333; color: #fff !important; } /* Transition for the nested sub menu */ #top-menu-nav .nav li.et-hover > ul.sub-menu { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } /*-------------- Sticky/Fixed State --------------*/ .et-fixed-header #top-menu-nav .nav li ul { /*-webkit-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px);*/ } body.orbit .et-fixed-header #et-top-navigation nav#top-menu-nav ul#top-menu li.menu-item > ul.sub-menu > li a { color: #666 !important; } /* --------------- Sticky Hover State --------------- */ .et-fixed-header #top-menu-nav .nav li:hover > ul { /*-webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px);*/ } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- MOBILE NAVIGATION ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= Base Styling ===============================================================================*/ /*-------------- Resting State & General Styling --------------*/ /* Container for Hamburger */ body.orbit #main-header #et-top-navigation #et_mobile_nav_menu .mobile_nav .mobile_menu_bar { padding-bottom: 0; } /* Mobile Menu ul */ body.orbit #main-header #et-top-navigation #et_mobile_nav_menu .et_mobile_menu { top: 60px; position: fixed; left: 0px; right: 0px; bottom: 0px; overflow-y: scroll; } /*------------------------------------------------------------------------------------------------------------------------------- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ ================================================================================================================================= FOOTER ELEMENTS ================================================================================================================================= \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ ---------------------------------------------------------------------------------------------------------------------------------*/ /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- LAYOUT COMPONENTS ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= BASE STYLING ===============================================================================*/ /* --------------- Main Footer --------------- */ #main-footer { background: #272b33; /* Used if the image is unavailable */ position: relative; } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- FOOTER LOGO ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= BASE STYLING ===============================================================================*/ .footer-logo { display: block; width: 95%; max-width: 200px; margin-left: auto; margin-right: auto; } /* --------------- Client Logo Variation --------------- */ .footer-logo.client { max-width: 235px; } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- FOOTER TEXT STYLING - General Text and content elements ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= BASE STYLING ===============================================================================*/ /* --------------- Overrides to dumb styling --------------- */ body.orbit #main-footer #footer-widgets .footer-widget, body.orbit #main-footer #footer-widgets .footer-widget p { font-size: 15px; } body.orbit #main-footer #footer-widgets .footer-widget:last-child p { padding-bottom: unset; } body.orbit #main-footer #footer-widgets .footer-widget .textwidget a:not(.cta-button):not(.cta-button-reverse):not(.cta-button-ghost):not(.cta-link) { color: #009681; } /*================================================================================= MEDIA QUERIES ===============================================================================*/ /* 599px and below --------------*/ @media all and (max-width: 599px) { body.orbit #main-footer #footer-widgets .footer-widget { text-align: center; } } /* 980px and below --------------*/ @media all and (max-width: 980px) { /* CTA Button */ body.orbit #main-footer #footer-widgets .footer-widget .textwidget .cta-button { margin-left: 0; margin-right: 0; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- FOOTER MENUS ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /* --------------- Resting State --------------- */ /* Menu Title (Optional) */ #footer-widgets .footer-widget .title { color: #fff !important; } /* UL Element */ #footer-widgets .footer-widget .menu { margin-bottom: 25px; line-height: unset; } /* List Element */ #footer-widgets .footer-widget .menu li { padding-left: 0; margin: 0 0 10px; } /* Pseudo Element - Before */ /* NOTE: This undoes all the default Divi styling for this pseudo element. */ #footer-widgets .footer-widget .menu li:before { border: none; border-radius: unset; left: unset; } /* Anchor */ #footer-widgets .footer-widget .menu li a { color: rgba(255,255,255,.75); font-size: 17px; } .footer-widget li a:hover, #footer-widgets .et_pb_widget li a:hover { color: #555 !important; } /* Nested List */ #footer-widgets .footer-widget .menu li ul { margin-top: 10px; margin-bottom: 10px; } /* 767px and below --------------*/ @media all and (max-width: 767px) { #footer-widgets .footer-widget .menu li a { font-size: 15px; } } /* 768px to 980px --------------*/ @media all and (min-width: 767px) and (max-width: 980px) { #footer-widgets .footer-widget .menu li a { font-size: 16px; } } /* 981px and above --------------*/ @media all and (min-width: 981px) { /* UL Element */ #footer-widgets .footer-widget .widget_nav_menu { float: right; text-align: right; } /* --------------- Hover State --------------- */ /* Common Styles */ .footer-widget li a:hover, #footer-widgets .et_pb_widget li a:hover, #footer-widgets .footer-widget li a:hover { color: #fff!important; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- FOOTER BOTTOM CONTAINER ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= BASE STYLING ===============================================================================*/ /* --------------- Containing Elements --------------- */ body.orbit #main-footer #footer-bottom { padding: 0; background: none; } #footer-bottom .container { border-top: 1px solid rgba(255,255,255,.15); padding: 15px 0; display: flex; } /* --------------- Footer Bottom links --------------- */ #footer-bottom a { transition: all 0.2s ease-out; } /*================================================================================= MEDIA QUERIES ===============================================================================*/ /* 980px and below --------------*/ @media all and (max-width: 980px) { body.orbit #main-footer #footer-bottom { text-align: center; } #footer-bottom .container { flex-direction: column; } } /* 981px and above --------------*/ @media all and (min-width: 981px) { #footer-bottom .container { align-items: center; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- FOOTER INFO/CREDITS & MENU, CONTAINER and CONTENT ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= BASE STYLING ===============================================================================*/ /* --------------- Footer Bottom Info Text --------------- */ body.orbit #main-footer #footer-bottom .footer-credits-menu #footer-info { font-size: 12px; color: rgba(255,255,255,.5); } /* --------------- Copyright Menu --------------- */ body.orbit #main-footer #footer-bottom .footer-credits-menu .bottom-nav { padding: 0; } body.orbit #main-footer #footer-bottom .footer-credits-menu .bottom-nav li { color: unset; font-size: 12px; font-weight: 400; margin: unset; padding-left: 15px; padding-right: 0; } body.orbit #main-footer #footer-bottom .footer-credits-menu .bottom-nav li:first-of-type { padding-left: 0px; } body.orbit #main-footer #footer-bottom .footer-credits-menu .bottom-nav li a { color: rgba(255,255,255,.75); } /*================================================================================= MEDIA QUERIES ===============================================================================*/ /* 768px to 980px --------------*/ @media all and (min-width: 768px) and (max-width: 980px) { /* This is necessary to override the Sandbox styling. */ body.orbit #main-footer #footer-bottom .footer-credits-menu { float: unset; text-align: center; } } /* 980px and below --------------*/ @media all and (max-width: 980px) { body.orbit #main-footer #footer-bottom .footer-credits-menu { order: 2; } #footer-info { width: 100%; } } /* 981px and above --------------*/ @media all and (min-width: 981px) { body.orbit #main-footer #footer-bottom .footer-credits-menu { float: left; text-align: left; display: flex; flex-direction: row; justify-content: center; align-items: center; } /* Copyright Menu */ body.orbit #main-footer #footer-bottom .footer-credits-menu .bottom-nav { border-left: 1px solid rgba(255,255,255,.15); padding-left: 20px; margin-left: 20px; } body.orbit #main-footer #footer-bottom .footer-credits-menu .bottom-nav li { display: table-cell; } body.orbit #main-footer #footer-bottom .footer-credits-menu .bottom-nav li a:hover { color: #fff; opacity: 1; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- SOCIAL ICONS ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= BASE STYLING ===============================================================================*/ #footer-bottom ul.et-social-icons li { margin-left: 15px; margin-right: 15px; } #footer-bottom ul.et-social-icons li a { color: rgba(255,255,255,.5); font-size: 23px; } body.orbit .et-social-icons li a i::before { transition: unset; } /*================================================================================= MEDIA QUERIES ===============================================================================*/ /* 768px to 980px --------------*/ @media all and (min-width: 768px) and (max-width: 980px) { /* This is necessary to override the Sandbox styling. */ body.orbit #main-footer #footer-bottom .et-social-icons { float: unset; text-align: center; } } /* 980px and below --------------*/ @media all and (max-width: 980px) { body.orbit .et-social-icons { text-align: center; order: 1; } } /* 981px and above --------------*/ @media all and (min-width: 981px) { body.orbit #main-footer #footer-bottom .et-social-icons { margin-left: auto; } #footer-bottom ul.et-social-icons li:last-child { margin-right: 0px; } /* Hover State */ #footer-bottom ul.et-social-icons li a:hover { color: rgba(255,255,255,1) !important; opacity: 1; } } /*------------------------------------------------------------------------------------------------------------------------------- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ ================================================================================================================================= STRUCTURAL COMPONENTS AND MODIFIERS **previosly pre-pended with "COMMON/GLOBAL", but I may be able to remove this if it makes sense ================================================================================================================================= \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ ---------------------------------------------------------------------------------------------------------------------------------*/ /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- ALIGNMENTS ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= Vertical Align ===============================================================================*/ /* NOTE: Use to vertically align column content. Add class to both columns via row and turn on 'Equalize Column Heights' toggle */ /* --------------- Base Styling --------------- */ .oms-vertical-align { display: flex; flex-direction: column; justify-content: center; } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- BACKGROUNDS ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= Black BG ===============================================================================*/ /* --------------- Base Styling --------------- */ .oms-bg-black { background-color: #000; } /*================================================================================= Light-Gray BG ===============================================================================*/ /* --------------- Base Styling --------------- */ .oms-bg-gray-light { background-color: #f7f7f7; } /* --------------- Special Variations --------------- */ .oms-overlay-white + div.et_pb_section.oms-bg-gray-light, .oms-bg-gray-light + div.et_pb_section.oms-bg-gray-light { /* needs these extra selectors to override Visual Builder. */ /*background-color: rgb(228,229,230); background-image: linear-gradient(0deg,rgba(245,245,245,1) 0%,rgba(255,255,255,1) 100%)!important;*/ } /*================================================================================= Dark-Gray BG ===============================================================================*/ /* --------------- Base Styling --------------- */ .oms-bg-gray-dark { background-color: #202227; } /*================================================================================= Navy Gradient BG ===============================================================================*/ /* --------------- Base Styling --------------- */ body.orbit .et_pb_section.oms-bg-navy-gradient { background-image: linear-gradient(335deg,rgba(36,62,115,1) 0%,rgba(61,96,166,1) 100%)!important; background: none; } /*================================================================================= White BG ===============================================================================*/ /* --------------- Base Styling --------------- */ .oms-bg-white { background-color: #ffffff; } /* --------------- Special Variations --------------- */ .oms-bg-white + div.et_pb_section.oms-bg-white{ /* needs these extra selectors to override Visual Builder. */ /*background-color: rgb(228,229,230); background-image: linear-gradient(0deg,rgba(255,255,255,1) 0%, rgba(245,245,245,1) 100%)!important;*/ } /*================================================================================= Building BG ===============================================================================*/ /* --------------- Base Styling --------------- */ .oms-bg-building, body.orbit .et_pb_section.oms-bg-building { background-color: #335577; /* Used if the image is unavailable */ background-position: center center; /* Center the image */ background-repeat: no-repeat; /* Do not repeat the image */ background-size: cover; } /* Overlay */ .oms-bg-building:before, body.orbit .et_pb_section.oms-bg-building:before { content: ''; background-image: linear-gradient(335deg,rgba(51,51,51,0.2) 0%,rgba(51,51,51,0.5) 100%)!important; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } /* Variation - Events Category */ body.orbit.category-events .et_pb_section.oms-bg-building { background-image: url("/wp-content/uploads/2021/07/pexels-chait-goli-2093317_1800x1200_01.jpg") !important; /* The image used */ } /* Variation - News Category */ body.orbit.category-news .et_pb_section.oms-bg-building { background-image: url("/wp-content/uploads/2021/07/pexels-mart-production_1800x1200_01.jpg") !important; /* The image used */ } /* Variation - Publications Category */ body.orbit.category-publications .et_pb_section.oms-bg-building { background-image: url("/wp-content/uploads/2021/07/josh-wilburne_1800x1200_01.jpg") !important; /* The image used */ } /* Variation - Chicago Litigation Category */ body.orbit.category-chicago-litigation .et_pb_section.oms-bg-building { background-image: url("/wp-content/uploads/2021/07/pexels-leon-macapagal_1800x1200_01.jpg") !important; /* The image used */ } /* Variation - Our Results Category */ body.orbit.category-our-results .et_pb_section.oms-bg-building { background-image: url("/wp-content/uploads/2022/02/dylan-lapierre-KMRFPukZxPU-unsplash_1800x1200_01.jpg") !important; /* The image used */ } /* Variation - Single Post */ body.orbit.single-post .et_pb_section.oms-bg-building { background-image: url("/wp-content/uploads/2021/07/sawyer-bengtson_1800x1200_01.jpg") !important; /* The image used */ } /* Text - NOTE: needed to set these values so that the text displayed on top of the overlay. */ .oms-bg-building h1, .oms-bg-building p, body.orbit .et_pb_section.oms-bg-building h1, body.orbit .et_pb_section.oms-bg-building p { position: relative; } .oms-bg-building a, body.orbit .et_pb_section.oms-bg-building a { color: #fff !important; } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- COLUMNS ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= BASE COLUMNS & CONTAINER STYLING ===============================================================================*/ /* 767px and below --------------*/ @media all and (max-width: 767px) { /* --------------- Basic Styling --------------- */ /* NOTE: Removes margin bottom on columns */ .et_pb_column { margin-bottom: 0px !important; } } /* 768px to 980px --------------*/ @media all and (min-width: 768px) and (max-width: 980px) { /* --------------- Basic Styling --------------- */ .et_pb_column:not(:last-of-type) { margin-bottom: 25px !important; } } /*================================================================================= FLEX COLUMN ===============================================================================*/ /* --------------- Flexbox Container --------------- */ .oms-col-flex { display: flex; flex-wrap: wrap; justify-content: center; margin-left: -15px; margin-bottom: 25px !important; /* This always applies a consistent margin to the bottom of the containing element. */ width: auto !important; float: none; /* This is really useful, to disable this... especially helps in instances when only one module is used within a column. */ } .oms-col-flex.et_pb_column:last-child, .oms-col-flex.et_pb_column.et-last-child { margin-right: -15px !important; /* this overrides the default Divi styling that wants to set the margin-right to ZERO on the last child. */ } /* --------------- Flex Items --------------- */ /* General */ .oms-col-flex.et_pb_column .et_pb_module { margin-left: 15px; margin-right: 15px; margin-top: 30px; } .oms-col-flex.et_pb_column .et_pb_module.et_pb_image { margin-bottom: 0 !important; /* This override is necessary to OVERRIDE the previous override... a little confusing. This allows for cleaner spacing for Client Logo Blocks. */ } /* Column Types */ /* NOTE: the different column/row types are listed in the media queries below. */ /* --------------- Logos Variation --------------- */ .oms-col-flex.logos.et_pb_column { align-items: center; /* This helps for logo blocks, in case someone uploads graphic that isn't 400x225. */ } .oms-col-flex.logos.et_pb_column .et_pb_module.et_pb_image { display: flex; justify-content: center; } .oms-col-flex.logos.et_pb_column .et_pb_module.et_pb_image .et_pb_image_wrap { width: 75%; max-width: 125px; } /* --------------- Divider/Border Variation --------------- */ /* NOTE: In theory, just adding .oms-divider to the oms-col-flex should be enough to enable the border. */ .oms-col-flex.oms-divider { overflow: hidden; } .oms-col-flex.oms-divider.et_pb_column { margin-left: -30px; } .oms-col-flex.oms-divider.et_pb_column:last-child, .oms-col-flex.oms-divider.et_pb_column.et-last-child { margin-right: -30px !important; /* this overrides the default Divi styling that wants to set the margin-right to ZERO on the last child. */ } .oms-col-flex.oms-divider.et_pb_column .et_pb_module { position: relative; border-top: 1px solid rgba(0,0,0,.2); border-left: 1px solid rgba(0,0,0,.2); margin-left: 0; margin-right: 0; margin-top: 0; padding: 40px 40px 15px; } /* more details in the media queries below. */ /* 767px and below --------------*/ @media all and (max-width: 767px) { /* --------------- Flexbox Container --------------- */ .oms-col-flex.et_pb_column { margin-left: -10px; } .oms-col-flex.et_pb_column:last-child, .oms-col-flex.et_pb_column.et-last-child { margin-right: -10px !important; /* this adjustment is similar to above, and coincides with the margin-right from the flex item listed below. */ } /* --------------- Flex Items --------------- */ .oms-col-flex.et_pb_column .et_pb_module { margin-left: 10px; margin-right: 10px; margin-top: 20px !important; } /* Remove Margin Top */ .oms-col-flex.col-2-2-1.et_pb_column .et_pb_module:nth-of-type(-n+1), .oms-col-flex.col-3-2-1.et_pb_column .et_pb_module:nth-of-type(-n+1), .oms-col-flex.col-4-2-1.et_pb_column .et_pb_module:nth-of-type(-n+1), .oms-col-flex.col-6-3-2.et_pb_column .et_pb_module:nth-of-type(-n+2), .oms-col-flex.col-6-4-3.et_pb_column .et_pb_module:nth-of-type(-n+3), .oms-col-flex.col-8-4-4.et_pb_column .et_pb_module:nth-of-type(-n+4) { margin-top: 0 } /* 2-2-1, 3-2-1, 4-2-1 and 5-2-1 */ .oms-col-flex.col-2-2-1.et_pb_column .et_pb_module, .oms-col-flex.col-3-2-1.et_pb_column .et_pb_module, .oms-col-flex.col-4-2-1.et_pb_column .et_pb_module, .oms-col-flex.col-5-2-1.et_pb_column .et_pb_module { flex: 0 0 calc(100% - 20px); } /* 6-3-2 */ .oms-col-flex.col-6-3-2.et_pb_column .et_pb_module { flex: 0 0 calc(50% - 20px); } /* 6-4-3 */ .oms-col-flex.col-6-4-3.et_pb_column .et_pb_module { flex: 0 0 calc(33.33% - 20px); } /* 8-4-4 */ .oms-col-flex.col-8-4-4.et_pb_column .et_pb_module { flex: 0 0 calc(25% - 20px); } /* --------------- Border Variation --------------- */ /* NOTE: These variations piggy-back on some of the code directly above. */ /* Flexbox Container WITH BORDERS */ .oms-col-flex.oms-divider.et_pb_column { margin-left: 0; margin-bottom: 0 !important; /* I'm removing this margin from BORDER variations because it's unnecessary. */ } .oms-col-flex.oms-divider.et_pb_column:last-child, .oms-col-flex.oms-divider.et_pb_column.et-last-child { margin-right: 0px !important; /* this overrides the default Divi styling that wants to set the margin-right to ZERO on the last child. */ } /* Flex Items WITH BORDERS */ .oms-col-flex.oms-divider.et_pb_column .et_pb_module { padding: 25px 0 0; margin-top: 0 !important } .oms-col-flex.col-2-2-1.oms-divider.et_pb_column .et_pb_module, .oms-col-flex.col-3-2-1.oms-divider.et_pb_column .et_pb_module, .oms-col-flex.col-4-2-1.oms-divider.et_pb_column .et_pb_module { border-left: none; } /* 2-2-1, 3-2-1 and 4-2-1 */ .oms-col-flex.col-2-2-1.oms-divider.et_pb_column .et_pb_module, .oms-col-flex.col-3-2-1.oms-divider.et_pb_column .et_pb_module, .oms-col-flex.col-4-2-1.oms-divider.et_pb_column .et_pb_module { flex: 0 0 100%; } } /* 768px to 980px --------------*/ @media all and (min-width: 768px) and (max-width: 980px) { /* --------------- Flex Items --------------- */ /* NOTE: This is a more traditional breakpoint, and specifies styling for 2-2-1 and 8-4-4. */ /* Remove Margin Top */ .oms-col-flex.col-2-2-1.et_pb_column .et_pb_module:nth-of-type(-n+2), .oms-col-flex.col-8-4-4.et_pb_column .et_pb_module:nth-of-type(-n+4) { margin-top: 0 } /* 2-2-1*/ .oms-col-flex.col-2-2-1.et_pb_column .et_pb_module { flex: 0 0 calc(50% - 30px); } /* 8-4-4 */ .oms-col-flex.col-8-4-4.et_pb_column .et_pb_module { flex: 0 0 calc(25% - 30px); } /* --------------- Border Variation --------------- */ /* NOTE: These variations piggy-back on some of the code directly above. Only 2-2-1 is styled below because we don't use the divider for 8-4-4. */ .oms-col-flex.col-2-2-1.oms-divider.et_pb_column .et_pb_module:nth-child(2n+1) { border-left: none; } .oms-col-flex.col-2-2-1.oms-divider.et_pb_column .et_pb_module:nth-of-type(-n+2) { border-top: none; padding-top: 0; } /* 2-2-1 */ .oms-col-flex.col-2-2-1.oms-divider.et_pb_column .et_pb_module { flex: 0 0 50%; } } /* 768px to 1024px --------------*/ @media all and (min-width: 768px) and (max-width: 1024px) { /* --------------- Flex Items --------------- */ /* NOTE: This is a unique breakpoint, created to optimize visual experience for 3-2-1 and 6-4-3. */ /* Remove Margin Top */ .oms-col-flex.col-3-2-1.et_pb_column .et_pb_module:nth-of-type(-n+2), .oms-col-flex.col-6-3-2.et_pb_column .et_pb_module:nth-of-type(-n+3), .oms-col-flex.col-6-4-3.et_pb_column .et_pb_module:nth-of-type(-n+4) { margin-top: 0 } /* 3-2-1 */ .oms-col-flex.col-3-2-1.et_pb_column .et_pb_module { flex: 0 0 calc(50% - 30px); } /* 6-3-2 */ .oms-col-flex.col-6-3-2.et_pb_column .et_pb_module { flex: 0 0 calc(33.33% - 30px); } /* 6-4-3 */ .oms-col-flex.col-6-4-3.et_pb_column .et_pb_module { flex: 0 0 calc(25% - 30px); } /* --------------- Border Variation --------------- */ /* NOTE: These variations piggy-back on some of the code directly above. Only 3-2-1 is styled below because we don't use the divider for 6-4-3. */ .oms-col-flex.col-3-2-1.oms-divider.et_pb_column .et_pb_module:nth-child(2n+1) { border-left: none; } .oms-col-flex.col-3-2-1.oms-divider.et_pb_column .et_pb_module:nth-of-type(-n+2) { border-top: none; padding-top: 0; } /* 3-2-1 */ .oms-col-flex.col-3-2-1.oms-divider.et_pb_column .et_pb_module { flex: 0 0 50%; } } /* 768px to 1199 --------------*/ @media all and (min-width: 768px) and (max-width: 1199px) { /* --------------- Flex Items --------------- */ /* NOTE: This is a unique breakpoint, created to optimize visual experience for 4-2-1... trying to cram 4 columns of text all the way down to 981px is not legible. */ /* Remove Margin Top */ .oms-col-flex.col-4-2-1.et_pb_column .et_pb_module:nth-of-type(-n+2), .oms-col-flex.col-5-2-1.et_pb_column .et_pb_module:nth-of-type(-n+2) { margin-top: 0 } /* 4-2-1 */ .oms-col-flex.col-4-2-1.et_pb_column .et_pb_module, .oms-col-flex.col-5-2-1.et_pb_column .et_pb_module { flex: 0 0 calc(50% - 30px); } /* --------------- Border Variation --------------- */ /* NOTE: These variations piggy-back on some of the code directly above. */ .oms-col-flex.col-4-2-1.oms-divider.et_pb_column .et_pb_module:nth-child(2n+1), .oms-col-flex.col-5-2-1.oms-divider.et_pb_column .et_pb_module:nth-child(2n+1) { border-left: none; } .oms-col-flex.col-4-2-1.oms-divider.et_pb_column .et_pb_module:nth-of-type(-n+2), .oms-col-flex.col-5-2-1.oms-divider.et_pb_column .et_pb_module:nth-of-type(-n+2) { border-top: none; padding-top: 0; } /* 4-2-1, 5-2-1 */ .oms-col-flex.col-4-2-1.oms-divider.et_pb_column .et_pb_module, .oms-col-flex.col-5-2-1.oms-divider.et_pb_column .et_pb_module { flex: 0 0 50%; } } /* 981px and above --------------*/ @media all and (min-width: 981px) { /* --------------- Flex Items --------------- */ /* NOTE: This is a more traditional breakpoint, and specifies styling for 2-2-1 and 8-4-4. */ /* Remove Margin Top */ .oms-col-flex.col-2-2-1.et_pb_column .et_pb_module:nth-of-type(-n+2), .oms-col-flex.col-8-4-4.et_pb_column .et_pb_module:nth-of-type(-n+8) { margin-top: 0 } /* 2-2-1 */ .oms-col-flex.col-2-2-1.et_pb_column .et_pb_module { flex: 0 0 calc(50% - 30px); } /* 8-4-4 */ .oms-col-flex.col-8-4-4.et_pb_column .et_pb_module { flex: 0 0 calc(12.5% - 30px); } /* --------------- Border Variation --------------- */ /* NOTE: These variations piggy-back on some of the code directly above. Only 2-2-1 is styled below because we don't use the divider for 8-4-4. */ .oms-col-flex.col-2-2-1.oms-divider.et_pb_column .et_pb_module:nth-child(2n+1) { border-left: none; } .oms-col-flex.col-2-2-1.oms-divider.et_pb_column .et_pb_module:nth-of-type(-n+2) { border-top: none; padding-top: 0; } /* 2-2-1 */ .oms-col-flex.col-2-2-1.oms-divider.et_pb_column .et_pb_module { flex: 0 0 50%; } } /* 1025px and above --------------*/ @media all and (min-width: 1025px) { /* --------------- Flex Items --------------- */ /* NOTE: This is a unique breakpoint, created to optimize visual experience for 3-2-1 and 6-4-3. */ /* Remove Margin Top */ .oms-col-flex.col-3-2-1.et_pb_column .et_pb_module:nth-of-type(-n+3), .oms-col-flex.col-6-3-2.et_pb_column .et_pb_module:nth-of-type(-n+6), .oms-col-flex.col-6-4-3.et_pb_column .et_pb_module:nth-of-type(-n+6) { margin-top: 0 } /* 3-2-1 */ .oms-col-flex.col-3-2-1.et_pb_column .et_pb_module { flex: 0 0 calc(33.333333% - 30px); } /* 6-3-2 */ .oms-col-flex.col-6-3-2.et_pb_column .et_pb_module { flex: 0 0 calc(16.66% - 30px); } /* 6-4-3 */ .oms-col-flex.col-6-4-3.et_pb_column .et_pb_module { flex: 0 0 calc(16.66% - 30px); } /* --------------- Border Variation --------------- */ /* NOTE: These variations piggy-back on some of the code directly above. Only 3-2-1 is styled below because we don't use the divider for 6-4-3. */ /* 3-2-1 */ .oms-col-flex.col-3-2-1.oms-divider.et_pb_column .et_pb_module { flex: 0 0 33.333333%; } .oms-col-flex.col-3-2-1.oms-divider.et_pb_column .et_pb_module:nth-child(3n+1) { border-left: none; } .oms-col-flex.col-3-2-1.oms-divider.et_pb_column .et_pb_module:nth-of-type(-n+3) { border-top: none; padding-top: 0; } } /* 1200px and above --------------*/ @media all and (min-width: 1200px) { /* --------------- Flex Items --------------- */ /* NOTE: This is a unique breakpoint, created to optimize visual experience for 4-2-1, that makes this a 4-across layout when the viewport is 1200px and above. */ /* Remove Margin Top */ .oms-col-flex.col-4-2-1.et_pb_column .et_pb_module:nth-of-type(-n+4), .oms-col-flex.col-5-2-1.et_pb_column .et_pb_module:nth-of-type(-n+5) { margin-top: 0 } /* 4-2-1 */ .oms-col-flex.col-4-2-1.et_pb_column .et_pb_module { flex: 0 0 calc(25% - 30px); } /* 5-2-1 */ .oms-col-flex.col-5-2-1.et_pb_column .et_pb_module { flex: 0 0 calc(20% - 30px); } /* --------------- Border Variation --------------- */ /* NOTE: These variations piggy-back on some of the code directly above. */ /* 4-2-1 */ .oms-col-flex.col-4-2-1.oms-divider.et_pb_column .et_pb_module { flex: 0 0 25%; } .oms-col-flex.col-4-2-1.oms-divider.et_pb_column .et_pb_module:nth-child(4n+1) { border-left: none; } .oms-col-flex.col-4-2-1.oms-divider.et_pb_column .et_pb_module:nth-of-type(-n+4) { border-top: none; padding-top: 0; } /* 5-2-1 */ .oms-col-flex.col-5-2-1.oms-divider.et_pb_column .et_pb_module { flex: 0 0 20%; } .oms-col-flex.col-5-2-1.oms-divider.et_pb_column .et_pb_module:nth-child(5n+1) { border-left: none; } .oms-col-flex.col-5-2-1.oms-divider.et_pb_column .et_pb_module:nth-of-type(-n+5) { border-top: none; padding-top: 0; } } /*================================================================================= GRID COLUMN ===============================================================================*/ /* --------------- Establish Grid --------------- */ .oms-col-grid.et_pb_column { display: grid; margin-bottom: 25px !important; } /* --------------- Layout Types --------------- */ .oms-col-grid.col-2-1-1.et_pb_column, .oms-col-grid.col-2-2-1.et_pb_column, .oms-col-grid.col-3-2-1.et_pb_column, .oms-col-grid.col-4-2-1.et_pb_column, .oms-col-grid.col-4-2-2.et_pb_column, .oms-col-grid.col-6-4-3.et_pb_column { /* grid-template-columns for each of these selectors are available in media queries below. */ } /* --------------- Gutter Types --------------- */ /* Common Gutters */ .oms-col-grid.small-gap.et_pb_column, .oms-col-grid.regular-gap.et_pb_column { grid-gap: 20px; } /* --------------- Card Modules --------------- */ /* Common Gutters */ .oms-col-grid .card { width: 100%; } /* --------------- Special Variations --------------- */ /* No Margin */ .oms-col-grid.no-marg.et_pb_column .et_pb_module.et_pb_image { margin-bottom: 0 !important; /* This eliminates the margin-bottom that I specify for general image modules in this CSS */ } /* Horizontal and Vertical Rules */ .oms-col-grid.oms-divider.et_pb_column { grid-gap: 0; } .oms-col-grid.oms-divider.et_pb_column .et_pb_module { border-top: 1px solid rgba(255,255,255,.15); /* I chose this is the more "default" style because I thought it was easier to write - less characters. */ } .oms-bg-white .oms-col-grid.oms-divider.et_pb_column .et_pb_module, .oms-bg-gray-light .oms-col-grid.oms-divider.et_pb_column .et_pb_module { border-color: rgba(0,0,0,0.15) !important; /* This is the exception to the border color... again, I just thought it'd be easier to write. */ } /* 767px and below --------------*/ @media all and (max-width: 767px) { /* 1 Column */ .oms-col-grid.col-2-1-1.et_pb_column, .oms-col-grid.col-2-2-1.et_pb_column, .oms-col-grid.col-3-2-1.et_pb_column, .oms-col-grid.col-4-2-1.et_pb_column { grid-template-columns: repeat(1, 1fr); } /* 4-2-2 Column */ .oms-col-grid.col-4-2-2.et_pb_column { grid-template-columns: repeat(2, 1fr); } /* 6-4-3 Column */ .oms-col-grid.col-6-4-3.et_pb_column { grid-template-columns: repeat(3, 1fr); } } /* 768px to 980px --------------*/ @media all and (min-width: 768px) and (max-width: 980px) { /* 2-2-1 Column */ .oms-col-grid.col-2-2-1.et_pb_column { grid-template-columns: repeat(2, 1fr); } } /* 768px to 1024px --------------*/ @media all and (min-width: 768px) and (max-width: 1024px) { /* 3-2-1 Column */ .oms-col-grid.col-3-2-1.et_pb_column { grid-template-columns: repeat(2, 1fr); } /* 6-4-3 Column */ .oms-col-grid.col-6-4-3.et_pb_column { grid-template-columns: repeat(4, 1fr); } } /* 768px to 1199 --------------*/ @media all and (min-width: 768px) and (max-width: 1199px) { /* 4-2-1 Column and 4-2-2 Column */ .oms-col-grid.col-4-2-1.et_pb_column, .oms-col-grid.col-4-2-2.et_pb_column { grid-template-columns: repeat(2, 1fr); } } /* 768px and above --------------*/ @media all and (min-width: 768px) { /* Gutters */ .oms-col-grid.regular-gap.et_pb_column { grid-gap: 30px; } } /* 980px and below --------------*/ @media all and (max-width: 980px) { /* 2-1-1 Column */ .oms-col-grid.col-2-1-1.et_pb_column { grid-template-columns: repeat(1, 1fr); } /* Horizontal and Vertical Rules */ .oms-col-grid.col-2-1-1.oms-divider.et_pb_column .et_pb_module { padding: 35px; } .oms-col-grid.col-2-1-1.oms-divider.et_pb_column .et_pb_module:first-child { border-top: none; } } /* 981px and above --------------*/ @media all and (min-width: 981px) { /* 2 Column on desktop */ .oms-col-grid.col-2-1-1.et_pb_column, .oms-col-grid.col-2-2-1.et_pb_column { grid-template-columns: repeat(2, 1fr); } /* 3 Column on desktop */ .oms-col-grid.col-3-2-1.et_pb_column { grid-template-columns: repeat(3, 1fr); } /* 4 Column on desktop */ .oms-col-grid.col-4-2-1.et_pb_column, .oms-col-grid.col-4-2-2.et_pb_column { grid-template-columns: repeat(4, 1fr); } /* 6 Column on desktop - For sections that showcase Partners, Sponsors, Clients */ .oms-col-grid.col-6-4-3.et_pb_column { grid-template-columns: repeat(6, 1fr); } /* Divider Variation */ .oms-col-grid.oms-divider.et_pb_column .et_pb_module { border-left: 1px solid rgba(255,255,255,.15); } /* Divider Variation for 2-1-1 Column */ .oms-col-grid.col-2-1-1.oms-divider.et_pb_column .et_pb_module { padding: 75px; } .oms-col-grid.col-2-1-1.oms-divider.et_pb_column .et_pb_module:nth-child(-n+2) { border-top: none; } .oms-col-grid.col-2-1-1.oms-divider.et_pb_column .et_pb_module:nth-child(odd) { border-left: none; } /* Divider Variation for 2-2-1 Column */ .oms-col-grid.col-2-2-1.oms-divider.et_pb_column .et_pb_module { padding: 15px; margin-bottom: 0 !important; } .oms-col-grid.col-2-2-1.oms-divider.et_pb_column .et_pb_module:nth-child(-n+2) { border-top: none; } .oms-col-grid.col-2-2-1.oms-divider.et_pb_column .et_pb_module:nth-child(odd) { border-left: none; } .oms-col-grid.col-2-2-1.oms-divider.et_pb_column .et_pb_module:nth-last-child(1):nth-child(odd) { grid-column: span 2; max-width: none !important; width: 100%; } } /*================================================================================= SIDEBAR ===============================================================================*/ /*-------------- Base Styling --------------*/ .oms-col-sidebar { padding-bottom: 1px; /* This 1 pixel helps activate the margin-bottom on the inside. */ margin-bottom: 25px !important; } .oms-bg-gray-dark .oms-col-sidebar { border-color: rgba(255, 255, 255, .2) } /* 767px and below --------------*/ @media all and (max-width: 767px) { .oms-col-sidebar { padding-top: 35px; } } /* 768px to 980px --------------*/ @media all and (min-width: 768px) and (max-width: 980px) { .oms-col-sidebar { padding-top: 50px; } } /* 980px and below --------------*/ @media all and (max-width: 980px) { .oms-col-sidebar { border-top: 1px solid rgba(0,0,0,.15); margin-top: 15px; } } /* 981px and above --------------*/ @media all and (min-width: 981px) { .oms-col-sidebar { border-left: 1px solid rgba(0,0,0,.15); padding-left: 35px; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- DISPLAY ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= Tablet & Mobile Hide ===============================================================================*/ /* 980px and below --------------*/ @media all and (max-width: 980px) { /* --------------- Basic Styling --------------- */ /* NOTE: Hides */ .oms-tabletMobile-hide { display: none; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- MIN-HEIGHT ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= Min-Height One ===============================================================================*/ /* 1700px and above --------------*/ @media all and (min-width: 1700px) { .oms-minheight-one { display: flex; min-height: 750px !important; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- OVERLAYS ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /* Use to add overlays to background images on sections and rows * You can duplicate and change name to match desired colors */ /*================================================================================= Dark Overlay ===============================================================================*/ .oms-overlay-dark:before { content: ''; background-image: linear-gradient(335deg, rgba(51,51,51,0.2) 0%, rgba(51,51,51,0.5) 100%)!important; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; } /* Text Shadow */ .oms-overlay-dark h1, .oms-overlay-dark h2, .oms-overlay-dark h3, .oms-overlay-dark h4, .oms-overlay-dark h5, .oms-overlay-dark h6 { text-shadow: 0 2px 5px rgba(0,0,0,.35); } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- ROWS ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= BASE ROW & CONTAINER STYLING ===============================================================================*/ /* 767px and below --------------*/ @media all and (max-width: 767px) { /* --------------- General Row & Container Styling --------------- */ body.orbit #et-boc .et-l .et_pb_row, body.orbit .et_pb_row, body.orbit .container, body.orbit #main-content .container, .et_pb_pagebuilder_layout.single-post:not(.et-tb-has-body) #main-content .et_pb_row { /*I had to add this line for the Clerestory project*/ width: 86%; overflow: visible; } } /* 768px to 980px --------------*/ @media all and (min-width: 768px) and (max-width: 980px) { /* --------------- General Row & Container Styling --------------- */ body.orbit #et-boc .et-l .et_pb_row, body.orbit .et_pb_row, body.orbit .container, body.orbit #main-content .container, .et_pb_pagebuilder_layout.single-post:not(.et-tb-has-body) #main-content .et_pb_row { /*I had to add this line for the Clerestory project*/ width: 80%; overflow: visible; } } /* 981px and above --------------*/ @media all and (min-width: 981px) { /* --------------- General Row & Container Styling --------------- */ body.orbit #et-boc .et-l .et_pb_row, body.orbit .et_pb_row, body.orbit .container, body.orbit #main-content .container, .et_pb_pagebuilder_layout.single-post:not(.et-tb-has-body) #main-content .et_pb_row { /*I had to add this line for the Clerestory project*/ width: 86% } } /*================================================================================= BASE SECTION ROW PADDING ===============================================================================*/ /* --------------- Base Styling --------------- */ /* Basic Padding */ body.orbit #et-boc .et-l .et_pb_row, .et_pb_section .et_pb_row { padding-top: 0; padding-bottom: 50px; z-index: 1; /* This is helpful to coinide with the angled pseudo elements on oms-bg-transitional backgrounds. */ } /* Last-Child Padding */ body.orbit #et-boc .et-l .et_pb_row:last-of-type, .et_pb_section .et_pb_row:last-of-type { padding-bottom: 0; } /* 767px and below --------------*/ @media all and (max-width: 767px) { body.orbit #et-boc .et-l .et_pb_row, .et_pb_section .et_pb_row { padding-bottom: 0; } } /* 768px to 980px --------------*/ @media all and (min-width: 768px) and (max-width: 980px) { body.orbit #et-boc .et-l .et_pb_row, .et_pb_section .et_pb_row { padding-bottom: 25px; } } /*================================================================================= FULL-WIDTH ROW ===============================================================================*/ /* --------------- Base Styling --------------- */ .oms-row-fullwidth { width: 100% !important; max-width: none; } /*================================================================================= REVERSE COLUMN ROW STYLING ===============================================================================*/ /* NOTE: This reverses the order of the columns, so that when the 5050 image appears on the right on desktop, it shifts to the top when viewed on tablet and mobile. This was the easiest solution; I tried a similar "flexcol" approach as to what I'm using below, but I was fighting with the code too much to accomplish. */ /* 980px and below --------------*/ @media all and (max-width: 980px) { .oms-row-reverse-columns { display: flex; flex-direction: column-reverse; } } /*================================================================================= STICKY ROW - Peloton Example ===============================================================================*/ /* NOTE: I've used this styling on a few projects. I've really simplified it for Tabet. */ /* --------------- Base Styling --------------- */ /* No Base Styles at the moment. */ /* NOTE: There should be a .this-sticks and a .this-scrolls class applied to columns that use this functionality. */ /* 981px and above --------------*/ @media all and (min-width: 981px) { .oms-row-sticky .et_pb_column.this-sticks { position: sticky !important; top: 25vh; } } /*================================================================================= ZERO-PADDING ROW - removes the padding-bottom ===============================================================================*/ /* --------------- Base Styling --------------- */ .oms-row-zero { padding-bottom: 0 !important; } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- SECTIONS ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= BASIC SECTION PADDING ===============================================================================*/ /* NOTE: this is the most commonly used section. */ /* --------------- BASE STYLING --------------- */ /* Section Padding */ body.orbit #et-boc .et-l .et_pb_section, body.orbit .et_pb_section.et_section_regular { padding-top: 100px; padding-bottom: 75px; } /* 767px and below --------------*/ @media all and (max-width: 767px) { body.orbit #et-boc .et-l .et_pb_section, body.orbit .et_pb_section.et_section_regular { padding-top: 50px; padding-bottom: 25px; } } /* 768px to 980px --------------*/ @media all and (min-width: 768px) and (max-width: 980px) { body.orbit #et-boc .et-l .et_pb_section, body.orbit .et_pb_section.et_section_regular { padding-top: 75px; padding-bottom: 50px; } } /* 981px and above --------------*/ @media all and (min-width: 981px) { /* NOTE: Client asked us to lessen the padding on this first hero */ body.orbit #et-boc:first-of-type .et-l .et_pb_section:first-of-type /*, body.orbit .et_pb_section.et_section_regular:first-of-type*/ { padding-top: 75px; padding-bottom: 50px; } } /*================================================================================= OMS SECTION BG MEDIA ("Hero") ===============================================================================*/ /* --------------- BASE STYLING --------------- */ /* BG Media Section with content AND a hero */ body.orbit .oms-section-bgmedia { display: flex; } body.orbit .oms-section-bgmedia > .et_pb_row { display: flex; justify-content: center; } body.orbit .oms-section-bgmedia > .et_pb_row .et_pb_column.et-last-child { /*display: flex; flex-direction: column; justify-content: center; height: 100%; max-width: 550px;*/ } /* --------------- VARIATIONS --------------- */ /* Large - ideal for pages like the homepage */ body.orbit .oms-section-bgmedia.large { min-height: calc(100vh - 120px); } body.orbit .oms-section-bgmedia.large > .et_pb_row .et_pb_column.et-last-child { max-width: 1100px; } /* 980px and below --------------*/ @media all and (max-width: 980px) { body.orbit .oms-section-bgmedia.large { min-height: calc(85vh - 60px); /* I changed to 60px because that's how tall the masthead is. */ } } /*================================================================================= OMS SECTION 50/50, EDGE-TO-EDGE IMAGE ===============================================================================*/ /* --------------- BASE STYLING --------------- */ /* Section Styling */ .oms-section-fifty50 { padding: 0 !important; overflow: hidden; } /* Row Styling */ .oms-section-fifty50 .et_pb_row { padding: 0 !important; border-radius: 5px; overflow: hidden !important; /* This important is necessary to override the basic overflow styling on the basic/general .et_pb_row */ } /* NOTE: In situations where I need this section to go full-width, simply apply the class oms-row-fullwidth to the row within this section. */ /* Column Styling */ .oms-section-fifty50 .et_pb_column { margin: 0 !important; /* NOTE: More styling in media queries below. */ } /* Text Module Styling */ .oms-section-fifty50 .et_pb_text { margin: 0 auto; } .oms-section-fifty50 .et_pb_text :last-child { margin-bottom: 0 !important; } .oms-section-fifty50 .et_pb_text .et_pb_text_inner { /* see media query */ } /* Image Module Styling */ .oms-section-fifty50 .et_pb_image { width: 100%; height: 100%; } .oms-section-fifty50 .et_pb_column .et_pb_module.et_pb_image { margin: 0 !important; } .oms-section-fifty50 .et_pb_image .et_pb_image_wrap { width: 100%; transition: all .5s ease; } .oms-section-fifty50 .et_pb_image .et_pb_image_wrap:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; background: #000; height: 100%; } .oms-section-fifty50 .et_pb_image .et_pb_image_wrap img { object-fit: cover; transition: all 1.25s ease; transition-delay: .15s; } /* Optimizing Visual Builder */ /* NOTE: I need to specify a little further so that the image module displays the images in Visual Builder for a better admin experience. */ .oms-section-fifty50 .et_pb_image:not(.ui-sortable) .et_pb_image_wrap img { opacity: 0; transform: scale(1.05); } /* --------------- BASE ANIMATION TRIGGERED ACTIONS --------------- */ /* Image Module */ .oms-section-fifty50 .et_pb_row.et_had_animation .et_pb_image_wrap img { opacity: 1; transform: scale(1.01); left: -1px; } /* --------------- FULL-WIDTH VARIATIONS --------------- */ /* Full-Width Row */ .oms-section-fifty50 .et_pb_row.oms-row-fullwidth { border-radius: unset; } /* --------------- 2 TEXT COLUMN SIBLING VARIATIONS --------------- */ /* BASE LEVEL STYLING */ .oms-section-fifty50 .et_pb_column.col-text + .et_pb_column.col-text:before { content: ''; position: absolute; display: block; background: rgba(0,0,0,.15); } /* 767px and below --------------*/ @media all and (max-width: 767px) { .oms-section-fifty50 .et_pb_column.col-text + .et_pb_column.col-text:before { left: 7%; right: 7%; height: 1px; } } /* 768px to 980px --------------*/ @media all and (min-width: 768px) and (max-width: 980px) { .oms-section-fifty50 .et_pb_column.col-text + .et_pb_column.col-text:before { left: 10%; right:10%; height: 1px; } } /* 981px and above --------------*/ @media all and (min-width: 981px) { .oms-section-fifty50 .et_pb_column.col-text + .et_pb_column.col-text:before { top: 100px; left: -1.5px; bottom: 100px; width: 3px; } } /* --------------- LARGE TEXT OVERLAY VARIATIONS --------------- */ /* BASE LEVEL STYLING */ .oms-section-fifty50 .et_pb_column.col-overlay .et_pb_module .et_pb_text_inner { z-index: 2; max-width: unset; } .oms-section-fifty50 .et_pb_column.col-overlay .et_pb_module h2 { font-size: 5vw !important; line-height: 1 !important; } /* 767px and below --------------*/ @media all and (max-width: 767px) { .oms-section-fifty50 .et_pb_row { width: 100% !important; border-radius: unset; /* This unsets the border-radius when the row goes edge-to-edge. */ } .oms-section-fifty50 .et_pb_text { padding: 50px 7%; } } /* 768px to 980px --------------*/ @media all and (min-width: 768px) and (max-width: 980px) { .oms-section-fifty50 .et_pb_text { padding: 75px 10%; } } /* 980px and below --------------*/ @media all and (max-width: 980px) { /* Image is desired to be on top on tablet & mobile */ .oms-section-fifty50 .et_pb_column:first-child.col-image .et_pb_image_wrap, .oms-section-fifty50 .oms-row-reverse-columns .et_pb_column:last-child.col-image .et_pb_image_wrap { clip-path: polygon(0 0,100% 0,100% 0,0 0); width: 100%; /* Added this to force the animation to work. */ } .oms-section-fifty50 .et_pb_column:first-child.col-image .et_pb_image_wrap:before, .oms-section-fifty50 .oms-row-reverse-columns .et_pb_column:last-child.col-image .et_pb_image_wrap:before { clip-path: polygon(0 0,100% 0,100% calc(100% - 0.1px),0 100%); } /* Image is desired to be on bottom on tablet & mobile */ .oms-section-fifty50 .et_pb_column:last-child.col-image .et_pb_image_wrap { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); } .oms-section-fifty50 .et_pb_column:last-child.col-image .et_pb_image_wrap:before { clip-path: polygon(0 0.1px,100% 0.1px,100% 100%,0 100%); } /* --------------- ANIMATION TRIGGERED VARIATION --------------- */ /* Image is desired to be on top on tablet & mobile */ .oms-section-fifty50 .et_pb_row.et_had_animation .et_pb_column:first-child.col-image .et_pb_image_wrap, .oms-section-fifty50 .et_pb_row.oms-row-reverse-columns.et_had_animation .et_pb_column:last-child.col-image .et_pb_image_wrap { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); } /* Image is desired to be on bottom on tablet & mobile */ .oms-section-fifty50 .et_pb_row.et_had_animation .et_pb_column:last-child.col-image .et_pb_image_wrap { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); } } /* 981px and above --------------*/ @media all and (min-width: 981px) { /* General Row */ .oms-section-fifty50 .et_pb_row { min-height: 600px; display: flex; } /* General Column */ .oms-section-fifty50 .et_pb_column { display: flex; justify-content: center; flex-direction: column; width: 50%; } /* Text Module */ .oms-section-fifty50 .et_pb_column .et_pb_text { padding: 50px 14%; /* the 14% coincides with the .container width which is 86%, and centered on the screen, so 7% from each side. */ } .oms-section-fifty50 .et_pb_text .et_pb_text_inner { max-width: 550px; } /* Image Module */ .oms-section-fifty50 .et_pb_image .et_pb_image_wrap { display: flex; position: absolute; height: calc(100% + 2px); margin-top: -1px; } /* Image is in the first column */ .oms-section-fifty50 .et_pb_column:first-child.col-image .et_pb_image_wrap { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); } .oms-section-fifty50 .et_pb_column:first-child.col-image .et_pb_image_wrap:before { clip-path: polygon(0 0,calc(100% - 0.1px) 0,100% 100%,0 100%) } /* Image is in the second column */ /* NOTE: I included the second selector line with the nth-child to help display better in Visual Builder. */ .oms-section-fifty50 .et_pb_column:last-child.col-image .et_pb_image_wrap, .oms-section-fifty50 .et_pb_column:nth-child(2).col-image .et_pb_image_wrap { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); } .oms-section-fifty50 .et_pb_column:last-child.col-image .et_pb_image_wrap:before, .oms-section-fifty50 .et_pb_column:nth-child(2).col-image .et_pb_image_wrap:before { clip-path: polygon(0.1px 0,100% 0,100% 100%,0 100%); } /* --------------- ANIMATION TRIGGERED VARIATION --------------- */ .oms-section-fifty50 .et_pb_row.et_had_animation .et_pb_column:first-child.col-image .et_pb_image_wrap, .oms-section-fifty50 .et_pb_row.ui-sortable .et_pb_column:first-child.col-image .et_pb_image_wrap { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); } .oms-section-fifty50 .et_pb_row.et_had_animation .et_pb_column:last-child.col-image .et_pb_image_wrap, .oms-section-fifty50 .et_pb_row.ui-sortable .et_pb_column:nth-child(2).col-image .et_pb_image_wrap { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); } } /*================================================================================= OMS SECTION SMALL ===============================================================================*/ /* --------------- BASE STYLING --------------- */ /* Section Styling */ body.orbit .et_pb_section.oms-section-small { padding-top: 50px; padding-bottom: 25px; } /*================================================================================= OMS SECTION FEATURE ===============================================================================*/ /* NOTE: this section has more narrow rows on desktop, and is used to feature/promote things like a large testimonial, or a Resource. */ /* --------------- BASE STYLING --------------- */ /* Section */ body.orbit #et-boc .et-l .et_pb_section.oms-section-feature, body.orbit .et_pb_section.oms-section-feature { padding-top: 0; padding-bottom: 0; z-index: 1; } /* Row with .oms-box-style-one selector */ body.orbit .et_pb_section.oms-section-feature .et_pb_row.oms-box-style-one { margin-bottom: 0 !important; } /* --------------- FULL-WIDTH VARIATION --------------- */ /* Row */ body.orbit .et_pb_section.oms-section-feature.full-width .et_pb_row { width: 100% !important; max-width: none; border-radius: unset; padding-left: 15%; padding-right: 15%; } /* --------------- SMALL VARIATION --------------- */ /* Row */ body.orbit .et_pb_section.oms-section-feature.small .et_pb_row { max-width: 950px; } /* --------------- SIBLING VARIATION --------------- */ .et_pb_section.oms-section-feature + .et_pb_section.oms-section-feature:not(.ui-sortable) { z-index: -1; } /* --------------- NARROW COLUMN WIDTH VARIATION --------------- */ /* Column */ body.orbit .et_pb_section.oms-section-feature.narrow-column .et_pb_row .et_pb_column { max-width: 950px; margin-left: auto !important; margin-right: auto !important; float: unset; } /*================================================================================= OMS SECTION SECONDARY NAV ===============================================================================*/ /* NOTE: this section is for secondary navigation, like on the About Sterling pages. */ /* --------------- BASE STYLING --------------- */ body.orbit .et_pb_section.et_section_regular.oms-section-navigation { background: #fff; padding-top: 0; padding-bottom: 0; z-index: 2; overflow: hidden; box-shadow: 0 2px 5px 0 rgba(0,0,0,.15); } /* Pseudo Element for inset drop shadow */ body.orbit .et_pb_section.et_section_regular.oms-section-navigation:after { content: ''; position: absolute; top: -5px; left: -5%; width: 110%; background: rgba(0,0,0,.8); height: 7px; filter: blur(5px); } /* 980px and below --------------*/ @media all and (max-width: 980px) { body.orbit .et_pb_section.et_section_regular.oms-section-navigation { display: none; } } /*================================================================================= OMS SECTION SIBLING ===============================================================================*/ /* NOTE: This practice is useful for instances where you want one section to feel more relevant to the previous section. */ .oms-bg-white + .et_pb_section.oms-bg-white.sibling:before, .oms-bg-gray-light + .et_pb_section.oms-bg-gray-light.sibling:before { content: ''; background: rgba(0,0,0,.15); height: 1px; position: absolute; top: 0; width: 65%; max-width: 1000px; left: 50%; transform: translateX(-50%); } /*================================================================================= OMS SECTION IMAGERY ===============================================================================*/ /* NOTE: This section is for the use of large shallow photos */ /* --------------- Base Styling --------------- */ .oms-section-imagery { padding-top: 0 !important; padding-bottom: 0 !important; } .oms-section-imagery .et_pb_column .et_pb_module.et_pb_image { margin-bottom: 0 !important; } .oms-section-imagery .et_pb_column .et_pb_module.et_pb_image .et_pb_image_wrap { width: 100%; } /* --------------- 2 IMAGE VARIATION --------------- */ /* NOTE: We may not need this variation, the client wants to implement a "triptych" approach, seen below, but I'm choosing to keep this code in here for now. */ .oms-section-imagery.images-2 .et_pb_column { width: 50%; margin: 0; } /* --------------- TRIPTYCH VARIATION --------------- */ /* NOTE: As of 12/09/2020, this is the direction that the client wants to move in for these images. */ /* NOTE: This variation only varies on tablet and mobile, see media query below for styling. */ /* 767px and below --------------*/ @media all and (max-width: 767px) { /* TRIPTYCH VARIATION */ .oms-section-imagery.triptych .et_pb_module.et_pb_image .et_pb_image_wrap { padding-top: 66.6666667%; /* This sets the proportion of the triptych to focus in on the center image on tablet and mobile */ } .oms-section-imagery.triptych .et_pb_module.et_pb_image .et_pb_image_wrap img { object-fit: cover; position: absolute; top: 0; height: 100%; } } /*================================================================================= OMS SECTION TESTIMONIAL ===============================================================================*/ /* --------------- BASE STYLING --------------- */ /* Quotation Mark graphic pseudo element */ body.orbit .et_pb_section.testimonial:after { content: ''; position: absolute; top: -25px; left: 50%; transform: translate(-50%,0px); z-index: 1; width: 75px; height: 75px; background-size: 100%; background-image: url(https://omsclerestory.wpengine.com/wp-content/uploads/2020/11/graphic-quotation-mark.svg); background-repeat: no-repeat; } /* Variation for when the section bg is green */ body.orbit .et_pb_section.testimonial.oms-overlay-green-gradient:after { background-image: url(https://omsclerestory.wpengine.com/wp-content/uploads/2020/12/graphic-quotation-mark-navy.svg); } /* Variation for when there's no headshot/portrait */ body.orbit .et_pb_section.testimonial.no-image .et_pb_column { max-width: 800px; margin-left: auto; margin-right: auto !important; float: unset; } /* Image Modulet */ body.orbit .et_pb_section.testimonial .et_pb_image { max-width: 150px; } /* Bolder Intro Text */ body.orbit .et_pb_section.testimonial .et_pb_text p.intro { font-weight: 600; font-size: 30px; line-height: 1.1; color: #fff; margin-bottom: 15px; text-shadow: 0 2px 5px rgba(0,0,0,.5); } /* 767px and below --------------*/ @media all and (max-width: 767px) { body.orbit .et_pb_section.testimonial .et_pb_text p.intro { font-size: 24px; } } /*================================================================================= OMS SECTION REALIGN ===============================================================================*/ /* NOTE: This section style was created for unique instances... for example, there's a block on desktop that has a centered header and intro p text, with a 3-column of blurbs, followed by a centered CTA button... however, on mobile, this whole section looks a little strange with some elements being centered and the blurbs being left-aligned... so, this styling is an answer to that. */ /* --------------- BASE STYLING --------------- */ /* This class is designed to be applied to sections. This acts as the "trigger", so to say. */ .oms-section-realign { } /* These classes designate the alignment on desktop - tablet - mobile. */ .oms-textalign-c-c-l { } /* 767px and below --------------*/ @media all and (max-width: 767px) { .oms-section-realign .oms-textalign-c-c-l { text-align: left; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- PAGE TYPE OVERRIDES ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= OVERRIDES for Commonly-Used elements in the Divi markup ===============================================================================*/ /* --------------- BASE STYLING --------------- */ /* This padding is similar to ".et_section_regular" */ /*body:not(.et-tb):not(.et-tb-has-header):not(.archive):not(.category):not(.search-results) #main-content .container,*/ /* NOTE: just want to note the previous variation, we ran into a conflict/bug, so I'm making a small tweak.*/ body:not(.et-tb):not(.et-tb-has-header):not(.search-results) #main-content .container { padding-top: 0px !important; /* This overrides Divi styling, and is unnecessary because I've tweaked some of the Core theme files. */ } /* This styling is similar to the Row and Container styling above. */ body.orbit #main-content .container { /* see code above in the "Row" section. I wanted to consolidate "like" items. */ } /* 767px and below --------------*/ @media all and (max-width: 767px) { #main-content .container, body:not(.et-tb):not(.et-tb-has-header) #main-content .container { padding-top: 35px; /* I chose to lessen the padding-top for these kinds of pages (compared to the basic section styling above). */ padding-bottom: 10px; } } /* 768px to 980px --------------*/ @media all and (min-width: 768px) and (max-width: 980px) { #main-content .container, body:not(.et-tb):not(.et-tb-has-header) #main-content .container { padding-top: 50px; /* I chose to lessen the padding-top for these kinds of pages (compared to the basic section styling above). */ padding-bottom: 25px; } } /*================================================================================= Category / Archive / Listing Page ===============================================================================*/ /* --------------- BASE STYLING --------------- */ /* Main Content Container - Common for Archive/Category and Search Results */ body.orbit.blog #main-content, body.orbit.archive #main-content, body.orbit.search-results #main-content { background-color: #f7f7f7 /* matches the bg color used on other parts of the site, aka "oms-bg-gray-light" */ } /* Blog Container */ body.orbit.blog .container { padding-top: 0 !important; } /* Left Area */ body.orbit.blog #content-area #left-area, body.orbit.category #content-area #left-area, body.orbit.archive #content-area #left-area, body.orbit.author #content-area #left-area { margin-right: unset; padding-bottom: unset; /* This overrides some silly styling of 23px */ margin-bottom: 25px; /* This establishes the consistent margin-bottom that I apply on many assets. */ width: 100%; } /* Sidebar */ body.orbit.blog #content-area #sidebar, body.orbit.category #content-area #sidebar, body.orbit.archive #content-area #sidebar, body.orbit.author #content-area #sidebar { display: none; } /* There's lots to override here. I'm going to undo a handful of default settings, then add this class/target to the other items below for consolidation. I've chosen to group all these basic overrides here with the other basic overrides for the Category/Archive listing page. These overrides put these elements back to a basic baseline, and then I call upon these again down with the other styling for blog posts... trying to keep "like things with like things" */ /* OVERRIDING for Default Category Listing Page Post Item */ body.orbit .post-wrapper-global article { display: unset; margin-bottom: unset !important; box-shadow: unset; transition: unset; position: unset; top: unset; border-radius: unset; overflow: unset; /* These override specific nth-of-type default targets */ margin-right: 0 !important; margin-left: 0 !important; } /* OVERRIDING for Default Category Listing Page Post Item "Post Data" */ body.orbit .post-wrapper-global article .post-data { padding: 0; display: flex; flex-direction: column; height: 100%; } /* OVERRIDING for Default Category Listing Page Post Item "Post Data" Entry Title */ body.orbit .post-wrapper-global article .post-data .entry-title { margin-bottom: 15px; /* Rather than use "unset", I plugged in the actual value because there's no way for me to specify which header tag that gets used here, and the default theme styling makes specific styling to influence this element. */ line-height: 1.25; } /* OVERRIDING for Default Category Listing Page Post Item "Post Data" Post Meta */ body.orbit #left-area .post-wrapper-global article .post-data .post-meta { padding-bottom: unset; } /* --------------- Creating better spacing on the Blog Landing --------------- */ /* 767px and below --------------*/ @media all and (max-width: 767px) { body.orbit.blog .et_pb_section:first-of-type, body.orbit.archive .et_pb_section:first-of-type { padding-top: 115px !important; } } /* 768px to 980px --------------*/ @media all and (min-width: 768px) and (max-width: 980px) { body.orbit.blog .et_pb_section:first-of-type, body.orbit.archive .et_pb_section:first-of-type { padding-top: 135px !important; } } /* 981px and above --------------*/ @media all and (min-width: 981px) { body.orbit.blog .et_pb_section:first-of-type, body.orbit.archive .et_pb_section:first-of-type { padding-top: 195px !important; } /* Title */ body.orbit.archive #page-container .archive-title h1 { font-size: 60px; } } /*================================================================================= Search Results Page ===============================================================================*/ /* --------------- BASE STYLING --------------- */ /* Title Wrap */ body.orbit.search-results .title-wrap { margin-bottom: 35px; } /* Search Term span */ body.orbit.search-results #left-area .title-wrap h1 .search-term { font-style: italic; color: #4da6ff; } /* Search Results Left Area */ body.orbit.search-results #left-area { width: unset; } /* Search Results */ .search-results--posts { /* NOTE: See styling below in the Posts section, where I've consolidated some common styling. */ } /* 1100px and above --------------*/ @media all and (min-width: 1100px) { /* Title Wrap */ body.orbit.search-results .title-wrap { margin-bottom: 75px; } } /*================================================================================= Single Post (Detail) ===============================================================================*/ /* --------------- BASE STYLING --------------- */ /* Removes default spacing at the bottom of the content */ .single .et_pb_post { margin-bottom: 0; padding-bottom: 0; } /* Container */ body.orbit.single-post #main-content .container { padding-bottom: 75px; /* Overrides more general styling from above */ width: 100%; max-width: none; } /* Left Area Container */ body.orbit.single-post.full-width #content-area #left-area { max-width: unset; padding-bottom: 0; } /* Common Styling for Header, Post Meta and Entry Content */ body.orbit.single-post #page-container h1, body.orbit.single-post .et_post_meta_wrapper .post-meta, body.orbit.single-post .entry-content { max-width: 1000px; margin-left: auto; margin-right: auto; } /* Post Title */ body.orbit.single-post #page-container h1 { text-transform: capitalize; } /* Post Meta */ #left-area .post-meta { font-size: 12px; } /* Entry Content */ body.orbit .et_pb_post .entry-content { padding-top: 75px; } /* In Post Media */ /* NOTE: this forces a "clear" on videos or images that are in the middle of the body copy, and potentially overlap the Featured Image. */ .et_pb_post .entry-content .fluid-width-video-wrapper, .et_pb_post .entry-content img { clear: both; } /* Inline Images */ .et_pb_post .entry-content p img { width: 80%; max-width: 700px; } /* --------------- DIVI BUILDER ACTIVATED --------------- */ /* Post Meta Wrapper */ body.orbit.single-post.et_pb_pagebuilder_layout .et_post_meta_wrapper { margin-bottom: 0; /* Overriding this Divi default value. */ } /* Sections within the Post content */ /* NOTE: hopefully, client doesn't over-use Divi Builder on Blog posts, becasue these should really be simple and streamlined, no need to over design/engineer blog posts. */ body.orbit.single-post .et_pb_post .entry-content .et_pb_section.et_section_regular { padding: 0 !important; /* removes the padding-top and padding-bottom */ } /* Column within the very first "section" */ /* My goal is to target the column in the first section, and remove the float so that the text wraps around the Featured Image... whilst not affecting following columns. */ .et_pb_post .entry-content .et_pb_section:first-of-type .et_pb_column { float: unset; } /* 767px and below --------------*/ @media all and (max-width: 767px) { /* Container*/ body.orbit.single-post #main-content .container { padding-bottom: 25px; /* Overrides more general styling from above */ } /* First Section - helps add padding top for the slightly transparent header bg color */ body.orbit.single-post .et_pb_section:first-of-type { padding-top: 115px !important; } /* Common */ body.orbit.single-post #page-container h1, body.orbit.single-post .et_post_meta_wrapper .post-meta, body.orbit.single-post .entry-content { width: 86%; } /* Entry Content */ body.orbit .et_pb_post .entry-content { padding-top: 50px; } /* Inline Images */ body.orbit .entry-content p img { margin: 35px 0; } } /* 768px to 980px --------------*/ @media all and (min-width: 768px) and (max-width: 980px) { /* Container*/ body.orbit.single-post #main-content .container { padding-bottom: 50px; /* Overrides more general styling from above */ } /* First Section - helps add padding top for the slightly transparent header bg color */ body.orbit.single-post .et_pb_section:first-of-type { padding-top: 135px !important; } /* Common */ body.orbit.single-post #page-container h1, body.orbit.single-post .et_post_meta_wrapper .post-meta, body.orbit.single-post .entry-content { width: 80%; } /* Entry Content */ body.orbit .et_pb_post .entry-content { padding-top: 75px; } /* Inline Images */ body.orbit .entry-content p img { margin: 50px 0; } } /* 981px and above --------------*/ @media all and (min-width: 981px) { /* First Section - helps add padding top for the slightly transparent header bg color */ body.orbit.single-post .et_pb_section:first-of-type { padding-top: 195px !important; } /* Common */ body.orbit.single-post #page-container h1, body.orbit.single-post .et_post_meta_wrapper .post-meta, body.orbit.single-post .entry-content { width: 88%; } /* Inline Images */ body.orbit .entry-content p img { margin: 50px 0; } } /*================================================================================= Team Bio Pages (Landing & Detail) ===============================================================================*/ /* NOTE: Brian, you will need to clean up this code when you have some down time. */ /* --------------- BASE STYLING --------------- */ body.post-type-archive-team_bio .et_builder_inner_content #et-boc:first-of-type .et-l .et_pb_section, body.orbit.single-team_bio .et_builder_inner_content #et-boc:first-of-type .et-l .et_pb_section { padding-top: 85px !important; } body.orbit.single-team_bio .et_builder_inner_content #et-boc:first-of-type .et-l .et_pb_section h1, body.orbit.single-team_bio .et_builder_inner_content #et-boc:first-of-type .et-l .et_pb_section h4 { color: #fff !important; } /* Team Bio Landing H1 */ body.post-type-archive-team_bio .et_pb_title_inner h1 { color: #fff !important; font-size: 28px !important; } @media (min-width: 768px) { body.post-type-archive-team_bio .et_pb_title_inner h1 { font-size: 38px !important; } } @media (min-width: 981px) { body.post-type-archive-team_bio .et_pb_title_inner h1 { font-size: 75px !important; } } /* Team Bio Detail H1 */ body.orbit.single-team_bio #page-container #et-boc .et-l h1 { text-transform: capitalize; } body.orbit .filters-wrapper { margin-top: 0; } body.orbit .post-bio.bio>a .thumbnail-image .et-pb-icon { color: #fff !important; } body.orbit .bio-desc { margin: 25px 0 0; } body.orbit .bio-name { font-size: 20px; font-weight: 400; margin-bottom: 5px; letter-spacing: 1px; } body.orbit .bio-position { font-size: 15px; font-style: unset; color: #666; } /* Team Detail - Removes the default styling that Divi adds to detail page. */ body.orbit.single-team_bio .bio-heading .container { padding-bottom: 0 !important; } /* Team Detail Anchor Menu on Team Detail */ body.orbit .bio-content-wrapper .anchor-menu ul li a { font-weight: 400 !important; } /* 981px and above --------------*/ @media all and (min-width: 981px) { body.orbit .bio-content-wrapper .anchor-menu { position: sticky !important; top: 18vh; } body.post-type-archive-team_bio .et_builder_inner_content #et-boc:first-of-type .et-l .et_pb_section, body.orbit.single-team_bio .et_builder_inner_content #et-boc:first-of-type .et-l .et_pb_section { padding-top: 195px !important; } } /*------------------------------------------------------------------------------------------------------------------------------- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ ================================================================================================================================= CONTENT - More-complicated objects that are used in the site ================================================================================================================================= \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ ---------------------------------------------------------------------------------------------------------------------------------*/ /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- MODULES ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= General Module Styles ===============================================================================*/ /*-------------- Base Styling --------------*/ /* General Zero-Out */ /* NOTE: Removes margin bottom on modules within columns; this allows the spacing below each piece of content to be influenced by the smaller components within. */ .et_pb_column .et_pb_module { margin-bottom: 0px !important; } /* Common Margin Bottom */ .et_pb_column .et_pb_module.et_pb_image, .et_pb_column .et_pb_module.et_pb_slider, .et_pb_column .et_pb_module.et_pb_video, .et_pb_column .et_pb_module.et_pb_filterable_portfolio, .et_pb_column .et_pb_portfolio_grid, .et_pb_column .et_pb_module.et_pb_tabs, .et_pb_column .et_pb_module.et_pb_search, .et_pb_column .et_pb_module.oms-box-style-one, /* This overrides my general module styling above. */ .et_pb_column .et_pb_module.et_pb_accordion, .et_pb_column .et_pb_text.oms-text-video-info { margin-bottom: 25px !important; } /* 768px to 980px --------------*/ @media all and (min-width: 768px) and (max-width: 980px) { /* Common Margin Bottom */ .et_pb_column .et_pb_module.et_pb_image, .et_pb_column .et_pb_module.et_pb_slider, .et_pb_column .et_pb_module.et_pb_video, .et_pb_column .et_pb_module.et_pb_filterable_portfolio, .et_pb_column .et_pb_portfolio_grid, .et_pb_column .et_pb_module.et_pb_tabs, .et_pb_column .et_pb_module.et_pb_search, .et_pb_column .et_pb_module.oms-box-style-one, /* This overrides my general module styling above. */ .et_pb_column .et_pb_module.et_pb_accordion, .et_pb_column .et_pb_text.oms-text-video-info { margin-bottom: 50px !important; } } /*================================================================================= Card Variations ===============================================================================*/ /*-------------- Base Styling --------------*/ /* Container */ /* NOTE: I removed ".et_clickable" from this styling because the Visual Builder doesn't include that class, so these specs were not visible. */ .et_pb_module.card { background: #fff; padding: 25px; box-shadow: 0px 10px 25px -10px rgba(0,0,0,0.15); } /* Last Child */ .et_pb_blurb.card .et_pb_blurb_description :last-child { margin: 0 !important; } /*-------------- White BG Variation --------------*/ .oms-bg-white .et_pb_module.card { border: 1px solid #e1e1e1; background: #f8f8f8 !important; } /*-------------- Dark Variation --------------*/ .et_pb_module.card.et_pb_bg_layout_dark { background: linear-gradient(335deg,rgba(36,62,115,1) 0%,rgba(61,96,166,1) 100%) !important; } /*-------------- Clickable Card Variation --------------*/ /* Transition */ .et_pb_module.card.et_clickable { transition: all .2s ease-out; } /* 981px and above */ @media all and (min-width: 981px) { /*-------------- Hover State --------------*/ .et_pb_module.et_clickable.card:hover { box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.25); cursor: pointer; transform: translateY(-5px); } /* CTA Link */ .et_pb_module.et_clickable.card:hover .cta-link { background-size: 0 2px,100% 2px; background-position: 100% 100%,0 100%; } /* General text hyperlink within a clickable card */ .et_pb_module.et_clickable.card:hover p a:not(.cta-button):not(.cta-button-reverse):not(.cta-button-ghost):not(.cta-link) { background-size: 0 2px,100% 2px; background-position: 100% 100%,0 100%; } } /* 1025px and above */ @media all and (min-width: 1025px) { /* --------------- 2 Column Layout and 3 Column Layout --------------- */ .col-2-2-1 .et_pb_module.card, .col-3-2-1 .et_pb_module.card { padding: 35px; /* Increased padding (for all blurbs with the .card add-on) within the card on 2-wide columns. */ } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- ACCORDION MODULE ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= Accordion Style One ===============================================================================*/ /* --------------- Base Styling --------------- */ /* Toggle Module Container */ .oms-accordion-style-one { background: #fff; padding: 50px; border-radius: 5px; box-shadow: 0px 10px 60px -30px rgba(0,0,0,0.5) } /* Toggle Open and Toggle Close */ .oms-accordion-style-one .et_pb_toggle_open, .oms-accordion-style-one .et_pb_toggle_close { background-color: unset; padding: unset; } /* Toggle */ .oms-accordion-style-one .et_pb_toggle { border: none; padding-top: 25px; padding-bottom: 25px; border-bottom: 1px solid #ddd; } .oms-accordion-style-one .et_pb_toggle:first-child { padding-top: 0; } .oms-accordion-style-one .et_pb_toggle:last-child { border-bottom: none; padding-bottom: 0; } /* Title */ .oms-accordion-style-one .et_pb_toggle_title { color: #000; margin-bottom: 0; } .oms-accordion-style-one .et_pb_toggle_title:before { content: "\33"; color: #4da6ff; font-weight: 700; font-size: 100%; margin-top: unset; transform: translateY(-50%); } .oms-accordion-style-one .et_pb_toggle_open .et_pb_toggle_title:before { content: '\f056'; display: block !important; } /* Content Container */ .oms-accordion-style-one .et_pb_toggle_content { padding-top: 10px; padding-right: 50px; } .oms-accordion-style-one .et_pb_toggle_content :last-child { margin-bottom: 0; } /* 767px and below --------------*/ @media all and (max-width: 767px) { /* Toggle Module Container */ .oms-accordion-style-one { padding: 25px; } /* Title */ .oms-accordion-style-one .et_pb_toggle_title { padding-right: 30px; } /* Content Container */ .oms-accordion-style-one .et_pb_toggle_content { padding-right: 30px; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- BLOG MODULE, LISTING PAGES, ARCHIVE PAGES, SEARCH RESULTS ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= CONTAINING ELEMENT ===============================================================================*/ /* --------------- Base Styling --------------- */ /* Establish the grid */ body.orbit .post-wrapper-global, body.search-results #left-area .search-results--posts, .et_pb_posts > div { /* Don't target the class on this div because it produces mixed results in Visual Builder. */ display: grid; grid-column-gap: 25px; grid-row-gap: 35px; margin-bottom: 25px; } body.orbit .post-wrapper-global, body.search-results #left-area .search-results--posts, .et_pb_posts.col-3 > div { grid-template-columns: repeat(3, 1fr); /*Establishes columns within grid*/ } body.orbit .post-wrapper-global.col-4, .et_pb_posts.col-4 > div { grid-template-columns: repeat(4, 1fr); /*Establishes columns within grid*/ } /*================================================================================= INDIVIDUAL POST ITEM ===============================================================================*/ /* --------------- Resting State --------------- */ /* OVERRIDING for Default Category Listing Page Containing element. */ /* There's lots to override here. I'm going to undo a handful of default settings, then add this class/target to the other items below for consolidation. */ body.orbit .post-wrapper-global article { display: unset; } /* Common Styling for the Container */ body.orbit .post-wrapper-global article, body.search-results .et_pb_post, .et_pb_posts .et_pb_post { margin: 0 !important; word-wrap: break-word; display: flex; /* This allows the content within to be able to be reordered */ flex-direction: column; border-top: 1px solid rgba(0,0,0,.35); padding-top: 15px; transition: all .3s ease-out; } /* Thumbnail Image */ body.orbit #et-boc .et-l .et_pb_post .entry-featured-image-url, body.orbit .post-wrapper-global .entry-featured-image-url, body.search-results .et_pb_post.has-post-thumbnail > a, .et_pb_posts .et_pb_post .entry-featured-image-url { margin-top: -15px; display: flex; justify-content: center; align-items: center; position: relative; } /* Native Category Thumbnail */ .et_pb_post a img { width: 100%; /* this is needed for the basic default Category teaser featured images. */ } /* Overlay */ body.orbit .post-wrapper-global .entry-featured-image-url:before, body.search-results .et_pb_post.has-post-thumbnail > a:before, .et_pb_posts .et_pb_post .entry-featured-image-url:before { content: ''; background: rgba(51,51,51,0.6); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; opacity: 0; transition: all .2s ease-out; } /* Overlay Icon */ body.orbit .post-wrapper-global .entry-featured-image-url:after, body.search-results .et_pb_post.has-post-thumbnail > a:after, .et_pb_posts .et_pb_post .entry-featured-image-url:after { position: absolute; font-size: 32px; content: "\e03c"; z-index: 2; font-family: "ETmodules" !important; -moz-osx-font-smoothing: grayscale; line-height: 1; text-transform: none; color: #fff; transform: translateY(10px); opacity: 0; transition: all .2s ease-out; } /* Header / Title */ body.orbit #page-container .post-wrapper-global article .post-data .entry-title, body.orbit.search-results #page-container .et_pb_post h2, body.orbit #page-container .et_pb_posts .entry-title { font-size: 20px; /* On previous sites, this .entry-title is intended to be smaller than the standard h3... but this site has a smaller h3 to begin with. */ order: 2; /* Reorders this header to beneath the other text */ } body.orbit .post-wrapper-global article .post-data .entry-title a, body.search-results .et_pb_post h2 a, .et_pb_posts .entry-title a, .et_pb_post .entry-title a { color: #272b33; } body.orbit .post-wrapper-global article .post-data .entry-title a:after, body.search-results .et_pb_post h2 a:after, .et_pb_posts .entry-title a:after, .et_pb_post .entry-title a:after { content: "\35"; font-family: 'ETmodules'; position: relative; color: #3d60a6; transition: all .2s ease-out; } /* Post Meta - Date & Category */ body.orbit .post-wrapper-global article .post-data .post-meta, body.search-results .et_pb_post .post-meta, body.orbit .et_pb_posts article .post-meta { order: 1; font-size: 12px !important; font-style: unset; color: #000 !important; letter-spacing: .5px; } /* Post Meta Links - Exists on several template pages, and in modules, and even in page modules. */ body.orbit #left-area .post-meta a, body.orbit .et_pb_post .post-meta a, body.orbit .et_pb_portfolio_item .post-meta a { color:#3d60a6; font-weight: 400; text-decoration: underline; } body.orbit #left-area .oms-bg-gray-dark .post-meta a { color: #fff!important; } /* Post Content - Excerpt */ body.orbit .post-wrapper-global article .post-data p:not(.post-meta), body.search-results .et_pb_post p:last-child, body.orbit .et_pb_posts .post-content p, body.orbit .et_pb_posts .post-content { order: 3; font-size: 14px; /*This size is set to be the same as the p on a mobile device. */ line-height: 1.6; /*margin-bottom: 25px;*/ /*Removed for Clerestory project */ } /* Post Content - Last Child Paragraph Text */ body.orbit .post-wrapper-global article .post-data p:last-child, body.search-results .et_pb_post p:last-child, body.orbit .et_pb_posts .post-content p:last-child { margin-bottom: 0; } /*================================================================================= OMS POST VARIATION ONE ===============================================================================*/ /* --------------- Basic Styling --------------- */ /* Basic styles will go here. */ /* 981px and above */ @media all and (min-width: 981px) { /* First Child */ .post-wrapper-global.oms-post-variation-one .et_pb_post:first-child, .et_pb_posts.oms-post-variation-one .et_pb_post:first-child { grid-column: 1 / 3; /* span from grid column line 1 to 3 (i.e., span 2 columns) */ } /* 7th Child */ .post-wrapper-global.oms-post-variation-one .et_pb_post:nth-child(7), .et_pb_posts.oms-post-variation-one .et_pb_post:nth-child(7) { grid-column: 2 / 4; /* span from grid column line 1 to 3 (i.e., span 2 columns) */ } body.orbit #page-container .post-wrapper-global.oms-post-variation-one .et_pb_post:first-child .entry-title, body.orbit #page-container .post-wrapper-global.oms-post-variation-one .et_pb_post:nth-child(7) .entry-title, body.orbit #page-container .et_pb_posts.oms-post-variation-one .et_pb_post:first-child .entry-title, body.orbit #page-container .et_pb_posts.oms-post-variation-one .et_pb_post:nth-child(7) .entry-title { font-size: 40px; line-height: 1.1; font-weight: 300; } body.orbit #page-container .post-wrapper-global.oms-post-variation-one .et_pb_post:first-child .post-content p, body.orbit #page-container .et_pb_posts.oms-post-variation-one .et_pb_post:first-child .post-content p, body.orbit #page-container .post-wrapper-global.oms-post-variation-one .et_pb_post:nth-child(7) .post-content p, body.orbit #page-container .et_pb_posts.oms-post-variation-one .et_pb_post:nth-child(7) .post-content p { font-size: 18px; } } /*================================================================================= PAGINATION ===============================================================================*/ /* --------------- Base Styling --------------- */ /* This is for when I use the Blog module on a Page; Divi tucks the pagination within the larger container along with the individual articles... bad markup... so I had to get creative using the grid-column styling. */ .et_pb_posts > div > div:last-of-type { grid-column: 1/4; margin-top: 35px; } body.orbit .pagination { border-top: 1px solid rgba(0,0,0,.2); padding-top: 20px; } /* Button Alignment */ body.orbit .pagination .alignleft { float: right; } body.orbit .pagination .alignright { float: left; } /* Button Styling */ /* NOTE: This styling is located with the other button styling */ /* This styling is used on Archive Template and on Cateogry Template. This is just the fastest solution, without overhauling the base template files. */ .post-wrapper-global + .pagination { margin-top: 75px; } /*================================================================================= MEDIA QUERIES ===============================================================================*/ /* 767px and below --------------*/ @media all and (max-width: 767px) { /* Establish the grid */ body.orbit .post-wrapper-global, body.search-results #left-area .search-results--posts, .et_pb_posts > div { grid-gap: 20px; } body.orbit .post-wrapper-global, body.search-results #left-area .search-results--posts, .et_pb_posts.col-3 > div, .et_pb_posts.col-4 > div { grid-template-columns: repeat(1, 1fr); } /* Pagination */ .et_pb_posts > div > div:last-of-type { grid-column: 1/2; margin-top: 15px; } .post-wrapper-global + .pagination { margin-top: 35px; } /* Header / Title */ body.orbit #page-container .post-wrapper-global article .post-data .entry-title, body.orbit.search-results #page-container .et_pb_post h2, .et_pb_posts .entry-title { font-size: 19px; /* This matches the font-size adjustments that the body.orbit h3 makes. */ } /* Layout Variation - Just trying this out, going to present to client before completely committing to this idea. */ /* NOTE: This puts posts side-by-side, 2-across on mobile */ .et_pb_posts.col-3.variation > div { grid-template-columns: repeat(2, 1fr); grid-gap: 15px; } .et_pb_posts.col-3.variation .et_pb_post { padding: 15px 15px 5px; } .et_pb_posts.col-3.variation .et_pb_post .entry-featured-image-url { margin-bottom: 15px !important; } .et_pb_posts.col-3.variation .entry-title { font-size: 12px; } .et_pb_posts.col-3.variation .post-content { display: none; } .et_pb_posts.col-3.variation article .post-meta { font-size: 10px; display: none; } } /* 768px to 980 --------------*/ @media all and (min-width: 768px) and (max-width: 980px) { /* Header / Title */ body.orbit #page-container .post-wrapper-global article .post-data .entry-title, body.orbit.search-results #page-container .et_pb_post h2, .et_pb_posts .entry-title { font-size: 22px; /* This matches the font-size adjustments that the body.orbit h3 makes. */ } } /* 768px to 1024 --------------*/ @media all and (min-width: 768px) and (max-width: 1024px) { /* Establish the grid */ body.orbit .post-wrapper-global, body.search-results #left-area .search-results--posts, .et_pb_posts.col-3 > div { grid-template-columns: repeat(2, 1fr); } /* Pagination */ .et_pb_posts > div > div:last-of-type { grid-column: 1/3; } } /* 768px to 1199 --------------*/ @media all and (min-width: 768px) and (max-width: 1199px) { /* Establish the grid */ .et_pb_posts.col-4 > div { grid-template-columns: repeat(2, 1fr); } } /* 981px and above */ @media all and (min-width: 981px) { body.orbit .post-wrapper-global, body.search-results #left-area .search-results--posts, .et_pb_posts > div { /* Don't target the class on this div because it produces mixed results in Visual Builder. */ grid-column-gap: 50px; grid-row-gap: 70px; } /* --------------- Hover State --------------- */ /* Thumbnail Image */ body.orbit .post-wrapper-global .entry-featured-image-url:hover:before, body.search-results .et_pb_post.has-post-thumbnail:hover > a:before, .et_pb_posts .et_pb_post .entry-featured-image-url:hover:before { opacity: 1; } body.orbit .post-wrapper-global .entry-featured-image-url:hover:after, body.search-results .et_pb_post.has-post-thumbnail:hover > a:after, .et_pb_posts .et_pb_post .entry-featured-image-url:hover:after { transform: translateY(0px); opacity: 1; } /* Title */ body.orbit .et-db #et-boc .et-l .post-wrapper-global article .post-data .entry-title a:hover, /* Fucking Divi */ body.orbit .post-wrapper-global article .post-data .entry-title a:hover, body.search-results .et_pb_post h2 a:hover, .et_pb_posts .entry-title a:hover, .et_pb_post .entry-title a:hover { color: #3d60a6; } body.orbit .post-wrapper-global article .post-data .entry-title a:hover:after, body.search-results .et_pb_post h2 a:hover:after, .et_pb_posts .entry-title a:hover:after, .et_pb_post .entry-title a:hover:after { left: 13px; } /* Post Meta */ body.orbit #left-area .post-meta a:hover, body.orbit .et_pb_post .post-meta a:hover, body.orbit .et_pb_portfolio_item .post-meta a:hover { text-decoration: none !important; color: #000; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- BLURB MODULE ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= Common Base Styling ===============================================================================*/ /*-------------- General Styling --------------*/ /* General Styling For the "Content" container. Overrides the Divi default styling. */ .et_pb_blurb .et_pb_blurb_content { max-width: unset; } /* General Blurb Image Styling */ .et_pb_blurb .et_pb_main_blurb_image { display: block; margin-bottom: 0; } /* Remove Default Animation */ .et_pb_blurb .et_pb_animation_top.et-animated { animation: none; } /*-------------- Blurb Position Left General Styling --------------*/ .et_pb_blurb_position_left { /* See styling for general Modules for margin-bottom styling. */ } .et_pb_blurb_position_left .et_pb_blurb_content { display: flex; } .et_pb_blurb_position_left .et_pb_main_blurb_image { margin-right: 20px; } .et-db #et-boc .et-l .et_pb_blurb_position_left .et_pb_blurb_container, /* Fucking Divi */ .et_pb_blurb_position_left .et_pb_blurb_container { padding-left: 0; /*overrides the default padding because in the event that there isn't an image, I don't want any padding.*/ width: 100%; /* LEAVE THIS VALUE - this 100% is necessary for the content within this container to fill in the remainder of the space to the right of the image. */ } /*-------------- Blurb Position Top General Styling --------------*/ .et_pb_blurb_position_top .et_pb_main_blurb_image { margin-bottom: 25px; } .et_pb_blurb_position_top.et_pb_text_align_center .et_pb_main_blurb_image { margin-left: auto; margin-right: auto; } /*-------------- Blurb Description --------------*/ .et_pb_blurb:not(.card) .et_pb_blurb_description { margin-bottom: 25px; /* Adding this in because if the admin doesn't manually specify that text is a , WordPress doesn't automatically inject the markup like it does on other areas of the site. */ } /*-------------- Clickable Variation --------------*/ /* Header */ .et_pb_blurb.et_clickable .et_pb_module_header a { color: #000; /* Overrides the Header color if link is applied to it. */ position: relative; } /* Pseudo Element for Header */ .et_pb_blurb.et_clickable .et_pb_module_header:after { /*content: "\35";*/ content: '\24'; font-family: "ETmodules"; font-weight: 500; font-size: 75%; position: relative; left: 8px; color: #4da6ff; transition: all .2s ease-out; } /* 767px and below --------------*/ @media all and (max-width: 767px) { /* General Styling for Blurb Position Left */ .et_pb_blurb_position_left .et_pb_main_blurb_image { margin-right: 15px; } } /* 981px and above */ @media all and (min-width: 981px) { /*-------------- Hover State --------------*/ /* Header */ .et_pb_blurb.card.et_clickable:hover .et_pb_module_header { color: #4da6ff !important; } /* Header Pseudo Element */ .et_pb_blurb.card.et_clickable:hover .et_pb_module_header:after { left: 13px; } } /*================================================================================= Blurb Style One ===============================================================================*/ /* NOTE: This blurb is kind of a general-use blurb. Image is positioned above the text.*/ /* --------------- Card Variation --------------- */ /* Container */ .oms-blurb-style-one.et_pb_blurb.card { position: relative; padding: 50px; } .oms-blurb-style-one.et_pb_blurb.card:before { content: ''; position: absolute; border: 1px solid rgba(0,0,0,.3); top: 15px; left: 15px; bottom: 15px; right: 15px; } .oms-blurb-style-one.et_pb_blurb.card.et_pb_bg_layout_dark:before { border-color: rgba(255,255,255,.3); } /* Image Wrap */ .oms-blurb-style-one.et_pb_blurb.card .et_pb_image_wrap { margin: -25px -25px 25px; position: relative; /* this helps with hover overlay */ display: flex; /* this helps with hover overlay */ justify-content: center; /* this helps with hover overlay */ align-items: center; /* this helps with hover overlay */ } /* Overlay */ .oms-blurb-style-one.et_pb_blurb.card .et_pb_image_wrap:before { content: ''; background: linear-gradient(135deg, rgba(0,153,160,0.75) 0%, rgba(95,183,162,0.75) 100%); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; opacity: 0; transition: all 0.3s; } /* Overlay Icon */ .oms-blurb-style-one.et_pb_blurb.card .et_pb_image_wrap:after { position: absolute; font-size: 32px; content: "\e03c"; z-index: 2; font-family: "ETmodules" !important; -moz-osx-font-smoothing: grayscale; line-height: 1; text-transform: none; color: #fff; transform: translateY(10px); opacity: 0; transition: all 0.3s; } /* 981px and above */ @media all and (min-width: 981px) { /* --------------- 2 Column Layout --------------- */ .col-2-1-1 .oms-blurb-style-one.et_pb_blurb.card { padding: 50px; /* Increased padding within the card on 2-wide columns. */ } .col-2-1-1 .oms-blurb-style-one.et_pb_blurb.card .et_pb_image_wrap { margin: -50px -50px 50px; /* Increased negative margins that correspond with the padding in the styling just above. */ } /* --------------- Hover State --------------- */ .oms-blurb-style-one.et_pb_blurb.et_clickable.card:hover .et_pb_image_wrap:before { opacity: 1; } .oms-blurb-style-one.et_pb_blurb.et_clickable.card:hover .et_pb_image_wrap:after { transform: translateY(0px); opacity: 1; } } /* 1025px and above */ @media all and (min-width: 1025px) { /* --------------- 2 Column Layout and 3 Column Layout --------------- */ .col-2-2-1 .oms-blurb-style-one.et_pb_blurb.card .et_pb_image_wrap, .col-3-2-1 .oms-blurb-style-one.et_pb_blurb.card .et_pb_image_wrap { margin: -35px -35px 35px; /* Increased negative margins (for only blurb-style-one) that correspond with the padding in the styling just above. */ } } /*================================================================================= Blurb Style Two ===============================================================================*/ /* NOTE: This blurb is used for testimonial authors. Image is positioned to the left of text.*/ /*-------------- Base Styling --------------*/ /* Module Container */ .et_pb_module.oms-blurb-style-two { max-width: 450px; /*margin-bottom: 25px !important;*/ position: relative; /* This prevents the pseudo element from going outside this module (visually) */ } /* Sibling relationship, when Blurb Style Two follows a text module. This is tailored for the Testimonials. */ .et_pb_text + .et_pb_module.oms-blurb-style-two { margin-top: 30px; padding-top: 30px; } .et_pb_text + .et_pb_module.oms-blurb-style-two:before { content: ''; background: #4da6ff; height: 3px; width: 50px; position: absolute; top: 0; left: 0; } .oms-overlay-green-gradient .et_pb_module.oms-blurb-style-two:before { background: rgba(255,255,255,.35); /* Changes color when on green overlay for the Clerestory Team testimonials. */ } /* Content Container */ .oms-blurb-style-two .et_pb_blurb_content { align-items: center; min-height: 65px; } /* Image Styling */ .oms-blurb-style-two.et_pb_blurb_position_left .et_pb_main_blurb_image { width: 20%; max-width: 70px; flex: 0 0 100%; /* NOTE: this needs to be used in conjunction with the width setting above. */ } .oms-blurb-style-two .et_pb_image_wrap { border-radius: 100%; overflow: hidden; box-shadow: 0px 10px 60px -10px rgba(0,0,0,0.5); } /* Text Container */ /*.oms-blurb-style-two.et_pb_blurb.et_pb_text_align_left .et_pb_blurb_content .et_pb_blurb_container { text-align: center; }*/ .oms-blurb-style-two.et_pb_blurb.et_pb_text_align_left .et_pb_main_blurb_image + .et_pb_blurb_container { text-align: left; } /* Header */ .oms-blurb-style-two .et_pb_module_header { margin-bottom: 0 !important; } /* Paragraph Text */ .oms-blurb-style-two .et_pb_blurb_description, .oms-blurb-style-two .et_pb_blurb_description p { font-size: 14px !important; margin-bottom: 0; } .oms-blurb-style-two.et_pb_bg_layout_dark .et_pb_blurb_description, .oms-blurb-style-two.et_pb_bg_layout_dark .et_pb_blurb_description p { color: rgba(255, 255, 255, 0.6); } /* 767px and below --------------*/ @media all and (max-width: 767px) { /* Image Styling */ .oms-blurb-style-two.et_pb_blurb_position_left .et_pb_main_blurb_image { max-width: 60px; } /* Header */ .oms-blurb-style-two .et_pb_module_header { font-size: 13px; } /* Paragraph Text */ .oms-blurb-style-two .et_pb_blurb_description, .oms-blurb-style-two .et_pb_blurb_description p { font-size: 12px !important; line-height: 1.2 !important; } } /*================================================================================= Blurb Style Three ===============================================================================*/ /* NOTE: This blurb is used for the Testimonials that feature the logo and text... could be logo or headshot. Image/logo is positioned above the text. Both regular and featured size. */ /*-------------- Base Styling --------------*/ /* Image Styling */ .oms-blurb-style-three .et_pb_main_blurb_image { width: 50%; max-width: 125px; margin-bottom: 50px; overflow: visible; } .oms-blurb-style-three .et_pb_image_wrap img { } /* Header */ .oms-blurb-style-three .et_pb_module_header { display: none; } /* Blurb Description Container */ .oms-blurb-style-three .et_pb_blurb_description { margin-bottom: 50px; /* I added spacing here because I don't target this div anywhere else (no conflicts), and this helps add space between module below. */ } /* Blurb Description Container / first of type */ .oms-blurb-style-three .et_pb_blurb_description, .oms-blurb-style-three .et_pb_blurb_description p:first-of-type { font-size: 20px; line-height: 1.4; position: relative; } .et_pb_bg_layout_dark.oms-blurb-style-three .et_pb_blurb_description p:first-of-type { color: #fff; } /* Blurb Description Container - last-child */ .oms-blurb-style-three .et_pb_blurb_description :last-child { margin: 0 !important; } /* 767px and below --------------*/ @media all and (max-width: 767px) { /* Image */ .oms-blurb-style-three .et_pb_main_blurb_image { width: 50%; max-width: 125px; margin-bottom: 25px; } /* Blurb Description */ .oms-blurb-style-three .et_pb_blurb_description { margin-bottom: 25px; } } /*-------------- Featured Variation --------------*/ .oms-blurb-style-three.featured { margin-bottom: 25px !important; } /* Blurb Image */ .oms-blurb-style-three.featured .et_pb_main_blurb_image { width: 100%; max-width: unset; margin-bottom: 0 } .oms-blurb-style-three.featured .et_pb_image_wrap img { border-radius: 5px 5px 0 0; overflow: hidden; } /* Blurb Container */ .oms-blurb-style-three.featured .et_pb_blurb_container { border-radius: 0 0 5px 5px; padding: 35px 25px 25px; } .oms-blurb-style-three.featured.et_pb_bg_layout_light .et_pb_blurb_container { background: #fff; } .oms-blurb-style-three.featured.et_pb_bg_layout_dark .et_pb_blurb_container { background-image: linear-gradient(300deg,rgba(93,135,161,1) 0%,rgba(41,79,103,1) 100%)!important; } /* Blurb Description */ .oms-blurb-style-three.featured .et_pb_blurb_description { margin-bottom: 0; } /* Blurb Description Container - first .featured variation */ .oms-blurb-style-three.featured .et_pb_blurb_description p:first-of-type:before { content: '“'; position: absolute; color: #4da6ff; top: 0; left: 50%; font-size: 45px; line-height: 1; transform: translate(-50%, -60%); font-weight: 500; } /* h6 */ .oms-blurb-style-three.featured .et_pb_blurb_container h6 { margin-bottom: 0 !important; } /* paragraph text that follows the h6 */ .oms-blurb-style-three.featured .et_pb_blurb_container h6 + p { font-size: 16px; } /* 767px and below --------------*/ @media all and (max-width: 767px) { } /* 768px to 980px --------------*/ @media all and (min-width: 650px) and (max-width: 980px) { /* Blurb Container */ .oms-blurb-style-three.featured .et_pb_blurb_container { padding: 60px 50px 50px; } /* Blurb Description Container / first of type */ .oms-blurb-style-three.featured .et_pb_blurb_description, .oms-blurb-style-three.featured .et_pb_blurb_description p:first-of-type { font-size: 22px; } .oms-blurb-style-three.featured .et_pb_blurb_description p:first-of-type:before { font-size: 60px; } } /* 980px and below --------------*/ @media all and (max-width: 980px) { .oms-blurb-style-three.featured .et_pb_blurb_content { box-shadow: 0px 10px 60px -30px rgba(0,0,0,0.5); } } /* 981px and above --------------*/ @media all and (min-width: 981px) { .oms-blurb-style-three.featured .et_pb_blurb_content { display: flex; justify-content: center; align-items: center; max-width: 100% !important; } /* Blurb Image */ .oms-blurb-style-three.featured .et_pb_main_blurb_image { display: block; width: 70%; } .oms-blurb-style-three.featured .et_pb_image_wrap img { border-radius: 5px; box-shadow: 0px 10px 60px -30px rgba(0,0,0,0.5); } /* Blurb Container */ .oms-blurb-style-three.featured .et_pb_blurb_container { width: 40%; padding: 5%; z-index: 9; margin-left: -10%; border-radius: 5px; box-shadow: 0px 10px 60px -30px rgba(0,0,0,0.5); } /* Blurb Description Container / first of type */ .oms-blurb-style-three.featured .et_pb_blurb_description, .oms-blurb-style-three.featured .et_pb_blurb_description p:first-of-type { font-size: 25px; text-align: left; } .oms-blurb-style-three.featured .et_pb_blurb_description p:first-of-type:before { left: 0; font-size: 75px; transform: translate(-50%, -50%); } /* Reversed Order */ .oms-blurb-style-three.featured.reverse .et_pb_blurb_content { flex-direction: row-reverse; } .oms-blurb-style-three.featured.reverse .et_pb_blurb_container { margin-left: unset; margin-right: -10%; } } /*================================================================================= Blurb Style Four ===============================================================================*/ /* NOTE: This blurb is used for icons. Image can be positioned either ABOVE the header, or to the LEFT of the header.*/ /*-------------- Base Styling --------------*/ /* Icon Color (if this option is selected) */ .oms-blurb-style-four .et-pb-icon { color: #4da6ff !important; } /*-------------- Position Top Variation --------------*/ /* Image Styling */ .oms-blurb-style-four.et_pb_blurb_position_top .et_pb_main_blurb_image { width: 50%; max-width: 75px; overflow: visible; } /*-------------- Position Left Variation --------------*/ /* Image Styling */ .oms-blurb-style-four.et_pb_blurb_position_left .et_pb_main_blurb_image { width: 25%; max-width: 60px; position: relative; } /* Icon Styling */ .oms-blurb-style-four.et_pb_blurb_position_left .et-pb-icon { font-size: 39px; } /* Typography */ .oms-blurb-style-four.et_pb_blurb_position_left .et_pb_blurb_description p { font-size: 16px; } /* 767px and below --------------*/ @media all and (max-width: 767px) { .oms-blurb-style-four.et_pb_blurb_position_top .et_pb_main_blurb_image { max-width: 50px; } } /*================================================================================= Blurb Style Five ===============================================================================*/ /* NOTE: This blurb is used for the Author widget on Post Details. This has the headshot positioned to the left of the text. */ /*-------------- Base Styling --------------*/ .oms-blurb-style-five.et_pb_blurb_position_left .et_pb_main_blurb_image { width: 25%; max-width: 125px; margin-right: 35px; } .oms-blurb-style-five.et_pb_blurb_position_left .et_pb_main_blurb_image .et_pb_image_wrap { overflow: hidden; border-radius: 100%; } .oms-blurb-style-five.et_pb_blurb_position_left .et_pb_blurb_container { } .oms-blurb-style-five.et_pb_blurb_position_left .et_pb_blurb_description { } /* 450px and below */ @media all and (max-width: 450px) { .oms-blurb-style-five.et_pb_blurb_position_left .et_pb_blurb_content { } .oms-blurb-style-five.et_pb_blurb_position_left .et_pb_main_blurb_image { } } /* 451px to 767px --------------*/ @media all and (min-width: 451px) and (max-width: 767px) { .oms-blurb-style-five.et_pb_blurb_position_left .et_pb_main_blurb_image { } } /* 981px to 1099px --------------*/ @media all and (min-width: 981px) and (max-width: 1099px) { .oms-blurb-style-five.et_pb_blurb_position_left .et_pb_main_blurb_image { } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- BOXES ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= Common Base Styling ===============================================================================*/ /*================================================================================= Box Style One - box enclosure ===============================================================================*/ /* NOTE: You may be inclined to apply this class to columns, but let's only apply it to modules or rows. */ /*-------------- Base Styling --------------*/ body.orbit #page-container .oms-box-style-one { padding: 50px; /*I removed the !important to simplify things... I may need to find a work-around depending on some other uses of this class */ background-color: #fff; border-radius: 5px; /* I added this styling because Divi sucks and when you specify these details within the Divi interface, it doesn't actually take hold. */ background-size: cover; background-position: center; background-repeat: no-repeat; } .oms-box-style-one :last-child { margin-bottom: 0; /* removes margin-bottom of the bottom-most item for optimum padding within this box enclosure. */ } /*-------------- White Bg Variation --------------*/ body.orbit #page-container .oms-bg-white .oms-box-style-one { border: 1px solid #e1e1e1; background-color: #f8f8f8!important; } /*-------------- Dark Gray Bg Variation --------------*/ body.orbit #page-container .oms-bg-gray-dark .oms-box-style-one { background-color: #131515; } /* --------------- General Row Variation --------------- */ body.orbit #et-boc .et-l .et_pb_section .et_pb_row.oms-box-style-one, body.orbit .et_pb_section .et_pb_row.oms-box-style-one { padding: 100px 75px; margin-bottom: 25px; } /* --------------- Small Row Variation --------------- */ body.orbit .et_pb_section.small .et_pb_row.oms-box-style-one { padding: 50px 100px; } /* 980px and below --------------*/ @media all and (max-width: 980px) { body.orbit #page-container .oms-box-style-one { padding: 25px; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- BUTTONS ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= Common Base Styling ===============================================================================*/ /*-------------- Resting State --------------*/ /* Common Base Styles for ALL Buttons */ .menu-btn a, .cta-button, .cta-button-reverse, .cta-button-ghost, .field-wrap input[type=button], .et_pb_search input.et_pb_searchsubmit, .cta-link, .gform_footer input[type=submit], body.orbit .pagination a { display: inline-block; position: relative; vertical-align: middle; font-size: 14px !important; line-height: 1.1 !important; letter-spacing: .25px; font-weight: 400; } /* Common Base Style Margins for ALL Buttons */ /* Margins - General align left */ /*.menu-btn a, NOTE: don't inlcude this because you don't want unnecessary margins in the navigation */ .cta-button, .cta-button-reverse, .cta-button-ghost, .field-wrap input[type=button], .et_pb_search input.et_pb_searchsubmit, .cta-link, .gform_footer input[type=submit] { margin: 10px 0; } /* Margin Right - Adds more spacing for inline buttons */ .cta-button:not(:last-child), .cta-button-reverse:not(:last-child), .cta-button-ghost:not(:last-child), .cta-link:not(:last-child) { margin-right: 20px; } /* CTA Buttons Common Base Styles - General */ .menu-btn a, .cta-button, .cta-button-reverse, .cta-button-ghost, .field-wrap input[type=button], .et_pb_search input.et_pb_searchsubmit, .gform_footer input[type=submit], body.orbit .pagination a { z-index: 1; border-style: solid; border-width: 1px; transition: all .2s ease-out; } /* Common Button Padding */ .cta-button, .cta-button-reverse, .cta-button-ghost, .field-wrap input[type=button], .et_pb_search input.et_pb_searchsubmit, .gform_footer input[type=submit], body.orbit .pagination a { padding: 10px 20px !important; } /* Common Base Styles for Pseudo Elements for the various CTA Buttons - THIS DOES NOT WORK ON INPUT BUTTONS, SO DON'T TRY. */ .menu-btn a:after, .cta-button:after, .cta-button-reverse:after, .cta-button-ghost:after { content: "\35"; font-family: "ETmodules"; font-weight: 600; position: absolute; right: 25px; opacity: 0; top: 50%; transform: translateY(-50%); transition: all .2s ease-out; font-size: 70%; } /* CTA Button Common Text Styles */ /*see text styles above*/ /*-------------- Hover State --------------*/ /* NOTE: More Hover State styling in the Media Queries below. */ /*================================================================================= Primary Navigation CTA Button ===============================================================================*/ /*-------------- Resting State --------------*/ /* Apply styling to anchor within this class */ .menu-btn a { background: rgb(36,62,115); background: linear-gradient(335deg, rgba(36,62,115,1) 0%, rgba(61,96,166,1) 100%); color: #fff !important; border-color: #243e73 !important; padding: 9px 20px!important; line-height: 1 !important; height: auto !important; margin-left: 15px; font-size: 16px !important; font-weight: 400 !important; } /* Hide bottom border for CTA Button in the main nav */ #top-menu-nav ul li.menu-btn a:before { display: none; } /* NOTE: this styling is slightly different from the other CTA Buttons because the padding for this button is slightly different from the others. */ .menu-btn a:after { right: 20px; } /*-------------- Hover State --------------*/ /* NOTE: More Hover State styling in the Media Queries below. */ /*================================================================================= CTA Button (Regular) ===============================================================================*/ /*-------------- Resting State --------------*/ .et-db #et-boc .et-l a.cta-button, .cta-button, #footer-widgets .footer-widget a.cta-button, .field-wrap input[type=button], .et_pb_search input.et_pb_searchsubmit, .gform_footer input[type=submit] { background: rgb(36,62,115); background: linear-gradient(335deg, rgba(36,62,115,1) 0%, rgba(61,96,166,1) 100%); color: #fff; border-color:#243e73; } .cta-button:after { color: #fff; } /*-------------- Hover State --------------*/ /* NOTE: More Hover State styling in the Media Queries below. */ /*================================================================================= CTA Button Reverse ===============================================================================*/ /*-------------- Resting State --------------*/ .et-db #et-boc .et-l a.cta-button-reverse, .cta-button-reverse { background: #fff; color: #3d60a6; border-color: #fff; } .cta-button-reverse:after { color: #3d60a6; } /*-------------- Hover State --------------*/ /* NOTE: More Hover State styling in the Media Queries below. */ /*================================================================================= CTA Button Ghost ===============================================================================*/ /*-------------- Resting State --------------*/ .et-db #et-boc .et-l a.cta-button-ghost, .cta-button-ghost { background: linear-gradient(335deg, rgba(36,62,115,0) 0%, rgba(61,96,166,0) 100%); color: #3d60a6; border-color: #3d60a6; } .cta-button-ghost:after { color: #fff; } /* Variations */ .et-db #et-boc .et-l .et_pb_bg_layout_dark a.cta-button-ghost, .et_pb_bg_layout_dark .cta-button-ghost, { color: #fff; border-color: #fff; } .et_pb_bg_layout_dark .cta-button-ghost:after { color: #3d60a6; } /*-------------- Hover State --------------*/ /* NOTE: More Hover State styling in the Media Queries below. */ /*================================================================================= CTA Text Link ===============================================================================*/ /*-------------- Resting State --------------*/ .et-db #et-boc .et-l a.cta-link, .cta-link { text-decoration: none; background-image: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.2)),/* idle color */ linear-gradient(#4da6ff,#4da6ff);/* hover color */ background-size: 100% 2px, /* idle color */ 0 2px; /* hover color */ background-position: 100% 100%, /* idle color */ 0 100%; /* hover color */ background-repeat: no-repeat; transition: background-size .2s ease-out, background-position .2s ease-out; padding-bottom: 3px; } /* Variations */ .et-db #et-boc .et-l .et_pb_bg_layout_dark a.cta-link, .et_pb_bg_layout_dark .cta-link { color: #ffffff !important; } /*-------------- Hover State --------------*/ /* NOTE: The hover state for .cta-link is located in the media query below. */ /*================================================================================= Back To... Text Link ===============================================================================*/ /*-------------- Resting State --------------*/ .back-link { font-weight: 500; font-size: 14px; line-height: 1; letter-spacing: .75px; /*text-transform: uppercase; color: #000;*/ position: relative; overflow: visible!important; left: 10px; } .back-link:before { content: "\34" !important; /* I had to add importants to most quickly override the sandbox styling. */ font-family: "ETmodules"; font-weight: 500; left: -10px !important; /* I had to add importants to most quickly override the sandbox styling. */ top: 0 !important; /* I had to add importants to most quickly override the sandbox styling. */ color: #4da6ff; transition: all .2s ease-out !important; /* I had to add importants to most quickly override the sandbox styling. */ } .back-link:after { display: none; } /* Variations */ .et_pb_text_align_center .back-link { left: unset; } .et_pb_bg_layout_dark .back-link { color: #ffffff; } /*-------------- Hover State --------------*/ /* NOTE: The hover state for .cta-link is located in the media query below. */ /*================================================================================= PAGINATION BUTTONS ===============================================================================*/ /*-------------- Resting State --------------*/ body.orbit .pagination a { background: #4da6ff; color: #fff !important; border-color: #4da6ff; font-size: 0 !important; } body.orbit .pagination a::after { font-size: 15px; } body.orbit .pagination .alignleft a::after { content: 'Older Posts »'; } body.orbit .pagination .alignright a::after { content: '« Newer Posts'; } /*-------------- Hover State --------------*/ /* NOTE: More Hover State styling in the Media Queries below. */ /*================================================================================= MEDIA QUERIES ===============================================================================*/ /* 767px and below --------------*/ @media all and (max-width: 767px) { /*-------------- Resting State --------------*/ .cta-button, .cta-button-reverse, .cta-button-ghost, .field-wrap input[type=button], .et_pb_search input.et_pb_searchsubmit, .cta-link, .gform_footer input[type=submit] { font-size: 14px !important; } .back-link { font-size: 13px; /* follows the same size as the .pre-title */ } .cta-button, .cta-button-reverse, .cta-button-ghost, .field-wrap input[type=button], .et_pb_search input.et_pb_searchsubmit, .gform_footer input[type=submit] { padding: 8px 18px !important; } } /* 768px to 980px --------------*/ @media all and (min-width: 768px) and (max-width: 980px) { /*-------------- Resting State --------------*/ .cta-button, .cta-button-reverse, .cta-button-ghost, .field-wrap input[type=button], .et_pb_search input.et_pb_searchsubmit, .cta-link, .gform_footer input[type=submit] { font-size: 15px !important; } .back-link { font-size: 14px; /* follows the same size as the .pre-title */ } } /* 981px and above --------------*/ @media all and (min-width: 981px) { /*-------------- Sticky/Fixed State --------------*/ /* CTA Nav Button Override when the header/nav is sticky/fixed. */ .et-fixed-header #top-menu-nav ul li.menu-btn a { color: #fff !important; } /*-------------- Hover State --------------*/ /* NOTE: Since hover states don't exist on tablet or mobile, I've simplified the styling to only target hover states on larger viewports. */ /* Multiple Button types on hover */ .menu-btn a:hover, .cta-button:hover, .cta-button-reverse:hover, .cta-button-ghost:hover, .cta-link:hover, .field-wrap input[type=button]:hover, .et_pb_search input.et_pb_searchsubmit:hover, .gform_footer input[type=submit]:hover { cursor: pointer; text-decoration: none; } /* Main CTA Buttons on hover */ .menu-btn a:hover, .cta-button:hover, .cta-button-reverse:hover, .cta-button-ghost:hover { padding-left:13px !important; padding-right:27px !important; } /* Main CTA Buttons Pseudo Element on hover */ .menu-btn a:hover:after, .cta-button:hover:after, .cta-button-reverse:hover:after, .cta-button-ghost:hover:after { right: 14px; opacity: 1; } /* CTA Nav Button on hover */ #top-menu-nav>ul>li.menu-btn > a:hover { background: rgb(36,62,115); background: linear-gradient(335deg,rgba(36,62,115,1) 0%,rgba(61,96,166,1) 100%); color: #fff; border-color: #243e73; } /* CTA Button (Regular) */ .et-db #et-boc .et-l a.cta-button:hover, .cta-button:hover, .field-wrap input[type=button]:hover, .gform_footer input[type=submit]:hover{ color: #fff; } /* Basic Input Button (for example, for forms) */ .field-wrap input[type=button]:hover, .gform_footer input[type=submit]:hover { background: linear-gradient(335deg,rgba(0,150,129,1) 0%,rgba(95,183,162,1) 100%); border-color: #009681; } /* CTA Button (Reverse) */ .et-db #et-boc .et-l a.cta-button-reverse:hover, .cta-button-reverse:hover { color: #213459; } /* CTA Button (Ghost) */ .et-db #et-boc .et-l a.cta-button-ghost:hover, .cta-button-ghost:hover { background: rgb(36,62,115); background: linear-gradient(335deg, rgba(36,62,115,1) 0%, rgba(61,96,166,1) 100%); color: #fff; border-color: #3d60a6; } .et-db #et-boc .et-l .et_pb_bg_layout_dark a.cta-button-ghost:hover, .et_pb_bg_layout_dark .cta-button-ghost:hover { background: #fff; border-color: #fff; color: #213459; } /* CTA Text Link on hover */ .et-db #et-boc .et-l a.cta-link:hover, .cta-link:hover { background-size: 0 2px, /* idle color */ 100% 2px; /* hover color */ background-position: 100% 100%, /* idle color */ 0 100%; /* hover color */ color: #213459; } .et_pb_bg_layout_dark .cta-link:hover { box-shadow: 0 -18px 0 #4da6ff inset; } /* Back Link on hover */ .back-link:hover:before { left: -15px !important; /* I had to add importants to most easily override the sandbox styling. */ } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- GALLERY SLIDER ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= Common Base Styling ===============================================================================*/ /* Images Container */ .et_pb_slider .et_pb_gallery_items { border-radius: 5px; overflow: hidden; } /* Dots */ .et-pb-controllers { position: relative; bottom: unset; margin-top: 20px; display: flex; justify-content: center; height: unset !important; } .et-pb-controllers a { width: 15px; height: 15px; margin-right: 15px; padding: 0; border-radius: 100%; } .et_pb_bg_layout_light .et-pb-controllers a { background-color: rgba(0, 0, 0, 0.6); } .et_pb_bg_layout_light .et-pb-controllers .et-pb-active-control { background-color: #4da6ff; } /* Arrows */ .et-pb-arrow-prev, .et-pb-arrow-next { transform: translateY(calc(-50% + 10px)); color: #fff !important; } /* Image File Name */ .mfp-title { display: none; /* This hides the file name, just in the event that the file name is something wonky. */ } /* --------------- Slider Functionality Bug Fix --------------- */ /* Slider Item */ .et_pb_gallery_fullwidth .et_pb_gallery_item { display: block !important; opacity: 0; } .et_pb_gallery_fullwidth .et_pb_gallery_item:first-child { opacity: 1; } /* 767px and below --------------*/ @media all and (max-width: 767px) { .et-pb-controllers a { width: 8px; height: 8px; margin-right: 12px; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- IMAGES ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= Common Base Styling ===============================================================================*/ /* --------------- Basic Styling --------------- */ .et_pb_module.et_pb_image { width: 100%; } /*================================================================================= Featured Images ===============================================================================*/ /* --------------- Basic Styling --------------- */ .oms-image-featured, .featured-image-wrap { margin-bottom: 30px; box-shadow: 0px 25px 30px -20px rgba(0,0,0,0.2); } .featured-image-wrap img { display: block; /* this gets weird of spacing on bottom. */ } /* 767px and below --------------*/ @media all and (max-width: 767px) { /* --------------- Common Styling --------------- */ .et_pb_column .et_pb_module.et_pb_image.oms-image-featured, .featured-image-wrap { margin-bottom: 35px !important; } } /* 768px to 980px --------------*/ @media all and (min-width: 768px) and (max-width: 980px) { /* --------------- Common Styling --------------- */ .et_pb_column .et_pb_module.et_pb_image.oms-image-featured, .featured-image-wrap { margin-bottom: 75px !important; } } /* 981px and above --------------*/ @media all and (min-width: 981px) { /* --------------- Common Styling --------------- */ .et_pb_column .et_pb_module.et_pb_image.oms-image-featured, .featured-image-wrap { width: 35%; float: right; margin-left: 5% !important; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- NAVIGATION - Interior/Children Navigation ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= NAV STYLE ONE ===============================================================================*/ /* NOTE: this nav is used as a sidebar nav, ie on the How To pages. */ /*-------------- Base Styling --------------*/ /* Widget */ .oms-nav-style-one .et_pb_widget { width: 100% !important; margin: 0 !important; } /* List - Top Level */ .oms-nav-style-one #leftBar > ul { border-top: 2px solid rgba(0,0,0,.2); } /* List - Sub Level */ .oms-nav-style-one ul.sub-menu { border-top: 1px solid rgba(0,0,0,.1); margin-bottom: 0 !important; } /* List Item */ .oms-nav-style-one ul li { margin: 0 !important; border-bottom: 1px solid rgba(0,0,0,.1); } /* List Item - Sub Level last child */ .oms-nav-style-one ul.sub-menu li:last-child { border-bottom: none; } /* List Item Pseudo Element */ body.orbit #main-content .et_pb_section .oms-nav-style-one ul li:before { content: none; /* This overrides my base styling. */ } /* Anchor Tag */ .oms-nav-style-one ul li a { color: #272B33 !important; position: relative; padding-top: 15px; padding-bottom: 15px; display: inline-block; line-height: 1.3; font-weight: 400; font-size: 16px; /* For Clean Method project, I made this text the same size as the text for my CTA Buttons and CTA Links. */ } /* Anchor Tag - Sub Level */ .oms-nav-style-one ul.sub-menu li a { margin-left: 25px; font-weight: 400; font-size: 85%; } /* Pseudo Element */ .oms-nav-style-one ul li a:after { content: "\35"; font-family: "ETmodules"; font-weight: 600; font-size: 80%; position: relative; left: 8px; color: #3d60a6; transition: all .2s ease-out; } /*-------------- Active State --------------*/ .oms-nav-style-one ul li.current-menu-item a { color: #3d60a6 !important; font-weight: 700; } /* 981px and above --------------*/ @media all and (min-width: 981px) { /*-------------- Hover State --------------*/ /* NOTE: Since hover states don't exist on tablet or mobile, I've simplified the styling to only target hover states on larger viewports. */ /* Text Link on hover */ .oms-nav-style-one ul li a:hover { color: #213459 !important; text-decoration: none; } /* Pseudo element on hover */ .oms-nav-style-one ul li a:hover:after { left: 13px; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- NINJA FORM MODULE ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /* NOTE: text styling for labels and for the submit button are located within the text styling above in this CSS document. I was trying to group text with text, thinking that may be helpful when declaring new sizes for various breakpoints.*/ /* Things to do when setting up Contact Form: 1. Make sure display setting is set so that the label is on top. 2. Update the colors to various form components using this CSS styling. */ /* --------------- Base Styling --------------- */ /* Override - Pseudo Element on List Item */ body.orbit .ninja-forms-form-wrap .nf-field-container ul li:before { display: none; /* This overrides the base level styling I created for base level list items on lists (towards the top of this style sheet) */ } /* Form Container */ body.orbit .nf-form-cont { margin-top: 0; /* Overrides the default. */ } body.orbit .et_pb_module:not(.ui-sortable) p + .nf-form-cont { /* This extra stuff helps fix bugs in Divi Builder. */ margin-top: 50px !important; /* this adds in a little extra spacing for when the form follows content. */ } /* Form Wrap */ body.orbit .ninja-forms-form-wrap { margin: 0; /* NOTE: So much dumb styling from Divi. */ max-width: unset; } /* Before Form Content */ .nf-before-form-content { display: none; } /* Field Container */ body.orbit .ninja-forms-form-wrap nf-fields-wrap nf-field .nf-field-container { margin-bottom: 25px; } body.orbit .oms-box-style-one .ninja-forms-form-wrap nf-fields-wrap nf-field:last-child .nf-field-container { margin-bottom: 0; } /* Form Labels */ body.orbit .ninja-forms-form-wrap nf-fields-wrap nf-field .nf-field-label { margin-bottom: 5px; } body.orbit .ninja-forms-form-wrap nf-fields-wrap nf-field .nf-field-label label { font-size: 12px; /* This size should match the mobile size of the .pre-title */ text-transform: unset; font-weight: 700; letter-spacing: .25px; color: #25365d; display: block; /* Necessary to customize the line-height of label */ line-height: 1.2; } /* Common styling for input and textarea */ body.orbit .ninja-forms-form-wrap nf-fields-wrap nf-field input[type=text], body.orbit .ninja-forms-form-wrap nf-fields-wrap nf-field input[type=tel], body.orbit .ninja-forms-form-wrap nf-fields-wrap nf-field input[type=email], body.orbit .ninja-forms-form-wrap nf-fields-wrap nf-field textarea, body.orbit .ninja-forms-form-wrap nf-fields-wrap nf-field select:not([multiple]), body.orbit input[type=email], body.orbit input[type=text] { outline: none; padding: 10px 10px; /*font-size: 14px;*/ color: #000; border: 1px solid rgba(0,0,0,.15); width: 100%; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* Common styling for multiselect */ body.orbit .ninja-forms-form-wrap nf-fields-wrap nf-field select[multiple] { outline: none; padding: 10px 10px; /*font-size: 14px;*/ color: #000; border: 1px solid rgba(0,0,0,.15); width: 100%; border-radius: 0; overflow: auto; } /* Common height styling for inputs, excluding textarea */ body.orbit .ninja-forms-form-wrap nf-fields-wrap nf-field input[type="text"], body.orbit .ninja-forms-form-wrap nf-fields-wrap nf-field input[type="tel"], body.orbit .ninja-forms-form-wrap nf-fields-wrap nf-field input[type="email"] { height: auto; } /* Color Variation for input and textarea */ body.orbit .ninja-forms-form-wrap nf-fields-wrap nf-field input[type=text], body.orbit .ninja-forms-form-wrap nf-fields-wrap nf-field input[type=tel], body.orbit .ninja-forms-form-wrap nf-fields-wrap nf-field input[type=email], body.orbit .ninja-forms-form-wrap nf-fields-wrap nf-field textarea, body.orbit .ninja-forms-form-wrap nf-fields-wrap nf-field select, body.orbit input[type=email], body.orbit input[type=text] { background-color: rgba(210,210,225,.2); } /* Placeholder Styling for input and textarea */ body.orbit .ninja-forms-form-wrap nf-fields-wrap nf-field input[type=text]::placeholder, body.orbit .ninja-forms-form-wrap nf-fields-wrap nf-field input[type=tel]::placeholder, body.orbit .ninja-forms-form-wrap nf-fields-wrap nf-field input[type=email]::placeholder, body.orbit .ninja-forms-form-wrap nf-fields-wrap nf-field textarea::placeholder { color: rgba(0,0,0,.3); font-style: italic; } /* Input, Textarea, and Select :focus styling */ body.orbit input[type=text]:focus, body.orbit input[type=tel]:focus, body.orbit input[type=email]:focus, body.orbit textarea:focus, body.orbit select:focus { outline: none !important; border-color: rgba(0,0,0,.3) !important; } /* Textarea styling */ body.orbit .nf-field-element textarea { height: 170px; } /* Select Menu */ .list-select-wrap .nf-field-element select { height: 42px; } /* Dropdown Arrow Styling NOTE: Since "select" elements don't allow for pseudo elements, I opted to add this pseudo element to the containing div of the "select" element. */ .list-select-wrap .nf-field-element:after { content: "\f0d7"; font-family: "ETmodules"; font-weight: 700; font-size: 1.5em; color: #4da6ff; position: absolute; top: 50%; right: 20px; pointer-events: none; -webkit-transform: translateY(-50%); transform: translateY(-50%); } /* Checkbox and Radio Button */ .list-checkbox-wrap .nf-field-element li, .list-radio-wrap .nf-field-element li { display: flex; flex-direction: row; align-items: center; } .list-checkbox-wrap .nf-field-element li input[type=checkbox], .list-radio-wrap .nf-field-element li input[type=radio] { float: none; margin: 0 15px 0 0; } .list-checkbox-wrap .nf-field-element li label, .list-radio-wrap .nf-field-element li label { margin-left: 0 !important; } /* Asterisk */ .nf-error-msg, .ninja-forms-req-symbol { color: #f58466; } /* Required Message */ body.orbit .ninja-forms-form-wrap .nf-form-fields-required { font-size: 12px; } /* Input Error Message */ .nf-after-field .nf-error-msg { margin-right: 0; font-size: 12px; } /* Submit Button */ .field-wrap input[type=button] { /* NOTE: Other styling is organized with the styling for CTA buttons. */ border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* --------------- Layout Styling --------------- */ .oms-formfield { clear: none !important; float: left; margin-right: 5%; } .oms-formfield.col-2 { width: 47.5%; } .oms-formfield.last { margin-right: 0; } /* 768px and above --------------*/ @media all and (min-width: 768px) { .oms-formfield.col-3 { width: 30%; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- NUMBER COUNTER MODULE ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= Common ===============================================================================*/ /* --------------- Base Styling --------------- */ .et_pb_number_counter .percent { height: auto !important; } .et_pb_number_counter.et_pb_with_title .percent { margin-bottom: 15px; } /* Large Number */ .et_pb_number_counter .percent p { font-weight: 400; font-size: 75px; line-height: 1; margin-bottom: 0; } /* Title */ .et_pb_number_counter .title { margin-bottom: 0; text-shadow: none; /* This is necessary because it overrides the shadow that's spec'd on the containing overlay bg. */ } /* Drop Shadow for Text */ .et_pb_number_counter.et_pb_bg_layout_dark .percent p { text-shadow: 1px 5px 8px rgba(0,0,0,.3); } .et_pb_number_counter.et_pb_bg_layout_dark .title { text-shadow: 1px 1px 5px rgba(0,0,0,.5); } /* --------------- Dollar Sign Variation --------------- */ .et_pb_number_counter.dollar .percent p span.percent-value { position: relative; } .et_pb_number_counter.dollar .percent p span.percent-value:before { content: '$'; position: absolute; left: 0; top: 15%; transform: translateX(-100%); font-size: 65%; } /* 767px and below --------------*/ @media all and (max-width: 767px) { .et_pb_number_counter.et_pb_with_title .percent { margin-bottom: 5px; } .et_pb_number_counter.et_pb_with_title .percent p { font-size: 50px; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- PORTFOLIO / PROJECTS MODULE ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /* NOTE: We ran into an issue with the other portfolio module and it's inability to display tags correctly within the title field of each individual portfolio project. However, the tag trick works fine with the filterable portfolio module, so I'm electing to use that module and simply display:none the filter... the path of least resistance. */ /* NOTE: For HubStor project, we ran into bug with filterable portfolio modulue that doesn't allow custom post count number, it displays all. However, the regular portfolio module allows you to customize the number that gets displayed. /* NOTE: The Grid Layout offers the color overlay with icon hover state. The fullwidth layout does NOT. /*================================================================================= PORTFOLIO FILTER MENU ===============================================================================*/ /* No Filter Option * * NOTE: We want to always use the filterable portfolio, instead of the regular non-filter portfolio, because it allows us to enter in tags. However, there may be times when we don't need to show the filter, so this class ".no-filter" helps enable that.*/ .et_pb_filterable_portfolio.no-filter .et_pb_portfolio_filters { display: none; } .et_pb_filterable_portfolio .et_pb_portfolio_filters { background: rgba(0,0,0,.05); border-radius: 5px; /*border: 1px solid rgba(0,0,0,.15);*/ } .et_pb_filterable_portfolio .et_pb_portfolio_filters ul { padding: 25px 25px 15px !important; margin-bottom: 0 !important; display: flex; flex-wrap: wrap; justify-content: center; } .et_pb_filterable_portfolio .et_pb_portfolio_filters ul li { margin-bottom: 10px !important; font-size: unset; /* This forces the font-size to follow the basic font-size that I've set towards the top of this style sheet. */ } .et_pb_filterable_portfolio .et_pb_portfolio_filters ul li:before { display: none; /* this overrides the stylized bullet point that is set to the basic unordered list. */ } .et_pb_filterable_portfolio .et_pb_portfolio_filters ul li a { background: none; border: none; color: #000; padding: 5px 20px; text-align: center; line-height: 1.8; display: unset; } .et_pb_filterable_portfolio .et_pb_portfolio_filters ul li a:hover { text-decoration: none; color: #fff; background-color: #009681; } .et_pb_filterable_portfolio .et_pb_portfolio_filters ul li a.active { background: #25365d; color: #fff; } .et_pb_filterable_portfolio .et_pb_portfolio_filters li:first-child a, .et_pb_filterable_portfolio .et_pb_portfolio_filters li:last-child a { border-radius: initial; } /* 767px and below --------------*/ @media all and (max-width: 767px) { /* Portfolio Filter */ .et_pb_filterable_portfolio .et_pb_portfolio_filters { margin-bottom: 25px; } .et_pb_filterable_portfolio .et_pb_portfolio_filters ul li a { padding: 5px; font-size: 12px; word-break: break-word; } } /*================================================================================= CONTAINING ELEMENT ===============================================================================*/ /* Items Container - Establishes the Grid and the Gutter */ .et_pb_portfolio_grid .et_pb_portfolio_grid_items, /* regular portfolio module, grid layout */ .et_pb_portfolio .et_pb_ajax_pagination_container, /* regular portfolio module, fullwidth layout */ .et_pb_portfolio .et_pb_portfolio_items, /* filterable portfolio module, both grid & fullwidth layout */ body.orbit.tax-project_category .post-wrap { display: grid; grid-gap: 30px; } /* Project Pagination */ .et_pb_portfolio_grid .pagination, .et_pb_portfolio .pagination, .et_pb_portfolio .et_pb_portofolio_pagination { border-color: rgba(0,0,0,.15); margin-top: 75px; } .et_pb_portfolio .et_pb_portofolio_pagination ul { text-align: center; padding-left: 0; } /* 767px and below --------------*/ @media all and (max-width: 767px) { /* Items Container */ .et_pb_portfolio_grid .et_pb_portfolio_grid_items, /* regular portfolio module, grid layout */ .et_pb_portfolio .et_pb_ajax_pagination_container, /* regular portfolio module, fullwidth layout */ .et_pb_portfolio .et_pb_portfolio_items, /* filterable portfolio module, both grid & fullwidth layout */ body.orbit.tax-project_category .post-wrap { grid-gap: 20px; } /* Common Styling for both types of portfolio modules */ .et_pb_portfolio_grid .et_pb_portfolio_grid_items, /* regular portfolio module, grid layout */ .et_pb_portfolio .et_pb_ajax_pagination_container, /* regular portfolio module, fullwidth layout */ .et_pb_portfolio .et_pb_portfolio_items, /* filterable portfolio module, both grid & fullwidth layout */ body.orbit.tax-project_category .post-wrap { grid-template-columns: repeat(1, 1fr); } /* Project Pagination */ .et_pb_portfolio_grid .pagination, .et_pb_portfolio .pagination, .et_pb_portfolio .et_pb_portofolio_pagination { margin-top: 35px; } } /* 768px to 1024 --------------*/ @media all and (min-width: 768px) and (max-width: 1024px) { /* Establish the grid */ .et_pb_portfolio_grid .et_pb_portfolio_grid_items, /* regular portfolio module, grid layout */ .et_pb_portfolio .et_pb_ajax_pagination_container, /* regular portfolio module, fullwidth layout */ .et_pb_portfolio .et_pb_portfolio_items, /* filterable portfolio module, both grid & fullwidth layout */ body.orbit.tax-project_category .post-wrap { grid-template-columns: repeat(2, 1fr); } } /* 1025px and above --------------*/ @media all and (min-width: 1025px) { /* Establish the grid */ .et_pb_portfolio_grid.col-3 .et_pb_portfolio_grid_items, /* regular portfolio module, grid layout */ .et_pb_portfolio.col-3 .et_pb_ajax_pagination_container, /* regular portfolio module, fullwidth layout */ .et_pb_portfolio.col-3 .et_pb_portfolio_items, /* filterable portfolio module, both grid & fullwidth layout */ body.orbit.tax-project_category .post-wrap { grid-template-columns: repeat(3, 1fr); } .et_pb_portfolio_grid.col-4 .et_pb_portfolio_grid_items, /* regular portfolio module, grid layout */ .et_pb_portfolio.col-4 .et_pb_ajax_pagination_container, /* regular portfolio module, fullwidth layout */ .et_pb_portfolio.col-4 .et_pb_portfolio_items { grid-template-columns: repeat(4, 1fr); } } /*================================================================================= INDIVIDUAL PROJECT ITEM ===============================================================================*/ /* Individual Project / Item */ .et_pb_portfolio_grid .et_pb_grid_item, /* regular portfolio module, fullwidth layout */ .et_pb_portfolio .et_pb_portfolio_item, /* this covers regular/full, and filterable/grid & filterable/fullwidth */ body.orbit.tax-project_category .et_pb_post { background: #fff; padding: 25px; width: 100% !important; margin: 0 !important; word-wrap: break-word; border-radius: 5px; display: flex !important; flex-direction: column; box-shadow: 0px 10px 25px -10px rgba(0,0,0,0.15); transition: all .2s ease-out; /* Needed to add this styling because of the weird flashing of the image overlay in Safari... the overlay would bust outside the overflow:hidden for some reason. */ -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); } /* Thumbnail Image */ .et_portfolio_image { max-width: 75px; margin: 0 auto 25px; } /* Overlay for native grid layout */ .et_overlay { display: none; } /* Header / Title Hyperlink :before */ /* NOTE: Enables the whole card to be clickable. */ .et_pb_filterable_portfolio .et_pb_portfolio_item .et_pb_module_header a:before, .et_pb_portfolio_grid .et_pb_portfolio_item .et_pb_module_header a:before, body.orbit.tax-project_category .et_pb_post h2 a:before { position: absolute; display: block; content: ''; width: 100%; height: 100%; left: 0; top: 0; } /* Header / Title Hyperlink span */ .et_pb_portfolio_item .et_pb_module_header a span, body.orbit.tax-project_category .et_pb_post h2 a span { color: #25365D; /* Changes header color because Divi override doesn't work correctly. */ display: block; margin-bottom: 10px; } /* Header / Title Hyperlink span:after */ /* NOTE: Arrow at the end of the hyperlink */ .et_pb_filterable_portfolio .et_pb_portfolio_item .et_pb_module_header a span:after, .et_pb_portfolio_grid .et_pb_portfolio_item .et_pb_module_header a span:after, body.orbit.tax-project_category .et_pb_post h2 a span:after { /*content: "\35";*/ content: '\24'; font-family: "ETmodules"; font-weight: 500; font-size: 80%; position: relative; left: 8px; color: #4da6ff; transition: all .2s ease-out; } /* Header / Title Hyperlink em */ .et_pb_portfolio_item .et_pb_module_header a em, body.orbit.tax-project_category .et_pb_post h2 a em { font-weight: 400; color: #777; font-size: 18px; line-height: 1.77; letter-spacing: .25px; font-style: unset; } /* Project Meta - Name & Cateogry */ .et_pb_portfolio_item .post-meta { font-size: 12px; border-top: 1px solid rgba(0,0,0,.15); padding-top: 5px; margin: auto 0 0; } /* Project Meta for Project Category/Listing/Archive Page */ body.orbit.tax-project_category .et_pb_post .post-meta { display: none; } /* 981px and above */ @media all and (min-width: 981px) { /* --------------- Hover State --------------- */ /* Header */ .et_pb_filterable_portfolio .et_pb_portfolio_item .et_pb_module_header a:hover, .et_pb_portfolio_grid .et_pb_portfolio_item .et_pb_module_header a:hover, body.orbit.tax-project_category .et_pb_post h2 a:hover { color: #4da6ff; } /* Pseudo Element */ .et_pb_filterable_portfolio .et_pb_portfolio_item .et_pb_module_header a:hover span:after, .et_pb_portfolio_grid .et_pb_portfolio_item .et_pb_module_header a:hover span:after, body.orbit.tax-project_category .et_pb_post h2 a:hover span:after { left: 13px; } .et_pb_filterable_portfolio .et_pb_portfolio_item:hover, .et_pb_portfolio_grid .et_pb_portfolio_item:hover, body.orbit.tax-project_category .et_pb_post:hover { box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.25); cursor: pointer; transform: translateY(-5px); } } /* 1025px and above */ @media all and (min-width: 1025px) { /* Inline Image */ body.orbit.single-project .project p img { width: 90% !important; margin: 50px auto; display: block; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- TESTIMONIAL MODULE ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= Common Base Styling ===============================================================================*/ /*-------------- General Styling --------------*/ /* Quotation Mark Graphic */ .et-db #et-boc .et-l .et_pb_testimonial:before, .et_pb_testimonial:before { z-index: 2; background-image: url(https://omsclerestory.wpengine.com/wp-content/uploads/2020/11/graphic-quotation-mark.svg) !important; content: ''; width: 50px; height: 50px; background-color: transparent !important; transform: translate(-50%, -25%); top: 0; margin-left: unset; border-radius: unset; font-size: unset; } /* Image */ .et_pb_testimonial_portrait { width: 50% !important; /* negates Divi default */ height: unset !important; /* negates Divi default */ max-width: 125px; /* negates Divi default */ } .et_pb_testimonial_portrait:before { height: unset !important; left: unset !important; position: unset !important; top: unset !important; width: unset !important; -webkit-box-shadow: unset !important; box-shadow: unset !important; /* These values help give the background-image the responsiveness I'm looking for. */ padding-top: 100%; display: inline-block; vertical-align: top; } /* Author */ .et_pb_testimonial .et_pb_testimonial_author { position: relative; margin-top: 5px; padding-top: 25px; } .et_pb_testimonial .et_pb_testimonial_author:before { content: ''; background: #4da6ff; height: 3px; width: 50px; position: absolute; top: 0; left: 0; } .et_pb_testimonial.et_pb_text_align_center .et_pb_testimonial_author:before { left: 50%; transform: translateX(-50%); } /*-------------- OMS BOX STYLE ONE VARIATION --------------*/ /* When the box style class is applied to the testimonial */ .et-db #et-boc .et-l .et_pb_testimonial.et_pb_testimonial_no_bg.oms-box-style-one, .et_pb_testimonial.oms-box-style-one { padding: 50px; } /* 768px to 980px --------------*/ @media all and (min-width: 768px) and (max-width: 980px) { /* This styling undoes the stupid styling that Divi adds in by default. */ .et-db #et-boc .et-l .et_pb_column .et_pb_testimonial_portrait { margin-right: auto; float: unset; } } /* 980px and below --------------*/ @media all and (max-width: 980px) { .et-db #et-boc .et-l .et_pb_testimonial.et_pb_testimonial_no_bg.oms-box-style-one, .et_pb_testimonial.oms-box-style-one { padding: 50px 25px 25px; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- VIDEO EMBED MODULE ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= Common Base Styling ===============================================================================*/ /* Video Box */ .et_pb_video_box { overflow: hidden; } /* Video Overlay */ .et_pb_video_overlay_hover { transition: all 0.3s ease-out; } /* Video Play Button */ .et-db #et-boc .et-l .et_pb_column_1_2 .et_pb_video_play, .et_pb_video .et_pb_video_overlay .et_pb_video_overlay_hover a { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 50%; margin: 0; font-size: 0; line-height: 0; background: rgba(77,166,255,.95); width: 100px; height: 100px; } .et-db #et-boc .et-l .et_pb_video_play:before, .et_pb_video .et_pb_video_overlay .et_pb_video_overlay_hover a:before { font-size: 35px; line-height: 1; font-family: "ETmodules"; content: "\f04b"; font-weight: 700; position: absolute; top: 50%; left: 50%; transform: translate(-42%, -50%); color: #4da6ff; color: #fff; } /* Video Info Text */ .et_pb_text.oms-text-video-info { width: 90%; margin-left: auto; margin-right: auto; } .et_pb_text.oms-text-video-info .et_pb_text_inner { border-left: 3px solid #4da6ff; padding: 5px 15px; } .et_pb_text.oms-text-video-info .et_pb_text_inner > * { font-size: 15px; line-height: 1.3; } .et_pb_text.oms-text-video-info .et_pb_text_inner > :last-child { margin-bottom: 0 } /* 499px and below --------------*/ @media all and (max-width: 499px) { /* Video Play Button */ .et-db #et-boc .et-l .et_pb_column_1_2 .et_pb_video_play, .et_pb_video .et_pb_video_overlay .et_pb_video_overlay_hover a { padding: 19px 22px 19px 26px; width: 75px; height: 75px; } .et-db #et-boc .et-l .et_pb_video_play:before, .et_pb_video .et_pb_video_overlay .et_pb_video_overlay_hover a:before { font-size: 28px; } } /* 767px and below --------------*/ @media all and (max-width: 767px) { .et_pb_text.oms-text-video-info { margin-top: -10px; } .et_pb_text.oms-text-video-info .et_pb_text_inner > * { font-size: 13px; } } /* 768px to 980px --------------*/ @media all and (min-width: 768px) and (max-width: 980px) { .et_pb_text.oms-text-video-info { margin-top: -25px; } .et_pb_text.oms-text-video-info .et_pb_text_inner > * { font-size: 13px; } } /* 981px to 1199px --------------*/ @media all and (min-width: 981px) and (max-width: 1199px) { /* Video Feature - used on Video Detail */ .et_pb_column .et_pb_module.et_pb_video.oms-video-feature { margin-bottom: 50px!important; } } /* 981px and above --------------*/ @media all and (min-width: 981px) { /*-------------- Hover State --------------*/ /* Video Overlay */ .et_pb_video .et_pb_video_overlay_hover:hover { background: rgba(37,54,93,.5)!important; } /* Play Button */ .et_pb_video .et_pb_video_overlay_hover:hover a { background: rgba(95,183,162,1); } .et_pb_video .et_pb_video_overlay .et_pb_video_overlay_hover a:hover { text-decoration: none; color: #fff; } } /* 1200px and above --------------*/ @media all and (min-width: 1200px) { /* Video Feature - used on Video Detail */ .et_pb_column .et_pb_module.et_pb_video.oms-video-feature { margin-top: -175px; margin-bottom: 75px!important; margin-left: -50px; margin-right: -50px; } } /* print.css - DO NOT REMOVE */ @media print { h1 { font-size: 24pt !important; color: #000000 !important; text-shadow: none !important; } h2, h3, h4, h5, h6 { font-size: 16pt !important; color: #000000 !important; text-shadow: none !important; } h1, h2, h3, h4, h5, h6 { opacity: 1 !important; page-break-after: avoid; page-break-inside: avoid; color: #000000 !important; text-shadow: none !important; } body.orbit.single-team_bio .et_builder_inner_content #et-boc:first-of-type .et-l .et_pb_section h1, body.orbit.single-team_bio .et_builder_inner_content #et-boc:first-of-type .et-l .et_pb_section h4 { color: #000000 !important; } .container, body.orbit #main-header .et_menu_container { border: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; display: unset !important; height: auto !important; position: static !important; overflow: visible !important; } .et_fixed_nav #main-header, .et_fixed_nav #top-header, .et-fixed-header #main-header { background: transparent !important; border: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; position: static !important; } #main-header { background-color: transparent !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; display: block !important; position: static !important; height: auto !important; top: auto !important; } body.post-type-archive-team_bio .et_builder_inner_content #et-boc:first-of-type .et-l .et_pb_section, body.orbit.single-team_bio .et_builder_inner_content #et-boc:first-of-type .et-l .et_pb_section { background: none !important; background-image: none !important; padding-top: 30px !important; padding-bottom: 0 !important; } .et_pb_column, .et_pb_section { background: none !important; } .et_pb_section { padding: 0 !important; } }