/* 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: #DBEAED; color: #022E4A; } body.orbit ::selection { background: #DBEAED; color: #022E4A; } /* Overwrite Divi's dumb styling */ body.orbit :focus { outline: 2px solid #FFD03F; } /* Screenreader "Skip to Main Content" */ div#skip a:active, div#skip a:focus, #wpadminbar .screen-reader-shortcut:active, #wpadminbar .screen-reader-shortcut:focus { z-index: 9999999; left: 10px; background: #000; color: #fff; position: absolute; display: unset; width: unset; text-align: unset; } /*------------------------------------------------------------------------------------------------------------------------------- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ ================================================================================================================================= TEXT STYLES ================================================================================================================================= \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ ---------------------------------------------------------------------------------------------------------------------------------*/ /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- BASE CORE TEXT STYLING ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= TEXT HYPERLINKS ===============================================================================*/ /* --------------- Resting State --------------- */ /* Basic */ body.orbit a, body.orbit h1 a, body.orbit h2 a, body.orbit h3 a, body.orbit h4 a, body.orbit h5 a, body.orbit h6 a { color: #00416b; } body.orbit .et_pb_bg_layout_dark a, body.orbit .et_pb_bg_layout_dark h1 a, body.orbit .et_pb_bg_layout_dark h2 a, body.orbit .et_pb_bg_layout_dark h3 a, body.orbit .et_pb_bg_layout_dark h4 a, body.orbit .et_pb_bg_layout_dark h5 a, body.orbit .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-ghost):not(.cta-link):not(.back-link), .et_pb_section .et_pb_text li a:not(.cta-button):not(.cta-button-ghost):not(.cta-link):not(.back-link), .et_pb_section .et_pb_blurb p a:not(.cta-button):not(.cta-button-ghost):not(.cta-link):not(.back-link), .et_pb_section .et_pb_blurb li a:not(.cta-button):not(.cta-button-ghost):not(.cta-link):not(.back-link), .et_pb_post .oms-main-wrapper p a:not(.cta-button):not(.cta-button-ghost):not(.cta-link):not(.back-link), .et_pb_post .oms-main-wrapper li a:not(.cta-button):not(.cta-button-ghost):not(.cta-link):not(.back-link) { text-decoration: none; background-image: linear-gradient(rgba(255,183,35,1),rgba(255,183,35,1)), /* idle color */ linear-gradient(270deg,rgba(1,125,155,1) 0%,rgba(1,125,155,1) 100%); /* hover color */ background-size: 100% 1px, /* idle color */ 0 1px; /* hover color */ background-position: 100% 100%, /* idle color */ 0 100%; /* hover color */ background-repeat: no-repeat; transition: background-size .3s ease-out,background-position .3s ease-out, color .3s ease-out; padding-bottom: 0px; } /* Dark BG Variation */ .et_pb_section .et_pb_text.et_pb_bg_layout_dark p a:not(.cta-button):not(.cta-button-ghost):not(.cta-link):not(.back-link), .et_pb_section .et_pb_text.et_pb_bg_layout_dark li a:not(.cta-button):not(.cta-button-ghost):not(.cta-link):not(.back-link), .et_pb_section .et_pb_blurb.et_pb_bg_layout_dark p a:not(.cta-button):not(.cta-button-ghost):not(.cta-link):not(.back-link), .et_pb_section .et_pb_blurb.et_pb_bg_layout_dark li a:not(.cta-button):not(.cta-button-ghost):not(.cta-link):not(.back-link) { background-image: linear-gradient(rgba(255,208,63,1),rgba(255,208,63,1)), /* idle color */ linear-gradient(270deg,rgba(255,255,255,1) 0%,rgba(255,255,255,1) 100%); /* hover color */ } /* --------------- Active State --------------- */ /* Basic */ body.orbit a:active { outline: 2px solid #FFD03F; } /* --------------- Active State --------------- */ /* Basic Hover State */ body.orbit a:hover, body.orbit h1 a:hover, body.orbit h2 a:hover, body.orbit h3 a:hover, body.orbit h4 a:hover, body.orbit h5 a:hover, body.orbit h6 a:hover { text-decoration: none; } /* --------------- Focus State --------------- */ /* Basic */ /* NOTE: Don't forget to also update the header search input. You can find this styling down below. */ body.orbit a:focus { outline: none !important; /* Overriding the default styling because it looks bad on small devices. I reengage beginning at 981px and above. */ -webkit-box-shadow: none !important; /* Overriding the default styling because it looks bad on small devices. I reengage beginning at 981px and above. */ box-shadow: none !important; /* Overriding the default styling because it looks bad on small devices. I reengage beginning at 981px and above. */ } /* 981px and above --------------*/ @media all and (min-width: 981px) { /* Basic Hover State */ body.orbit a:hover, body.orbit h1 a:hover, body.orbit h2 a:hover, body.orbit h3 a:hover, body.orbit h4 a:hover, body.orbit h5 a:hover, body.orbit h6 a:hover { color: #191919; } body.orbit .et_pb_bg_layout_dark a:hover, body.orbit .et_pb_bg_layout_dark h1 a:hover, body.orbit .et_pb_bg_layout_dark h2 a:hover, body.orbit .et_pb_bg_layout_dark h3 a:hover, body.orbit .et_pb_bg_layout_dark h4 a:hover, body.orbit .et_pb_bg_layout_dark h5 a:hover, body.orbit .et_pb_bg_layout_dark h6 a:hover { color: #fff; } /* 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-ghost):not(.cta-link):not(.back-link):hover, .et_pb_section .et_pb_blurb p a:not(.cta-button):not(.cta-button-ghost):not(.cta-link):not(.back-link):hover, .et_pb_post .oms-main-wrapper p a:not(.cta-button):not(.cta-button-ghost):not(.cta-link):not(.back-link):hover, .et_pb_section .et_pb_text li a:not(.cta-button):not(.cta-button-ghost):not(.cta-link):not(.back-link):hover, .et_pb_section .et_pb_blurb li a:not(.cta-button):not(.cta-button-ghost):not(.cta-link):not(.back-link):hover, .et_pb_post .oms-main-wrapper li a:not(.cta-button):not(.cta-button-ghost):not(.cta-link):not(.back-link):hover { background-size: 0 1px, /* idle color */ 100% 1px; /* hover color */ background-position: 100% 100%, /* idle color */ 0 100%; /* hover color */ } /* Dark BG Variation */ .et_pb_section .et_pb_text.et_pb_bg_layout_dark p a:not(.cta-button):not(.cta-button-ghost):not(.cta-link):not(.back-link):hover, .et_pb_section .et_pb_text.et_pb_bg_layout_dark li a:not(.cta-button):not(.cta-button-ghost):not(.cta-link):not(.back-link):hover, .et_pb_section .et_pb_blurb.et_pb_bg_layout_dark p a:not(.cta-button):not(.cta-button-ghost):not(.cta-link):not(.back-link):hover, .et_pb_section .et_pb_blurb.et_pb_bg_layout_dark li a:not(.cta-button):not(.cta-button-ghost):not(.cta-link):not(.back-link):hover { color: #FFD03F; } /* Focus State */ body.orbit a:focus, body.orbit a:focus > i { outline: 2px solid #FFD03F !important; } } /*================================================================================= 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: proxima-nova, sans-serif; font-weight: 400; color: #555555; font-size: 17px; line-height: 1.6; padding: 0; letter-spacing: .25px; } body.orbit p, body.orbit #main-content ul, body.orbit #main-content ol { margin: 0 0 25px 0; } /* --------------- Strong --------------- */ body.orbit strong { font-weight: 700; } 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 #left-area ul, body.orbit .oms-main-wrapper ul { 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 #left-area ul, body.orbit .oms-main-wrapper ul { list-style-type: none; } body.orbit #main-content .et_pb_section .et_pb_module 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 #left-area li, body.orbit .oms-main-wrapper li { margin: 0 0 10px; } body.orbit #main-content .et_pb_section .et_pb_module ul:not(.oms-text-col-2) li:last-of-type, /* the :not(.oms-text-col-2) works with 2-col styling below. */ body.orbit #main-content .et_pb_post li:last-of-type, body.orbit #left-area li:last-of-type, body.orbit .oms-main-wrapper ul:not(.oms-text-col-2) 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 #left-area ul li, body.orbit .oms-main-wrapper:not(.et-fb-root-ancestor) 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 #left-area ul li:before, body.orbit .oms-main-wrapper:not(.et-fb-root-ancestor) ul li:before { content: ''; position: absolute; height: 5px; width: 5px; background: #80D0C7; top: 11px; 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 { 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 #left-area li ul, body.orbit .oms-main-wrapper:not(.et-fb-root-ancestor) 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 #left-area li ul li:before, body.orbit .oms-main-wrapper:not(.et-fb-root-ancestor) li ul li:before { background: rgba(0,65,107,.2); } /* --------------- Paragraph Intro & Blockquote Common Styling --------------- */ body.orbit p.intro { font-size: 22px; line-height: 1.5; } /* --------------- Blockquotes --------------- */ body.orbit blockquote { position: relative; background: rgba(0,65,107,.04); border: none; border-left: 3px solid #80D0C7; margin: 50px auto; padding: 75px 100px; border-radius: 0 5px 5px 0; } body.orbit blockquote p { font-size: 20px; line-height: 1.5; } 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,65,107,.15); } /*================================================================================= HEADERS ===============================================================================*/ /* --------------- H1 --------------- */ body.orbit #page-container h1, body.orbit.et-db:not(.logged-in) #et-boc .et-l h1, body.orbit.et-db.archive #et-boc .et-l h1 { font-family: proxima-nova, sans-serif; font-weight: 600; color: #00416b; font-size: 70px; line-height: 1.1; margin: 0 0 20px; padding: 0; } /* --------------- H2 --------------- */ body.orbit #page-container h2, body.orbit.et-db:not(.logged-in) #et-boc .et-l h2, body.orbit.et-db.archive #et-boc .et-l h2 { font-family: proxima-nova, sans-serif; font-weight: 600; color: #00416b; font-size: 35px; line-height: 1.1; margin: 0 0 20px; padding: 0; } /* --------------- H3 --------------- */ body.orbit #page-container h3, body.orbit.et-db:not(.logged-in) #et-boc .et-l h3, body.orbit.et-db.archive #et-boc .et-l h3 { font-family: proxima-nova, sans-serif; font-weight: 600; color: #00416b; font-size: 23px; line-height: 1.2; margin: 0 0 10px; padding: 0; } /* --------------- H4 --------------- */ body.orbit #page-container h4, body.orbit .header4 { font-family: proxima-nova, sans-serif; font-weight: 600; color: #00416b; font-size: 19px; line-height: 1.4; margin: 0 0 10px; padding: 0; } /* --------------- H5 --------------- */ body.orbit #page-container h5 { font-family: proxima-nova, sans-serif; font-weight: 600; color: #00416b; 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: proxima-nova, sans-serif; font-weight: 600; color: #00416b; 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-family: proxima-nova, sans-serif; font-weight: 600; font-size: 14px; color: #017D9B; line-height: 1.5; letter-spacing: 1px; margin: 0 0 10px !important; } /* On Dark Background - General Purposes */ body.orbit .et_pb_bg_layout_dark .pre-title { color: #ffffff; } /*================================================================================= 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 { 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 { content: ''; left: -28px; width: 1.15rem; height: 1.15rem; display: block; background: url(/wp-content/uploads/2022/09/glyph-check-orange-02.svg) no-repeat; background-size: contain; top: .4rem !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: 80%; } /*================================================================================= TEXT COLUMNS ===============================================================================*/ /* --------------- 2 Columns --------------- */ /* 768px and above --------------*/ @media all and (min-width: 768px) { /* Paragraph Text, with 2-Column class applied */ .oms-text-col-2 { -webkit-columns: 150px 2; -moz-columns: 150px 2; columns: 150px 2; -webkit-column-gap: 60px; -moz-column-gap: 60px; column-gap: 60px; } /* Unordered and Ordered List, with 2-Column class applied */ ul.oms-text-col-2 li, ol.oms-text-col-2 li { display: inline-block; display: flex; } } /*================================================================================= FORCED TEXT ALIGNMENT ===============================================================================*/ /* Forces Text to be Centered */ .et_pb_text_align_center { text-align: center; } /* 767px and below --------------*/ @media all and (max-width: 767px) { /* Forces Text to be Centered */ .oms-text-l-c-c { text-align: center; } } /* 768px to 980px --------------*/ @media all and (min-width: 768px) and (max-width: 980px) { /* Forces Text to be Centered */ .oms-text-l-c-c { text-align: center; } } /*================================================================================= INFO CALL-OUT ===============================================================================*/ /* NOTE: This was created for the HSRA project. */ /* Container */ body.orbit .oms-text-info { position: relative; /*padding: 15px 25px 15px 40px; NOTE: commented-out in favor of the padding below. */ padding: 15px 25px; background-color: #F7FAFB; color: #00416b; border-radius: 0 0 5px 5px; border: 1px solid rgba(0,65,107,.15); border-top: none; } /* Pseudo Element - Info Icon */ /* NOTE: Client is asking to remove this icon altogether. */ /*body.orbit .oms-text-info:before { content: ''; background-image: url(/wp-content/uploads/2022/10/glyph-info-orange.svg); background-size: 16px 16px; position: absolute; top: 16px; left: 15px; width: 16px; height: 16px; }*/ /* Text */ body.orbit .oms-text-info .et_pb_text_inner p, body.orbit .oms-text-info .et_pb_text_inner { font-size: 12px; letter-spacing: .5px; color: #00416b; } /* Sibling Variation */ body.orbit .et_pb_module + .oms-text-info { margin-top: -25px; } /*-------------- White BG Variation --------------*/ body.orbit .oms-bg-gray-light .oms-text-info { background: #fff; } /* 768px and above --------------*/ @media all and (min-width: 768px) { body.orbit .et_pb_module + .oms-text-info { margin-top: -50px; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- 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 h1, body.orbit .et_pb_bg_layout_dark h2, body.orbit .et_pb_bg_layout_dark h3, body.orbit .et_pb_bg_layout_dark h4, body.orbit .et_pb_bg_layout_dark h5, body.orbit .et_pb_bg_layout_dark h6 { color: rgba(255,255,255,1); } body.orbit .et_pb_bg_layout_dark h1 { text-shadow: 0 3px 6px rgba(0,0,0,0.40); } body.orbit .et_pb_bg_layout_dark h2, body.orbit .et_pb_bg_layout_dark h3, body.orbit .et_pb_bg_layout_dark h4, body.orbit .et_pb_bg_layout_dark h5, body.orbit .et_pb_bg_layout_dark h6 { text-shadow: 0 2px 4px rgba(0,0,0,0.50); } /* --------------- Body Copy & List Items --------------- */ body.orbit .et_pb_bg_layout_dark, body.orbit .et_pb_bg_layout_dark p, body.orbit .et_pb_bg_layout_dark li { color: rgba(255,255,255,1); text-shadow: 0 1px 4px rgba(0,0,0,.5); } /* --------------- 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 */ body.orbit .oms-main-wrapper p:not(.pre-title) + h2, body.orbit .oms-main-wrapper ul + h2, body.orbit .oms-main-wrapper ol + h2 { margin-top: 75px !important; } /* h3, in both pageblocks and in Blog Posts */ body.orbit .oms-main-wrapper p:not(.pre-title) + h3, body.orbit .oms-main-wrapper ul + h3, body.orbit .oms-main-wrapper ol + h3, body.orbit .et_pb_text p:not(.pre-title) + h3 { margin-top: 50px !important; } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- MEDIA QUERIES FOR TEXT STYLING ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /* 767px and below --------------*/ @media all and (max-width: 767px) { body.orbit, body.orbit p, body.orbit #main-content ul, body.orbit #main-content ol { font-size: 15px; } 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: 20px; } body.orbit blockquote { padding: 25px; } body.orbit blockquote p { font-size: 18px; } body.orbit #page-container h1, body.orbit.et-db:not(.logged-in) #et-boc .et-l h1, body.orbit.et-db.archive #et-boc .et-l h1 { font-size: 32px; } body.orbit #page-container h2, body.orbit.et-db:not(.logged-in) #et-boc .et-l h2, body.orbit.et-db.archive #et-boc .et-l h2 { font-size: 26px; } body.orbit #page-container h3, body.orbit.et-db:not(.logged-in) #et-boc .et-l h3, body.orbit.et-db.archive #et-boc .et-l h3 { font-size: 20px; } body.orbit #page-container h4, body.orbit .header4 { font-size: 16px; } body.orbit #page-container h5 { font-size: 15px; } body.orbit #page-container h6 { font-size: 15px; } body.orbit .pre-title { font-size: 12px; margin-bottom: 10px !important; } /* 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 */ .oms-main-wrapper p:not(.pre-title) + h2, .oms-main-wrapper ul + h2, .oms-main-wrapper ol + h2 { margin-top: 50px !important; } /* h3, in both pageblocks and in Blog Posts */ .oms-main-wrapper p:not(.pre-title) + h3, .oms-main-wrapper ul + h3, .oms-main-wrapper 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: -3px !important; } } /* 768px to 1399px --------------*/ @media all and (min-width: 768px) and (max-width: 1399px) { body.orbit, body.orbit p, body.orbit #main-content ul, body.orbit #main-content ol { font-size: 16px; } body.orbit p.intro { font-size: 22px; } body.orbit blockquote { padding: 50px 75px; } body.orbit blockquote p { font-size: 19px; } body.orbit #page-container h1, body.orbit.et-db:not(.logged-in) #et-boc .et-l h1, body.orbit.et-db.archive #et-boc .et-l h1 { font-size: 60px; } body.orbit #page-container h2, body.orbit.et-db:not(.logged-in) #et-boc .et-l h2, body.orbit.et-db.archive #et-boc .et-l h2 { font-size: 32px; } body.orbit #page-container h3, body.orbit.et-db:not(.logged-in) #et-boc .et-l h3, body.orbit.et-db.archive #et-boc .et-l h3 { font-size: 23px; } body.orbit #page-container h4, body.orbit .header4 { font-size: 17px; } body.orbit #page-container h5 { font-size: 16px; } body.orbit #page-container h6 { font-size: 16px; } body.orbit .pre-title { font-size: 13px; } /* 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 */ .oms-main-wrapper p:not(.pre-title) + h2, .oms-main-wrapper ul + h2, .oms-main-wrapper ol + h2 { margin-top: 75px !important; } /* h3, in both pageblocks and in Blog Posts */ .oms-main-wrapper p:not(.pre-title) + h3, .oms-main-wrapper ul + h3, .oms-main-wrapper 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 ================================================================================================================================= \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ ---------------------------------------------------------------------------------------------------------------------------------*/ /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- TOP HEADER & SECONDARY NAV ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= Base Styling ===============================================================================*/ /* --------------- Resting State --------------- */ body.orbit #top-header, body.orbit.et_secondary_nav_enabled #page-container #top-header { background: #F7FAFB !important; border-bottom: 1px solid rgba(0,65,107,.15); } #top-header .container { padding-top: 0; } #et-secondary-nav { display: flex; justify-content: center; align-items: center; } #et-secondary-nav li { margin-right: 20px; } #et-secondary-menu > ul > li a { padding: 0; font-size: 14px; letter-spacing: .25px; color: #00416b; font-weight: 600; line-height: 1.1; display: flex; justify-content: center; align-items: center; height: 40px; } #et-secondary-menu > ul > li a:before { content: ''; position: absolute; background: #FFB723; height: 2px; width: 100%; bottom: 0; left: 0; -webkit-transform: scale3d(0,1,1); -ms-transform: scale3d(0,1,1); transform: scale3d(0,1,1); -webkit-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; transform-origin: 100% 50%; transition: transform .2s ease-out; -webkit-backface-visibility: hidden; } /* Adjusts padding-right for items that caret */ #et-secondary-nav .menu-item-has-children > a:first-child { padding-right: 0; /* NOTE: This is set to zero because we're choosing to display:none the dropdown in this secondary nav. */ } /* Caret for main nav items that have sub-menu children */ #et-secondary-nav .menu-item-has-children > a:first-child:after { display: none; /* NOTE: This is display:none because we're deactivating the whole dropdown in this secondary nav. */ } /* Sub Menu */ #et-secondary-nav li ul { display: none; /* NOTE: This is display:none because we're deactivating the whole dropdown in this secondary nav. */ } /*-------------- Top Icon & Group Variation --------------*/ /* Top Icon anchor elements */ .top-icon a:before { width: 17px; height: 17px; margin-right: 5px; } /* Top Icon - Login Variation */ .top-icon.login a:before { content: url(/wp-content/uploads/2022/04/glyph-user-orange.svg); } /* Top Icon - Transver Variation */ .top-icon.transfer a:before { content: url(/wp-content/uploads/2022/04/glyph-arrow-arrow-orange.svg); } /*-------------- Top Secondary Nav Variation --------------*/ #et-secondary-menu > ul > li.top-button a { border: 1px solid rgba(0,65,107,.15); padding: 8px 10px; border-radius: 5px; background: #fff; } /* --------------- Active State --------------- */ #et-secondary-menu > ul > li.current-menu-item > a, #et-secondary-menu > ul > li.current-page-ancestor > a { color: #00416b; } #et-secondary-menu > ul > li.current-menu-item > a:before, #et-secondary-menu > ul > li.current-page-ancestor > a:before { -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); } /* --------------- Hover State --------------- */ #et-secondary-menu > ul > li > a:hover { text-decoration: none; opacity: 1; } #et-secondary-menu > ul > li > a:hover:before { -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); } /* 980px and below --------------*/ @media all and (max-width: 980px) { body.orbit #main-header #et-top-navigation #et_mobile_nav_menu .et_mobile_menu > li.top-icon, body.orbit #main-header #et-top-navigation #et_mobile_nav_menu .et_mobile_menu > li.top-button { min-height: unset; padding-right: 7%; } body.orbit #main-header #et-top-navigation #et_mobile_nav_menu .et_mobile_menu li.top-icon a, body.orbit #main-header #et-top-navigation #et_mobile_nav_menu .et_mobile_menu li.top-button a { display: flex; justify-content: center; align-items: center; background: #F7FAFB; border-radius: 5px; padding: 13px 30px !important; border-bottom: none; margin-top: 10px; font-weight: 400; border: 1px solid rgba(0,65,107,.15); } } /* 981px and above --------------*/ @media all and (min-width: 981px) { body.orbit #top-header .container { width: calc(100% - 70px); } /* NOTE: Adding a vertical rule between regular top secondary nav items and nav items with an icon was surprisingly more difficult than I anticipated. Instinctively, I thought I could apply a border-left to the first .top-icon child, but CSS doesn't allow for that style of targeting (for example, .top-icon:first-child). So, I had to improvise and came up with this solution below. */ /* VARIATION: Group Item */ .group-item { margin-left: 20px; } .group-item + .group-item { margin-left: 0; } .group-item:before { content: ''; background: rgba(0,65,107,.15); height: 22px; width: 1px; position: absolute; top: 50%; left: -21px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .group-item + .group-item:before { display: none; } /* Container, when fixed */ .et-fixed-header#top-header, .et-fixed-header#top-header #et-secondary-nav li ul, body.orbit.et_fixed_nav #page-container .et-fixed-header#top-header { background: #F7FAFB !important; } /* List Items, when fixed */ body.orbit .et-fixed-header#top-header a { color: #00416b; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- MAIN HEADER CONTAINER ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= Base Styling ===============================================================================*/ body.orbit #main-header { background-color: #fff; height: 106px; display: flex; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2) !important; transition: all .2s ease-out; } body.orbit #main-header .container { display: flex; align-items: center; } /*================================================================================= MEDIA QUERIES ===============================================================================*/ /* 767px and below --------------*/ @media all and (max-width: 767px) { body.orbit #main-header .et_menu_container { padding-left: 7%; } } /* 768px to 980px --------------*/ @media all and (min-width: 768px) and (max-width: 980px) { body.orbit #main-header .et_menu_container { padding-left: 35px; } } /* 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 { height: 60px; position: fixed !important; } body.orbit #main-header .et_menu_container { 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 */ } } /* 981px and above --------------*/ @media all and (min-width: 981px) { body.orbit #main-header .et_menu_container { width: calc(100% - 70px); } /*-------------- Sticky/Fixed State --------------*/ body.orbit .et-fixed-header#main-header { height: 70px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2) !important; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- 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; width: 23%; /* NOTE: this width should coincide with the width for .et_header_style_left #et-top-navigation on 981 and over */ max-width: 250px; } span.logo_helper { display: unset; } /*================================================================================= 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) { body.orbit #main-header .logo_container { height: unset; width: 175px; /*This will need to be adjusted from site to site, because every client's logo has different proportions. */ padding-left: 0px; } .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) { /*-------------- Sticky/Fixed State --------------*/ body.orbit .et-fixed-header#main-header .logo_container { max-width: 200px; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- 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; } /* 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; } /*================================================================================= Media Queries ===============================================================================*/ /* 981px and above --------------*/ @media all and (min-width: 981px) { .et_header_style_left #et-top-navigation { width: 75%; /* NOTE: this width should coinide with the width for body.orbit #main-header .logo_container */ } /* Option to hide dropdown menu on desktop. */ body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu li.menu-item.menu-item-has-children.hide-submenu a { padding-right: 15px; /* same value as the default. */ } body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu li.menu-item.menu-item-has-children.hide-submenu a::after { display: none; } .hide-submenu .sub-menu { display: none; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- SEARCH ELEMENTS ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*-------------- Base Styling --------------*/ /* Search Outer Container */ /* NOTE: This was added to help Marmon achieve AA Accessibility. Although the Search is not visible on the site to most viewers, we needed to prevent the Search field from showing up on the site if a user were to use the tab key to cycle through the various items in the main navigation. */ /*.et_search_outer { display: none; }*/ #et_search_icon, span.et_close_search_field { display: flex; align-items: center; justify-content: center; height: 100%; width: 40px; } #et_search_icon:before, span.et_close_search_field:after { content: ''; background-size: cover; position: relative; top: 0; height: 20px; width: 20px; } /* Search Container */ #et_top_search { float: unset; /* Overrides default styling */ width: unset; /* Overrides default styling */ } /* Search Span - Magnifying Glass */ #et_search_icon:before { background-image: url(/wp-content/uploads/2022/09/glyph-magnifying-glass-teal_02.svg); } /* Search Span - Close Button */ span.et_close_search_field { position: unset; right: unset; top: unset; bottom: unset; margin: 0 10px 0 auto; } span.et_close_search_field:after { background-image: url(/wp-content/uploads/2022/09/glyph-close-teal.svg); font-family: unset; /* Overrides Divi core styling */ line-height: unset; /* Overrides Divi core styling */ font-size: unset; /* Overrides Divi core styling */ display: unset; /* Overrides Divi core styling */ } /* Search Container */ body.orbit .container.et_search_form_container { display: flex; align-items: center; } /* Search Form */ body.orbit .et-search-form { display: flex; top: unset; /* Overrides Divi core styling */ bottom: unset; /* Overrides Divi core styling */ right: unset; /* Overrides Divi core styling */ position: unset; /* Overrides Divi core styling */ width: unset; /* Overrides Divi core styling */ } /* Search Input */ body.orbit .et_search_form_container input { background: #F7FAFB; border: 1px solid rgba(0,65,107,.15); color: #00416b; font-weight: 400; font-size: 15px!important; padding: 10px 20px; position: relative; top: unset; right: unset; width: 100%; margin: unset; bottom: unset; } /* Search Input Placeholder */ body.orbit .et_search_form_container input::placeholder { color: #00416b; font-weight: 400; } /* Search Input - Focus */ body.orbit .et_search_form_container input:focus { outline: 2px solid #FFD03F !important; } /* 767px and below --------------*/ @media all and (max-width: 767px) { /* Search Container */ body.orbit .container.et_search_form_container { width: 100%; padding-left: 7%; } /* Search Input */ body.orbit .et_search_form_container input { font-size: 15px !important; } } /* 768px to 980px --------------*/ @media all and (min-width: 650px) and (max-width: 980px) { /* Search Container */ body.orbit .container.et_search_form_container { width: 100%; padding-left: 35px; } /* Search Input */ body.orbit .et_search_form_container input { font-size: 15px !important; } } /* 980px and below --------------*/ @media all and (max-width: 980px) { body.orbit #et_top_search { order: 2; margin-right: 10px; border-left: 1px solid rgba(0,65,107,.15); padding-left: 10px; } body.orbit.et_header_style_left .et-search-form { width: calc(100% - 60px) !important; max-width: unset !important; } } /* 981px and above --------------*/ @media all and (min-width: 981px) { body.orbit #main-header #et_top_search { margin: 0 0 0 10px; } body.orbit .container.et_search_form_container { justify-content: flex-end; width: calc(100% - 70px); } body.orbit .et-search-form { flex: 0 0 calc(72% - 60px); max-width: 650px; } body.orbit .et-fixed-header .et_search_form_container input { color: #00416b !important; } body.orbit .et-fixed-header .et_search_form_container input::placeholder { color: #00416b !important; } span.et_close_search_field { margin-right: 0; margin-left: 20px; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- MEGA MENU MAX ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= Top Level Primary Nav Styling ===============================================================================*/ /*-------------- Base Styling --------------*/ /* Outermost Container */ body.orbit #mega-menu-wrap-primary-menu { background: unset; } /* Basic Top Level Nav Item - anchor */ body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item > a.mega-menu-link, body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item.mega-toggle-on > a.mega-menu-link { color: #00416b; font-size: 18px; line-height: 1.2; font-weight: 600; background: none !important; /* I had to make this an !important to override the weird background flash that was happening with the javascript menu classes */ } /* Basic Top Level Nav Item - span tag */ body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item > a.mega-menu-link span:not(.mega-indicator) { text-transform: uppercase; letter-spacing: 3px; font-size: 12px; font-weight: 700; color: #017D9B; } /* Basic Top Level Nav Item - Pseudo Element - downward-pointing chevron */ body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator:after { width: 12px; height: 7px; background: url("/wp-content/uploads/2022/09/glyph-chevron-right-orange-03.svg") no-repeat center center; content: ''; background-size: cover; margin: unset; position: absolute; top: 0; left: 0; transform: translate(-50%, 10px); transition: all .3s ease-out; } /* 980px and below --------------*/ @media all and (max-width: 980px) { body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu { background: rgba(0, 65, 107, 0.85); position: fixed; top: 60px; left: 0; right: 0; bottom: 0; overflow-y: scroll; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); /* this styling was throwing off the position: sticky on the psuedo element below, so I had to do a workaround. */ } body.orbit.admin-bar #mega-menu-wrap-primary-menu #mega-menu-primary-menu { top: 106px; } /* Psuedo Element - Border top */ body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu:before { content: ''; position: sticky; display: block !important; height: 2px; top: 0; left: 0; right: 0; background: rgba(0,65,107,.15); background: #d9e2e7; /* this color is meant to replicate the transparent color above... but the above background only works if you can see white background underneath. */ z-index: 9999; } /* Basic Top Level Nav Item - List Item */ body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-item { background: #fff; display: flex; flex-direction: column; } body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item { padding-left: 7%; } /* Basic Top Level Nav Item - anchor */ body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item > a.mega-menu-link, body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item.mega-toggle-on > a.mega-menu-link { padding: 15px 20px 15px 0; height: unset; border-bottom: 1px solid rgba(0,65,107,.15); } /* Basic Top Level Nav Item - Pseudo Element - right-pointing chevron that appears after the menu item */ body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item:not(.menu-btn) > a.mega-menu-link:after, body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item.mega-toggle-on:not(.menu-btn) > a.mega-menu-link:after { content: url(/wp-content/uploads/2022/09/glyph-chevron-right-orange.svg); position: relative; display: inline-block !important; margin-left: 5px; } /* Basic Top Level Nav Item - Pseudo Element - vertical rule */ body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-item-has-children > a.mega-menu-link:before { display: block !important; content: ''; background: rgba(0,65,107,.15); width: 1px; height: 100%; max-height: 40px; /* height of parent elemnt, minus the sum of padding-top and padding-bottom. */ position: absolute; top: 13px; right: calc(40px + 14%); /* this value comes from the width of the hit area of the downward chevron, plus the margin and padding on the left and right of the hit area. 3% + 4% + 40px + 4% + 3%. */ margin: 0; /* Override */ } /* Basic Top Level Nav Item - span tag */ body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item > a.mega-menu-link span:not(.mega-indicator) { position: relative; margin-bottom: 2px; transform: unset; display: block; } /* Basic Top Level Nav Item - Pseudo Element - downward-pointing chevron that indicates there are children items */ body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator { float: unset; width: calc(40px + 8%); height: 100%; max-height: 66px; top: 0; right: 0; position: absolute; margin-right: 3%; display: unset; } body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator:after { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 12px; } body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-toggle-on > a.mega-menu-link > span.mega-indicator:after { transform: translate(-50%,-50%) rotate(-180deg); } } /* 981px and above --------------*/ @media all and (min-width: 981px) { /* Additional Nav Output */ /* NOTE: To troubleshoot the issues we were experiencing when navigating to children pages (while Max Mega Menu was activated), Tyler had to reconstruct the header, and had to output the menu a couple times. We're hiding the menu, which isn't the most elegant solution, but it works. */ body.orbit #default_nav_container{ display: none; } /* Basic Top Level Nav Item */ body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item { display: table-cell; } /* Basic Top Level Nav Item - anchor */ body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item > a.mega-menu-link, body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item.mega-toggle-on > a.mega-menu-link { height: 106px; display: flex; align-items: center; justify-content: center; flex-direction: column; transition: all .2s ease-out; } /* Basic Top Level Nav Item - Pseudo Element - bottom border */ body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item > a.mega-menu-link:before { content: ''; display: block; position: absolute; background: #FFB723; bottom: 0; left: 0; right: 0; height: 4px; width: 100%; z-index: 10000; -webkit-transform: scaleY(0); -ms-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; } /* Basic Top Level Nav Item - span tag */ body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item > a.mega-menu-link span:not(.mega-indicator) { position: absolute; transform: translateY(calc(-100% - 8px)); } /*-------------- Sticky/Fixed State --------------*/ /* Basic Top Level Nav Items when menu is sticky */ body.orbit .et-fixed-header#main-header #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item > a.mega-menu-link, body.orbit .et-fixed-header#main-header #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item.mega-toggle-on > a.mega-menu-link { height: 70px; } /* Basic Top Level Nav Item - span tag */ body.orbit .et-fixed-header#main-header #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item > a.mega-menu-link span:not(.mega-indicator) { transform: translateY(calc(-100% - 4px)); } /* Basic Top Level Nav Item - Pseudo Element - downward-pointing chevron */ body.orbit .et-fixed-header#main-header #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-item-has-children>a.mega-menu-link>span.mega-indicator:after { transform: translate(-50%,4px); } /* --------------- Active State --------------- */ /* Basic Top Level Nav Items */ body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link, body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link { background: rgb(245,248,249) !important; background: linear-gradient(0deg,rgba(245,248,249,1) 0%,rgba(255,255,255,1) 100%) !important; } /* Basic Top Level Nav Item - Pseudo Element - before */ body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link:before, body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link:before { -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); } /* --------------- Hover State --------------- */ /* Basic Top Level Nav Items */ body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item > a.mega-menu-link:hover, body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item-has-children:hover > a.mega-menu-link { background: rgb(245,248,249) !important; background: linear-gradient(0deg,rgba(255,255,255,1) 0%,rgba(247,250,251,1) 100%) !important; } /* Basic Top Level Nav Item - Pseudo Element - bottom border */ body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item > a.mega-menu-link:hover:before, body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item-has-children:hover > a.mega-menu-link:before { -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); } } /* 981px to 1099px --------------*/ @media all and (min-width: 981px) and (max-width: 1099px) { /* Basic Top Level Nav Item - anchor */ body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item > a.mega-menu-link, body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item.mega-toggle-on > a.mega-menu-link { font-size: 14px; } } /*================================================================================= Menu Button Overrides ===============================================================================*/ /* Menu Button Overrides */ /* NOTE: I had to add this in to override the override just above... this forces the menu-btn to behave as expected. */ /* NOTE: I chose to organize these styles here because they're pertinent to the Mega Menu plugin */ body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item.menu-btn > a.mega-menu-link { background: #FFD03F!important; border: 1px solid #FFB723 !important; border-radius: 500px; padding: 11px 25px 10px!important; height: auto!important; overflow: hidden; /* this was added for this HSRA's unique button hover states. */ z-index: 1; /* this was added for this HSRA's unique button hover states. */ text-align: center; } /* 980px and below --------------*/ @media all and (max-width: 980px) { /* Menu Button Overrides */ body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item.menu-btn { padding-right: 7%; padding-top: 13px; padding-bottom: 13px; } } /* 981px and above --------------*/ @media all and (min-width: 981px) { /* Menu Button Overrides */ body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item.menu-btn > a.mega-menu-link { margin-left: 15px; } /* Menu Button - Pseudo Element - before */ /* This code is identical to what's being used for the CTA buttons, but because of the various overrides that I need to do, it was just easier to duplicate the code and organize it up here with the other specifics for the Primary Navigation .menu-btn. */ body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item.menu-btn > a.mega-menu-link:before { content:''; position: absolute; height: 50px; width: 100%; background: #FFB723; top: 0; left:0; right: unset; z-index: -1; -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform: scale3d(0,1,1); transform: scale3d(0,1,1); -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3; transition: transform 0.3; transition: transform 0.3s,-webkit-transform 0.3s; } body.orbit .menu-btn a:focus { outline: 2px solid #000 !important; } /* --------------- Hover State --------------- */ /* Menu Button Pseudo Element - before */ /* This code is identical to what's being used for the CTA buttons, but because of the various overrides that I need to do, it was just easier to duplicate the code and organize it up here with the other specifics for the Primary Navigation .menu-btn. */ body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item.menu-btn > a.mega-menu-link:hover:before { -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); } /* Menu Button - Pseudo Element - after */ body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item.menu-btn > a.mega-menu-link:hover:after { right: 12px; opacity: 1; } } /*================================================================================= Mega Menu Tray ===============================================================================*/ /* 980px and below --------------*/ @media all and (max-width: 980px) { body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item > ul.mega-sub-menu, body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item.mega-menu-megamenu > ul.mega-sub-menu { background: none; padding: 0; border-bottom: 1px solid rgba(0,65,107,.15); } } /* 981px and above --------------*/ @media all and (min-width: 981px) { body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item > ul.mega-sub-menu, body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item.mega-menu-megamenu > ul.mega-sub-menu { position: fixed; background: #fff; border-top: 1px solid rgba(0,65,107,.15); } body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item > ul.mega-sub-menu:before, body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item.mega-menu-megamenu > ul.mega-sub-menu:before { content: ""; display: block; height: 100vh; width: 100%; background-color: rgba(0,65,107,0.85); position: absolute; top: calc(100% - 1px); left: 0px; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); pointer-events: none; } body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row { max-width: 1500px; width: 86%; margin-left: auto; margin-right: auto; float: unset; } body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-sub-menu { display: flex; } } /*================================================================================= Tray Left Column - Parent ===============================================================================*/ /* 980px and below --------------*/ @media all and (max-width: 980px) { body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu > li.oms-mega-parent { display: none; } } /* 981px and above --------------*/ @media all and (min-width: 981px) { /* --------------- Column Layout Styling --------------- */ body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu > li.oms-mega-parent { width: calc(27% - 45px); margin-right: 45px; padding: 35px 0; } /* Parent List Item */ body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu ul.mega-sub-menu li.mega-menu-row ul.mega-sub-menu li.oms-mega-parent ul.mega-sub-menu li.mega-menu-item { padding: 0; } /* --------------- Parent Typography --------------- */ /* Parent Title */ body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item h4.mega-block-title { text-transform: unset; color: #00416b; font-size: 22px; line-height: 1.4; font-weight: 600; padding: 0; margin-bottom: 10px; } /* Parent Paragraph Text */ body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu .textwidget p { margin-bottom: 25px; font-size: 15px; } body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu .textwidget p:last-child { margin-bottom: 0; } } /*================================================================================= Tray Right Column - Children ===============================================================================*/ /* Menu Item */ body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu ul.mega-sub-menu li.mega-menu-column ul.mega-sub-menu li.mega-menu-item { padding: 0; } body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu ul.mega-sub-menu li.mega-menu-column ul.mega-sub-menu li.mega-menu-item a.mega-menu-link { text-transform: capitalize; color: #00416b; font-size: 18px; line-height: 1.4; font-weight: 600; letter-spacing: .25px; height: 100%; display: flex; align-items: flex-start; padding: 13px 20px 13px 0; border-bottom: 1px solid rgba(0,65,107,.15); } body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu ul.mega-sub-menu li.mega-menu-column ul.mega-sub-menu li.mega-menu-item:last-child a.mega-menu-link { border-bottom: none; } /* Link Icon */ body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu ul.mega-sub-menu li.mega-menu-column ul.mega-sub-menu li.mega-has-icon a.mega-menu-link:before { content: ''; height: 25px !important; width: 35px !important; margin: 0; background-size: auto !important; line-height: unset !important; } /* Pseudo Element - Arrow */ /* NOTE: These two selectors are grouped together because they have the same styling, but the plugin's HTML markup is different depending on whether or not a description is provided for the menu item. I had to use some slightly confusing logic to make this as bullet proof as possible. If the menu item has a description, the plugin applies a unique class to the list item & alters the html markup to include some span tags, and the pseudo element gets attributed to the span.mega-menu-title. However, if the menu item does NOT have a description, there will be NO unique class name on the list item & NO extra markup is added, ie no span tags are added within the anchor link. */ body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu ul.mega-sub-menu li.mega-menu-column ul.mega-sub-menu li.mega-menu-item a.mega-menu-link span.mega-menu-title, body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu ul.mega-sub-menu li.mega-menu-column ul.mega-sub-menu li.mega-menu-item:not(.mega-has-description) a.mega-menu-link { display: inline !important; /* This is necessary to override some conflict for regular links that do NOT have a description. */ background: url(/wp-content/uploads/2022/09/glyph-chevron-right-orange.svg) no-repeat right 0.2em center; padding-right: 1em; transition: background-position 0.3s ease-out; background-size: 0.45em; } /* Children Descriptions */ body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu ul.mega-sub-menu li.mega-menu-column ul.mega-sub-menu li.mega-menu-item span.mega-menu-description { color: #4C6168; font-size: 12px; font-style: normal; margin: 0; } /* 981px and above --------------*/ @media all and (min-width: 981px) { /* --------------- Column Layout Styling --------------- */ body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu ul.mega-sub-menu li.mega-menu-row ul.mega-sub-menu li.oms-mega-children { width: 73%; border-left: 2px solid rgba(0,65,107,.15); margin: 20px 0; /* the margin-top and bottom is less than the Left Column because there's additional padding on the Children items. */ padding-left: 25px; } body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu ul.mega-sub-menu li.mega-menu-row ul.mega-sub-menu li.oms-mega-children > ul.mega-sub-menu { display: flex; overflow: hidden; flex-wrap: wrap; } body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu ul.mega-sub-menu li.mega-menu-row ul.mega-sub-menu li.oms-mega-children > ul.mega-sub-menu > li.mega-menu-item { display: flex; flex-direction: column; padding: 0; border-right: 1px solid rgba(0,65,107,.15); border-bottom: 1px solid rgba(0,65,107,.15); } /* 3 Column */ body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu ul.mega-sub-menu li.mega-menu-row ul.mega-sub-menu li.oms-mega-children.col-3 > ul.mega-sub-menu > li.mega-menu-item { flex: 0 0 33.333333%; max-width: 33.333333%; } body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu ul.mega-sub-menu li.mega-menu-row ul.mega-sub-menu li.oms-mega-children.col-3 > ul.mega-sub-menu > li.mega-menu-item:nth-child(3n) { border-right: none; } body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu ul.mega-sub-menu li.mega-menu-row ul.mega-sub-menu li.oms-mega-children.col-3 > ul.mega-sub-menu > li.mega-menu-item:nth-last-child(-n+3):nth-child(3n+1), body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu ul.mega-sub-menu li.mega-menu-row ul.mega-sub-menu li.oms-mega-children.col-3 > ul.mega-sub-menu > li.mega-menu-item:nth-last-child(-n+3):nth-child(3n+1)~li { border-bottom: none; } /* --------------- Children Item Links --------------- */ /* Menu Item */ /* NOTE: this is written in a way to help apply to the children and to the grandchildren. Grandchildren are then modified a little further down below. */ body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu ul.mega-sub-menu li.mega-menu-column ul.mega-sub-menu li.mega-menu-item a.mega-menu-link { transition: all .3s ease-out; padding: 20px 25px; border-bottom: none; } /* --------------- SPECIAL VARIATION - "Child" list item with NO HOVER STATE --------------- */ /* This removes the pseudo element chevron */ body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu > li.mega-menu-columns-8-of-12 > ul.mega-sub-menu > li.mega-menu-item.no-hover a span.mega-menu-title:after { display: none; } /* See just a few lines below, the "DISABLE Hover State..." for more about this disabled variation. */ /* --------------- Active State --------------- */ /* Children Items When "Active" */ body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu > li.mega-menu-columns-8-of-12 > ul.mega-sub-menu > li.mega-menu-item.mega-current-menu-item > a { background: #F5F8F9; } body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu > li.mega-menu-columns-8-of-12 > ul.mega-sub-menu > li.mega-menu-item.mega-current-menu-item a span.mega-menu-title:after { left: 13px; } /* --------------- Hover State --------------- */ /* Children Items */ body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover { background-color: #F7FAFB; } body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover span.mega-menu-title { background-position-x: right; } /* --------------- DISABLE Hover State with use of .no-hover class --------------- */ /* Children Items - This ONLY applies to children items. */ body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu > li.mega-menu-columns-8-of-12 > ul.mega-sub-menu > li.mega-menu-item.no-hover > a:hover { background-color: transparent; cursor: auto; } } /*================================================================================= Tray Right Column - Grand Children ===============================================================================*/ /* 981px and above --------------*/ @media all and (min-width: 981px) { /* --------------- Layout Styling --------------- */ /* ul for Grand Children Items */ body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row > ul.mega-sub-menu > li.mega-menu-columns-8-of-12 > ul.mega-sub-menu > li.mega-menu-item > ul.mega-sub-menu { flex-direction: column; } /* Grand Children Item Anchor Links */ body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu ul.mega-sub-menu li.mega-menu-column ul.mega-sub-menu li.mega-menu-item li.mega-menu-item a.mega-menu-link { color: #00416b; font-size: 16px; font-weight: 600; padding: 0 20px 10px; margin-bottom: 15px; } /* --------------- Hover State --------------- */ /* Grandchildren Items */ body.orbit #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-megamenu ul.mega-sub-menu li.mega-menu-column ul.mega-sub-menu li.mega-menu-item li.mega-menu-item a.mega-menu-link:hover { color: #FFD03F; font-weight: 600; } } /*================================================================================= Mobile Menu - Hamburger ===============================================================================*/ /* 980px and below --------------*/ @media all and (max-width: 980px) { body.orbit #main-header #et-top-navigation nav#top-menu-nav #mega-menu-wrap-primary-menu .mega-menu-toggle { width: 40px; border-radius: unset; margin-right: 16px; } body.orbit #mega-menu-wrap-primary-menu .mega-menu-toggle .mega-toggle-blocks-left, body.orbit #mega-menu-wrap-primary-menu .mega-menu-toggle .mega-toggle-blocks-center { display: none; } body.orbit #mega-menu-wrap-primary-menu .mega-menu-toggle .mega-toggle-blocks-right .mega-toggle-block:only-child, body.orbit #mega-menu-wrap-primary-menu .mega-menu-toggle .mega-toggle-blocks-right .mega-toggle-block { margin: 0; } body.orbit #mega-menu-wrap-primary-menu .mega-menu-toggle .mega-toggle-animated { transform: unset; } body.orbit #mega-menu-wrap-primary-menu .mega-menu-toggle .mega-toggle-animated-box { display: flex; justify-content: center; } body.orbit #mega-menu-wrap-primary-menu .mega-menu-toggle .mega-toggle-animated-inner, body.orbit #mega-menu-wrap-primary-menu .mega-menu-toggle .mega-toggle-animated-inner:before, body.orbit #mega-menu-wrap-primary-menu .mega-menu-toggle .mega-toggle-animated-inner:after { width: 30px; height: 2px; } body.orbit #main-header #et-top-navigation nav#top-menu-nav #mega-menu-wrap-primary-menu .mega-menu-toggle .mega-toggle-animated .mega-toggle-animated-inner { background-color: #017D9B; border-radius: unset; margin-top: unset; } body.orbit #mega-menu-wrap-primary-menu .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-slider .mega-toggle-animated-inner { top: 0; } body.orbit #mega-menu-wrap-primary-menu .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-slider .mega-toggle-animated-inner:before { top: 11px; } body.orbit #mega-menu-wrap-primary-menu .mega-menu-toggle .mega-toggle-block-0 .mega-toggle-animated-slider .mega-toggle-animated-inner:after { top: 22px; } body.orbit #mega-menu-wrap-primary-menu .mega-menu-toggle.mega-menu-open .mega-toggle-block-0 .mega-toggle-animated-slider .mega-toggle-animated-inner:before { transform: unset; } body.orbit #mega-menu-wrap-primary-menu .mega-menu-toggle.mega-menu-open .mega-toggle-block-0 .mega-toggle-animated-slider .mega-toggle-animated-inner:after { transform: translate3d(0, -22px, 0) rotate(-90deg); } } /*------------------------------------------------------------------------------------------------------------------------------- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ ================================================================================================================================= FOOTER ELEMENTS ================================================================================================================================= \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ ---------------------------------------------------------------------------------------------------------------------------------*/ /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- LAYOUT COMPONENTS ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= BASE STYLING ===============================================================================*/ /* --------------- Main Footer --------------- */ body.orbit #main-footer { background: #022E4A; /* Used if the image is unavailable */ position: relative; padding-top: 100px } /* --------------- Footer Widgets Container --------------- */ #footer-widgets { padding: 100px 0 75px; /*adjusts the padding above and below*/ } /* --------------- Footer Widget --------------- */ #footer-widgets .footer-widget, #footer-widgets .footer-widget:nth-child(n) { margin-bottom: 0 !important; /* Removes the default margin-bottom that Divi insists on. */ } #footer-widgets .footer-widget .et_pb_widget { float: none; } /*================================================================================= MEDIA QUERIES ===============================================================================*/ /* 599px and below --------------*/ @media all and (max-width: 599px) { /* Utilizing CSS Grid at this breakpoint to help improve the layout of the different elements in the footer. */ #footer-widgets { /* We establish the grid below; now we're specifying the columns, and the template areas. */ grid-template-columns: repeat(1, 1fr); /*re-establishes the grid template*/ grid-template-areas: "a" /*re-establishes the grid template*/ "b" /*re-establishes the grid template*/ "c" /*re-establishes the grid template*/ } .footer-widget:nth-child(2){ padding-top: 25px; } } /* 600px to 1099px --------------*/ @media all and (min-width: 600px) and (max-width: 1099px) { /* Utilizing CSS Grid at this breakpoint to help improve the layout of the different elements in the footer. */ /* Footer Widgets Container */ #footer-widgets { /* We establish the grid below; now we're specifying the columns, and the template areas. */ grid-template-columns: repeat(2, 1fr); /*re-establishes the grid template*/ grid-template-areas: "a a" /*re-establishes the grid template*/ "b c" /*re-establishes the grid template*/ } /* Footer Widgets */ .footer-widget:nth-child(2), .footer-widget:nth-child(3), .footer-widget:nth-child(4) { padding-top: 25px; } } /* 767px and below --------------*/ @media all and (max-width: 767px) { /* Main Footer */ body.orbit #main-footer { padding-top: 50px; } /* Footer Widgets Container */ #footer-widgets { padding: 50px 0 25px; /*adjusts the padding above and below*/ } } /* 768px to 980px --------------*/ @media all and (min-width: 768px) and (max-width: 980px) { /* Main Footer */ body.orbit #main-footer { padding-top: 75px; } /* Footer Widgets Container */ #footer-widgets { padding: 75px 0 50px; /*adjusts the padding above and below*/ } } /* 1099px and below --------------*/ @media all and (max-width: 1099px) { /* Establishes the Grid for 1099px and below */ #footer-widgets { display: grid; /*establishes the grid layout*/ grid-column-gap: 40px; /*establishes the gutter*/ grid-row-gap: 25px; /*establishes the gutter*/ } /* Removes this default clearfix, that is uncessary with my display:grid */ #footer-widgets.clearfix:after { display: none; } /* Tells the .footer-widgets to expand to 100% width, and to remove all margins */ #footer-widgets .footer-widget:nth-child(n) { margin: 0 !important; /* Need this at this breakpoint to simplify all the spacing. */ width: 100% !important; } /* Establishes the grid area for the respective .footer-widget */ .footer-widget:first-child { grid-area: a; /*declares grid area*/ border-bottom: 1px solid rgba(255,255,255,.15); } .footer-widget:nth-child(2){ grid-area: b; /*declares grid area*/ } .footer-widget:nth-child(3){ grid-area: c; /*declares grid area*/ } .footer-widget:nth-child(4){ grid-area: d; /*declares grid area*/ } /* Tells .footer-widget to center-align text */ #footer-widgets .footer-widget .et_pb_widget { text-align: center; } /* Puts max-width on the widget */ #footer-widgets .footer-widget:first-child .et_pb_widget { max-width: 550px; margin-left: auto; margin-right: auto; } /* Tells the last item within the first .footer-widget to have a margin-bottom of 25px */ #footer-widgets .footer-widget:first-child .et_pb_widget :last-child { margin-bottom: 50px; } } /* 1100px and above --------------*/ @media all and (min-width: 1100px) { /* Establishes the Flexbox for 1100px and above */ #footer-widgets { display: flex; flex-direction: row; } /* Basic/Default columns; for the 2nd and 3rd columns */ body.orbit #main-footer #footer-widgets .footer-widget { width: 20% !important; /* Overrides Divi's default width. */ } /* First Column */ body.orbit #main-footer #footer-widgets .footer-widget:first-child { width: 35% !important; } /* Second Column */ body.orbit #main-footer #footer-widgets .footer-widget:nth-child(2) { margin-left: auto; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- FOOTER LOGO ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= BASE STYLING ===============================================================================*/ .footer-logo { display: block; width: 95%; max-width: 225px; margin-bottom: 25px; } /*================================================================================= MEDIA QUERIES ===============================================================================*/ /* 1099px and below --------------*/ @media all and (max-width: 1099px) { .footer-logo { margin-left: auto; margin-right: auto; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- 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 { color: rgba(255,255,255,1); } body.orbit #main-footer #footer-widgets .footer-widget:last-child p { padding-bottom: unset; } /* --------------- Widget Titles --------------- */ body.orbit #main-footer #footer-widgets .footer-widget .widget-title { font-family: proxima-nova, sans-serif; font-weight: 700; color: #fff; font-size: 17px; line-height: 1.4; margin: 0 0 10px; padding: 0; } /* 768px to 980px --------------*/ @media all and (min-width: 768px) and (max-width: 980px) { body.orbit #main-footer #footer-widgets .footer-widget .widget-title { font-size: 19px; } } /* 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; } } /* 981px and above --------------*/ @media all and (min-width: 981px) { body.orbit #main-footer #footer-widgets .footer-widget .widget-title { font-size: 21px; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- FOOTER MENUS ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /* --------------- Resting State --------------- */ /* Menu Title (Optional) */ #footer-widgets .footer-widget .title { color: #00416b !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: #fff; font-size: 14px; background: url(/wp-content/uploads/2022/09/glyph-chevron-right-orange.svg) no-repeat right 0.2em center; padding-right: 1em; transition: background-position 0.3s ease-out; background-size: 0.45em; } /* Current Page */ #footer-widgets .footer-widget .menu li.current-menu-item a { color: #ffd03f; border-bottom: 1px solid rgba(0,65,107,.15); } /* Nested List */ #footer-widgets .footer-widget .menu li ul { margin-top: 10px; margin-bottom: 10px; } /* 981px and above --------------*/ @media all and (min-width: 981px) { /* Anchor */ #footer-widgets .footer-widget .menu li a { font-size: 17px; } /* --------------- Hover State --------------- */ /* Common Styles */ body.orbit .footer-widget li a:hover, body.orbit #footer-widgets .et_pb_widget li a:hover, body.orbit #footer-widgets .footer-widget li a:hover { color: #ffd03f !important; } #footer-widgets .footer-widget .menu li a:hover { background-position-x: right; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- FOOTER EXTRA ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /* --------------- Main Container --------------- */ .footer-extra { /* see media queries below. */ } /* --------------- Grid Container --------------- */ .footer-extra > div { /* see media queries below. */ } /* Centers content within */ .footer-extra>div>div { display: flex; justify-content: center; align-items: center; } /* --------------- Image(s) --------------- */ .footer-extra img { width:75%; } .footer-extra > div div:first-child img { width: 100%; } /* --------------- Text --------------- */ .footer-extra, /* Adding this class again may seem redundant, because this class is listed above, but I added this here to keep text styling grouped. */ .footer-extra p { font-size: 12px !important; margin-bottom: 0 !important; } /* 980 and below --------------*/ @media all and (max-width: 980px) { .footer-extra { border-top: 1px solid rgba(255,255,255,.15); padding-top: 35px; max-width: none !important; margin: 35px auto 10px !important; } .footer-extra > div { display: flex; justify-content: center; max-width: 500px; margin-left: auto; margin-right: auto; } } /* 981px and above --------------*/ @media all and (min-width: 981px) { .footer-extra { border-left: 1px solid rgba(255,255,255,.15); text-align: center; padding: 20px 0 20px 15px; } /* Establish Grid Layout */ .footer-extra > div { display: grid; grid-row-gap: 15px; grid-template-columns: repeat(2, 1fr); /*re-establishes the grid template*/ grid-template-areas: "a a" "b c"; /*re-establishes the grid template*/ } .footer-extra > div div:first-child { grid-area: a; /*declares grid area*/ } .footer-extra > div div:nth-child(2){ grid-area: b; /*declares grid area*/ } .footer-extra > div div:nth-child(3){ grid-area: c; /*declares grid area*/ } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- FOOTER NEWSLETTER SIGNUP ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= BASE STYLING ===============================================================================*/ /* --------------- Containing Element --------------- */ .footer-form { /* left blank for now */ } body.orbit .footer-form .et_pb_text_inner .nf-form-cont { } body.orbit .footer-form .et_pb_text_inner .nf-form-cont nf-fields-wrap { display: flex; } body.orbit .footer-form .et_pb_text_inner .nf-form-cont nf-fields-wrap nf-field:first-of-type { width: 100%; } body.orbit .footer-form .et_pb_text_inner .nf-form-cont nf-fields-wrap nf-field:nth-child(2) { position: absolute; right: 2px; top: 28px; } body.orbit .footer-form .ninja-forms-form-wrap nf-fields-wrap nf-field .nf-field-label label, body.orbit form label label { color: #fff; } body.orbit .footer-form .et_pb_module input[type=email] { height: 42px; border-radius: 500px; padding-left: 20px; background: #ffffff; margin-bottom: 0; } body.orbit .footer-form .et_pb_module input[type=submit] { margin: 0; height: 38px; } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- 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 30px; 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; letter-spacing: .5px; color: rgba(255,255,255,.7); margin-bottom: 0; padding-right: 15px; padding-bottom: 0; } /* --------------- 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 a { color: rgba(255,255,255,.7); border-bottom: 1px solid rgba(255,255,255,.3); } /* Current Page */ body.orbit #main-footer #footer-bottom .footer-credits-menu .bottom-nav li.current-menu-item a { border-bottom: 1px solid rgba(24,25,25,0.5); color: #ffd03f; } /*================================================================================= 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 ===============================================================================*/ body.orbit #main-footer #footer-bottom .et-social-icons { float: unset; display: flex; align-items: center; } body.orbit #footer-bottom ul.et-social-icons li { margin-left: 15px; margin-right: 15px; } body.orbit #footer-bottom ul.et-social-icons li a { font-size: 0; line-height: 0; color: #fff; transition: unset; } body.orbit #footer-bottom ul.et-social-icons li a i { display: flex; } body.orbit #footer-bottom ul.et-social-icons li a i.oms-social-facebook:before { content: url(/wp-content/uploads/2022/09/icon-social-facebook-gray.svg); } body.orbit #footer-bottom ul.et-social-icons li a i.oms-social-twitter:before { content: url(/wp-content/uploads/2022/09/icon-social-twitter-gray.svg); } body.orbit #footer-bottom ul.et-social-icons li a i.oms-social-linkedin:before { content: url(/wp-content/uploads/2022/09/icon-social-linkedin-gray.svg); } body.orbit #footer-bottom ul.et-social-icons li a i.oms-social-instagram:before { content: url(/wp-content/uploads/2022/09/icon-social-instagram-gray.svg); } body.orbit #footer-bottom ul.et-social-icons li a span.sr-only { border: 0; clip: rect(0,0,0,0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /*================================================================================= MEDIA QUERIES ===============================================================================*/ /* 980px and below --------------*/ @media all and (max-width: 980px) { body.orbit .et-social-icons { order: 1; justify-content: center; margin-bottom: 25px; } } /* 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 { opacity: 1; /* This overrides Divi's dumb styling. */ } #footer-bottom ul.et-social-icons li a:hover i:before { filter: brightness(1.07) contrast(0.75) hue-rotate(196deg) invert(0.11) saturate(29.41) sepia(0.2); } } /*------------------------------------------------------------------------------------------------------------------------------- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ ================================================================================================================================= 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 ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= Light-Gray BG ===============================================================================*/ /* --------------- Base Styling --------------- */ .oms-bg-gray-light, body.orbit.et-db #et-boc .et_pb_section.oms-bg-gray-light { background-color: #F7FAFB; } /* --------------- Special Variations --------------- */ body.orbit .et_pb_section.et_section_regular.oms-bg-gray-light:not(.oms-section-feature) + div.et_pb_section.et_section_regular.oms-bg-gray-light:not(.oms-section-small.logos) { /* needs these extra selectors to override Visual Builder. */ padding-top: 0; } /*================================================================================= White BG ===============================================================================*/ /* --------------- Base Styling --------------- */ .oms-bg-white { background-color: #ffffff; } /* --------------- Special Variations --------------- */ body.orbit .et_pb_section.et_section_regular.oms-bg-white:not(.oms-section-feature) + div.et_pb_section.et_section_regular.oms-bg-white:not(.oms-section-small.logos) { /* needs these extra selectors to override Visual Builder. */ padding-top: 0; } /*================================================================================= Navy BG ===============================================================================*/ /* --------------- Base Styling --------------- */ .oms-bg-navy { background-color: #00416B; } /*================================================================================= Blue Gradient BG ===============================================================================*/ /* --------------- Base Styling --------------- */ body.orbit .et_pb_section.oms-bg-blue-gradient { background: #00416B; background: linear-gradient(135deg, #00416B 0%, #017D9B 100%) !important; } /*================================================================================= Light Gradient BG ===============================================================================*/ /* --------------- Base Styling --------------- */ body.orbit .et_pb_section.oms-bg-light-gradient { background: #F7FAFB; background: linear-gradient(180deg,rgba(244,248,249,1) 0%,#FFFFFF 100%)!important; } /*================================================================================= Transitional BG - One (Gray on top, White on bottom) ===============================================================================*/ /* --------------- Base Styling --------------- */ body.orbit .et_pb_section.oms-bg-transitional-one { background-image: linear-gradient(180deg,#F7FAFB 50%,#fff 50%)!important; background: none; } /*================================================================================= Transitional BG - Two (White on top, Gray on bottom) ===============================================================================*/ /* --------------- Base Styling --------------- */ body.orbit .et_pb_section.oms-bg-transitional-two { background-image: linear-gradient(180deg,#fff 50%,#F7FAFB 50%)!important; background: none; } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- BOXES ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= Box Style One - box enclosure ===============================================================================*/ /*-------------- Base Styling --------------*/ .oms-box-style-one, .et_pb_row.oms-box-style-one, body.orbit.et-db #et-boc .et-l .et_pb_row.oms-box-style-one { padding: 35px; background: #fff; border-radius: 5px; border: 1px solid rgba(0,65,107,.15); } .et_pb_section .et_pb_row:last-of-type.oms-box-style-one { padding: 25px !important; /* NOTE: I had to add this styling to override the base styling for last child rows */ margin-bottom: 25px; } /* 768px and above --------------*/ @media all and (min-width: 768px) { .oms-box-style-one, .et_pb_row.oms-box-style-one, body.orbit.et-db #et-boc .et-l .et_pb_row.oms-box-style-one { padding: 50px 75px; } .et_pb_section .et_pb_row:last-of-type.oms-box-style-one { padding: 50px 75px !important; /* NOTE: I had to add this styling to override the base styling for last child rows */ } } /* 981px and above --------------*/ @media all and (min-width: 981px) { .et_pb_column.et_pb_column_1_3.oms-box-style-one { padding: 35px } } /*================================================================================= VARIATION: White BGs ===============================================================================*/ /*-------------- Base Styling --------------*/ .oms-bg-white .oms-box-style-one { background: #F7FAFB; } /*================================================================================= Footer Variation ===============================================================================*/ body.orbit #main-footer .et_pb_row.oms-box-style-one, body.orbit.et-db #main-footer #et-boc .et-l .et_pb_row.oms-box-style-one { background: #00416B; border: 1px solid rgba(255,255,255,.15); } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- COLUMNS ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= BASE COLUMNS & CONTAINER STYLING ===============================================================================*/ /* 767px and below --------------*/ @media all and (max-width: 767px) { /* --------------- Basic Styling --------------- */ .et_pb_row .et_pb_column { margin-bottom: 25px; } /* --------------- Row Reverse Columns --------------- */ .et_pb_row.oms-row-reverse-columns .et_pb_column:first-of-type { margin-bottom: 0; } .et_pb_row.oms-row-reverse-columns .et_pb_column:last-of-type { margin-bottom: 25px; } } /* 768px to 980px --------------*/ @media all and (min-width: 768px) and (max-width: 980px) { /* --------------- Basic Styling --------------- */ .et_pb_row .et_pb_column { margin-bottom: 50px; } /* --------------- Row Reverse Columns --------------- */ .et_pb_row.oms-row-reverse-columns .et_pb_column:first-of-type { margin-bottom: 0; } .et_pb_row.oms-row-reverse-columns .et_pb_column:last-of-type { margin-bottom: 50px; } } /*================================================================================= FLEX COLUMN ===============================================================================*/ /* --------------- Basic Flex Column Styling --------------- */ /* Basic Flex Container */ .et_pb_column.oms-col-flex { display: flex; flex-wrap: wrap; justify-content: center; margin-left: -10px; width: calc(100% + 20px); /* the pixel value offets the negative margin-left and negative margin-right. NOTE: mobile-first approach, needs !important to override dev files. */ } .et_pb_column.oms-col-flex:last-child, .et_pb_column.oms-col-flex.et-last-child { margin-right: -10px !important; /* this overrides the default Divi styling that wants to set the margin-right to ZERO on the last child. */ } /* Column Types */ /* NOTE: the different column/row types are listed in the media queries below. */ /* Basic Flex Items */ body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex .et_pb_module { margin: 20px 10px 0; } /* Variation Flex Card Items */ .et_pb_column.oms-col-flex .et_pb_module.card { margin-top: 0px; } /* 479px and below --------------*/ @media all and (max-width: 479px) { /* Basic Flex Container */ .et_pb_column.oms-col-flex { width: calc(100% + 20px) !important; /* NOTE: overrides dev files. */ } } /* 649px and below --------------*/ @media all and (max-width: 649px) { /* Basic Flex Items: Remove Margin Top */ body.orbit .et_pb_column.oms-col-flex.col-2-1-1 .et_pb_module:nth-of-type(-n+1), body.orbit .et_pb_column.oms-col-flex.col-2-2-1 .et_pb_module:nth-of-type(-n+1), body.orbit .et_pb_column.oms-col-flex.col-3-2-1 .et_pb_module:nth-of-type(-n+1), body.orbit .et_pb_column.oms-col-flex.col-4-2-1 .et_pb_module:nth-of-type(-n+1), body.orbit .et_pb_column.oms-col-flex.col-5-3-2 .et_pb_module:nth-of-type(-n+2), body.orbit .et_pb_column.oms-col-flex.col-6-3-2 .et_pb_module:nth-of-type(-n+2), body.orbit .et_pb_column.oms-col-flex.col-6-4-3 .et_pb_module:nth-of-type(-n+3), body.orbit .et_pb_column.oms-col-flex.col-8-4-4 .et_pb_module:nth-of-type(-n+4) { margin-top: 0 } /* Basic Flex Items: Column Type 2-1-1, 2-2-1, 3-2-1 and 4-2-1 */ .et_pb_column.oms-col-flex.col-2-1-1 .et_pb_module, .et_pb_column.oms-col-flex.col-2-2-1 .et_pb_module, .et_pb_column.oms-col-flex.col-3-2-1 .et_pb_module, .et_pb_column.oms-col-flex.col-4-2-1 .et_pb_module { flex: 0 0 calc(100% - 20px); max-width: calc(100% - 20px); } /* Basic Flex Items: Column Type 5-3-2, 6-3-2 */ .et_pb_column.oms-col-flex.col-5-3-2 .et_pb_module, .et_pb_column.oms-col-flex.col-6-3-2 .et_pb_module { flex: 0 0 calc(50% - 20px); max-width: calc(50% - 20px); } /* Basic Flex Items: Column Type 6-4-3 */ .et_pb_column.oms-col-flex.col-6-4-3 .et_pb_module { flex: 0 0 calc(33.33% - 20px); max-width: calc(33.33% - 20px); } /* Basic Flex Items: Column Type 8-4-4 */ .et_pb_column.oms-col-flex.col-8-4-4 .et_pb_module { flex: 0 0 calc(25% - 20px); max-width: calc(25% - 20px); } } /* 650px and above --------------*/ @media all and (min-width: 650px) { /* Basic Flex Container */ .et_pb_column.oms-col-flex { margin-left: -20px; width: calc(100% + 40px); /* the pixel value offets the negative margin-left and negative margin-right. */ } .et_pb_column.oms-col-flex:last-child, .et_pb_column.oms-col-flex.et-last-child { margin-right: -20px !important; /* this adjustment is similar to above, and coincides with the margin-right from the flex item listed below. */ } /* Basic Flex Items */ body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex .et_pb_module { margin: 40px 20px 0; } /* Variation Flex Card Items */ .et_pb_column.oms-col-flex .et_pb_module.card { margin-top: 15px; } } /* 650px to 980px --------------*/ @media all and (min-width: 650px) and (max-width: 980px) { /* NOTE: This is a more traditional breakpoint, and specifies styling for 2-2-1 and 8-4-4. */ /* Basic Flex Items: Remove Margin Top */ body.orbit .et_pb_column.oms-col-flex.col-2-2-1 .et_pb_module:nth-of-type(-n+2), body.orbit .et_pb_column.oms-col-flex.col-8-4-4 .et_pb_module:nth-of-type(-n+4) { margin-top: 0 } /* Basic Flex Items: Column Type 2-2-1 */ .et_pb_column.oms-col-flex.col-2-2-1 .et_pb_module { flex: 0 0 calc(50% - 40px); max-width: calc(50% - 40px); } /* Basic Flex Items: Column Type 8-4-4 */ .et_pb_column.oms-col-flex.col-8-4-4 .et_pb_module { flex: 0 0 calc(25% - 40px); max-width: calc(25% - 40px); } } /* 650px to 1024px --------------*/ @media all and (min-width: 650px) and (max-width: 1024px) { /* NOTE: This is a unique breakpoint, created to optimize visual experience for 3-2-1 and 6-4-3. */ /* Basic Flex Items: Remove Margin Top */ body.orbit .et_pb_column.oms-col-flex.col-2-1-1 .et_pb_module:nth-of-type(-n+1), body.orbit .et_pb_column.oms-col-flex.col-3-2-1 .et_pb_module:nth-of-type(-n+2), body.orbit .et_pb_column.oms-col-flex.col-6-3-2 .et_pb_module:nth-of-type(-n+3), body.orbit .et_pb_column.oms-col-flex.col-6-4-3 .et_pb_module:nth-of-type(-n+4) { margin-top: 0 } /* Basic Flex Items: Column Type 2-1-1 */ .et_pb_column.oms-col-flex.col-2-1-1 .et_pb_module { flex: 0 0 calc(100% - 40px); max-width: calc(100% - 40px); } /* Basic Flex Items: Column Type 3-2-1 */ .et_pb_column.oms-col-flex.col-3-2-1 .et_pb_module { flex: 0 0 calc(50% - 40px); max-width: calc(50% - 40px); } /* Basic Flex Items: Column Type 6-3-2 */ .et_pb_column.oms-col-flex.col-6-3-2 .et_pb_module { flex: 0 0 calc(33.33% - 40px); max-width: calc(33.33% - 40px); } /* Basic Flex Items: Column Type 6-4-3 */ .et_pb_column.oms-col-flex.col-6-4-3 .et_pb_module { flex: 0 0 calc(25% - 40px); max-width: calc(25% - 40px); } } /* 650px to 1199px --------------*/ @media all and (min-width: 650px) and (max-width: 1199px) { /* 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. */ /* Basic Flex Items: Remove Margin Top */ body.orbit .et_pb_column.oms-col-flex.col-4-2-1 .et_pb_module:nth-of-type(-n+2), body.orbit .et_pb_column.oms-col-flex.col-5-3-2 .et_pb_module:nth-of-type(-n+3) { margin-top: 0 } /* Basic Flex Items: Column Type 4-2-1 */ .et_pb_column.oms-col-flex.col-4-2-1 .et_pb_module { flex: 0 0 calc(50% - 40px); max-width: calc(50% - 40px); } /* Basic Flex Items: Column Type 5-3-2 */ .et_pb_column.oms-col-flex.col-5-3-2 .et_pb_module { flex: 0 0 calc(33.33% - 40px); max-width: calc(33.33% - 40px); } } /* 981px and above --------------*/ @media all and (min-width: 981px) { /* NOTE: This is a more traditional breakpoint, and specifies styling for 2-2-1 and 8-4-4. */ /* Basic Flex Container on a specific Divi column structure */ .et_pb_gutters4 .et_pb_column.et_pb_column_2_3.oms-col-flex { width: calc(64% + 40px); /* the pixel value offets the negative margin-left and negative margin-right. */ } /* Basic Flex Container on a specific Divi column structure */ .et_pb_gutters4 .et_pb_column.et_pb_column_3_5.oms-col-flex { width: calc(57.8% + 40px); /* the pixel value offets the negative margin-left and negative margin-right. */ /* NOTE: Brian, this feels like the most "correct" way to address this. However, this approach requires me to have to comb through every page and all the page block library items to update the classes accordingly, etc. I'm going to see if there's a similar solution that focuses on the "sticky" selectors. */ } /* Basic Flex Items: Remove Margin Top */ body.orbit .et_pb_column.oms-col-flex.col-2-2-1 .et_pb_module:nth-of-type(-n+2), body.orbit .et_pb_column.oms-col-flex.col-8-4-4 .et_pb_module:nth-of-type(-n+8) { margin-top: 0 } /* Basic Flex Items: Column Type 2-2-1 */ .et_pb_column.oms-col-flex.col-2-2-1 .et_pb_module { flex: 0 0 calc(50% - 40px); max-width: calc(50% - 40px); } /* Basic Flex Items: Column Type 8-4-4 */ .et_pb_column.oms-col-flex.col-8-4-4 .et_pb_module { flex: 0 0 calc(12.5% - 40px); max-width: calc(12.5% - 40px); } /* Basic Flex Items: Font-Sizes for a 4-across */ body.orbit #page-container .et_pb_column.oms-col-flex.col-4-2-1 .et_pb_module .et_pb_blurb_description, body.orbit #page-container .et_pb_column.oms-col-flex.col-4-2-1 .et_pb_module .et_pb_blurb_description p, body.orbit #page-container .et_pb_column.oms-col-flex.col-4-2-1 .et_pb_module .et_pb_blurb_description ul, body.orbit #page-container .et_pb_column.oms-col-flex.col-4-2-1 .et_pb_module .et_pb_blurb_description ol { font-size: 15px; /* matches font-size of the p on mobile. */ } } /* 1025px and above --------------*/ @media all and (min-width: 1025px) { /* NOTE: This is a unique breakpoint, created to optimize visual experience for 3-2-1 and 6-4-3. */ /* Basic Flex Items: Remove Margin Top */ body.orbit .et_pb_column.oms-col-flex.col-2-1-1 .et_pb_module:nth-of-type(-n+2), body.orbit .et_pb_column.oms-col-flex.col-3-2-1 .et_pb_module:nth-of-type(-n+3), body.orbit .et_pb_column.oms-col-flex.col-6-3-2 .et_pb_module:nth-of-type(-n+6), body.orbit .et_pb_column.oms-col-flex.col-6-4-3 .et_pb_module:nth-of-type(-n+6) { margin-top: 0 } /* Basic Flex Items: Column Type 2-1-1 */ .et_pb_column.oms-col-flex.col-2-1-1 .et_pb_module { flex: 0 0 calc(50% - 40px); max-width: calc(50% - 40px); } /* Basic Flex Items: Column Type 3-2-1 */ .et_pb_column.oms-col-flex.col-3-2-1 .et_pb_module { flex: 0 0 calc(33.333333% - 40px); max-width: calc(33.333333% - 40px); } /* Basic Flex Items: Column Type 6-3-2, 6-4-3 */ .et_pb_column.oms-col-flex.col-6-3-2 .et_pb_module, .et_pb_column.oms-col-flex.col-6-4-3 .et_pb_module { flex: 0 0 calc(16.66% - 40px); max-width: calc(16.66% - 40px); } } /* 1200px and above --------------*/ @media all and (min-width: 1200px) { /* 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. */ /* Basic Flex Items: Remove Margin Top */ body.orbit .et_pb_column.oms-col-flex.col-4-2-1 .et_pb_module:nth-of-type(-n+4), body.orbit .et_pb_column.oms-col-flex.col-5-3-2 .et_pb_module:nth-of-type(-n+5) { margin-top: 0 } /* Basic Flex Items: Column Type 4-2-1 */ .et_pb_column.oms-col-flex.col-4-2-1 .et_pb_module { flex: 0 0 calc(25% - 40px); max-width: calc(25% - 40px); } body.orbit #page-container .et_pb_column.oms-col-flex.col-4-2-1 .et_pb_module .et_pb_module_header, body.orbit #page-container .et_pb_column.oms-col-flex.col-4-2-1 .et_pb_module .title { font-size: 20px; /* matches font-size of the h4 at this breakpoint, but coincides with when the modules break to 4-apart.. */ } /* Basic Flex Items: Column Type 5-3-2 */ .et_pb_column.oms-col-flex.col-5-3-2 .et_pb_module { flex: 0 0 calc(20% - 40px); max-width: calc(20% - 40px); } } /* --------------- VARIATION: Divider/Border --------------- */ /* Divider/Border Flexbox Container */ body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.oms-divider { margin-left: 0 !important; margin-right: 0 !important; width: 100%; /* NOTE: Do NOT put an !important on this width styling */ } body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.oms-divider:last-child, body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.oms-divider.et-last-child { margin-right: 0 !important; /* Special override for oms-divider */ } /* Divider/Border Flex Items */ /* NOTE: Mobile-first approach */ body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.oms-divider .et_pb_module { border-bottom: 1px solid rgba(0,65,107,.15); padding-bottom: 35px; margin-top: 35px; } body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.oms-divider .et_pb_module:last-child { border-bottom: none; padding-bottom: 0; } /* Dark Background Variation */ body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.oms-divider .et_pb_module.et_pb_bg_layout_dark { border-color: rgba(255,255,255,0.2); } /* 479px and below --------------*/ @media all and (max-width: 479px) { /* Divider/Border Flexbox Container */ body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.oms-divider { width: 100% !important; /* Brian, you need this to override the basic .et_pb_column.oms-col-flex above... which overrides an !important on the dev files. */ } } /* 649px and below --------------*/ @media all and (max-width: 649px) { /* Divider/Border Flex Items: First Child */ body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.oms-divider:not(.oms-box-style-one) .et_pb_module:first-child { border-top: 1px solid rgba(0,65,107,.15); padding-top: 35px; } /* Divider/Border Flex Items: Column Type 2-2-1, 3-2-1, 4-2-1 */ body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.col-2-2-1.oms-divider .et_pb_module, body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.col-3-2-1.oms-divider .et_pb_module, body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.col-4-2-1.oms-divider .et_pb_module { flex: 0 0 100%; } } /* 650px and above --------------*/ @media all and (min-width: 650px) { /* Divider/Border Flexbox Items */ body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.oms-divider .et_pb_module { border-left: 1px solid rgba(0,65,107,.15); padding: 40px; margin-top: 0; margin-left: 0; /* Brian, you need this style to establish the baseline for the border variation; you build on this in the breakpoints below. */ margin-right: 0; /* Brian, you need this style to establish the baseline for the border variation; you build on this in the breakpoints below. */ } } /* 650px to 980px --------------*/ @media all and (min-width: 650px) and (max-width: 980px) { /* 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. */ /* Divider/Border Flex Items: Column Type 2-2-1 */ body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.col-2-2-1.oms-divider .et_pb_module { flex: 0 0 50%; max-width: 50%; } /* Targets 1st, 3rd, 5th, etc. */ body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.col-2-2-1.oms-divider .et_pb_module:nth-child(2n+1) { border-left: none; } /* Targets 2nd, 4th, 6th, etc. */ body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.col-2-2-1.oms-divider .et_pb_module:nth-child(2n) { padding-right: 0; } /* I'm trying to target the odd number, but not if it's the only one in the row */ body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.col-2-2-1.oms-divider .et_pb_module:nth-child(2n+1):not(:last-of-type) { padding-left: 0; } /* Targets the the bottom row, even if the row isn't full */ body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.col-2-2-1.oms-divider .et_pb_module:nth-last-child(-n+2):nth-child(2n+1), body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.col-2-2-1.oms-divider .et_pb_module:nth-last-child(-n+2):nth-child(2n+1)~div { border-bottom: none; /* disables the border-top that's specified in the core oms-divider styling */ } } /* 650px to 1024px --------------*/ @media all and (min-width: 650px) and (max-width: 1024px) { /* 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. */ /* Divider/Border Flex Items: Column Type 3-2-1 */ body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.col-3-2-1.oms-divider .et_pb_module { flex: 0 0 50%; max-width: 50%; } /* Targets 1st, 3rd, 5th, etc. */ body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.col-3-2-1.oms-divider .et_pb_module:nth-child(2n+1) { border-left: none; } /* Targets 2nd, 4th, 6th, etc. */ body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.col-3-2-1.oms-divider .et_pb_module:nth-child(2n) { padding-right: 0; } /* I'm trying to target the odd number, but not if it's the only one in the row */ body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.col-3-2-1.oms-divider .et_pb_module:nth-child(2n+1):not(:last-of-type) { padding-left: 0; } /* Targets the the bottom row, even if the row isn't full */ body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.col-3-2-1.oms-divider .et_pb_module:nth-last-child(-n+2):nth-child(2n+1), body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.col-3-2-1.oms-divider .et_pb_module:nth-last-child(-n+2):nth-child(2n+1)~div { border-bottom: none; /* disables the border-top that's specified in the core oms-divider styling */ } } /* 650px to 1199px --------------*/ @media all and (min-width: 650px) and (max-width: 1199px) { /* NOTE: These variations piggy-back on some of the code directly above for col-4-2-1. */ /* Divider/Border Flex Items: Column Type 4-2-1 */ body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.col-4-2-1.oms-divider .et_pb_module { flex: 0 0 50%; max-width: 50%; } /* Targets 1st, 3rd, 5th, etc. */ body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.col-4-2-1.oms-divider .et_pb_module:nth-child(2n+1) { border-left: none; } /* Targets 2nd, 4th, 6th, etc. */ body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.col-4-2-1.oms-divider .et_pb_module:nth-child(2n) { padding-right: 0; } /* I'm trying to target the odd number, but not if it's the only one in the row */ body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.col-4-2-1.oms-divider .et_pb_module:nth-child(2n+1):not(:last-of-type) { padding-left: 0; } /* Targets the the bottom row, even if the row isn't full */ body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.col-4-2-1.oms-divider .et_pb_module:nth-last-child(-n+2):nth-child(2n+1), body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.col-4-2-1.oms-divider .et_pb_module:nth-last-child(-n+2):nth-child(2n+1)~div { border-bottom: none; /* disables the border-top that's specified in the core oms-divider styling */ } } /* 981px and above --------------*/ @media all and (min-width: 981px) { /* 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. */ /* Divider/Border Flexbox Container */ body.orbit .et_pb_section .et_pb_row.et_pb_gutters4 .et_pb_column.et_pb_column_2_3.oms-col-flex.oms-divider { width: 64%; } /* Divider/Border Flex Items: Column Type 2-2-1 */ body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.col-2-2-1.oms-divider .et_pb_module { flex: 0 0 50%; max-width: 50%; } /* Targets 1st, 3rd, 5th, etc. */ body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.col-2-2-1.oms-divider .et_pb_module:nth-child(2n+1) { border-left: none; } /* Targets 2nd, 4th, 6th, etc. */ body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.col-2-2-1.oms-divider .et_pb_module:nth-child(2n) { padding-right: 0; } /* I'm trying to target the odd number, but not if it's the only one in the row */ body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.col-2-2-1.oms-divider .et_pb_module:nth-child(2n+1):not(:last-of-type) { padding-left: 0; } /* Targets the the bottom row, even if the row isn't full */ body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.col-2-2-1.oms-divider .et_pb_module:nth-last-child(-n+2):nth-child(2n+1), body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.col-2-2-1.oms-divider .et_pb_module:nth-last-child(-n+2):nth-child(2n+1)~div { border-bottom: none; /* disables the border-top that's specified in the core oms-divider styling */ } } /* 1025px and above --------------*/ @media all and (min-width: 1025px) { /* 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. */ /* Divider/Border Flex Items: Targets 1st and 3rd */ body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.col-3-2-1.oms-divider .et_pb_module:nth-child(3n+1), body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.col-3-2-1.oms-divider .et_pb_module:nth-child(3n) { flex: 0 0 calc(33.333333% - 13.33332px); max-width: calc(33.333333% - 13.33332px); } /* Divider/Border Flex Items: Targets 2nd, and if the last row is not full, forces the remaining items to be this width. */ body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.col-3-2-1.oms-divider .et_pb_module:nth-child(3n+2), body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.col-3-2-1.oms-divider .et_pb_module:nth-last-child(-n+2):nth-child(3n+1) { flex: 0 0 calc(33.333333% + 26.66664px); max-width: calc(33.333333% + 26.66664px); } /* Targets 1st, 4th, 7th, etc. */ body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.col-3-2-1.oms-divider .et_pb_module:nth-child(3n+1) { border-left: none; } /* Targets every 3rd */ body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.col-3-2-1.oms-divider .et_pb_module:nth-child(3n) { padding-right: 0; } /* I'm trying to target the left-hand column, but not if the row isn't full */ body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.col-3-2-1.oms-divider .et_pb_module:nth-child(3n+1):not(:nth-last-child(-n+3)~div) { padding-left: 0; } /* Targets the the bottom row, even if the row isn't full */ body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.col-3-2-1.oms-divider .et_pb_module:nth-last-child(-n+3):nth-child(3n+1), body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.col-3-2-1.oms-divider .et_pb_module:nth-last-child(-n+3):nth-child(3n+1)~div { border-bottom: none; /* disables the border-top that's specified in the core oms-divider styling */ } } /* 1200px and above --------------*/ @media all and (min-width: 1200px) { /* NOTE: These variations piggy-back on some of the code directly above for the col-4-2-1. */ /* Divider/Border Flex Items: Targets 1st and 4th */ body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.col-4-2-1.oms-divider .et_pb_module:nth-child(4n+1), body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.col-4-2-1.oms-divider .et_pb_module:nth-child(4n) { flex: 0 0 calc(25% - 20px); max-width: calc(25% - 20px); } /* Divider/Border Flex Items: Targets 2nd & 3rd, and if the last row is not full, forces the remaining items to be this width. */ body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.col-4-2-1.oms-divider .et_pb_module:nth-child(4n+2), body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.col-4-2-1.oms-divider .et_pb_module:nth-child(4n+3), body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.col-4-2-1.oms-divider .et_pb_module:nth-last-child(-n+3):nth-child(4n+1) { flex: 0 0 calc(25% + 20px); max-width: calc(25% + 20px); } /* Targets 1st, 5th, 9th, etc. */ body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.col-4-2-1.oms-divider .et_pb_module:nth-child(4n+1) { border-left: none; } /* Targets every 4th */ body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.col-4-2-1.oms-divider .et_pb_module:nth-child(4n) { padding-right: 0; } /* I'm trying to target the left-hand column, but not if the row isn't full */ body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.col-4-2-1.oms-divider .et_pb_module:nth-child(4n+1):not(:nth-last-child(-n+4)~div) { padding-left: 0; } /* Targets the the bottom row, even if the row isn't full */ body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.col-4-2-1.oms-divider .et_pb_module:nth-last-child(-n+4):nth-child(4n+1), body.orbit .et_pb_section .et_pb_row .et_pb_column.oms-col-flex.col-4-2-1.oms-divider .et_pb_module:nth-last-child(-n+4):nth-child(4n+1)~div { border-bottom: none; /* disables the border-top that's specified in the core oms-divider styling */ } } /*================================================================================= SIDEBAR ===============================================================================*/ /*-------------- Base Styling --------------*/ .oms-col-sidebar { padding-bottom: 1px; /* This 1 pixel helps activate the margin-bottom on the inside. */ margin-bottom: 25px !important; } .et_pb_section:not(.oms-bg-white):not(.oms-bg-gray-light) .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,65,107,.15); margin-top: 15px; } } /* 981px and above --------------*/ @media all and (min-width: 981px) { .oms-col-sidebar { border-left: 1px solid rgba(0,65,107,.15); padding-left: 35px; } } /*-------------- VARIATION: .oms-box-style-one --------------*/ /* Column Styling */ body.orbit .oms-col-sidebar.oms-box-style-one { padding: 10px 25px; } /* Overrides the more-general margin-bottom from above */ body.orbit .et_pb_row .oms-col-sidebar.oms-box-style-one .et_pb_module { margin-bottom: 0; } /* Targets all modules except the first module */ body.orbit .oms-col-sidebar.oms-box-style-one .et_pb_module { border-top: 1px solid rgba(0,65,107,.15); padding-top: 25px; padding-bottom: 25px; } body.orbit .oms-col-sidebar.oms-box-style-one .et_pb_module:first-child { border-top: none; } /* Pseudo Element: background color for a clickable Blurb Style Four */ body.orbit .oms-col-sidebar.oms-box-style-one .et_pb_module.et_clickable:before { content: ''; background: #F7FAFB; top: -1px; left: -25px; width: calc(100% + 50px); position: absolute; height: calc(100% + 2px); opacity: 0; border: 1px solid #d9e2e7; border-radius: 3px; transition: all .2s ease-out; } /* Variation for White Background */ body.orbit .oms-bg-white .oms-col-sidebar.oms-box-style-one .et_pb_module.et_clickable:before { background: #fff; } /* Targets the first module IF it's a text module */ body.orbit .oms-col-sidebar.oms-box-style-one .et_pb_module.et_pb_text:first-of-type { display: inline-block; position: absolute; top: 0; transform: translateY(-7px); border-radius: 3px; background: #01819f; padding: 8px 20px; } body.orbit .oms-col-sidebar.oms-box-style-one .et_pb_module.et_pb_text:first-of-type .et_pb_text_inner, body.orbit .oms-col-sidebar.oms-box-style-one .et_pb_module.et_pb_text:first-of-type p { color: #fff; font-weight: 700; text-transform: uppercase; font-size: 12px; line-height: 1; letter-spacing: 3px; margin: 0; } /* Targets any module that FOLLOWS the first module IF it's a text module */ body.orbit .oms-col-sidebar.oms-box-style-one .et_pb_module.et_pb_text:first-of-type + .et_pb_module { border-top: none; margin-top: 15px } /* Blurb Style Four Text Header */ body.orbit #page-container .oms-col-sidebar.oms-box-style-one .oms-blurb-style-four.et_pb_blurb_position_left .et_pb_module_header { font-size: 15px; line-height: 1.4; letter-spacing: .5px; } /* 768px to 980px --------------*/ @media all and (min-width: 768px) and (max-width: 980px) { body.orbit .oms-col-sidebar.oms-box-style-one .et_pb_module { padding-top: 35px; padding-bottom: 35px; } body.orbit .oms-col-sidebar.oms-box-style-one .et_pb_module.et_pb_text:first-of-type + .et_pb_module { margin-top: 25px } } /* 768px and above --------------*/ @media all and (min-width: 768px) { body.orbit .oms-col-sidebar.oms-box-style-one { padding: 25px 50px; } body.orbit #page-container .oms-col-sidebar.oms-box-style-one .oms-blurb-style-four.et_pb_blurb_position_left .et_pb_module_header { font-size: 17px; } } /* 981px and above --------------*/ @media all and (min-width: 981px) { body.orbit .oms-col-sidebar.oms-box-style-one { padding: 10px 35px; } /* Hover State */ body.orbit .oms-col-sidebar.oms-box-style-one .oms-blurb-style-four.et_clickable:hover { z-index: 9; } body.orbit .oms-col-sidebar.oms-box-style-one .oms-blurb-style-four.et_clickable:hover:before { opacity: 1; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- DISPLAY ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= Tablet & Mobile Hide ===============================================================================*/ /* 980px and below --------------*/ @media all and (max-width: 980px) { /* --------------- Basic Styling --------------- */ /* NOTE: Hides */ .oms-hide-tabletmobile { display: none; } } /* 981px and above --------------*/ @media all and (min-width: 981px) { /* --------------- Basic Styling --------------- */ /* NOTE: Hides */ .oms-hide-desktop { display: none !important; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- OVERLAYS ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /* Use to add overlays to background images on sections and rows * You can duplicate and change name to match desired colors */ /*================================================================================= Common Styling ===============================================================================*/ .oms-overlay-dark:before, .oms-overlay-gradient-blue:before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; } /*================================================================================= Dark Overlay ===============================================================================*/ .oms-overlay-dark:before { background: rgb(25,25,25) !important; background: linear-gradient(155deg,rgba(25,25,25,0.25) 0%,rgba(25,25,25,0.7) 100%)!important; } /*================================================================================= Blue Gradient Overlay ===============================================================================*/ .oms-overlay-gradient-blue { background: rgb(1,125,155); /* this selector and styling were added to help with accessibility. */ } .oms-overlay-gradient-blue:before { background: rgb(1,125,155) !important; background: linear-gradient(135deg,rgba(0,65,107,0.98) 0%,rgba(1,125,155,0.85) 100%) !important; } /* Parallax NOTE: I created this on the TRC project, and wanted to be able to enable parallax. Originally, I was going to organize this styling with the rest of the single.php styling, however, I found I could make this styling a little more "general" by organizing it here. */ .et_pb_section.oms-overlay-gradient-blue .et_parallax_bg { background-image: url("/wp-content/uploads/2022/10/AdobeStock_171414645_1800x1200_01.jpg"); background-position: center; } .et_pb_section.oms-overlay-gradient-blue .et_parallax_bg_wrap + div:not(.et-fb-mousetrap) { position: relative; z-index: 2; /* For TRC project, I added this to help with the overlay pseudo element, which has a z-index of 1. */ } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- ROWS ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= BASE ROW & CONTAINER STYLING ===============================================================================*/ /* 767px and below --------------*/ @media all and (max-width: 767px) { /* --------------- General Row & Container Styling --------------- */ body.orbit .et_pb_row, body.orbit .container, body.orbit #main-content .container, body.orbit.et_pb_pagebuilder_layout.single-post:not(.et-tb-has-body) #main-content .et_pb_row, body.orbit.et-db #et-boc .et-l .et_pb_row { width: 86%; overflow: visible; } } /* 768px to 980px --------------*/ @media all and (min-width: 768px) and (max-width: 980px) { /* --------------- General Row & Container Styling --------------- */ body.orbit .et_pb_row, body.orbit .container, body.orbit #main-content .container, body.orbit.et_pb_pagebuilder_layout.single-post:not(.et-tb-has-body) #main-content .et_pb_row, body.orbit.et-db #et-boc .et-l .et_pb_row { width: 80%; overflow: visible; } } /* 981px and above --------------*/ @media all and (min-width: 981px) { /* --------------- General Row & Container Styling --------------- */ body.orbit .et_pb_row, body.orbit .container, body.orbit #main-content .container, body.orbit.et_pb_pagebuilder_layout.single-post:not(.et-tb-has-body) #main-content .et_pb_row, body.orbit.et-db #et-boc .et-l .et_pb_row { width: 86% } } /*================================================================================= BASE SECTION ROW PADDING ===============================================================================*/ /* --------------- Base Styling --------------- */ /* Basic Padding */ .et_pb_section .et_pb_row, body.orbit.et-db #et-boc .et-l .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 */ .et_pb_section .et_pb_row:last-of-type, body.orbit.et-db #et-boc .et-l .et_pb_row:last-of-type:not(.oms-box-style-one) { padding-bottom: 0; } /* 768px and above --------------*/ @media all and (min-width: 768px) { .et_pb_section .et_pb_row, body.orbit.et-db #et-boc .et-l .et_pb_row { padding-bottom: 75px; } } /*================================================================================= FULL-WIDTH ROW ===============================================================================*/ /* --------------- Base Styling --------------- */ .oms-row-fullwidth { width: 100% !important; max-width: none !important; } /*================================================================================= 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: This row replicates what Peloton created on their site - 1/3 column with text is sticky, while the 2/3 column with blurb modules scroll on the right-hand side. */ /* --------------- Base Styling --------------- */ .oms-row-sticky .et_pb_column.this-scrolls .et_pb_module { margin-left: auto; margin-right: auto; } /* 768px and above --------------*/ @media all and (min-width: 768px) { /* Module Margin-Top - NOTE: Brian you tried to address this more "correctly" simply by targeting the oms-col-flex selectors above, however that would have required you to comb through all the pages and update some classes that weren't already using those particular selectors. I wanted a faster solution for the fewer one-across modules that were using the Peloton/sticky method... so, I wrote this below. */ .oms-row-sticky .et_pb_column.this-scrolls:not(.oms-col-flex) { display: flex; flex-wrap: wrap; } .oms-row-sticky .et_pb_column.this-scrolls:not(.oms-col-flex) .et_pb_module.card:not(:first-of-type) { margin-top: 15px !important; } } /* 981px and above --------------*/ @media all and (min-width: 981px) { /* Box Style One Variation */ .oms-row-sticky.oms-box-style-one { overflow: unset; } .oms-row-sticky .et_pb_column.this-sticks { position: sticky !important; top: 25vh; } .oms-row-sticky .et_pb_column.this-scrolls .et_pb_module { max-width: 500px; } } /*================================================================================= ZERO-PADDING ROW - removes the padding-bottom ===============================================================================*/ /* --------------- Base Styling --------------- */ .et_pb_row.oms-row-zero { padding-bottom: 0 !important; } /*================================================================================= WIDE ROW ===============================================================================*/ /* --------------- Base Styling --------------- */ .et_pb_row.oms-row-wide { max-width: none; width: calc(100% - 30px) !important; } /* 768px to 1599px --------------*/ @media all and (min-width: 768px) and (max-width: 1599px) { .et_pb_row.oms-row-wide { width: calc(100% - 50px) !important; } } /* 1600px and above --------------*/ @media all and (min-width: 1600px) { .et_pb_row.oms-row-wide { width: calc(100% - 150px) !important; } } /*================================================================================= FLEX ROW ===============================================================================*/ /* --------------- Base Styling --------------- */ /* Flex Container */ .oms-row-flex { display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 25px !important; /* This always applies a consistent margin to the bottom of the containing element. */ } /* Column */ .oms-row-flex .et_pb_column { margin-top: 25px; } /* Flex Items */ /* NOTE: the different column/row types are listed in the media queries below. */ /* 980px and below --------------*/ @media all and (max-width: 980px) { /* 2-1-1 */ .oms-row-flex.col-2-1-1 .et_pb_column:first-child { margin-top: 0 !important; } } /* 981px and above --------------*/ @media all and (min-width: 981px) { .oms-row-flex.et_pb_row .et_pb_column { margin-left: 20px; margin-right: 20px; } /* --------------- 2-1-1 --------------- */ .oms-row-flex.col-2-1-1 .et_pb_column { flex: 0 0 calc(50% - 20px); } /* Remove Margin Top */ .oms-row-flex.col-2-1-1 .et_pb_column:nth-of-type(-n+2) { margin-top: 0 } .oms-row-flex.col-2-1-1 .et_pb_column:first-child { margin-left: 0; } .oms-row-flex.col-2-1-1 .et_pb_column:last-child, .oms-row-flex.col-2-1-1 .et_pb_column.et-last-child { margin-right: 0; } } /*================================================================================= TIGHTENED SPACING ROW ===============================================================================*/ /* NOTE: This class helps tighten up the elements within this row. Works great on sections like Marmon's homepage, where they have the wide image, and the 3 columns of text underneath. */ /* 767px and below --------------*/ @media all and (max-width: 767px) { /* --------------- Base Styling --------------- */ .oms-row-tight-spacing .et_pb_column { margin-bottom: 0; } /* --------------- VARIATION: Flex Column --------------- */ .oms-row-tight-spacing .et_pb_column.oms-col-flex .et_pb_module { margin-top: 0; } } /* 980px and below --------------*/ @media all and (max-width: 980px) { /* --------------- VARIATION: Flex Column --------------- */ .oms-row-tight-spacing .et_pb_column.oms-col-flex { margin-bottom: 0 !important; /* this overrides the margin-bottom that's on the basic .oms-col-flex. This is a rare need, so that's why I'm putting this styling here, and using an !important on it... I don't think I need to tweak any of the other code for .oms-col-flex. */ } } /*================================================================================= NAVIGATION ROW ===============================================================================*/ /* NOTE: This class is used for the mid-page page anchor navigation, like on the Regions Landing Page for HSRA. */ /* --------------- Base Styling --------------- */ body.orbit .oms-row-nav:not(.ui-sortable) { background: rgba(247,250,251,.9); position: sticky; top: 60px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(0,65,107,.15); padding-bottom: 0 !important; } body.orbit.admin-bar .oms-row-nav:not(.ui-sortable) { top: 106px; } body.orbit #main-content .oms-row-nav .et_pb_text { margin-bottom: 0; margin-right: 10px; } body.orbit #main-content .oms-row-nav .et_pb_text_inner p { line-height: 1; margin-bottom: 0; font-weight: 700; color: #191919; font-size: 12px; text-transform: uppercase; letter-spacing: 3px; } /* 767px and below --------------*/ @media all and (max-width: 767px) { body.orbit #main-content .oms-row-nav .et_pb_text { left: 7%; } } /* 783px and above --------------*/ @media all and (min-width: 783px) { body.orbit.admin-bar .oms-row-nav:not(.ui-sortable) { top: 92px; } } /* 768px to 980px --------------*/ @media all and (min-width: 768px) and (max-width: 980px) { body.orbit #main-content .oms-row-nav .et_pb_text { left: 10%; } } /* 980px and below --------------*/ @media all and (max-width: 980px) { body.orbit #main-content .oms-row-nav .et_pb_text { position: absolute; top: 14px; } } /* 981px and above --------------*/ @media all and (min-width: 981px) { body.orbit .oms-row-nav:not(.ui-sortable) { top: 109px; } body.orbit.admin-bar .oms-row-nav:not(.ui-sortable) { top: 140px; } .oms-row-nav .et_pb_column { display: flex; justify-content: center; align-items: center; } } /*================================================================================= MAX-WIDTH 1200 ===============================================================================*/ /* NOTE: This class is used for the mid-page page anchor navigation, like on the Regions Landing Page for HSRA. */ /* --------------- Base Styling --------------- */ body.orbit .et_pb_row.oms-max-width-1200 { max-width: 1200px !important; } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- SECTIONS ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= BASIC SECTION STYLING ===============================================================================*/ /* NOTE: this is the most commonly used section. */ /* --------------- BASE STYLING --------------- */ /* Video BG Preload Override */ body.orbit .et_pb_section.et_pb_section_video.et_pb_preload { background: #fff !important; } body.orbit .et_pb_section.et_pb_section_video.et_pb_preload:before { margin: unset; border-radius: unset; } /* Section Padding */ body.orbit .et_pb_section.et_section_regular, body.orbit.et-db #et-boc .et-l .et_pb_section { padding-top: 100px; padding-bottom: 100px; } /* 767px and below --------------*/ @media all and (max-width: 767px) { body.orbit .et_pb_section.et_section_regular, body.orbit.et-db #et-boc .et-l .et_pb_section { padding-top: 50px; padding-bottom: 50px; } } /* 768px to 980px --------------*/ @media all and (min-width: 768px) and (max-width: 980px) { body.orbit .et_pb_section.et_section_regular, body.orbit.et-db #et-boc .et-l .et_pb_section { padding-top: 75px; padding-bottom: 75px; } } /*================================================================================= OMS SECTION BG MEDIA ("Hero") ===============================================================================*/ /* --------------- BASE STYLING --------------- */ /* BG Media Section with content AND a hero */ body.orbit .oms-section-bgmedia { display: flex; } /* BG Imagery - wipe */ body.orbit .oms-section-bgmedia:after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: #017D9B; /* This is the color that the user sees immediately just before the imagery wipes into view. */ animation: wipe .8s cubic-bezier(.58,.3,.005,1) .75s forwards; } /* If, and when, an image module is used, for interior pages */ body.orbit .oms-section-bgmedia .et_pb_image { box-shadow: 0px 10px 60px -30px rgba(0,0,0,0.75); } /* Hero Video */ /* NOTE: I thought about also adding in the class .oms-section-bgmedia into the selector, but chose to keep it simpler without. */ body.orbit .et_pb_section_video_bg .mejs-container { background: transparent; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } /* Video Play / Pause Toggle */ /* NOTE: Added for Accessibility */ body.orbit .et_pb_section_video .oms-video-toggle { right: 20px; top: 20px; bottom: unset; left: unset; } body.orbit .et_pb_section_video .oms-video-toggle:hover { opacity: 1 !important; background-color: #eee; transition: all .3s; } /* 980px and below --------------*/ @media all and (max-width: 980px) { body.orbit .et_pb_section_video .oms-video-toggle { display: none; } } /* 981px and above --------------*/ @media all and (min-width: 981px) { body.orbit .oms-section-bgmedia > .et_pb_row { display: flex; justify-content: center; } } /* --------------- LARGE VARIATION --------------- */ /* Large - ideal for pages like the homepage */ body.orbit .oms-section-bgmedia.large { min-height: calc(85vh - 147px); } /* Column containing the text */ body.orbit .oms-section-bgmedia.large > .et_pb_row .et_pb_column.et-last-child { max-width: 1200px; display: flex; flex-direction: column; justify-content: center; align-items: center; } /* Page Anchor Button */ body.orbit .oms-section-bgmedia.large a.et_pb_button { background: #ffd03f; width: 46px; height: 46px; font-size: 0; display: flex; justify-content: center; align-items: center; border: none; border-radius: 0; } body.orbit .oms-section-bgmedia.large a.et_pb_button:before { content: url(/wp-content/uploads/2021/12/glyph-arrow-down-blue.svg) !important; display: block; opacity: unset; margin-left: unset; line-height: unset; } /* 767px and below --------------*/ @media all and (max-width: 767px) { body.orbit #page-container .oms-section-bgmedia.large h1 { font-size: 9vw; } body.orbit #page-container .oms-section-bgmedia.large p.intro { font-size: 5vw; line-height: 1.3; } } /* 768px to 980px --------------*/ @media all and (min-width: 767px) and (max-width: 980px) { body.orbit #page-container .oms-section-bgmedia.large h1 { font-size: 7vw; } body.orbit #page-container .oms-section-bgmedia.large p.intro { font-size: 3vw; line-height: 1.3; } } /* 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. */ } } /* 981px and above --------------*/ @media all and (min-width: 981px) { body.orbit .oms-section-bgmedia:not(:first-child) { min-height: 600px; } } /* 1700px and above --------------*/ @media all and (min-width: 1700px) { body.orbit .oms-section-bgmedia.large > .et_pb_row .et_pb_column.et-last-child { max-width: unset; } body.orbit #page-container .oms-section-bgmedia.large h1 { font-size: 4vw; } body.orbit #page-container .oms-section-bgmedia.large p.intro { font-size: 1.5vw; } } /*================================================================================= 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: 10px; 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; } /* 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: #FFB723; height: 100%; z-index: -1; /* Adding this helps ensure the image is visible in Visual Builder. */ } .oms-section-fifty50 .et_pb_image .et_pb_image_wrap img { object-fit: cover; transition: all 1.25s ease; transition-delay: .15s; width: 100%; position: unset !important; } /* 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; -webkit-transform: scale(1.05); -ms-transform: scale(1.05); 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; -webkit-transform: scale(1.01); -ms-transform: scale(1.01); transform: scale(1.01); left: -1px; } /* --------------- SPECIAL VARIATIONS --------------- */ /* Full-Width Row */ .oms-section-fifty50 .et_pb_row.oms-row-fullwidth { border-radius: unset; } /* 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%; } .oms-section-fifty50 .et_pb_row:not(.oms-row-fullwidth) .et_pb_text { padding-left: 75px; padding-right: 75px; } } /* 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,0 0,0 100%,0 100%); 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; } .oms-section-fifty50 .et_pb_row:not(.oms-row-fullwidth) { box-shadow: 0 12px 20px 0 rgba(3,14,18,0.15); } /* General Column */ .oms-section-fifty50 .et_pb_column { display: flex; justify-content: center; flex-direction: column; width: 50% !important; /* Important is needed to override the static CPT CSS file */ } /* Text Module */ .oms-section-fifty50 .et_pb_column .et_pb_text { padding: 10% 75px; /* the side padding matches the side padding on oms-box-style-one at this viewport size. */ } .oms-section-fifty50 .et_pb_row.oms-row-fullwidth .et_pb_column .et_pb_text { padding: 10% 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_row.oms-row-fullwidth .et_pb_text .et_pb_text_inner { max-width: 600px; } /* Image Module */ .oms-section-fifty50 .et_pb_image .et_pb_image_wrap { display: flex !important; /* Important is needed to override the static CPT CSS file */ position: absolute !important; /* Important is needed to override the static CPT CSS file */ 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 ===============================================================================*/ /* 981px and above --------------*/ @media all and (min-width: 981px) { /* Section Styling */ body.orbit .et_pb_section.oms-section-small { padding-top: 50px; padding-bottom: 25px; } /* Row Styling */ body.orbit .et_pb_section.oms-section-small .et_pb_row:not(:last-of-type) { padding-bottom: 15px; } } /* --------------- VARIATION: Newsletter --------------- */ /* Section Styling */ body.orbit .et_pb_section.oms-section-small.newsletter { padding-top: 0 !important; /* Sibling Variation for when BG colors are the same */ } /* Row Styling */ body.orbit .et_pb_section.oms-section-small.newsletter .et_pb_row.oms-box-style-one { margin-top: -25px; } /* Newsletter section immediately follows section with overlay */ body.orbit .et_pb_section + .et_pb_section.oms-section-small.newsletter { display: flex; } /* --------------- VARIATION: Logos --------------- */ /* Logos Flex Container */ body.orbit .et_pb_section.oms-section-small.logos .et_pb_column.oms-col-flex { align-items: center; /* This helps for logo blocks, in case someone uploads graphic that isn't 400x225. */ } /* Sibling Variation */ body.orbit .et_pb_section.oms-bg-white + .et_pb_section.oms-section-small.logos.oms-bg-white:before, body.orbit .et_pb_section.oms-bg-gray-light + .et_pb_section.oms-section-small.logos.oms-bg-gray-light:before, body.orbit .et_pb_section.oms-bg-light-gradient + .et_pb_section.oms-section-small.logos.oms-bg-white:before { content: ''; background: rgba(0,65,107,.15); height: 1px; position: absolute; top: 0; left: 50%; width: 86%; max-width: 1500px; transform: translateX(-50%); } /* 768px to 980px --------------*/ @media all and (min-width: 767px) and (max-width: 980px) { body.orbit .et_pb_section.oms-bg-white + .et_pb_section.oms-section-small.logos.oms-bg-white:before, body.orbit .et_pb_section.oms-bg-gray-light + .et_pb_section.oms-section-small.logos.oms-bg-gray-light:before, body.orbit .et_pb_section.oms-bg-light-gradient + .et_pb_section.oms-section-small.logos.oms-bg-white:before { width: 80%; } } /* Logos Flex Image Module */ body.orbit .et_pb_section.oms-section-small.logos .et_pb_column.oms-col-flex .et_pb_module.et_pb_image, body.orbit .et_pb_section.oms-section-small.logos .et_pb_column.oms-col-flex .et_pb_module.et_pb_image a { display: flex; justify-content: center; margin-top: 0; } body.orbit .et_pb_section.oms-section-small.logos .et_pb_column.oms-col-flex .et_pb_module.et_pb_image .et_pb_image_wrap { width: 80%; max-width: 150px; display: flex; justify-content: center; align-items: center; } body.orbit .et_pb_section.oms-section-small.logos .et_pb_column.oms-col-flex .et_pb_module.et_pb_image .et_pb_image_wrap img { max-height: 100px; width: auto !important; } body.orbit .et_pb_section.oms-section-small.logos .et_pb_column.oms-col-flex .et_pb_module.et_pb_image .et_pb_image_wrap img[src*="svg"] { width: 100% !important; /* NOTE: for some reason, .svg file formats weren't displaying in this */ } /*================================================================================= 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_pb_section.oms-section-feature { padding-top: 25px; padding-bottom: 25px; z-index: 1; } /* --------------- REGULAR VARIATION --------------- */ /* Row */ body.orbit .et_pb_section.oms-section-feature.regular .et_pb_row { padding: 35px 25px; border-radius: 10px; } /* Module */ body.orbit .et_pb_section.oms-section-feature.regular .et_pb_module:last-child, body.orbit .et_pb_section.oms-section-feature.regular .et_pb_module:last-child :last-child { margin-bottom: 0 !important; } /* --------------- SMALL VARIATION --------------- */ /* Row */ body.orbit .et_pb_section.oms-section-feature.small .et_pb_row { max-width: 1000px; } /* --------------- SIBLING VARIATION --------------- */ .et_pb_section.oms-section-feature + .et_pb_section.oms-section-feature:not(.ui-sortable) { z-index: -1; } /* 768px to 980px --------------*/ @media all and (min-width: 768px) and (max-width: 980px) { .et_pb_section.oms-section-feature + .et_pb_section.oms-section-feature { padding-top: 50px; } } /* 981px and above --------------*/ @media all and (min-width: 981px) { .et_pb_section.oms-section-feature + .et_pb_section.oms-section-feature { padding-top: 100px; } /* Regular Variation */ body.orbit .et_pb_section.oms-section-feature.regular .et_pb_row { padding: 85px 125px; } body.orbit .et_pb_section.oms-section-feature.regular .et_pb_column { max-width: 900px; margin-left: auto; margin-right: auto !important; float: unset; } } /*================================================================================= 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%; } /* --------------- 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. */ .oms-section-imagery.triptych .et_pb_column { display: flex; flex-direction: row; } /* General Image */ .oms-section-imagery.triptych .et_pb_column .et_pb_image.oms-image-style-one { border: none; } /* Targets 2nd Image */ .oms-section-imagery.triptych .et_pb_column .et_pb_image.oms-image-style-one:nth-child(2) .et_pb_image_wrap:before { background: #017D9B; } /* 767px and below --------------*/ @media all and (max-width: 767px) { /* TRIPTYCH VARIATION */ .oms-section-imagery.triptych .et_pb_module.et_pb_image:nth-child(3) { display: none; } } /*================================================================================= OMS SECTION BIO DETAIL ===============================================================================*/ /* NOTE: this section is for bio details, originated with HubStor project, and work with the "ACF" approach to using dynamic content to build templated bio pages. */ /* --------------- BASE STYLING --------------- */ /* General Modules */ body.orbit .oms-section-biodetail .et_pb_row .et_pb_column .et_pb_module { margin-bottom: 0; } /* Job Title */ body.orbit .oms-section-biodetail .biodetail-title { margin-top: 20px; } /* Social Icons */ body.orbit .oms-section-biodetail .biodetail-icon { display: none; font-size: 23px; line-height: 1; color: #fff !important; margin-left: 10px; margin-right: 10px; margin: 25px 10px 0; transition: all 0.2s ease-out; } /* Show icon if link is present */ body.orbit .oms-section-biodetail .biodetail-icon.et_clickable { display: inline-block; } /* Headshot */ body.orbit .oms-section-biodetail .et_pb_column.headshot .et_pb_image .et_pb_image_wrap { width: 100%; } body.orbit .oms-section-biodetail .et_pb_column.headshot .et_pb_image img { aspect-ratio: 1/1; object-fit: cover; } /* 599px and below */ @media all and (max-width: 599px) { /* Columns */ body.orbit .oms-section-biodetail .et_pb_column { margin-right: 0; } /* Column One - Text & Icons */ body.orbit .oms-section-biodetail .et_pb_column.info { text-align: center; /* This centers the Social Icons */ } /* Column Two - Headshot */ body.orbit .oms-section-biodetail .et_pb_column.headshot { align-items: center; } /* Text */ body.orbit .oms-section-biodetail .et_pb_column.info .et_pb_text .et_pb_text_inner { text-align: center; } /* Headshot */ body.orbit .oms-section-biodetail .et_pb_column.headshot .et_pb_image { width: 50%; max-width: 125px; margin: unset; } } /* 600px and above --------------*/ @media all and (min-width: 600px) { /* Columns */ body.orbit .oms-section-biodetail .et_pb_column { margin-right: 5.5%; /* This is necessary to maintain the spacing; Divi eliminates the margin-right at specific breakpoints. */ } /* Column One - Text & Icons */ body.orbit .oms-section-biodetail .et_pb_column.info { width: 65.5%; } /* Column Two - Headshot */ body.orbit .oms-section-biodetail .et_pb_column.headshot { width: 29%; position: absolute; right: 0; height: 100%; margin-bottom: 0; } /* Social Icons */ body.orbit .oms-section-biodetail .biodetail-icon { margin-left: 0; margin-right: 20px; } } /* 981px and above --------------*/ @media all and (min-width: 981px) { /* Name */ body.orbit #page-container .oms-section-biodetail .biodetail-name h1 { font-size: 60px; } /* Social Icons */ body.orbit .oms-section-biodetail .biodetail-icon:hover { color: #ffd03f !important; } } /*================================================================================= OMS SECTION MEGA CONTENT ===============================================================================*/ /* NOTE: This was formally called the "mega" block, or "oms-section-mega", but I've consolidated it to work with this "nested" content. */ /* NOTE: this section is for the rare instances when I wrap a column with oms-box-style-one, add a text module within, followed by another module (usually a blurb). This can be seen on the Marmon Method page. https://omsmarmonprd.wpengine.com/the-marmon-method/ I'm basically creating this class so that I can NOT include this section in my over-arching styling that I will be applying to h3 headers... my goal is for (more often than not) h3 headers to have a smaller font-size so that they resemble h4 headers. */ /* --------------- BASE STYLING --------------- */ /* REFERENCE: just spelling out some naming systems in case I want to try using these later. */ .oms-content-header, .oms-content-header.subheader, .oms-content-hasdivider, .oms-content-imagetext, .oms-content-videotext, .oms-content-navigation { /* left blank for now */ } /* Basic Row Styling */ body.orbit .oms-section-mega .et_pb_row:not(.oms-content-header) + .et_pb_row:not(.oms-content-hasdivider) { padding-top: 50px; } body.orbit .oms-section-mega .et_pb_row:not(.oms-content-header):not(.oms-content-navigation) + .et_pb_row:not(.oms-content-hasdivider) { border-top: 1px solid rgba(0,65,107,.15); } /* Header Content Styling */ body.orbit .oms-section-mega .et_pb_row.oms-content-header .et_pb_column { max-width: 900px; margin-left: auto; margin-right: auto !important; float: unset; } body.orbit .oms-section-mega .et_pb_row.oms-content-header.subheader .et_pb_column { max-width: 700px; } /* Navigation Content Styling */ body.orbit .oms-section-mega .et_pb_row.oms-content-navigation { margin-bottom: 0px; /* This solution was easier than trying to use :not() logic that we've used above. */ } /* 768px and above --------------*/ @media all and (min-width: 768px) { body.orbit .oms-section-mega .et_pb_row:not(.oms-content-header) + .et_pb_row:not(.oms-content-hasdivider) { padding-top: 75px; } } /* 981px and above --------------*/ @media all and (min-width: 981px) { /* NOTE: This was an experiment, and it didn't turn out too well. I'd delete, but I may want to reference this later. body.orbit .oms-section-mega > .et_pb_row.oms-content-imagetext:nth-child(even) .et_pb_column_3_5 { order: 2; margin-right: 0; margin-left: 8%; } body.orbit .oms-section-mega > .et_pb_row.oms-content-imagetext:nth-child(even) .et_pb_column_2_5 { order: 1; }*/ } /*================================================================================= OMS SECTION OVERLAP ===============================================================================*/ /* NOTE: This was created for HSRA, for the block under the hero. */ /* --------------- BASE STYLING --------------- */ /* Section Styling */ body.orbit .et_pb_section.oms-section-overlap { padding-top: 0; display: flex; /* this helps this section interact better with the overlay in the bg media section above (in the hero page block) */ } body.orbit .et_pb_section.oms-section-overlap .et_pb_row { margin-top: -30px; } /*================================================================================= OMS SECTION BLOG DETAIL ===============================================================================*/ /* NOTE: This was created for HSRA, to help style the hero section on Blog Details. This solution is intended to be useful on Blog posts that do NOT use the Divi Builder, and also be useful for Blog posts that DO use the Divi Builder. */ /* --------------- COMMON STYLING --------------- */ /* First General Module Styling */ body.orbit .et_pb_section.oms-section-blogdetail .et_pb_module:first-child { margin-bottom: 20px; flex: 0 0 100%; } /* Meta Data Module Styling */ body.orbit .et_pb_section.oms-section-blogdetail .et_pb_row .et_pb_column .blogdetail-meta { display: inline-block; margin-bottom: 0; } /* --------------- UNIQUE STYLING --------------- */ /* NOTE: I tried a handful of different approaches to accommodate. This seemed like the most efficient. */ /* Dynamic Hero w/ Background Image */ body.orbit .et_pb_section.oms-section-blogdetail.justify-content-center .et_pb_column { display: flex; flex-wrap: wrap; justify-content: center; } /* Dynamic Hero w/ Side Image */ body.orbit .et_pb_section.oms-section-blogdetail.align-items-center .et_pb_row { display: flex; flex-wrap: wrap; align-items: center; } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- PAGE TYPE STYLING ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= OVERRIDES for Commonly-Used elements in the Divi markup ===============================================================================*/ /* --------------- BASE STYLING --------------- */ /* Last Child within the .oms-content-wrapper */ /* NOTE: Brian, you created this special class .oms-content-wrapper and added it to your single.php file and your single-events.php file to be able to target the last child within the content area... to complicate things a little, the single.php file can accomodate the Divi Builder. Doesn't appear to be any conflicts, but just noting. */ body.orbit #page-container .et_pb_section .et_pb_row .et_pb_column .oms-content-wrapper :last-child { margin-bottom: 0; } /* Main-Content Container */ body.orbit:not(.search-results):not(.archive):not(.category) #main-content { background-color: #F7FAFB; } /* This padding is similar to ".et_section_regular" */ #main-content .container, body:not(.et-tb):not(.et-tb-has-header) #main-content .container { padding-top: 0px; /* 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. */ } /* This overrides some stupid Divi theme styling... I didn't want to mess with the original file, so I'm just overriding here. */ body.orbit #main-content .container:before { display: none !important; } /* Post Meta */ /* NOTE: I've tried to be pretty strategic with this selector because it can be used in category pages, or detail pages, and also be used with clickable links within. */ body.orbit .et_pb_post .post-meta { font-size: 13px; font-style: unset; color: #555; margin: 0; } body.orbit .et_pb_bg_layout_dark .post-meta { color: #fff; } /* This enlarges the font-size for meta data that's in the hero on blog post detail pages, without affecting the post-meta in the cards on Blog feed teasers. */ body.orbit .et_pb_post .oms-section-blogdetail .post-meta { font-size: 15px; } /* Post Meta Links - Exists on several template pages, and in modules, and even in page modules. */ body.orbit .et_pb_post .post-meta a, body.orbit .et_pb_portfolio_item .post-meta a { background-image: linear-gradient(rgba(255,183,35,1),rgba(255,183,35,1)), /* idle color */ linear-gradient(270deg,rgba(1,125,155,1) 0%,rgba(1,125,155,1) 100%); /* hover color */ background-size: 100% 1px, /* idle color */ 0 1px; /* hover color */ background-position: 100% 100%, /* idle color */ 0 100%; /* hover color */ background-repeat: no-repeat; transition: background-size .3s ease-out,background-position .3s ease-out,color .3s ease-out; padding-bottom: 2px; color: #00416b; } body.orbit .et_pb_post .et_pb_bg_layout_dark .post-meta a, body.orbit .et_pb_portfolio_item .et_pb_bg_layout_dark .post-meta a { color: #fff; background-image: linear-gradient(rgba(255,208,63,1),rgba(255,208,63,1)), /* idle color */ linear-gradient(270deg,rgba(255,255,255,1) 0%,rgba(255,255,255,1) 100%); /* hover color */ } /* 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-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-bottom: 25px; } } /* 981px and above --------------*/ @media all and (min-width: 981px) { /* Post Meta Links when following an H1 */ /* NOTE: This was added for the New Era project to provide a little extra space above the meta info. */ body.orbit .et_pb_post h1 + p.post-meta { margin-top: 35px; } /* --------------- Hover State --------------- */ /* Post Meta */ body.orbit .et_pb_post .post-meta a:hover, body.orbit .et_pb_portfolio_item .post-meta a:hover { text-decoration: none !important; color: #191919 !important; background-size: 0 1px, /* idle color */ 100% 1px; /* hover color */ background-position: 100% 100%, /* idle color */ 0 100%; /* hover color */ } body.orbit .et_pb_post .et_pb_bg_layout_dark .post-meta a:hover, body.orbit .et_pb_portfolio_item .et_pb_bg_layout_dark .post-meta a:hover { color: #fff !important; } } /*================================================================================= Common Styling ===============================================================================*/ /* NOTE: this code is used on both listing teasers, and on single detail pages. */ /* --------------- BASE STYLING --------------- */ /* Post Meta - Icons */ /* NOTE: To keep this CSS as lean as possible, I've trimmed the selectors for these icons so that I could repurpose to fit both the Event Single detail page and the Event Posts Teasers. */ body.orbit .post-meta .icon { display: flex; align-items: start; margin-bottom: 5px; } body.orbit .post-meta .icon:last-of-type { margin-bottom: 0; } body.orbit .post-meta .icon:before { content: ''; width: 16px; height: 16px; background-size: 16px 16px; line-height: 16px; background-repeat: no-repeat; margin-right: 10px; margin-top: 4px; flex: 0 0 16px; } body.orbit .post-meta .icon.webinar-platform:before { background-image: url(/wp-content/uploads/2022/10/glyph-globe-teal.svg); } body.orbit .post-meta .icon.event-date.longform:before { background-image: url(/wp-content/uploads/2022/10/glyph-calendar-teal-1.svg); } body.orbit .post-meta .icon.event-location:before { background-image: url(/wp-content/uploads/2022/10/glyph-location-pin-teal-1.svg); } body.orbit .post-meta .icon.category:before { background-image: url(/wp-content/uploads/2022/10/glyph-category-teal.svg); } body.orbit .post-meta .icon.event-time:before { background-image: url(/wp-content/uploads/2023/02/glyph-clock-teal.svg); } /* Dark Background Variation */ body.orbit .et_pb_bg_layout_dark .post-meta .icon.webinar-platform:before { background-image: url(/wp-content/uploads/2022/10/glyph-globe-orange.svg); } body.orbit .et_pb_bg_layout_dark .post-meta .icon.event-date.longform:before { background-image: url(/wp-content/uploads/2022/10/glyph-calendar-orange.svg); } body.orbit .et_pb_bg_layout_dark .post-meta .icon.event-location:before { background-image: url(/wp-content/uploads/2022/10/glyph-location-pin-orange.svg); } body.orbit .et_pb_bg_layout_dark .post-meta .icon.category:before { background-image: url(/wp-content/uploads/2022/10/glyph-category-orange.svg); } body.orbit .et_pb_bg_layout_dark .post-meta .icon.event-time:before { background-image: url(/wp-content/uploads/2023/02/glyph-clock-orange.svg); } /*================================================================================= Category / Archive / Listing Page ===============================================================================*/ /* --------------- BASE STYLING --------------- */ /* 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%; } /*================================================================================= Search Results Page ===============================================================================*/ /* --------------- BASE STYLING --------------- */ /* Title Wrap */ body.orbit.search .title-wrap { margin-bottom: 35px; } /* Search Term span */ body.orbit.search .title-wrap h1 .search-term { font-style: italic; color: #01819f; font-weight: 400; } /* 1100px and above --------------*/ @media all and (min-width: 1100px) { /* Title Wrap */ body.orbit.search .title-wrap { margin-bottom: 75px; } } /*================================================================================= Single Post (Detail), Single Event (Detail) ===============================================================================*/ /* --------------- Base Styling --------------- */ /* Removes default spacing at the bottom of the content */ .single .et_pb_post { margin-bottom: 0; padding-bottom: 0; } /* Styling for Header, Post Meta and Entry Content */ body.orbit.single:not(.et_pb_pagebuilder_layout) .oms-main-wrapper > .et_pb_row { max-width: 1000px; } /* Summary - this is a new feature that I don't like, it's unnecessary, and Divi just forces it. We plan to also uncheck this from the Screen Options for the client. */ .wpa-content-summary { display: none; } /* 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 .oms-main-wrapper .fluid-width-video-wrapper, .et_pb_post .oms-main-wrapper img { clear: both; } /* Inline Images */ .et_pb_post .oms-main-wrapper p img { width: 80%; max-width: 700px; } /* 767px and below --------------*/ @media all and (max-width: 767px) { /* Inline Images */ body.orbit.single .oms-main-wrapper p img { margin: 35px 0; } } /* 768px to 980px --------------*/ @media all and (min-width: 768px) and (max-width: 980px) { /* Inline Images */ body.orbit.single .oms-main-wrapper p img { margin: 50px 0; } } /* 981px and above --------------*/ @media all and (min-width: 981px) { /* Inline Images */ body.orbit.single .oms-main-wrapper p img { margin: 50px 0; } } /* --------------- Single Event Detail --------------- */ /* NOTE: This is stuff that is particular to this detail page. */ /* For when there's a CTA button on an Event */ body.orbit.single-event .post-meta + .cta-button { margin-top: 30px; } /* 981px and above --------------*/ @media all and (min-width: 981px) { /* H1 - Reduce the font size, similar to the Team Detail page template. */ body.orbit.single-event #page-container h1.entry-title { font-size: 60px } } /* --------------- DIVI BUILDER ACTIVATED --------------- */ /* Styling for .oms-main-wrapper elements when the Divi Page Builder has been Activated */ body.orbit.single.et_pb_pagebuilder_layout .et_pb_section.et_section_regular.oms-main-wrapper { padding-top: 0; padding-bottom: 0; } body.orbit.single.et_pb_pagebuilder_layout .et_pb_section.et_section_regular.oms-main-wrapper > .et_pb_row { width: 100% !important; max-width: unset; } /* 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 .oms-main-wrapper .et_pb_section:first-of-type .et_pb_column { float: unset; }*/ /*NOTE: I'm disabling this on 12/19/2022 because of BB issue #2. I'm not certain that we need this styling, this may have been an oversight from a previous project. */ /* Featured Image for when the Divi Page Builder is being used */ body.orbit.single.et_pb_pagebuilder_layout .featured-image-wrap { display: none; } /*------------------------------------------------------------------------------------------------------------------------------- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ ================================================================================================================================= CONTENT - More-complicated objects that are used in the site ================================================================================================================================= \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ ---------------------------------------------------------------------------------------------------------------------------------*/ /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- GENERAL MODULES ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= General Module Styles ===============================================================================*/ /*-------------- Base Styling --------------*/ /* Module */ body.orbit .et_pb_row .et_pb_column .et_pb_module { margin-bottom: 25px; } /* Last Child Module */ body.orbit .et_pb_row .et_pb_column .et_pb_module:last-child, body.orbit.et-db #et-boc .et-l .et_pb_gutters4.et_pb_row .et_pb_column_1_2 .et_pb_module, body.orbit.et_pb_gutters3.et-db #et-boc .et-l .et_pb_column_1_2 .et_pb_module { margin-bottom: 0; } /* Last Child within the Module */ body.orbit .et_pb_row .et_pb_column .et_pb_module :last-child, body.orbit #main-content .et_pb_row .et_pb_column .et_pb_module :last-child { margin-bottom: 0; } /* 768px and above --------------*/ @media all and (min-width: 768px) { body.orbit .et_pb_row .et_pb_column .et_pb_module { margin-bottom: 50px; } } /*================================================================================= Card Variations ===============================================================================*/ /*-------------- Base Styling --------------*/ /* Module */ /* 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 { padding: 25px; border-radius: 5px; position: relative; box-shadow: rgb(0 15 30 / 4%) 0px 8px 12px 0px, rgb(0 15 30 / 2%) 0px 2px 4px 0px; overflow: hidden; } /* Last Child of various module types */ .et_pb_text.card .et_pb_text_inner :last-child, .et_pb_blurb.card .et_pb_blurb_container :last-child { margin-bottom: 0 !important; } /*-------------- Light BG Variation --------------*/ .et_pb_module.card.light-bg { background: #fff; border: 1px solid rgba(0,65,107,.15); } .oms-bg-white .et_pb_module.card.light-bg { background: #F7FAFB; } /*-------------- Dark BG Variation --------------*/ .et_pb_module.card.dark-bg { background: linear-gradient(117deg, #00416B 0%, #017D9B 100%); border-color: rgba(255,255,255,.2); } /*-------------- Clickable Card Variation --------------*/ /* Container */ .et_pb_module.card.et_clickable { transition: all .2s ease-out; -webkit-transform: translateY(0) translate3d(0,0,0) perspective(1px); -ms-transform: translateY(0) translate3d(0,0,0) perspective(1px); transform: translateY(0) translate3d(0,0,0) perspective(1px); backface-visibility: hidden; will-change: transform; } /* 768px and above */ @media all and (min-width: 768px) { /* This is a very unique instance of the use of the card on a module in a specific "sidebar-type" layout. This is identical to the styling that is seen on .oms-box-style-one... but I chose to organize this styling here with the other .card styling. */ .et_pb_column_1_3 .et_pb_module.card { padding: 50px 75px; } } /* 981px and above */ @media all and (min-width: 981px) { /* This is a very unique instance of the use of the card on a module in a specific "sidebar-type" layout. This is identical to the styling that is seen on .oms-box-style-one... but I chose to organize this styling here with the other .card styling. */ .et_pb_column_1_3 .et_pb_module.card { padding: 35px } /*-------------- Hover State --------------*/ /* Container */ .et_pb_module.card.light-bg.et_clickable:hover, .et_pb_module.card.dark-bg.et_clickable:hover { box-shadow: 0 5px 20px 0px rgb(0 65 107 / 18%); cursor: pointer; -webkit-transform: translateY(-5px) translate3d( 0, 0, 0) perspective(1px); -ms-transform: translateY(-5px) translate3d( 0, 0, 0) perspective(1px); transform: translateY(-5px) translate3d( 0, 0, 0) perspective(1px); will-change: transform; } /* CTA Link */ .et_pb_module.card.et_clickable:hover .cta-link { background-size: 0 1px,100% 1px; 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 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 rgba(0,65,107,.15); } .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 */ body.orbit #page-container .oms-accordion-style-one h4.et_pb_toggle_title { padding-left: 50px; } .oms-accordion-style-one .et_pb_toggle_title:before { content: '\f067'; color: #ffd03f; font-weight: 100; font-size: 135%; line-height: 1; top: 0; left: 0; right: unset; -webkit-transform: translateY(50%); -ms-transform: translateY(50%); transform: translateY(50%); } .oms-accordion-style-one .et_pb_toggle_open .et_pb_toggle_title:before { content: '\f068'; display: block !important; } /* Content Container */ .oms-accordion-style-one .et_pb_toggle_content { padding-top: 0px; padding-left: 50px; font-size: 17px; } .oms-accordion-style-one .et_pb_toggle_content :last-child { margin-bottom: 0; } /* 767px and below --------------*/ @media all and (max-width: 767px) { /* Title */ body.orbit #page-container .oms-accordion-style-one h4.et_pb_toggle_title { padding-left: 30px; } /* Content Container */ .oms-accordion-style-one .et_pb_toggle_content { padding-left: 30px; font-size: 15px; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- BLOG MODULE, LISTING PAGES, ARCHIVE PAGES, SEARCH RESULTS ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= CONTAINING ELEMENT & FLEXBOX LAYOUT ===============================================================================*/ /* --------------- Base Styling --------------- */ /* Container */ body.orbit .oms-posts-teaser:not(.et_pb_module), .et_pb_posts > div { /* Don't target the class on this div because it produces mixed results in Visual Builder. */ display: flex; flex-wrap: wrap; margin-left: -20px; margin-right: -20px; /*margin-bottom: 25px;*/ /* NOTE: Brian, you removed this on 11/15/2022 because you probably don't need it any longer. */ } /* Posts */ body.orbit .oms-posts-teaser .et_pb_post { margin-left: 20px; margin-right: 20px; margin-top: 40px; margin-bottom: 0; } /* 767px and below --------------*/ @media all and (max-width: 767px) { /* Container */ body.orbit .oms-posts-teaser:not(.et_pb_module), .et_pb_posts > div { /* Don't target the class on this div because it produces mixed results in Visual Builder. */ margin-left: -10px; margin-right: -10px; } /* Posts */ body.orbit .oms-posts-teaser .et_pb_post { margin-left: 10px; margin-right: 10px; margin-top: 20px; } body.orbit .oms-posts-teaser.col-3-2-1 .et_pb_post:nth-of-type(-n+1), body.orbit .oms-posts-teaser.col-4-2-1 .et_pb_post:nth-of-type(-n+1), body.orbit .oms-posts-teaser.col-4-2-2 .et_pb_post:nth-of-type(-n+2) { margin-top: 0; } body.orbit .oms-posts-teaser.col-3-2-1 .et_pb_post, body.orbit .oms-posts-teaser.col-4-2-1 .et_pb_post { flex: 0 0 calc(100% - 20px); } body.orbit .oms-posts-teaser.col-4-2-2 .et_pb_post { flex: 0 0 calc(50% - 20px); } } /* 768px to 1024 --------------*/ @media all and (min-width: 768px) and (max-width: 1024px) { /* Posts */ body.orbit .oms-posts-teaser.col-3-2-1 .et_pb_post { flex: 0 0 calc(50% - 40px); } body.orbit .oms-posts-teaser.col-3-2-1 .et_pb_post:nth-of-type(-n+2) { margin-top: 0; } } /* 768px to 1199 --------------*/ @media all and (min-width: 768px) and (max-width: 1199px) { /* Posts */ body.orbit .oms-posts-teaser.col-4-2-1 .et_pb_post, body.orbit .oms-posts-teaser.col-4-2-2 .et_pb_post { flex: 0 0 calc(50% - 40px); } body.orbit .oms-posts-teaser.col-4-2-1 .et_pb_post:nth-of-type(-n+2), body.orbit .oms-posts-teaser.col-4-2-2 .et_pb_post:nth-of-type(-n+2) { margin-top: 0; } } /* 1025px and above --------------*/ @media all and (min-width: 1025px) { /* Posts */ body.orbit .oms-posts-teaser.col-3-2-1 .et_pb_post { flex: 0 0 calc(33.333333% - 40px); } body.orbit .oms-posts-teaser.col-3-2-1 .et_pb_post:nth-of-type(-n+3) { margin-top: 0; } } /* 1200px and above --------------*/ @media all and (min-width: 1200px) { /* Posts */ body.orbit .oms-posts-teaser.col-4-2-1 div .et_pb_post, body.orbit .oms-posts-teaser.col-4-2-2 div .et_pb_post { flex: 0 0 calc(25% - 40px); } body.orbit .oms-posts-teaser.col-4-2-1 .et_pb_post:nth-of-type(-n+4), body.orbit .oms-posts-teaser.col-4-2-2 .et_pb_post:nth-of-type(-n+4) { margin-top: 0; } } /*================================================================================= GENERAL POST TEASER, used on the Posts Module, on the Search Landing page, on the Index, on the Category Landing page. ===============================================================================*/ /* NOTE: I was able to trim about 100 lines of code from my previous boilerplate by altering the html structure slightly on the category.php file, the index.php file, and the search.php file. Previously, by default, Divi uses different html structure for all 3 of these when they are virtually the same kinds of content. I modified these files a tad to optimize everything. */ /* --------------- Common Styling --------------- */ /* Thumbnail Image */ body.orbit .oms-posts-teaser .entry-featured-image-url { display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden; } /* Overlay */ body.orbit .oms-posts-teaser .entry-featured-image-url:before { content: ''; background: linear-gradient(121deg,rgba(255,208,63,0.4) 0%,rgba(255,183,35,0.5) 100%); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; opacity: 0; transition: all .2s ease-out; } /* Native Category Thumbnail */ body.orbit .oms-posts-teaser a img { width: 100%; /* this is needed for the basic default Category teaser featured images. */ object-fit: cover; /* this was added for TRC project */ aspect-ratio: 3/2; /* this was added for TRC project */ -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); transition: all 0.3s; will-change: transform; } /* Header / Title */ body.orbit .oms-posts-teaser .entry-title a { color: #00416b; background: url(/wp-content/uploads/2022/09/glyph-chevron-right-orange.svg) no-repeat right 0.2em center; padding-right: 1.15em; transition: all 0.3s ease-out; background-size: 0.45em; } /* Post Content - Excerpt */ body.orbit .oms-posts-teaser .post-content p { font-size: 15px !important; /*This size is set to be the same as the p on a mobile device. */ color: #555555; margin-bottom: 0; } /* 981px and above */ @media all and (min-width: 981px) { /* --------------- Hover State --------------- */ /* Thumbnail Image */ body.orbit .oms-posts-teaser .entry-featured-image-url:hover:before { opacity: 1; } body.orbit .oms-posts-teaser .entry-featured-image-url:hover img { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); will-change: transform; } /* Title */ body.orbit .oms-posts-teaser .entry-title a:hover { color: #01819f !important; background-position-x: right; } } /*================================================================================= POST TEASER - Style One Variation ===============================================================================*/ /* NOTE: This variation is for basic Blog Posts */ /* --------------- Base Styling --------------- */ /* Common Styling for the Container */ body.orbit .oms-posts-teaser.teaser-style-one article.et_pb_post { position: relative; background: #fff; padding: 25px; word-wrap: break-word; border: 1px solid rgba(0,65,107,.15); border-radius: 5px; display: flex; /* This allows the content within to be able to be reordered */ flex-direction: column; box-shadow: rgb(0 15 30 / 4%) 0px 8px 12px 0px, rgb(0 15 30 / 2%) 0px 2px 4px 0px; overflow: hidden; } body.orbit .oms-bg-white .oms-posts-teaser.teaser-style-one article.et_pb_post { background: #F7FAFB; } /* Thumbnail Image */ body.orbit .oms-posts-teaser.teaser-style-one .entry-featured-image-url { margin: -25px -25px 25px; } /* Overlay Icon */ body.orbit .oms-posts-teaser.teaser-style-one .entry-featured-image-url:after { display: none; } /* Header / Title */ body.orbit .oms-posts-teaser.teaser-style-one .entry-title { order: 1; /* Reorders this header to beneath the other text */ } /* Post Meta - Date & Category */ body.orbit .oms-posts-teaser.teaser-style-one .post-meta { order: 3; margin-bottom: 0px; border-top: 1px solid rgba(0,65,107,.15); padding-top: 5px; margin-top: auto; padding-bottom: 0 !important; } /* Post Content - Excerpt */ body.orbit .oms-posts-teaser.teaser-style-one .post-content { order: 2; margin-bottom: 25px !important; } /* --------------- 4-2-2 Variation --------------- */ body.orbit .oms-posts-teaser.teaser-style-one.col-4-2-2 .et_pb_post .post-content, body.orbit .oms-posts-teaser.teaser-style-one.col-4-2-2 .et_pb_post .post-meta { display: none; } /* 767px and below --------------*/ @media all and (max-width: 767px) { /* 4-2-2 Variation */ body.orbit .oms-posts-teaser.teaser-style-one.col-4-2-2 > div .et_pb_post { padding: 10px; } body.orbit .et_pb_column .oms-posts-teaser.teaser-style-one.col-4-2-2 .entry-featured-image-url { margin-bottom: 15px; } body.orbit #page-container .oms-posts-teaser.teaser-style-one.col-4-2-2 .et_pb_post .entry-title { font-size: 14px; } } /* 768px to 980px --------------*/ @media all and (min-width: 768px) and (max-width: 980px) { /* Header / Title */ body.orbit .oms-posts-teaser.teaser-style-one article.et_pb_post .entry-title { font-size: 17px; /* This matches the font-size of the H4 */ } } /* 981px and above */ @media all and (min-width: 981px) { /* NOTE: VARIATION for 4-Column Layouts (on desktop) because the default option was too large. */ body.orbit #page-container .oms-posts-teaser.teaser-style-one.col-4-2-1 .entry-title { font-size: 20px; /* matches font-size of the h4 at this breakpoint. */ } } /* 1025px and above */ @media all and (min-width: 1025px) { /* --------------- Basic Layout --------------- */ body.orbit .oms-posts-teaser.teaser-style-one.col-3-2-1 article.et_pb_post { padding: 35px; /* Increased padding within the card on larger viewport. */ } body.orbit .oms-posts-teaser.teaser-style-one.col-3-2-1 article.et_pb_post .entry-featured-image-url { margin: -35px -35px 25px; } } /*================================================================================= POST TEASER - Style Two Variation ===============================================================================*/ /* NOTE: This variation is for Events */ /* --------------- Base Styling --------------- */ /* Article */ body.orbit .oms-posts-teaser.teaser-style-two article { display: flex; align-items: start; border-top: 1px solid rgba(0,65,107,.15); padding-top: 25px; padding-bottom: 25px; margin-left: 10px; margin-right: 10px; flex: 1 1 100%; } body.orbit .oms-posts-teaser.teaser-style-two article:last-child { padding-bottom: unset; } /* Post Meta */ body.orbit .oms-posts-teaser.teaser-style-two .post-meta { font-size: 15px; } /* Post Meta - Extra Content */ body.orbit .oms-posts-teaser.teaser-style-two .post-meta.extra { display: none; } body.orbit .oms-posts-teaser.teaser-style-two .post-meta.extra .event-date.month { font-size: 16px; line-height: 1; text-transform: uppercase; letter-spacing: 3px; font-weight: 700; margin-bottom: 3px; color: #017D9B; } body.orbit .oms-posts-teaser.teaser-style-two .post-meta.extra .event-date.day { font-weight: 600; font-size: 32px; line-height: 1; color: #00416b; } /* Featured Image */ body.orbit .oms-posts-teaser.teaser-style-two .entry-featured-image-url { flex: 0 0 calc(30% - 20px); max-width: 75px; margin-right: 20px; } body.orbit .oms-posts-teaser.teaser-style-two .entry-featured-image-url img { aspect-ratio: 1; } /* Event Info Inner - Exists within .oms-event-info-wrapper > .oms-event-info-inner, just beneath the .entry-title */ body.orbit .oms-posts-teaser.teaser-style-two .oms-event-info-inner { margin-bottom: 10px; } /* 650px and above */ @media all and (min-width: 650px) { body.orbit .oms-posts-teaser.teaser-style-two article { margin-left: 20px; margin-right: 20px; } } /* 981px and above */ @media all and (min-width: 981px) { body.orbit .oms-posts-teaser.teaser-style-two article { padding-top: 40px; padding-bottom: 40px; } /* Post Meta - Extra Content */ body.orbit .oms-posts-teaser.teaser-style-two .post-meta.extra { display: block; flex: 0 0 calc(10% - 40px); max-width: calc(10% - 40px); margin-right: 40px; } /* Featured Image */ body.orbit .oms-posts-teaser.teaser-style-two .entry-featured-image-url { flex: 0 0 calc(30% - 40px); max-width: calc(30% - 40px); margin-right: 40px; } body.orbit .oms-posts-teaser.teaser-style-two .entry-featured-image-url img { aspect-ratio: 3/2; } /* Event Info Wrapper */ body.orbit .oms-posts-teaser.teaser-style-two .oms-event-info-wrapper { flex: 0 0 calc(60% - 40px); max-width: calc(60% - 40px); margin-right: 40px; display: flex; flex-direction: column; } body.orbit .oms-posts-teaser.teaser-style-two .post-meta .event-date.longform { display: none; } } /* 1400px and above */ @media all and (min-width: 1400px) { /* Featured Image */ body.orbit .oms-posts-teaser.teaser-style-two .entry-featured-image-url { flex: 0 0 calc(25% - 40px); max-width: calc(25% - 40px); } /* Event Info Wrapper */ body.orbit .oms-posts-teaser.teaser-style-two .oms-event-info-wrapper { flex: 0 0 calc(65% - 40px); max-width: calc(65% - 40px); flex-direction: row; } body.orbit .oms-posts-teaser.teaser-style-two .oms-event-info-inner { flex: 0 0 calc(75% - 40px); max-width: calc(75% - 40px); margin-right: 40px; margin-bottom: 0; } /* Post Meta - Smaller meta content with icons on the right-hand column. */ body.orbit .oms-posts-teaser.teaser-style-two .post-meta { width: 25%; } } /*================================================================================= 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. */ body.orbit .oms-posts-teaser .wp-pagenavi { border-top: 1px solid rgba(0,65,107,.15); padding-top: 20px; width: 100%; margin-left: 20px; margin-right: 20px; margin-top: 75px; text-align: center; } /* Button Styling */ /* NOTE: This styling is located with the other button styling */ /* 767px and below --------------*/ @media all and (max-width: 767px) { body.orbit .oms-posts-teaser .wp-pagenavi { margin-top: 35px; } } /* 768px to 1024px --------------*/ @media all and (min-width: 768px) and (max-width: 1024px) { body.orbit .oms-posts-teaser .wp-pagenavi { margin-top: 50px; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- 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 !important; } /* 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_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; } /*-------------- Clickable Variation --------------*/ /* Header */ .et_pb_bg_layout_light.et_pb_blurb .et_pb_module_header a, .et_pb_bg_layout_light.et_pb_blurb.et_clickable .et_pb_module_header a { color: #00416b; /* Overrides the Header color if link is applied to it. */ position: relative; } /* NEW APPROACH - "Pseudo Element" Arrow after Header */ /* NOTE: I'm trying to fix a BB issue on the Marmon site, the issue is sometimes the pseudo element wraps to a line all by itself. I referenced The Execs Club website that Jess built, and she had a different approach using background image. For the old approach, refer to Marmon_02.css */ .et_pb_blurb .et_pb_module_header a, .et_pb_blurb.et_clickable .et_pb_module_header a { background: url(/wp-content/uploads/2022/09/glyph-chevron-right-orange.svg) no-repeat right 0.2em center; padding-right: 1em; transition: all 0.3s ease-out; background-size: 0.45em; } /* Dark BG Variation */ .et_pb_bg_layout_dark.et_pb_blurb .et_pb_module_header a, .et_pb_bg_layout_dark.et_pb_blurb.et_clickable .et_pb_module_header a { background-image: url(/wp-content/uploads/2022/09/glyph-chevron-right-orange.svg); } /* 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 .et_pb_module_header a:hover, .et_pb_blurb.et_clickable:hover .et_pb_module_header, .et_pb_blurb.et_clickable:hover .et_pb_module_header a { color: #01819f !important; background-position-x: right; } .et_pb_bg_layout_dark.et_pb_blurb .et_pb_module_header a:hover, .et_pb_bg_layout_dark.et_pb_blurb.et_clickable:hover .et_pb_module_header, .et_pb_bg_layout_dark.et_pb_blurb.et_clickable:hover .et_pb_module_header a { color: #fff !important; } } /*================================================================================= Blurb Style One ===============================================================================*/ /* NOTE: This blurb is kind of a general-use blurb. Image is positioned above the text.*/ /* --------------- Base Styling --------------- */ /* Image Wrap */ .oms-blurb-style-one.card.et_pb_blurb .et_pb_image_wrap { 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 */ overflow: hidden; margin: -25px; /* this is the leanest solution to get the image to enlarge to the edges of the card. */ } /* Overlay */ .oms-blurb-style-one.card.et_pb_blurb.et_clickable .et_pb_image_wrap:before { content: ''; background: linear-gradient(121deg, rgba(255,208,63,0.4) 0%, rgba(255,183,35,0.5) 100%); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; opacity: 0; transition: all 0.3s ease-out; -webkit-transform: translateY(0) translate3d(0,0,0) perspective(1px); -ms-transform: translateY(0) translate3d(0,0,0) perspective(1px); transform: translateY(0) translate3d(0,0,0) perspective(1px); backface-visibility: hidden; will-change: transform; } .oms-blurb-style-one.card.et_pb_blurb.et_clickable .et_pb_image_wrap img { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); transition: all 0.3s; will-change: transform; } /*-------------- Small Feature Variation --------------*/ /* NOTE: This is used on the homepage, as kind of a "transitional block", to promote one particular Resource. The variation of this module takes place on viewports 600px and above... otherwise, this module looks similar to other blurb-style-one modules (from 599px and below) */ /* 600px and above */ @media all and (min-width: 600px) { .oms-section-feature.small .oms-blurb-style-one .et_pb_blurb_content { display: flex; min-height: 300px; } .oms-section-feature.small .oms-blurb-style-one .et_pb_main_blurb_image { margin-right: 0; display: flex; max-width: unset; width: 35%; margin-bottom: 0; } .oms-section-feature.small .oms-blurb-style-one .et_pb_main_blurb_image .et_pb_image_wrap { display: flex; height: 100%; width: 100%; margin: 0; } .oms-section-feature.small .oms-blurb-style-one .et_pb_main_blurb_image .et_pb_image_wrap img { object-fit: cover; height: 100%; } .oms-section-feature.small .oms-blurb-style-one .et_pb_blurb_container { padding: 50px 60px 50px 75px; display: flex; flex-direction: column; justify-content: center; } .oms-section-feature.small .oms-blurb-style-one .et_pb_main_blurb_image + .et_pb_blurb_container { width: 65%; } body.orbit #page-container .oms-section-feature.small .oms-blurb-style-one .et_pb_module_header { font-size: 22px; /* Intended to look like H3 size */ margin-bottom: 10px; /* Intended to look like H3 size */ } .oms-section-feature.small .oms-blurb-style-one .et_pb_blurb_description, .oms-section-feature.small .oms-blurb-style-one .et_pb_blurb_description p { /*font-size: 15px;*/ } } /* 767px and below */ @media all and (max-width: 767px) { .oms-blurb-style-one:last-child .et_pb_blurb_description p:last-child { margin-bottom: 0; } } /* 981px and above */ @media all and (min-width: 981px) { /* --------------- 2 Column Layout --------------- */ .col-2-1-1 .oms-blurb-style-one.card.et_pb_blurb { padding: 50px 75px; /* Increased padding within the card on 2-wide columns. */ } /* --------------- Hover State --------------- */ .oms-blurb-style-one.card.et_pb_blurb.et_clickable:hover .et_pb_image_wrap:before { opacity: 1; } .oms-blurb-style-one.card.et_pb_blurb.et_clickable:hover .et_pb_image_wrap img { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); will-change: transform; } } /* 1025px and above */ @media all and (min-width: 1025px) { /* --------------- 2 Column Layout and 3 Column Layout --------------- */ .col-2-2-1 .oms-blurb-style-one.card.et_pb_blurb .et_pb_image_wrap, .col-3-2-1 .oms-blurb-style-one.card.et_pb_blurb .et_pb_image_wrap { margin: -35px; } } /*================================================================================= Blurb Style Two ===============================================================================*/ /* NOTE: This blurb is used for testimonial authors. Image is positioned to the left of text.*/ /*-------------- Base Styling --------------*/ /* Module */ .et_pb_module.oms-blurb-style-two { /* Left blank for this project. */ } /*================================================================================= 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 --------------*/ /* Module */ .et_pb_column .oms-blurb-style-three.et_pb_module.et_pb_blurb { /* Left blank for this project. */ } /*================================================================================= 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: #ffd03f !important; } /*-------------- VARIATION: Position Top --------------*/ /* Image Styling */ .oms-blurb-style-four.et_pb_blurb_position_top .et_pb_main_blurb_image { width: 50%; max-width: 75px; overflow: visible; } /*-------------- VARIATION: Position Top Card --------------*/ /* Image Styling */ .oms-blurb-style-four.card.et_pb_blurb_position_top .et_pb_main_blurb_image { margin-top: 25px; } /*-------------- VARIATION: Position Left --------------*/ /* Image Styling */ .oms-blurb-style-four.et_pb_blurb_position_left .et_pb_main_blurb_image { width: 25%; max-width: 65px; position: relative; } /* Icon Styling */ .oms-blurb-style-four.et_pb_blurb_position_left .et-pb-icon { font-size: 35px; } /* Header */ body.orbit #page-container .oms-blurb-style-four.et_pb_blurb_position_left h3 { font-size: 15px; /* this is set to look like h5 on mobile */ } /* Text */ .oms-blurb-style-four.et_pb_blurb_position_left .et_pb_blurb_description, .oms-blurb-style-four.et_pb_blurb_position_left .et_pb_blurb_description p { font-size: 14px; } /*-------------- VARIATION: External Link --------------*/ .oms-blurb-style-four.external .et_pb_module_header { width: calc(100% - 40px); } .oms-blurb-style-four.external .et_pb_module_header:after { content: ''; position: absolute; width: 26px; height: 26px; background: url(/wp-content/uploads/2021/08/glyph-external-container-yellow.svg) no-repeat 0 0; background-size: 26px 26px; left: unset; right: -5px; top: 0; } /* 768px and above --------------*/ @media all and (min-width: 768px) { body.orbit #page-container .oms-blurb-style-four.et_pb_blurb_position_left h3 { font-size: 16px; /* this is set to look like h5 on tablet */ } } /* 1200px and above --------------*/ @media all and (min-width: 1200px) { body.orbit #page-container .oms-blurb-style-four.et_pb_blurb_position_left h3 { font-size: 17px; /* this is set to look like h45 on desktop */ } } /* 1025px and above */ @media all and (min-width: 1025px) { /* --------------- 2 Column Layout and 3 Column Layout --------------- */ .col-2-2-1 .oms-blurb-style-four.card.et_pb_blurb_position_top .et_pb_main_blurb_image, .col-3-2-1 .oms-blurb-style-four.card.et_pb_blurb_position_top .et_pb_main_blurb_image { margin-top: 35px; /* Increased margin-top to match padding (for all blurbs with the .card add-on) within the card on 2-wide columns. */ } } /*================================================================================= Blurb Style Five ===============================================================================*/ /* NOTE: This blurb is used for cards with large bg image. */ /*-------------- Base Styling --------------*/ /* Wrapper */ .oms-blurb-style-five { position: relative; display: flex; overflow: hidden; border-radius: 5px; padding: 20px; aspect-ratio: 3/4; background-size: cover; /* Need this styling to enable smooth hover effect */ background-position: center center; /* Need this styling to enable smooth hover effect */ transition: all .3s ease; background-color: #022E4A; } /* Pseudo Element - some serious trickery to get this hover effect to work correctly. NOTE: https://codepen.io/Guirec/pen/VbxaMq?editors=1100 for more info. */ .oms-blurb-style-five:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: inherit; background-size: cover; transform-origin: center; transition: all 0.2s ease-out; backface-visibility: hidden; will-change: transform; border-radius: 5px; /* NOTE: need to include this so that the rounded corners display on mobile devices. This needs to be the same value as the wrapper. */ } /* Pseudo Element - dark overlay to help with legibility */ .oms-blurb-style-five:after { content: ''; position: absolute; top: 0; right: 0; border: 0; left: 0; height: 100%; z-index: 0; background-image: linear-gradient(180deg,rgba(25,25,25,.1) 35%,rgba(0,0,0,.8) 90%); } /* Content - Wraps around the Image and the Container */ .oms-blurb-style-five .et_pb_blurb_content { display: flex; flex-direction: column; z-index: 1; } /* Pseudo Element to help with the hover effect */ .oms-blurb-style-five .et_pb_blurb_content:before { content: ''; position: absolute; top: -35px; right: -35px; left: -35px; bottom: -35px; z-index: 0; background-image: linear-gradient(121deg,rgba(255,208,63,0.4) 0%,rgba(255,183,35,0.5) 100%); opacity: 0; transition: all .2s ease-out; z-index: -1; } /* Image - for logos */ .oms-blurb-style-five .et_pb_main_blurb_image .et_pb_image_wrap { display: flex; } .oms-blurb-style-five .et_pb_main_blurb_image .et_pb_image_wrap img { width: 45% !important; max-width: 120px; max-height: 60px; background: #fff; padding: 10px; border-radius: 3px; } /* Container - Wraps around the Header and the Description */ .oms-blurb-style-five .et_pb_blurb_container { margin-top: auto; padding: 0 !important; } /* Header */ body.orbit #page-container .oms-blurb-style-five.et_pb_blurb .et_pb_module_header { margin-bottom: 0 !important; } /* This targets usage in the "Mega" Section. */ body.orbit #page-container .oms-section-mega .oms-blurb-style-five.et_pb_blurb .et_pb_module_header { line-height: 1.2; letter-spacing: 0; text-transform: none; } /* Description */ .oms-blurb-style-five.et_pb_blurb.et_clickable .et_pb_module_header + .et_pb_blurb_description { margin-top: 10px; } .oms-blurb-style-five.et_pb_blurb.et_clickable .et_pb_blurb_description :last-child { margin-bottom: 0 !important; } .oms-blurb-style-five.et_pb_blurb.et_clickable .et_pb_blurb_description, .oms-blurb-style-five.et_pb_blurb.et_clickable .et_pb_blurb_description p { font-size: 14px; /* Forces this text to be the mobile size. */ } /*-------------- VARIATION: 5-3-2 Column --------------*/ .oms-col-flex.col-5-3-2 .oms-blurb-style-five.et_pb_blurb .et_pb_blurb_description { display: none; } /* 649px and below --------------*/ @media all and (max-width: 649px) { body.orbit #page-container .oms-section-mega .col-3-2-1 .oms-blurb-style-five.et_pb_blurb .et_pb_module_header, body.orbit #page-container .oms-section-mega .col-4-2-1 .oms-blurb-style-five.et_pb_blurb .et_pb_module_header { font-size: 17px } body.orbit #page-container .oms-section-mega .col-5-3-2 .oms-blurb-style-five.et_pb_blurb .et_pb_module_header { font-size: 15px } } /* 650px and above --------------*/ @media all and (min-width: 650px) { body.orbit #page-container .oms-section-mega .col-3-2-1 .oms-blurb-style-five.et_pb_blurb .et_pb_module_header { font-size: 19px; } body.orbit #page-container .oms-section-mega .col-4-2-1 .oms-blurb-style-five.et_pb_blurb .et_pb_module_header { font-size: 19px; } body.orbit #page-container .oms-section-mega .col-5-3-2 .oms-blurb-style-five.et_pb_blurb .et_pb_module_header { font-size: 17px; } } /* 981px and above --------------*/ @media all and (min-width: 981px) { /* Increased padding */ .oms-col-flex.col-3-2-1 .oms-blurb-style-five { padding: 35px; } /* Hover - for the background image variation */ .oms-blurb-style-five.et_pb_blurb.et_clickable.card:hover:before { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); will-change: transform; } .oms-blurb-style-five.et_pb_blurb.et_clickable.card:hover .et_pb_blurb_content:before { opacity: 1; } } /* 1025px and above --------------*/ @media all and (min-width: 1025px) { body.orbit #page-container .oms-section-mega .col-3-2-1 .oms-blurb-style-five.et_pb_blurb .et_pb_module_header { font-size: 26px; } } /* 1200px and above --------------*/ @media all and (min-width: 1200px) { body.orbit #page-container .oms-section-mega .col-4-2-1 .oms-blurb-style-five.et_pb_blurb .et_pb_module_header { font-size: 21px; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- BUTTONS ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= Common Base Styling ===============================================================================*/ /*-------------- Resting State --------------*/ /* Common Base Styles for ALL Buttons */ body.orbit a.cta-button, body.orbit a.cta-button-ghost, .field-wrap input[type=button], .field-wrap input[type=submit], .et_pb_search input.et_pb_searchsubmit, body.orbit a.cta-link, .gform_footer input[type=submit], body.orbit input[type=submit], body.orbit .wp-pagenavi a, body.orbit .wp-pagenavi .current { font-family: proxima-nova, sans-serif !important; display: inline-block; position: relative; vertical-align: middle; font-size: 16px !important; line-height: 1.1 !important; letter-spacing: .25px; font-weight: 600; text-shadow: none; /* This overrides the general text shadow I apply to text on dark backgrounds. */ } /* Common Base Style Margins for ALL Buttons */ /* Margins - General align left */ body.orbit a.cta-button, body.orbit a.cta-button-ghost, .field-wrap input[type=button], .field-wrap input[type=submit], .et_pb_search input.et_pb_searchsubmit, .cta-link, .gform_footer input[type=submit], body.orbit input[type=submit] { margin: 10px 20px 10px 0; } /* Margins - Text-Align Center */ .et_pb_module.et_pb_text_align_center .cta-button, .et_pb_module.et_pb_text_align_center .cta-button-ghost, .et_pb_module.et_pb_text_align_center .cta-link { margin: 10px; } /* Buttons Common Base Styles - General */ body.orbit a.cta-button, body.orbit a.cta-button-ghost, .field-wrap input[type=button], .field-wrap input[type=submit], .et_pb_search input.et_pb_searchsubmit, .gform_footer input[type=submit], body.orbit input[type=submit], body.orbit .wp-pagenavi a, body.orbit .wp-pagenavi .current { z-index: 1; border-style: solid; border-width: 1px; border-radius: 500px; transition: all .2s ease-out; padding: 11px 25px 10px !important; overflow: hidden; } /* Pseudo Element: Background Color */ body.orbit a.cta-button:before, body.orbit a.cta-button-ghost:before, .field-wrap input[type=button]:before, .field-wrap input[type=submit]:before, .et_pb_search input.et_pb_searchsubmit:before, .gform_footer input[type=submit]:before, body.orbit input[type=submit]:before, body.orbit .wp-pagenavi a:before { content:''; position: absolute; height: calc(100% + 2px); width: 100%; background: #FFB723; top: 0; left:0; z-index: -1; -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform: scale3d(0,1,1); transform: scale3d(0,1,1); -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3; transition: transform 0.3; transition: transform 0.3s,-webkit-transform 0.3s; } /* Common Base Styles for Pseudo Elements for the various CTA Buttons - THIS DOES NOT WORK ON INPUT BUTTONS, SO DON'T TRY. */ /* Button */ body.orbit a.cta-button, body.orbit a.cta-button-ghost { padding-right: 35px !important; } /* Pseudo Element: Chevron */ body.orbit a.cta-button:after, body.orbit a.cta-button-ghost:after { content: url(/wp-content/uploads/2022/09/glyph-chevron-right-white.svg); position: absolute; top: 50%; right: 20px; transition: all .2s ease-out; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); line-height: 0; height: auto; width: auto; } /* CTA Button Common Text Styles */ /*see text styles above*/ /*-------------- Hover State --------------*/ /* NOTE: More Hover State styling in the Media Queries below. */ /*================================================================================= CTA Button (Regular) ===============================================================================*/ /*-------------- Resting State --------------*/ body.orbit a.cta-button, #footer-widgets .footer-widget a.cta-button, .field-wrap input[type=button], .field-wrap input[type=submit], .et_pb_search input.et_pb_searchsubmit, .gform_footer input[type=submit], body.orbit input[type=submit] { background: #ffd03f; color: #00416B !important; border-color: #FFB723; } /* Variations */ body.orbit .et_pb_bg_layout_dark a.cta-button { background: #fff; color: #00416b !important; border-color: rgba(0,65,107,.15); } body.orbit .et_pb_bg_layout_dark a.cta-button:before { background: rgba(0,65,107,.05); } body.orbit .et_pb_bg_layout_dark a.cta-button:after { content: url(/wp-content/uploads/2022/09/glyph-chevron-right-orange.svg); } /*-------------- Hover State --------------*/ /* NOTE: More Hover State styling in the Media Queries below. */ /*================================================================================= CTA Button Ghost ===============================================================================*/ /*-------------- Resting State --------------*/ body.orbit a.cta-button-ghost { color: #00416b; border-color: #FFB723; } body.orbit a.cta-button-ghost:after { content: url(/wp-content/uploads/2022/09/glyph-chevron-right-orange.svg); } /* Variations */ body.orbit .et_pb_bg_layout_dark a.cta-button-ghost { color: #fff !important; border-color: rgba(255,255,255,.5); } /*-------------- Hover State --------------*/ /* NOTE: More Hover State styling in the Media Queries below. */ /*================================================================================= CTA Text Link ===============================================================================*/ /*-------------- Resting State --------------*/ body.orbit a.cta-link { text-decoration: none; background-image: linear-gradient(rgba(255,183,35,1),rgba(255,183,35,1)), /* idle color */ linear-gradient(270deg,rgba(1,125,155,1) 0%,rgba(1,125,155,1) 100%); /* hover color */ background-size: 100% 1px, /* idle color */ 0 1px; /* hover color */ background-position: 100% 100%, /* idle color */ 0 100%; /* hover color */ background-repeat: no-repeat; transition: background-size .3s ease-out,background-position .3s ease-out,color .3s ease-out; padding-bottom: 2px; display: inline; /* This was added, starting with Maestro, to help with the box-shadow styling. Without it, the box-shadow doesn't wrap to multiple lines. */ } /* Variations */ body.orbit .et_pb_bg_layout_dark a.cta-link { color: #ffffff !important; background-image: linear-gradient(rgba(255,208,63,1),rgba(255,208,63,1)), /* idle color */ linear-gradient(270deg,rgba(255,255,255,1) 0%,rgba(255,255,255,1) 100%); /* hover color */ } /*-------------- Hover State --------------*/ /* NOTE: The hover state for .cta-link is located in the media query below. */ /*================================================================================= Back To... Text Link ===============================================================================*/ /*-------------- Resting State --------------*/ body.orbit .back-link { left: 10px; padding-left: 20px; } body.orbit.blog .back-link:before, body.orbit.category .back-link:before, body.orbit.archive .back-link:before, body.orbit.author .back-link:before { position: absolute; left: 0; content: url(/wp-content/uploads/2022/09/glyph-chevron-right-orange.svg) !important; /* I had to add importants to most quickly override the sandbox styling. */ top: 50%; color: #ffd03f; transform: scaleX(-1) translateY(-50%); transition: all .2s ease-out !important; /* I had to add importants to most quickly override the sandbox styling. */ } body.orbit.blog .back-link:after, body.orbit.category .back-link:after, body.orbit.archive .back-link:after, body.orbit.author .back-link:after { display: none; } /* Variations */ body.orbit .et_pb_text_align_center .back-link { left: unset; } body.orbit .et_pb_bg_layout_dark .back-link, body.orbit.et-db.archive #et-boc .et-l .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 .wp-pagenavi a, body.orbit .wp-pagenavi .current { font-weight: 600 !important; margin-bottom: 10px; } /* General clickable buttons */ body.orbit .wp-pagenavi a.page { background: #fff; color: #00416b !important; border: 1px solid rgba(0,65,107,.15) !important; } body.orbit .wp-pagenavi a.page:before { background: rgba(0,65,107,.05); } /* Previous Link and Next Link */ body.orbit .wp-pagenavi a.previouspostslink, body.orbit .wp-pagenavi a.nextpostslink { background: #ffd03f; color: #00416b !important; border: 1px solid #FFB723!important; } /* Curent Page */ body.orbit .wp-pagenavi .current { color: #fff !important; background: #00416B; border: 1px solid rgba(255,255,255,.15) !important; } /*-------------- Hover State --------------*/ /* NOTE: More Hover State styling in the Media Queries below. */ /*================================================================================= FORM SUBMIT BUTTONS ===============================================================================*/ /*-------------- Resting State --------------*/ .field-wrap input[type=button], .field-wrap input[type=submit], .gform_footer input[type=submit], body.orbit input[type=submit] { /*border: none;*/ /* BRIAN, for some reason, you added this code, but I cannot understand why, so I'm commenting-out for now until further notice. */ } /*================================================================================= MEDIA QUERIES ===============================================================================*/ /* 767px and below --------------*/ @media all and (max-width: 767px) { /*-------------- Resting State --------------*/ body.orbit a.cta-button, body.orbit a.cta-button-ghost, .field-wrap input[type=button], .field-wrap input[type=submit], .et_pb_search input.et_pb_searchsubmit, body.orbit a.cta-link, .gform_footer input[type=submit], body.orbit input[type=submit] { font-size: 15px !important; } .back-link { font-size: 12px; /* follows the same size as the .pre-title */ } } /* 768px to 980px --------------*/ @media all and (min-width: 768px) and (max-width: 980px) { /*-------------- Resting State --------------*/ body.orbit a.cta-button, body.orbit a.cta-button-ghost, .field-wrap input[type=button], .field-wrap input[type=submit], .et_pb_search input.et_pb_searchsubmit, body.orbit a.cta-link, .gform_footer input[type=submit], body.orbit input[type=submit] { font-size: 15px !important; } .back-link { font-size: 13px; /* follows the same size as the .pre-title */ } } /* 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. */ /* Multiple Button types on hover */ body.orbit a.cta-button:hover, body.orbit a.cta-button-ghost:hover, body.orbit a.cta-link:hover, .field-wrap input[type=button]:hover, .field-wrap input[type=submit]:hover, .et_pb_search input.et_pb_searchsubmit:hover, .gform_footer input[type=submit]:hover, body.orbit input[type=submit]:hover { cursor: pointer; text-decoration: none; } /* Pseudo Element: Background Color */ body.orbit a.cta-button:hover:before, body.orbit a.cta-button-ghost:hover:before, .field-wrap input[type=button]:hover:before, .field-wrap input[type=submit]:hover:before, .et_pb_search input.et_pb_searchsubmit:hover:before, .gform_footer input[type=submit]:hover:before, body.orbit input[type=submit]:hover:before, body.orbit .wp-pagenavi a:hover:before { -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); } /* Main CTA Buttons on hover */ body.orbit a.cta-button:hover, body.orbit a.cta-button-ghost:hover { padding-left: 20px !important; padding-right: 40px !important; } /* Main CTA Buttons Pseudo Element on hover */ body.orbit a.cta-button:hover:after, body.orbit a.cta-button-ghost:hover:after { right: 15px; } /* CTA Nav Button on hover */ #top-menu-nav > ul > li.menu-btn > a:hover { color: #fff !important; background: #00416b; border-color: #00416b; } /* CTA Button (Regular) */ body.orbit a.cta-button:hover, .field-wrap input[type=button]:hover, .field-wrap input[type=submit]:hover, .gform_footer input[type=submit]:hover, body.orbit input[type=submit]:hover { } /* CTA Button (Ghost) */ body.orbit a.cta-button-ghost:hover:after { content: url(/wp-content/uploads/2022/09/glyph-chevron-right-white.svg); } /* Variations */ body.orbit .et_pb_bg_layout_dark a.cta-button-ghost:hover { color: #00416b !important; border-color: #FFB723; } /* CTA Text Link on hover */ body.orbit a.cta-link:hover { background-size: 0 1px, 100% 1px; background-position: 100% 100%, 0 100%; } /* Back To Link on hover */ .et_pb_bg_layout_dark .back-link:hover { color: #ffffff; } body.orbit.blog .back-link:hover, body.orbit.category .back-link:hover, body.orbit.archive .back-link:hover, body.orbit.author .back-link:hover { padding-left: 25px; padding-right: 5px; } body.orbit.blog .back-link:hover:before, body.orbit.category .back-link:hover:before, body.orbit.archive .back-link:hover:before, body.orbit.author .back-link:hover:before { left: 0; } /* Basic Input Button (for example, for forms) */ .field-wrap input[type=button]:hover, .field-wrap input[type=submit]:hover, .gform_footer input[type=submit]:hover, body.orbit input[type=submit]:hover { border-radius: 500px; background: #FFB723; border-color: #FFB723 !important; padding: 11px 25px 10px!important; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- 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: #ffd03f; } /* Arrows */ .et-pb-arrow-prev, .et-pb-arrow-next { color: #fff !important; -webkit-transform: translateY(calc(-50% + 10px)); -ms-transform: translateY(calc(-50% + 10px)); transform: translateY(calc(-50% + 10px)); } /* 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%; } /* Text Module Image Styling - In the event that the admin wants to include an image, with text wrapping around, or something. */ /* NOTE: this overrides some core styling. */ /*body.orbit .et_pb_section.et_section_regular .et_pb_row:not(.et_pb_row_fullwidth) .et_pb_column .et_pb_module.et_pb_text img { width: 33%; max-width: 200px; }*/ /* Alignment Options */ body.orbit .et_pb_module.et_pb_text img.alignleft { margin:0 30px 25px 0; } body.orbit .et_pb_module.et_pb_text img.alignright { margin: 0 0 25px 30px; } /*================================================================================= Featured Images ===============================================================================*/ /* --------------- Basic Styling --------------- */ .oms-image-featured, .featured-image-wrap { margin-bottom: 30px; } .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 980 --------------*/ @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: 40%; float: right; margin-left: 5% !important; } } /*================================================================================= Image Style One ===============================================================================*/ /* --------------- Basic Styling --------------- */ .et_pb_image.oms-image-style-one { /*background: rgba(2,46,74,1);*/ border: 1px solid rgba(0,65,107,.15); } /* There's a dumb bug in Divi when you activate module animations... it duplicates markup within the module. */ .et_pb_image.oms-image-style-one .et_pb_module_inner .et_pb_image.oms-image-style-one { margin-bottom: 0 !important; } .et_pb_image.oms-image-style-one .et_pb_image_wrap { width: 100%; overflow: hidden; } .et_pb_image.oms-image-style-one .et_pb_image_wrap:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; background-image: linear-gradient(135deg, #FFB723 0%, #FFB723 100%); height: 100%; z-index: 1; transition: all .5s ease; clip-path: polygon(0 0,100% 0,100% 100%,0 100%); } .et_pb_image.oms-image-style-one:not(.ui-sortable) .et_pb_image_wrap img { object-fit: cover; -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); transition: all 1.25s ease; width: 100%; } /* --------------- ANIMATION IS TRIGGERED --------------- */ /* Image Wrap */ .et_pb_image.oms-image-style-one.et_had_animation .et_pb_image_wrap:before, .et_pb_image.oms-image-style-one.ui-sortable .et_pb_image_wrap:before { clip-path: polygon(100% 0,100% 0,100% 100%,100% 100%); } /* Image */ .et_pb_image.oms-image-style-one.et_had_animation .et_pb_image_wrap img { -webkit-transform: scale(1.01); -ms-transform: scale(1.01); transform: scale(1.01); left: -1px; } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- NAVIGATION - Interior/Children Navigation ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= NAV STYLE ONE ===============================================================================*/ /* NOTE: this nav is used on Desktop, just under the main navigation; this nav is horizontal. At the moment, this is used for the How To pages. */ /*-------------- Base Styling --------------*/ .oms-nav-style-one { padding-right: 0; border-right: none; } .oms-nav-style-one .et_pb_widget { width: 100% !important; margin: 0 0 25px !important; } body.orbit #main-content .oms-nav-style-one ul.menu { margin: 0; display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */ display: flex; /* NEW, Spec - Firefox, Chrome, Opera */ justify-content: center; } body.orbit #main-content .oms-nav-style-one ul.menu li { margin:0 7px; } body.orbit #main-content .oms-nav-style-one ul.menu li:before { display: none; /* Overrides one of my default styling for basic list styles. */ } body.orbit #main-content .oms-nav-style-one ul.menu li a { display: inline-block; position: relative; font-family: proxima-nova, sans-seri; font-size: 18px; line-height: 1.1; letter-spacing: .25px; font-weight: 600; background: #fff; padding: 13px 20px; vertical-align: middle; border-radius: 5px; border: 1px solid rgba(0,65,107,.15); color: #00416B; } /* --------------- Active State --------------- */ /* Active Menu Item & Current Menu Ancestor */ body.orbit #main-content .oms-nav-style-one ul.menu li.current_page_item > a, body.orbit #main-content .oms-nav-style-one ul.menu li.current-page-ancestor > a { background: #191919; color: #fff; } /* 981px and above --------------*/ @media all and (min-width: 981px) { /* --------------- Hover State --------------- */ body.orbit #main-content .oms-nav-style-one ul.menu li a:hover { background: #00416B; color: #fff; } } /*================================================================================= NAV STYLE TWO ===============================================================================*/ /* NOTE: this nav is used on for the mid-page nav, like on the Regions landing page for HSRA. */ /* NOTE: this menu/nav uses the core Divi menu module, and not the same experience/markup as the primary nav, for example. So, I'm noticing that there's markup for the "desktop" variation, and there's additional markup for the "mobile" variation. For that reason, I'm trying to tailor my selectors to keep things as lean as possible. */ /*-------------- Desktop Markup Styling --------------*/ body.orbit #main-content .oms-nav-style-two.et_pb_module ul li { margin-bottom: 0; } body.orbit .oms-nav-style-two ul li.menu-item:before { /* This selector affects both the "desktop" and the "mobile" variation of this menu. */ display: none; } body.orbit .oms-nav-style-two .et-menu-nav ul li a { padding-bottom: 0; padding: 15px 0; font-weight: 600; transition: all .3s ease-out; } body.orbit .oms-nav-style-two .et-menu-nav ul li a:before { content: ''; position: absolute; background: #FFB723; height: 2px; width: 100%; bottom: 0; left: 0; -webkit-transform: scale3d(0,1,1); -ms-transform: scale3d(0,1,1); transform: scale3d(0,1,1); -webkit-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; transform-origin: 100% 50%; transition: transform .2s ease-out; -webkit-backface-visibility: hidden; } /* 981px and above --------------*/ @media all and (min-width: 981px) { /* --------------- Hover State --------------- */ body.orbit .oms-nav-style-two .et-menu-nav ul li a:hover { color: #00416b; opacity: unset; } body.orbit .oms-nav-style-two .et-menu-nav ul li a:hover:before { -webkit-transform-origin: 0 50%; -ms-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transform: scale3d(1,1,1); -ms-transform: scale3d(1,1,1); transform: scale3d(1,1,1); } } /*-------------- Mobile Markup Styling --------------*/ body.orbit .oms-nav-style-two.et_pb_menu .et_pb_menu__wrap { display: block; } body.orbit .oms-nav-style-two .mobile_nav .mobile_menu_bar { transform: unset; text-align: right; right: 7%; padding-top: 4px; padding-bottom: 4px; } /* Hamburger Icon */ body.orbit .oms-nav-style-two .mobile_nav .mobile_menu_bar:before { top: unset; content: '\33'; color: #ffb723; } body.orbit .oms-nav-style-two .mobile_nav.opened .mobile_menu_bar:before { content: '\32'; } /* ul */ body.orbit .oms-nav-style-two ul.et_mobile_menu { /* NOTE: I had to STOP styling this further becasue I ran out of time. */ padding-left: 0 !important; /*position: fixed;*/ border-top: 2px solid #d9e2e7; box-shadow: 0 50px 50px rgb(0 65 107 / 35%); } body.orbit .oms-nav-style-two ul.et_mobile_menu li { background: #fff; border-bottom: 1px solid rgba(0,65,107,.15); text-align: center; padding: 10px 5%; } body.orbit .oms-nav-style-two ul.et_mobile_menu li a { font-weight: 600; border-color: rgba(0,65,107,.15); color: #00416b; text-align: center; display: inline!important; background: url(/wp-content/uploads/2022/09/glyph-chevron-right-orange-03.svg) no-repeat right 0.2em center; padding-right: 1.5em; background-size: 0.85em; border: none; } body.orbit .oms-nav-style-two ul.et_mobile_menu li a:hover { opacity: unset; } /* 768px to 980 --------------*/ @media all and (min-width: 768px) and (max-width: 980px) { body.orbit .oms-nav-style-two .mobile_nav .mobile_menu_bar { right: 10%; } } /* 980px and below --------------*/ @media all and (max-width: 980px) { body.orbit .oms-nav-style-two.et_pb_menu .et_mobile_nav_menu { display: block; margin-left: 0; margin-right: 0; } } /*================================================================================= NAV STYLE THREE ===============================================================================*/ /* NOTE: this nav is used on the Events landing pages. */ /*-------------- Basic Styling --------------*/ /* Wrap - by default, Flexbox is applied to this wrap, and I want to override that. */ body.orbit .oms-nav-style-three .et_pb_menu__wrap { display: block !important; } /* Desktop Menu Markup - this Divi module outputs both a desktop version of markup, as well as a mobile version. By default, Divi wants to show the desktop version beginning at 981px and above, and then show the mobile version from 0 - 980px... I want to disable that. */ body.orbit .oms-nav-style-three .et_pb_menu__menu { display: block !important; } /* Mobile Menu Markup */ body.orbit .oms-nav-style-three .et_mobile_nav_menu { display: none !important; } /* ul */ body.orbit.et-db #et-boc .oms-nav-style-three.et_pb_menu ul.et-menu, body.orbit.et-db .oms-nav-style-three.et_pb_menu ul.et-menu { margin: 0; border-radius: 100px; padding: 5px!important; align-items: center; background: #022E4A; } /* li */ body.orbit.et-db #et-boc .oms-nav-style-three.et_pb_menu ul.et-menu li, body.orbit.et-db #et-boc .oms-nav-style-three.et_pb_menu ul.et-menu li a, body.orbit.et-db .oms-nav-style-three.et_pb_menu ul.et-menu li, body.orbit.et-db .oms-nav-style-three.et_pb_menu ul.et-menu li a { padding: 0; margin: 0; } /* clickable element */ body.orbit.et-db #et-boc .oms-nav-style-three.et_pb_menu ul.et-menu li a, body.orbit.et-db .oms-nav-style-three.et_pb_menu ul.et-menu li a { font-weight: 600; color: #fff; padding: 10px 20px 11px; border-radius: 100px; transition: all .2s ease-out; } body.orbit.et-db #et-boc .oms-nav-style-three.et_pb_menu ul.et-menu li a:hover, body.orbit.et-db .oms-nav-style-three.et_pb_menu ul.et-menu li a:hover { opacity: unset; /* this is added to undo the Divi default. */ } /* Current Menu Item */ /* NOTE: this targets both the current menu item that exists on the main Events landing page, and also targets the current menu item that exists on an Events Category that isn't menu-item-type-post_type_archive. */ body.orbit.et-db.post-type-archive-event #et-boc .oms-nav-style-three.et_pb_menu ul.et-menu li.current-menu-item a, body.orbit.et-db.tax-events_cat #et-boc .oms-nav-style-three.et_pb_menu ul.et-menu li.current-menu-item:not(.menu-item-type-post_type_archive) a, body.orbit.et-db.post-type-archive-event .oms-nav-style-three.et_pb_menu ul.et-menu li.current-menu-item a, body.orbit.et-db.tax-events_cat .oms-nav-style-three.et_pb_menu ul.et-menu li.current-menu-item:not(.menu-item-type-post_type_archive) a { background: #fff; color: #017d9b; } /* 981px and above --------------*/ @media all and (min-width: 981px) { body.orbit.et-db #et-boc .oms-nav-style-three.et_pb_menu ul.et-menu li a, body.orbit.et-db .oms-nav-style-three.et_pb_menu ul.et-menu li a { font-size: 18px; padding: 10px 25px 11px; } body.orbit.et-db #et-boc .oms-nav-style-three.et_pb_menu ul.et-menu li:not(.current-menu-item) a:hover, body.orbit.et-db .oms-nav-style-three.et_pb_menu ul.et-menu li:not(.current-menu-item) a:hover { background: rgba(255,255,255,.15); } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- 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 .et_pb_row .et_pb_column .et_pb_module .ninja-forms-form-wrap nf-fields-wrap nf-field .nf-field-container { margin-bottom: 25px !important; /* Override */ } body.orbit .et_pb_row .et_pb_column .et_pb_module .ninja-forms-form-wrap nf-fields-wrap nf-field:last-child .nf-field-container { margin-bottom: 0 !important; } /* Form Labels */ body.orbit .ninja-forms-form-wrap nf-fields-wrap nf-field .nf-field-label { margin-bottom: 0px; /* Override */ } body.orbit .ninja-forms-form-wrap nf-fields-wrap nf-field .nf-field-label label, body.orbit form label { font-size: 10px; /* This size should match the mobile size of the .pre-title */ text-transform: unset; font-family: proxima-nova, sans-serif; font-weight: 400; letter-spacing: .75px; color: #00416b; display: block; /* Necessary to customize the line-height of label */ line-height: 1; margin-bottom: 10px !important; height: 16px; /* Specifying this height helps with the absolutely-positioned Submit button. */ } /* 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 input[type=number], 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 .et_pb_module input[type=email], body.orbit .et_pb_module input[type=text], body.orbit .et_pb_module input[type=password], body.orbit .et_pb_module input[type=tel], body.orbit .et_pb_module select:not([multiple]), body.orbit .et_pb_module textarea { padding: 10px 15px; font-size: 16px; color: #00416b; border: 1px solid rgba(0,65,107,.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] { padding: 10px 10px; /*font-size: 14px;*/ color: #00416b; border: 1px solid rgba(0,65,107,.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], body.orbit .ninja-forms-form-wrap nf-fields-wrap nf-field input[type=number], body.orbit .et_pb_module input[type=email], body.orbit .et_pb_module input[type=text], body.orbit .et_pb_module input[type=password], body.orbit .et_pb_module input[type=tel] { 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 input[type=number], 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 .et_pb_module input[type=email], body.orbit .et_pb_module input[type=text], body.orbit .et_pb_module input[type=password], body.orbit .et_pb_module input[type=tel], body.orbit .et_pb_module select:not([multiple]), body.orbit .et_pb_module textarea { background-color: #F7FAFB; } /* Color Variation for input and textarea on opposite bg color */ body.orbit .oms-bg-white .oms-box-style-one .ninja-forms-form-wrap nf-fields-wrap nf-field input[type=text], body.orbit .oms-bg-white .oms-box-style-one .ninja-forms-form-wrap nf-fields-wrap nf-field input[type=tel], body.orbit .oms-bg-white .oms-box-style-one .ninja-forms-form-wrap nf-fields-wrap nf-field input[type=email], body.orbit .oms-bg-white .oms-box-style-one .ninja-forms-form-wrap nf-fields-wrap nf-field input[type=number], body.orbit .oms-bg-white .oms-box-style-one .ninja-forms-form-wrap nf-fields-wrap nf-field textarea, body.orbit .oms-bg-white .oms-box-style-one .ninja-forms-form-wrap nf-fields-wrap nf-field select, body.orbit .oms-bg-white .oms-box-style-one input[type=email], body.orbit .oms-bg-white .oms-box-style-one input[type=text], body.orbit .oms-bg-white .oms-box-style-one input[type=password], body.orbit .oms-bg-white .oms-box-style-one input[type=tel] { background-color: #fff; } /* Color Variation for input and textarea within the footer */ body.orbit #main-footer input[type=email], body.orbit #main-footer input[type=text] { background-color: #fff; } /* 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, body.orbit .et_pb_module input[type=text]::placeholder, body.orbit .et_pb_module input[type=tel]::placeholder, body.orbit .et_pb_module input[type=email]::placeholder, body.orbit .et_pb_module textarea::placeholder { color: #00416b; font-style: italic; } /* Input, Textarea, and Select :focus styling */ body.orbit .et_pb_module input[type=text]:focus, body.orbit .et_pb_module input[type=tel]:focus, body.orbit .et_pb_module input[type=email]:focus, body.orbit .et_pb_module textarea:focus, body.orbit .et_pb_module select:focus { border-color: rgba(24,25,25,0.5) !important; } /* Textarea styling */ body.orbit .nf-field-element textarea { height: 100px; } /* 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: "Font Awesome 5 Pro"; font-weight: 700; font-size: 1.5em; color: #FFD03F; position: absolute; top: 50%; right: 20px; pointer-events: none; -webkit-transform: translateY(-50%); -ms-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 */ body.orbit .et_pb_module .nf-error-msg, body.orbit .et_pb_module .ninja-forms-req-symbol, body.orbit .et_pb_module .hs-error-msg, body.orbit .et_pb_module .hs-form-required { color: #FF0000; } /* Required Message */ body.orbit .et_pb_module .ninja-forms-form-wrap .nf-form-fields-required, body.orbit .et_pb_module .hs-form-required { font-size: 12px; } /* Input Error Message */ body.orbit .et_pb_module .nf-after-field .nf-error-msg, body.orbit .et_pb_module .hs-error-msg { margin-right: 0; font-size: 12px; } /* Submit Button */ .field-wrap input[type=button], .field-wrap input[type=submit], body.orbit .et_pb_module input[type=submit] { /* NOTE: Other styling is organized with the styling for CTA buttons. */ border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0 !important; } /* --------------- 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; } /* --------------- Blog Sign-Up VARIATION --------------- */ body.orbit .oms-formsimple .ninja-forms-form-wrap nf-fields-wrap { display: flex; flex-direction: row; align-items: flex-start; } body.orbit .oms-formsimple .ninja-forms-form-wrap nf-fields-wrap nf-field { width: 100%; } body.orbit .oms-formsimple .ninja-forms-form-wrap nf-fields-wrap nf-field:last-child { width: unset; margin-left: -1px; } body.orbit .oms-formsimple .ninja-forms-form-wrap nf-fields-wrap nf-field .nf-field-container { margin: 0; /* overrides styling in core Ninja Forms styling */ } body.orbit .oms-formsimple .nf-field-label { position: absolute; /* NOTE: this was done to avoid strange spacing created if the error message is triggered. */ margin-top: -20px; } body.orbit .oms-formsimple input { margin-bottom: 0 !important; } body.orbit .oms-formsimple .field-wrap input[type=submit], body.orbit .oms-formsimple .field-wrap input[type=button], body.orbit .oms-formsimple input[type=submit] { margin: 0; height: 45px; border-radius: 0 5px 5px 0; } /* 768px and above --------------*/ @media all and (min-width: 768px) { .oms-formfield.col-3 { width: 30%; } body.orbit .ninja-forms-form-wrap nf-fields-wrap nf-field .nf-field-label label, body.orbit form label { font-size: 16px; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- 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: 5px; } /* Large Number */ .et_pb_number_counter .percent p { font-weight: 900; font-size: 55px; line-height: 1; margin-bottom: 0; } .et_pb_number_counter .percent p .percent-value { white-space: nowrap; } /* Title */ .et_pb_number_counter .title { margin-bottom: 0 !important; } /* 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 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; } .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: #000; } .et_pb_filterable_portfolio .et_pb_portfolio_filters ul li a.active { background: #000; 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; } } /*================================================================================= H1 ON PROJECT CATEGORY/LISTING/ARCHIVE PAGE ===============================================================================*/ /* H1 */ body.orbit.tax-project_category h1 { margin-bottom: 35px; } /* 1100px and above */ @media all and (min-width: 1100px) { /* H1 */ body.orbit.tax-project_category h1 { margin-bottom: 75px; } } /*================================================================================= 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: 40px; } /* Project Pagination */ .et_pb_portfolio_grid .pagination, .et_pb_portfolio .pagination, .et_pb_portfolio .et_pb_portofolio_pagination { border-color: rgba(0,65,107,.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: 15px; overflow: hidden; display: flex !important; flex-direction: column; box-shadow: 0px 10px 60px -30px rgba(0,0,0,0.5); /* 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); transform: translate3d(0, 0, 0); } /* Thumbnail Image */ .et_portfolio_image/*, body.orbit.tax-project_category .et_pb_post .featured-image*/ { margin: -25px -25px 25px !important; display: flex; justify-content: center; align-items: center; position: relative; clip-path: polygon(0 0,100% 0,100% 92%,0 100%); } /* Overlay for native grid layout */ .et_overlay { background: rgba(0,0,0,.5); border: 0; } /* Overlay for fullwidth layout portfolio module, and for the Project Category/Listing/Archive Page */ .et_portfolio_image:before/*, body.orbit.tax-project_category .et_pb_post .featured-image:before*/ { content: ''; background: rgba(0,0,0,.5); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; opacity: 0; transition: all .2s ease-out; } /* Overlay Icon for native grid layout */ .et_overlay:before { color: #ffffff; font-size: 32px; content: "\e046"; top:50%; transition: all .2s ease-out; -webkit-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); } /* Overlay Icon for fullwidth layout portfolio module, and for the Project Category/Listing/Archive Page */ .et_portfolio_image:after/*, body.orbit.tax-project_category .et_pb_post .featured-image:after*/ { position: absolute; font-size: 32px; content: "\e046"; z-index: 2; font-family: "ETmodules" !important; -moz-osx-font-smoothing: grayscale; line-height: 1; text-transform: none; color: #fff; opacity: 0; transition: all .2s ease-out; -webkit-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); } /* Header / Title */ .et_pb_filterable_portfolio .et_pb_portfolio_item .et_pb_module_header, .et_pb_portfolio_grid .et_pb_portfolio_item .et_pb_module_header, body.orbit.tax-project_category .et_pb_post h2 { margin: 0 0 25px; } body.orbit.tax-project_category .et_pb_post h2 { margin-bottom: 0; } .et_pb_portfolio_item .et_pb_module_header a, body.orbit.tax-project_category .et_pb_post h2 a { color: #000; /* Changes header color because Divi override doesn't work correctly. */ } /* Header / Title Hyperlink Pseudo Element */ .et_pb_filterable_portfolio .et_pb_portfolio_item .et_pb_module_header a:after, .et_pb_portfolio_grid .et_pb_portfolio_item .et_pb_module_header a:after, body.orbit.tax-project_category .et_pb_post h2 a:after { content: '\f054'; font-family: "Font Awesome 5 Pro"; font-weight: 700; font-size: 80%; position: relative; left: 8px; color: #ffd03f; transition: all .2s ease-out; } /* Project Meta - Name & Cateogry */ .et_pb_portfolio_item .post-meta { font-size: 12px; border-top: 1px solid rgba(0,65,107,.15); padding-top: 5px; margin: auto 0 0; } .et_pb_portfolio_item .post-meta a { color: #000 !important; } /* 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: #ffd03f; } /* Pseudo Element */ .et_pb_filterable_portfolio .et_pb_portfolio_item .et_pb_module_header a:hover:after, .et_pb_portfolio_grid .et_pb_portfolio_item .et_pb_module_header a:hover:after, body.orbit.tax-project_category .et_pb_post h2 a:hover:after { left: 13px; } /* Overlay for the Project Category/Listing/Archive Page */ .et_portfolio_image:hover:before/*, body.orbit.tax-project_category .et_pb_post .featured-image:hover:before*/ { opacity: 1; cursor: pointer; } /* Overlay Icon for native grid layout */ .et_portfolio_image:hover .et_overlay:before { -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } /* Overlay Icon for the Project Category/Listing/Archive Page */ .et_portfolio_image:hover:after/*, body.orbit.tax-project_category .et_pb_post .featured-image:hover:after*/ { -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); opacity: 1; } /* Post Meta hover */ .et_pb_portfolio_item .post-meta a:hover { text-decoration: underline; } } /* 1025px and above */ @media all and (min-width: 1025px) { /* Individual Project/Item */ .et_pb_filterable_portfolio.col-3 .et_pb_portfolio_item, .et_pb_portfolio_grid.col-3 .et_pb_grid_item, body.orbit.tax-project_category .et_pb_post { padding: 35px; /* Increased padding on larger monitors */ } /* Thumbnail Image */ .et_pb_filterable_portfolio.col-3 .et_pb_portfolio_item .et_portfolio_image, .et_pb_portfolio_grid.col-3 .et_pb_grid_item .et_portfolio_image/*, body.orbit.tax-project_category .et_pb_post .featured-image*/ { margin: -35px -35px 35px !important; /* Increased negative margins that correspond with the padding in the styling just above. */ } /* Inline Image */ body.orbit.single-project .project p img { width: 90% !important; margin: 50px auto; display: block; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- SCREEN READER PLUGIN ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /* NOTE: Brian, we noticed that when on the Screen Results page, none of these selectors were being styled the way that they had been styled on other pages throughout the site. For example, if you tried to search another keyword while on the Search Results page, all of a sudden, you could see the label, you could see the Search submit button, and all of a sudden all the page content was being pushed down approx 25px, revealing a white band of color just beneath the header. */ /*-------------- Base Styling --------------*/ body.orbit .da11y-screen-reader-text, body.orbit .et_pb_contact_form_label, body.orbit .et_pb_search .screen-reader-text, body.orbit .et_pb_social_media_follow_network_name, body.orbit .widget_search .screen-reader-text { clip: rect(1px,1px,1px,1px); -webkit-font-smoothing: subpixel-antialiased; font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif; font-size: 1em; font-weight: 600; height: 1px; letter-spacing: normal; line-height: normal; overflow: hidden; position: absolute; text-shadow: none; text-transform: none; width: 1px; } body.orbit .da11y-screen-reader-text:focus, body.orbit.search .da11y-screen-reader-text:focus { clip: unset; -webkit-box-shadow: unset; box-shadow: unset; width: unset; height: unset; top: unset; left: unset; right: 45px; padding: 15px; -webkit-transform: translateY(50%); -ms-transform: translateY(50%); transform: translateY(50%); } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- TESTIMONIAL MODULE ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= Common Base Styling ===============================================================================*/ /*-------------- Base Styling --------------*/ /* Module */ body.orbit .et_pb_testimonial { padding: 0; background: unset; display: flex; align-items: center; flex-direction: column; } /* Pseudo Element: Quotation Mark */ body.orbit .et_pb_testimonial:before { display: none; } /* Image */ /* NOTE: this image is built strangly by Divi... this is the best way I could think to manipulate this module to get it to look this way. I suppose I could have tried a different module, but the testimonial module seemed the most straightforward for content entry. */ /* Base Styling */ body.orbit .et_pb_testimonial .et_pb_testimonial_portrait { margin: 0 auto 25px; /* negates Divi default */ } /* Image Pseudo Element */ body.orbit .et_pb_testimonial .et_pb_testimonial_portrait:before { display: none; /* This is to disable the default pseudo element. */ } /* Description Container */ body.orbit .et_pb_testimonial_description { margin-left: unset !important; text-align: center; } /* General Paragraph Text */ body.orbit .et_pb_testimonial .et_pb_testimonial_content p { padding-bottom: 0; } /* Common Styling */ body.orbit .et_pb_testimonial .et_pb_testimonial_content, body.orbit .et_pb_testimonial .et_pb_testimonial_content p { font-size: 19px; line-height: 1.5; } /* Author */ body.orbit .et_pb_testimonial .et_pb_testimonial_author { position: relative; margin-top: unset; /* modified to improve the spacing of everything across breakpoints. */ color: #00416b; margin-top: 25px; /* BRIAN: keep this styling in here, you've investigated several times. Just keep it, trust me. */ } /* Author Meta Data (job and company) */ body.orbit .et_pb_testimonial_meta { font-size: 13px; } body.orbit .et_pb_testimonial_meta:empty { display: block !important; /* Divi doesn't remove this from the markup in the event that the admin doesn't enter any data into this input, however, Divi targets this with an ":empty" selector and "display: none" it... so, I am choosing to do the opposite to help with my spacing. */ } /* NOTE: this was a strange styling that exits by default... I discovered this in testing, and want to override it entirely. */ .et_pb_testimonial_description_inner + .et_pb_testimonial_meta > span { display: unset; margin-top: unset; } /* 768px and above --------------*/ @media all and (min-width: 768px) { body.orbit .et_pb_testimonial .et_pb_testimonial_portrait { margin-bottom: 35px; } body.orbit .et_pb_testimonial .et_pb_testimonial_content, body.orbit .et_pb_testimonial .et_pb_testimonial_content p { font-size: 21px; } body.orbit .et_pb_testimonial .et_pb_testimonial_author { margin-top: 35px; } } /*-------------- VARIATION: DARK BACKGROUND --------------*/ body.orbit .et_pb_testimonial.et_pb_bg_layout_dark .et_pb_testimonial_author { color: #ffffff; } /*-------------- VARIATION: LARGE FEATURED --------------*/ /* Larger .intro Text for Featured Variation */ body.orbit .et_pb_testimonial.featured .et_pb_testimonial_content p.intro { font-size: 26px; line-height: 1.1; margin-bottom: 20px; font-weight: 600; } body.orbit .et_pb_testimonial:not(.et_pb_bg_layout_dark) .et_pb_testimonial_content p.intro { color: #00416b; } /* 768px to 1399px --------------*/ @media all and (min-width: 768px) and (max-width: 1399px) { /* Larger .intro Text for Featured Variation */ body.orbit .et_pb_testimonial.featured .et_pb_testimonial_content p.intro { font-size: 32px; } } /* 1400px and above --------------*/ @media all and (min-width: 1400px) { /* Larger .intro Text for Featured Variation */ body.orbit .et_pb_testimonial.featured .et_pb_testimonial_content p.intro { font-size: 35px; } } /*-------------- 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; } /* 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 Styling --------------*/ /* Video Container */ /* NOTE: Typically, Divi uses this overlay to indicate hover effect. The problem, however, is that CSS cannot smoothly transition a linear gradient from idle state to hover state. So, to compensate, I need to target opacity rather than background or background-color to enable that smooth transition, but in doing this, becasue of the way that Divi structured this markup, I need to make use of a pseudo element (just below). */ .et_pb_video .et_pb_video_overlay_hover:hover { background: transparent !important; /* this seems clunky, but I need to override Divi here to enable the linear-gradient overlay on hover. */ } .et_pb_video_overlay_hover:before { content: ''; background: linear-gradient(121deg, rgba(255,208,63,0.4) 0%, rgba(255,183,35,0.5) 100%); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; opacity: 0; transition: all 0.3s; } /* Video Play Button */ .et_pb_video .et_pb_video_overlay .et_pb_video_overlay_hover a { top: 50%; left: 50%; border-radius: 50%; border: 1px solid rgba(0,65,107,.15); margin: 0; font-size: 0; line-height: 0; background: rgba(255,255,255,.97); width: 100px; height: 100px; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .et_pb_video .et_pb_video_overlay .et_pb_video_overlay_hover a:before { content: ''; background: url(/wp-content/uploads/2022/09/glyph-play-teal.svg) no-repeat 50%; background-size: 60%; width: 50%; height: 50%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-39%, -50%); -ms-transform: translate(-39%, -50%); transform: translate(-39%, -50%); } /* 499px and below --------------*/ @media all and (max-width: 499px) { /* Video Play Button */ .et_pb_video .et_pb_video_overlay .et_pb_video_overlay_hover a { padding: 19px 22px 19px 26px; width: 75px; height: 75px; } } /* 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:before { opacity: 1; } /* Play Button */ .et_pb_video .et_pb_video_overlay_hover:hover a { background: rgba(255,255,255,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; } } /*------------------------------------------------------------------------------------------------------------------------------- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ ================================================================================================================================= ANIMATIONS - I've chosen to organize Animations down here, in one central spot, because some items may repurpose this motion. ================================================================================================================================= \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ ---------------------------------------------------------------------------------------------------------------------------------*/ /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- WIPE - used for the Hero Imagery Wipe ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /* --------------- Vender Prefixes --------------- */ @keyframes wipe { 0% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%);} to { clip-path: polygon(0 100%,100% 100%,100% 100%,0 100%);} } /* Divi Visual Builder Overrides */ .nsc-video-editor, .nsc-video-editor canvas { width: 0 !important; height: 0 !important; } .oms-section-fifty50 .et-fb-component-settings--section { display: block !important; } .oms-section-fifty50 .et-fb-component-settings--row, .oms-row-fullwidth .et-fb-component-settings--row { top: 50px !important; }