/* Theme Name: Orbit Media Studios Theme URI: http://master.themedsandbox.mighty-site.com Version: 2.0 Description: A child theme of Divi. This is a custom child theme made for clients of Orbit Media Studios. Author: Orbit Media Studios Author URI: http://www.orbitmedia.com Template: Divi */ @import url("../Divi/style.css"); /*------------------------------[FONT ICONS]-----------------------------*/ /*--[Created by Divi Children, http://divi4u.com/divi-children-plugin/]--*/ /*-----------------------------------------------------------------------*/ .icon_tags, .icon_profile, .icon_chat, .icon_clipboard, .icon_calendar {font-family: 'ETmodules'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 16px; color: #318EC3;} .icon_tags:before {content: "\e07c"; padding: 0px 5px 0 0;} .icon_profile:before {content: "\e08a"; padding: 0 5px 0 0; } .icon_chat:before { content: "\e066"; padding: 0 5px 0 20px; } .icon_clipboard:before { content: "\e0e6"; padding: 0 5px 0 20px; } .icon_calendar:before { content: "\e023"; padding: 0 5px 0 20px; } #main-header .nav li li ul.sub-menu { top: 0; left: calc(100% + 12px); border-radius: 5px; } /*- YOU CAN INCLUDE THE CUSTOM CODE FOR YOUR CHILD THEME BELOW THIS LINE-*/ /*------------------------------------------------*/ /*-----------------[BASIC STYLES]-----------------*/ /*------------------------------------------------*/ /**********/ /* Global */ /**********/ body.orbit {background: #ffffff;} body.orbit ::-moz-selection {background: #ceebea; color: #fff;} body.orbit ::selection {background: #ceebea; color: #fff;} #page-container, #et-secondary-nav li ul, #top-header, #top-header .container {background: #ffffff !important; transition: none !important;} body.orbit .mejs-offscreen {display: none;} /* Global > Sizing */ body.orbit .et_pb_row, body.orbit .container, body.orbit #main-content .container {max-width: 1260px; padding: 0 30px; width: 100%;} body.orbit #page-container {padding-top: 120px !important;} body.orbit #page-container p, body.orbit #page-container ul li, body.orbit #page-container ol li, body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu li.menu-item a {font-family: "avenir-next-lt-pro", sans-serif;} /* Global > Responsive */ @media (min-width: 981px) { .mobile-only {display: none !important;} } @media (max-width: 980px) { html {margin-top: 0 !important;} html #wpadminbar {display: none !important;} body.orbit.et_fixed_nav.et_show_nav #page-container {padding-top: 90px !important;} .desktop-only {display: none !important;} } /**************/ /* Formatting */ /**************/ /* Formatting > Headlines */ body.orbit #page-container h1 {font-family: "avenir-next-lt-pro",sans-serif; font-weight: normal; color: #26475E; font-size: 60px; line-height: 1.08; margin: 0 0 30px; padding: 0;} body.orbit #page-container h2 {font-family: "avenir-next-lt-pro",sans-serif; font-weight: normal; color: #26475E; font-size: 40px; line-height: 1.1; margin: 0 0 25px; padding: 0;} body.orbit #page-container h2:after {content: ''; display: block; height: 3px; width: 40px; background: #F58466; margin-top: 25px;} body.orbit #page-container .et_pb_text_align_center h2:after {margin-left: auto; margin-right: auto;} body.orbit #page-container h3 {font-family: "avenir-next-lt-pro",sans-serif; font-weight: normal; color: #26475E; font-size: 26px; line-height: 1.2; margin: 0 0 10px; padding: 0;} body.orbit #page-container h4 {font-family: "avenir-next-lt-pro",sans-serif; font-weight: normal; color: #26475E; font-size: 23px; line-height: 1.2; margin: 0 0 10px; padding: 0;} body.orbit #page-container h5 {font-family: "avenir-next-lt-pro",sans-serif; font-weight: normal; color: #26475E; font-size: 19px; line-height: 1.3; letter-spacing: .5px; margin: 0 0 10px; padding: 0; text-transform: uppercase;} body.orbit #page-container h6 {font-family: "avenir-next-lt-pro",sans-serif; font-weight: normal; color: #26475E; font-size: 19px; line-height: 1.3; letter-spacing: .5px; margin: 0 0 10px; padding: 0;} /* Text */ body.orbit, body.orbit p, body.orbit #main-content ul, body.orbit #main-content ol {font-family: "avenir-next-lt-pro", sans-serif; font-weight: 400; color: #26475E; font-size: 19px; 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;} /* Formatting > Hyperlinks */ a, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {color: #000;} .et_pb_bg_layout_dark a, .et_pb_bg_layout_dark h1 a, .et_pb_bg_layout_dark h2 a, .et_pb_bg_layout_dark h3 a, .et_pb_bg_layout_dark h4 a, .et_pb_bg_layout_dark h5 a, .et_pb_bg_layout_dark h6 a {color: #fff;} p a {font-weight: 500; position: relative;} .et_pb_section .et_pb_text p a:not(.cta-button):not(.cta-button-reverse):not(.cta-button-ghost):not(.cta-link), .et_pb_section .et_pb_blurb p a:not(.cta-button):not(.cta-button-reverse):not(.cta-button-ghost):not(.cta-link), .et_pb_post .entry-content p a:not(.cta-button):not(.cta-button-reverse):not(.cta-button-ghost):not(.cta-link) {text-decoration: none; box-shadow: 0 -2px 0 #79bde8 inset; padding: 0 2px 2px; transition: .3s cubic-bezier(.17,.88,.5,1.5);} a[href^="tel:"]:before {content: "\f879"; font-family: "FontAwesome"; font-weight: 700; font-size: 85%; margin-right: 8px;} a:hover, h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {color: #000; text-decoration: none;} .et_pb_bg_layout_dark a:hover, .et_pb_bg_layout_dark h1 a:hover, .et_pb_bg_layout_dark h2 a:hover, .et_pb_bg_layout_dark h3 a:hover, .et_pb_bg_layout_dark h4 a:hover, .et_pb_bg_layout_dark h5 a:hover, .et_pb_bg_layout_dark h6 a:hover {color: #fff;} @media (min-width: 981px) { .et_pb_section .et_pb_text p a:not(.cta-button):not(.cta-button-reverse):not(.cta-button-ghost):not(.cta-link):hover, .et_pb_section .et_pb_blurb p a:not(.cta-button):not(.cta-button-reverse):not(.cta-button-ghost):not(.cta-link):hover, .et_pb_post .entry-content p a:not(.cta-button):not(.cta-button-reverse):not(.cta-button-ghost):not(.cta-link):hover {box-shadow: 0 -13px 0 #addaf7 inset;} .et_pb_bg_layout_dark.et_pb_text p a:not(.cta-button):not(.cta-button-reverse):not(.cta-button-ghost):not(.cta-link):hover, .et_pb_bg_layout_dark.et_pb_blurb p a:not(.cta-button):not(.cta-button-reverse):not(.cta-button-ghost):not(.cta-link):hover {box-shadow: 0 -13px 0 #79bde8 inset;} } /* Strong */ body.orbit strong {font-weight: 600;} body.orbit .et_pb_bg_layout_dark strong {color: #fff;} /* Lists */ body.orbit #main-content .et_pb_section .et_pb_module ul, body.orbit #main-content .et_pb_section .et_pb_module ol, body.orbit #main-content .et_pb_post ul, body.orbit #main-content .et_pb_post ol, body.orbit.blog #content-area #sidebar ul.categories, body.orbit.category #content-area #sidebar ul.categories, body.orbit.archive #content-area #sidebar ul.categories, body.orbit.author #content-area #sidebar ul.categories {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 {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 {margin: 0 0 10px;} body.orbit #main-content .et_pb_section .et_pb_module li:last-of-type, body.orbit #main-content .et_pb_post li:last-of-type {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 {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 {content: ''; position: absolute; height: 5px; width: 5px; background: #79bde8; top: 12px; left: -20px; border-radius: 100%;} /* Nested List */ body.orbit #main-content .et_pb_section .et_pb_module li ul, body.orbit #main-content .et_pb_section .et_pb_module li ol, body.orbit #main-content .et_pb_section .et_pb_module ul ul, body.orbit #main-content .et_pb_section .et_pb_module ul ol, body.orbit #main-content .et_pb_section .et_pb_module ol ul, body.orbit #main-content .et_pb_section .et_pb_module ol ol, body.orbit #main-content .et_pb_post li ul, body.orbit #main-content .et_pb_post li ol, body.orbit #main-content .et_pb_post ul ul, body.orbit #main-content .et_pb_post ul ol, body.orbit #main-content .et_pb_post ol ul, body.orbit #main-content .et_pb_post ol ol { 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 { 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 { background: none; border-radius: 100%; border: 1px solid #79bde8; } /* Paragraph Intro & Blockquote Common Styling */ body.orbit p.intro { font-size: 25px; line-height: 1.6; } /* Blockquotes */ body.orbit blockquote { position: relative; background: rgba(0,0,0,.03); border: none; border-left: 3px solid #79bde8; margin: 50px auto; padding: 50px; width: 90%; border-radius: 0 5px 5px 0; } body.orbit blockquote p { font-size: 25px; line-height: 1.5; } body.orbit blockquote :last-child { margin-bottom: 0; } /* Superscript */ body.orbit sup { font-size: 50%; bottom: .7em; } /* Dividers Styling */ body.orbit hr, body.orbit .et_pb_divider { border: none; height: 1px; margin: 45px 0 45px; padding: 0; background: rgba(0,0,0,.2); } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- MY CUSTOM TEXT STYLES ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= PRE-TITLE ===============================================================================*/ /* NOTE: This is the small text that appears above headers, typically at the beginning of various sections. */ body.orbit .pre-title { font-size: 15px; /*color: #000;*/ line-height: 1; letter-spacing: .75px; /*text-transform: uppercase;*/ margin: 0 0 20px !important; font-weight: 500; } /*body.orbit .pre-title:after { content: ''; display: block; height: 3px; width: 40px; background: rgba(0,0,0,.25); margin-top: 25px; } body.orbit .et_pb_text_align_center .pre-title:after { margin-left: auto; margin-right: auto; }*/ /* On Dark Background */ body.orbit .et_pb_bg_layout_dark .pre-title { color: rgba(255,255,255,1); } /*body.orbit .et_pb_bg_layout_dark .pre-title:after { background: rgba(255,255,255,.4); }*/ /*================================================================================= SPECIALTY UNORDERED LISTS ===============================================================================*/ /* Common Styling for these special lists */ /* Pseudo Element - General Common Styling, in case you want to introduce other graphic variations. */ body.orbit #main-content .et_pb_section .et_pb_module ul.check li:before, body.orbit #main-content .et_pb_post ul.check li:before { font-family: "FontAwesome"; font-weight: 500; position: absolute; background: none; /* This avoids conflict on base styling */ height: unset; /* This avoids conflict on base styling */ width: unset; /* This avoids conflict on base styling */ } /* Check Icon */ body.orbit #main-content .et_pb_section .et_pb_module ul.check li:before, body.orbit #main-content .et_pb_post ul.check li:before { font-size: 22px; content: "\f00c"; top: -4px; left: -30px; color: #9fd6bc; } /* 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%; } /*================================================================================= KEEP RIGHT ===============================================================================*/ .oms-text-keepright { text-align: right !important; } /*================================================================================= TEXT COLUMNS ===============================================================================*/ /* 2 Columns */ @media (min-width: 768px) { .oms-text-col-2 { -webkit-columns: 150px 2; -moz-columns: 150px 2; columns: 150px 2; -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; } } /*================================================================================= HEADER EMPHASIS (horizontal lines) ===============================================================================*/ .header-emphasis { overflow: hidden; } .header-emphasis h3, .header-emphasis h4 { position: relative; display: inline-block; } .header-emphasis h3:before, .header-emphasis h3:after, .header-emphasis h4:before, .header-emphasis h4:after { content: ''; position: absolute; height: 1px; width: 200%; top: 50%; background: rgba(0,0,0,.15); transform: translateY(50%); } .header-emphasis h3:before, .header-emphasis h4:before { right: 100%; margin-right: 15px; } .header-emphasis h3:after, .header-emphasis h4:after { left: 100%; margin-left: 15px; } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- SPECIFIC VARIATIONS ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= VARIATIONS FOR DARK BACKGROUNDS ===============================================================================*/ /* NOTE: this code needs to come after the other text styling above in order for the cascading to work correctly. */ /* General (Headers) */ body.orbit .et_pb_bg_layout_dark { color: rgba(255,255,255,1); } /* Body Copy & List Items */ body.orbit .et_pb_bg_layout_dark p, body.orbit .et_pb_bg_layout_dark li { color: rgba(255,255,255,.85); } /* Emphasized Text */ body.orbit .et_pb_bg_layout_dark em { color: #fff; } /* Dividers Styling */ body.orbit .et_pb_bg_layout_dark hr, body.orbit .et_pb_bg_layout_dark .et_pb_divider { background: rgba(255,255,255,.25); } /*================================================================================= EXTRA SPACING ===============================================================================*/ /* NOTE: Extra spacing for instances when these particular elements follow anything else inline within the same module/container. */ /* h2, in both pageblocks and in Blog Posts */ .entry-content p:not(.pre-title) + h2, .entry-content ul + h2, .entry-content ol + h2 { margin-top: 75px !important; } /* h3, in both pageblocks and in Blog Posts */ .entry-content p:not(.pre-title) + h3, .entry-content ul + h3, .entry-content ol + h3, .et_pb_text p:not(.pre-title) + h3 { margin-top: 50px !important; } /* In the event that a header is the last child within a module, give it a margin bottom of 25px. This doesn't happen often, but it does, for example, occur in the testimonial blocks. */ body.orbit h1:last-child, body.orbit h2:last-child, body.orbit h3:last-child, body.orbit h4:last-child, body.orbit h5:last-child, body.orbit h6:last-child { margin-bottom: 25px; } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- MEDIA QUERIES FOR TEXT STYLING ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /* 767px and below --------------*/ @media (max-width: 767px) { body.orbit p, body.orbit #main-content ul, body.orbit #main-content ol { font-size: 17px; } 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 20px; width: 100%; } body.orbit blockquote p { font-size: 18px; } body.orbit #page-container h1 { font-size: 32px; } body.orbit #page-container h2 { font-size: 28px; } body.orbit #page-container h3 { font-size: 21px; } body.orbit #page-container h4 { font-size: 18px; } body.orbit #page-container h5 { font-size: 17px; } body.orbit #page-container h6 { font-size: 17px; } 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 */ .entry-content p:not(.pre-title) + h2, .entry-content ul + h2, .entry-content ol + h2 { margin-top: 50px !important; } /* h3, in both pageblocks and in Blog Posts */ .entry-content p:not(.pre-title) + h3, .entry-content ul + h3, .entry-content ol + h3, .et_pb_text p:not(.pre-title) + h3 { margin-top: 35px !important; } body.orbit #main-content .et_pb_section .et_pb_module ul.check li:before, body.orbit #main-content .et_pb_post ul.check li:before { top: -2px !important; } } /* 768px to 980px --------------*/ @media (min-width: 768px) and (max-width: 980px) { body.orbit p, body.orbit #main-content ul, body.orbit #main-content ol { font-size: 18px; } body.orbit p.intro { font-size: 22px; } body.orbit blockquote p { font-size: 22px; } body.orbit #page-container h1 { font-size: 45px; } body.orbit #page-container h2 { font-size: 34px; } body.orbit #page-container h3 { font-size: 23px; } body.orbit #page-container h4 { font-size: 20px; } body.orbit #page-container h5 { font-size: 18px; } body.orbit #page-container h6 { font-size: 18px; } body.orbit .pre-title { font-size: 14px; } /* Extra spacing for instances when these particular elements follow anything else inline within the same module/container. */ /* h2, in both pageblocks and in Blog Posts */ .entry-content p:not(.pre-title) + h2, .entry-content ul + h2, .entry-content ol + h2 { margin-top: 75px !important; } /* h3, in both pageblocks and in Blog Posts */ .entry-content p:not(.pre-title) + h3, .entry-content ul + h3, .entry-content ol + h3, .et_pb_text p:not(.pre-title) + h3 { margin-top: 50px !important; } } /* 980px and below --------------*/ @media (max-width: 980px) { /* Divider Styling */ body.orbit hr, body.orbit .et_pb_divider { margin-top: 30px; margin-bottom: 30px; } } /**********/ /* Header */ /**********/ /* Header > Top Header */ #top-header {position: relative;} #top-header .container {padding-top: 0; border-bottom: 1px solid rgba(0,0,0,.15);} #et-secondary-nav li {margin-right: 20px;} #et-secondary-nav .menu-item-has-children > a:first-child {padding-right: 0;} #et-secondary-nav .menu-item-has-children > a:first-child:after {display: none;} #et-secondary-nav li ul {display: none;} #et-secondary-menu > ul > li > a {padding: 14px 0; font-size: 15px; letter-spacing: .25px; color: #333333; font-weight: 500; line-height: 1; text-transform: uppercase;} #et-secondary-menu > ul > li.current-menu-item > a, #et-secondary-menu > ul > li.current-page-ancestor > a {color: #5d87a1;} #et-secondary-menu > ul > li > a:hover {text-decoration: none; color: #5d87a1; opacity: 1; transition: all .3s ease-out;} /* Disable FontAwesome pseudo icons */ .menu-item-14828 a:before, .top-medical a:before, .top-phone a:before, .top-contact a:before {display: none; font-family: "FontAwesome"; font-weight: 700; margin-right: 8px;} .top-contact a:before {content: "\f2b9";} .menu-item-14828 a:before {content: "\f155";} .top-medical a:before {content: "\f469";} /* Top menu icons */ .menu-item svg {position: relative; top: 2px; margin-right: 3px; width: 13px; height: 13px;} @media (min-width: 981px) { .et-fixed-header#top-header, .et-fixed-header#top-header #et-secondary-nav li ul {background: #fff;} .et-fixed-header#top-header a {color: #333333;} #et-secondary-nav, #et-secondary-nav li {display: flex;} } @media (max-width: 980px) { body.orbit #main-header #et-top-navigation #et_mobile_nav_menu .et_mobile_menu > li.top-medical, body.orbit #main-header #et-top-navigation #et_mobile_nav_menu .et_mobile_menu > li.top-phone, body.orbit #main-header #et-top-navigation #et_mobile_nav_menu .et_mobile_menu > li.top-contact, body.orbit #main-header #et-top-navigation #et_mobile_nav_menu .et_mobile_menu > li.menu-item-14828 {min-height: unset;} body.orbit #main-header #et-top-navigation #et_mobile_nav_menu .et_mobile_menu li.top-medical a, body.orbit #main-header #et-top-navigation #et_mobile_nav_menu .et_mobile_menu li.top-phone a, body.orbit #main-header #et-top-navigation #et_mobile_nav_menu .et_mobile_menu li.top-contact a, body.orbit #main-header #et-top-navigation #et_mobile_nav_menu .et_mobile_menu > li.menu-item-14828 a {color: #333333; text-align: center; display: flex; justify-content: center; align-items: center; background: #f5f5f5; border-radius: 5px; padding: 10px !important; border-bottom: none; margin-top: 10px;} body.orbit #main-header #et-top-navigation #et_mobile_nav_menu .et_mobile_menu > li.menu-item svg {top: -1px; margin-right: 7px;} } /* Header > Top Header */ body.orbit.et_secondary_nav_enabled #page-container #top-header {background: none !important;} body.orbit #top-header .container {background: none !important; border: none;} body.orbit #top-header #et-secondary-menu > ul > li:not(.menu-item-14828) {margin-right: 35px;} body.orbit #top-header #et-secondary-menu > ul > li a {padding: 15px 0 6px; color: #ffffff; font-weight: bold; letter-spacing: 2px;} body.orbit #top-header #et-secondary-menu > ul > li a:hover {color: #79BDE8;} body.orbit #top-header #et-secondary-menu > ul > li.menu-item svg {display: none;} body.orbit #top-header #et-secondary-menu > ul > li.menu-item-14828 {margin-right: 0;} body.orbit #top-header #et-secondary-menu > ul > li.menu-item-14828 a {color: #79BDE8;} body.orbit #top-header #et-secondary-menu > ul > li.menu-item-14828 a:hover {color: #f58466;} /* Header > Main Header */ #main-header {background-color: #fff; height: 90px; display: flex; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2) !important; transition: all .2s ease-out;} #main-header .et_menu_container {display: flex; align-items: center; /* max-width: 1200px; */} @media (min-width: 981px) { body.et_secondary_nav_enabled #main-header {top: 45px !important;} body.admin-bar.et_secondary_nav_enabled #main-header {top: 76px !important;} } @media (max-width: 980px) { #main-header {height: 60px;} body.orbit #main-header .et_menu_container {height: 60px; width: 100%;} } @media (min-width: 981px) { .et-fixed-header#main-header {height: 70px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2) !important;} } /* Header > Main Header > Logo */ span.logo_helper {display: unset;} @media (min-width: 981px) { body.orbit #main-header .logo_container {position: unset; width: 36%; max-width: 306px;} body.orbit .et-fixed-header#main-header .logo_container {max-width: 306px;} } @media (max-width: 980px) { body.orbit #main-header .logo_container {max-width: 208px;} .et_header_style_left #logo {max-width: 100%;} } /* Header > Main Header > Menu */ .et_header_style_left #et-top-navigation {padding: 0 !important; margin-left: auto; display: flex !important;} body.orbit #main-header .et_menu_container.et_pb_menu_visible #et-top-navigation {transition-delay: .6s;} nav#top-menu-nav {float: unset; margin-left: auto;} #top-menu > li {display: table-cell; vertical-align: middle; padding-right: 0;} body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu li.menu-item a {font-family: "avenir-next-lt-pro", sans-serif; font-size: 20px; color: #ffffff; line-height: 1.2; font-weight: 500; padding: 5px 15px; transition: all .2s ease-out; height: 90px; display: flex; align-items: center;} body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu li.menu-item.menu-item-has-children a {padding-right: 35px;} #top-menu-nav > ul > li > a:before {content: ''; display: block; position: absolute; background: #5d87a1; bottom: 0; left: 0; right: 0; height: 5px; width: 100%; z-index: 10000; -webkit-transform: scaleY(0); -moz-transform: scaleY(0); -ms-transform: scaleY(0); -o-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 0 100%; -ms-transform-origin: 0 100%; transform-origin: 0 100%; transition: transform .2s ease-out; -webkit-backface-visibility: hidden;} body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu li.menu-item.menu-item-has-children > a:after {transform: translateY(-50%); top: 50%; right: 15px; color: #79bde8; content: '\f078'; font-family: "FontAwesome"; font-weight: 500;} #top-menu-nav > ul > li.current-menu-item > a:before, #top-menu-nav > ul > li.current-menu-ancestor > a:before {-webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1);} #top-menu-nav > ul > li > a:hover, #top-menu-nav > ul > li.menu-item-has-children:hover > a {background: rgb(247,247,247); background: linear-gradient(0deg,rgba(250,250,250,1) 0%,rgba(247,247,247,1) 100%);} #top-menu-nav > ul > li > a:hover:before, #top-menu-nav > ul > li.menu-item-has-children:hover a:before {-webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1);} /* Header > Main Header > Sticky */ .et-fixed-header #top-menu a {color: #333 !important;} body.orbit .et-fixed-header #top-menu li.current-menu-ancestor:not(.menu-btn) > a, body.orbit .et-fixed-header #top-menu li.current-menu-item:not(.menu-btn) > a {color: #5d87a1 !important;} @media (min-width: 981px) and (max-width: 1399px) { body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu li.menu-item a {font-size: 18px !important;} } @media (min-width: 981px) { .et_header_style_left #et-top-navigation {width: 74%;} 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;} 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;} } /* Header > Main Header > Menu > Dropdown */ body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu > li > ul.sub-menu {border-top: none; width: 100%; min-width: 220px; background-color: #ffffff; padding: 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); display: flex; flex-wrap: wrap; height: 278px; position: fixed; left: 0; top: 120px; right: 0; align-content: space-between; max-width: 1200px; margin: 0 auto; z-index: 9;} body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu > li > ul.sub-menu:before {content: ""; top: 0; right: 50%; background-color: #ffffff; bottom: 0; width: 50vw; position: absolute; z-index: 1;} body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu > li > ul.sub-menu:after {content: ""; top: 0; left: 50%; background-color: #ffffff; bottom: 0; width: 50vw; position: absolute; z-index: 1;} body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu > li.et-hover > ul.sub-menu {z-index: 999;} body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu > li:hover > ul.sub-menu {-webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);} body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu > li > ul.sub-menu > li {width: calc(100% / 4); z-index: 2; padding: 0;} body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu > li > ul.sub-menu > li:last-child > a {border-radius: 0 0 5px 5px;} body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu > li > ul.sub-menu > li > a {font-size: 18px; font-weight: bold; width: 100%; padding: 0; transition: all .2s ease-out; height: unset; border: none; text-transform: capitalize; color: #26475E; height: auto;} body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu > li > ul.sub-menu > li > a:hover {color: #5d87a1} body.admin-bar.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu > li > ul.sub-menu {top: 152px;} /* Header > Main Header > Menu > Dropdown > Grandchildren */ body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu > li > ul.sub-menu > li > ul.sub-menu {opacity: 1; visibility: visible; background-color: #fff; position: static; box-shadow: none; padding: 0; border: none;} body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu > li > ul.sub-menu > li > ul.sub-menu > li {width: 100%; padding: 0;} body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu > li > ul.sub-menu > li > ul.sub-menu > li > a {font-size: 15px; font-weight: normal; color: #26475E; height: auto;} body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu > li > ul.sub-menu > li > ul.sub-menu > li > a:hover {color: #5d87a1;} /* Header > Main Header > Menu > Dropdown > Services */ body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu > li.menu-item-2755 > ul.sub-menu > li {width: calc(100% / 6);} body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu > li.menu-item-2755 > ul.sub-menu > li.menu-item-2757 > a:after {content: "Our janitorial crews offer recurring and one-off cleaning and maintenance outside of your business hours to ensure your health and well-being."; font-size: 15px; font-weight: normal; color: #26475E; display: block; margin-top: 10px;} /* Header > Main Header > Menu > Dropdown > Industries */ body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu > li.menu-item-3998 > ul.sub-menu > li.menu-item-17712 {width: 75%;} body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu > li.menu-item-3998 > ul.sub-menu > li.menu-item-17712 > ul.sub-menu {width: 100%; display: flex; flex-wrap: wrap; flex-direction: column; height: 180px;} body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu > li.menu-item-3998 > ul.sub-menu > li.menu-item-17712 > ul.sub-menu > li {width: calc(100% / 5);} body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu > li.menu-item-3998 > ul.sub-menu > li.menu-item-13328 {width: 25%;} /* Header > Main Header > Menu > Dropdown > About */ body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu > li.menu-item-3968 > ul.sub-menu > li {width: calc(100% / 5);} /* Header > Main Header > Menu > Dropdown > Resources */ body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu > li.menu-item-13528 > ul.sub-menu > li {width: calc(100% / 5);} /* Header > Main Header > Menu > Dropdown > Resources > Locations */ body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu > li.menu-item-13528 > ul.sub-menu > li.menu-item-13738 {width: 25%;} body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu > li.menu-item-13528 > ul.sub-menu > li.menu-item-10418 {width: 75%;} body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu > li.menu-item-13528 > ul.sub-menu > li.menu-item-10418 > ul.sub-menu {width: 440px; display: flex; flex-wrap: wrap; flex-direction: column; height: 180px;} body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu > li.menu-item-13528 > ul.sub-menu > li.menu-item-10418 > ul.sub-menu > li {width: calc(100% / 3);} /* Header > Main Header > Search */ #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 {color: #79bde8; font-family: "FontAwesome" !important;} #et_top_search {float: unset; width: unset;} #et_search_icon:before {position: relative; top: 0; content: '\f002';} span.et_close_search_field:after {content: '\f00d'; font-size: 22px; font-weight: 100;} .et-search-form {width: 77%; max-width: 650px !important;} .et_search_form_container input {color: #79bde8; font-weight: 700; font-size: 16px !important;} .et_search_form_container input::placeholder {color: #333; font-weight: 700;} @media (max-width: 767px) { body.orbit .container.et_search_form_container {width: calc(100% - 35px);} .et_search_form_container input {font-size: 15px !important;} } @media (min-width: 650px) and (max-width: 980px) { .et_search_form_container input {font-size: 16px !important;} } @media (max-width: 980px) { #et_top_search {order: 2; margin-right: 10px; border-left: 1px solid #ddd; padding-left: 10px;} #et_search_icon:before {font-size: 22px;} span.et_close_search_field:after {font-size: 28px;} } @media (min-width: 981px) { body.orbit #main-header #et_top_search {margin: 0 0 0 10px;} .et-fixed-header #et_search_icon:before, .et-fixed-header span.et_close_search_field:after, .et-fixed-header .et_search_form_container input {color: #79bde8 !important;} .et-fixed-header .et_search_form_container input::placeholder {color: #333 !important;} } /* Header > Main Header */ body.orbit #main-header:before {content: ""; height: 120px; display: block; width: 100%; position: absolute; top: -30px; background: url('/wp-content/themes/orbitmedia/images/bg-header-new.jpg') no-repeat center top; background-size: cover;} body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu > li.menu-item > a {color: #ffffff; font-size: 15px; font-weight: bold;} body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu li.menu-item.menu-item-has-children > a:before {display: none;} body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu li.menu-item.menu-item-has-children > a:after {content: ""; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #ffffff; font-family: inherit;} body.orbit #main-header #et-top-navigation nav#top-menu-nav > ul > li > a:hover, body.orbit #main-header #et-top-navigation nav#top-menu-nav > ul > li.menu-item-has-children:hover > a {background: none !important; color: #79BDE8 !important;} body.orbit #main-header #et-top-navigation nav#top-menu-nav > ul > li.menu-item-has-children.menu-item-2757 ul {width: 750px; left: 0;} body.orbit #main-header #et-top-navigation #et_mobile_nav_menu .mobile_nav .mobile_menu_bar .bar {background-color: #ffffff;} /* Header > Main Header > Button */ body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu > li.menu-btn {padding-left: 60px;} body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu > li.menu-btn a {border-radius: 44px; font-size: 16px !important;} body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu > li.menu-btn a:after {display: none !important;} body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu > li.menu-btn a:hover {background-color: #79BDE8 !important; color: #ffffff !important; border-color: #79BDE8 !important; padding-left: 20px !important; padding-right: 20px !important;} /* Header > Main Header > Fixed */ body.orbit #main-header.et-fixed-header #et-top-navigation nav#top-menu-nav ul#top-menu > li.menu-item > a {color: #ffffff !important;} /* Header > Main Header > Logo */ body.orbit #main-header .logo_container a {width: 100%; display: block;} body.orbit #main-header .logo_container #logo {display: block;} @media (max-width: 1399px) { body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu li.menu-item a {font-size: 15px !important;} body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu > li.menu-btn {padding-left: 40px;} } @media (max-width: 1299px) { body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu > li.menu-btn {padding-left: 20px;} } @media (max-width: 1199px) { body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu > li.menu-item > a {font-size: 14px !important; padding-left: 15px;} body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu li.menu-item.menu-item-has-children a {padding-right: 15px; padding-left: 15px;} body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu li.menu-item.menu-item-has-children > a:after {right: 0;} body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu > li.menu-btn {padding-left: 0;} body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu > li.menu-btn a {border-radius: 44px; font-size: 14px !important;} } @media (min-width: 981px) { body.orbit #main-header.et-fixed-header {height: 90px;} body.orbit #main-header.et-fixed-header .logo_container {max-width: 306px;} body.orbit.admin-bar.et_secondary_nav_enabled #main-header {top: 62px !important;} } @media (max-width: 980px) { body.orbit #main-header {height: 90px; position: fixed; left: 0; right: 0; top: 0 !important;} body.orbit #main-header:before {height: 90px; top: 0;} body.orbit #main-header .logo_container {max-width: 208px; height: 16px; padding-left: 0; position: static; margin-left: 50px; margin-bottom: 5px;} body.orbit #main-header .et_menu_container {padding: 0 15px; justify-content: center; align-items: flex-end;} body.orbit #main-header #top-menu {display: block;} body.orbit #main-header #top-menu > li:not(:last-child) {display: none;} body.orbit.admin-bar.et_secondary_nav_enabled #main-header {top: 0 !important;} body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu > li.menu-btn a {padding: 6px 8px !important;} body.orbit #main-header #et-top-navigation nav#top-menu-nav ul#top-menu > li.menu-btn a:hover {padding-left: 8px !important; padding-right: 8px !important;} } /* Header > Mobile Menu > Hamburger */ body.orbit #main-header #et-top-navigation #et_mobile_nav_menu {margin: 0 10px;} body.orbit #main-header #et-top-navigation #et_mobile_nav_menu .mobile_nav .mobile_menu_bar {top: unset; width: 40px; height: 40px; padding-bottom: 0; position: absolute; left: 15px;} body.orbit #main-header #et-top-navigation #et_mobile_nav_menu .mobile_nav .mobile_menu_bar .bar {width: 30px; left: 5px; background-color: #ffffff;} body.orbit #main-header #et-top-navigation #et_mobile_nav_menu .mobile_nav .mobile_menu_bar .bar--one {top: 9px;} body.orbit #main-header #et-top-navigation #et_mobile_nav_menu .mobile_nav .mobile_menu_bar .bar--two {top: 19px;} body.orbit #main-header #et-top-navigation #et_mobile_nav_menu .mobile_nav .mobile_menu_bar .bar--three {top: 29px;} /* Mobile Menu ul */ body.orbit #main-header #et-top-navigation #et_mobile_nav_menu .et_mobile_menu {border-top: none; top: 75px; padding: 0; background: #fff;} /* Mobile Menu ul when openend - Border Top */ body.orbit #main-header #et-top-navigation #et_mobile_nav_menu .et_mobile_menu:before {content: ''; position: absolute; width: 100%; height: 2px; background: rgba(0,0,0,.15);} /* General - List Item - first child variation */ body.orbit #main-header #et-top-navigation #et_mobile_nav_menu .et_mobile_menu > li:first-child {margin-top: 2px;} /* General - List Item has children pseudo element :after - vertical rule */ body.orbit #main-header #et-top-navigation #et_mobile_nav_menu .et_mobile_menu .menu-item-has-children:after {content: ''; background: rgba(0,0,0,.15); width: 1px; height: 30px; position: absolute; top: 10px; right: 60px;} /* General - List Item Anchor */ body.orbit #main-header #et-top-navigation #et_mobile_nav_menu .et_mobile_menu li a { padding: 13px 20px 13px 0; color: #333; } /* General - Primary Menu Item "has children" Toggle Caret */ body.orbit #main-header #et-top-navigation #et_mobile_nav_menu .et_mobile_menu .menu-item-has-children .caret { color: #79bde8; width: 60px; } /* General - Change Caret Content to Chevron */ body.orbit #main-header #et-top-navigation #et_mobile_nav_menu .et_mobile_menu .menu-item-has-children .caret:before { font-family: "FontAwesome"; } /*-------------- Level 1 --------------*/ /* Level 1 - List Item */ body.orbit #main-header #et-top-navigation #et_mobile_nav_menu .et_mobile_menu > li { padding-left: 20px; padding-right: 20px; border-bottom: none; } /* Level 1 - List Item Anchor */ body.orbit #main-header #et-top-navigation #et_mobile_nav_menu .et_mobile_menu > li > a { font-family: "avenir-next-lt-pro", sans-serif; font-weight: 500; font-size: 18px; border-bottom: 1px solid rgba(0,0,0,.15); position: relative; padding-right: 45px; } body.orbit #main-header #et-top-navigation #et_mobile_nav_menu .et_mobile_menu > li:last-child > a { border-bottom: none; } /* Menu CTA Button when in mobile menu */ body.orbit #main-header #et-top-navigation #et_mobile_nav_menu .et_mobile_menu .menu-btn {padding-top: 10px; padding-bottom: 10px; border-bottom: none; order: 1; background: #fff; padding-left: 20px; padding-right: 20px; text-align: center;} body.orbit #main-header #et-top-navigation #et_mobile_nav_menu .et_mobile_menu .menu-btn a {display: inline-block !important; position: relative; margin-left: 0; padding: 13px 30px !important; width: 100%; border-bottom: 2px solid #79bde8;} /* Level 1 - Has Children Sub Menu */ body.orbit #main-header #et-top-navigation #et_mobile_nav_menu .et_mobile_menu .menu-item-has-children > .caret:before { font-weight: 500; /* lightens the weight of the glyph */ content: '\f078'; /* downward chevron */ } body.orbit #main-header #et-top-navigation #et_mobile_nav_menu .et_mobile_menu .menu-item-has-children.open > .caret:before { content: '\f077'; /* upward chevron */ } /*-------------- Level 2 --------------*/ /* Level 2 - Sub Menu List Item that has a Sub Menu */ /* NOTE: I just wanted to differentiate the pseudo element on the children items that had a sub menu of their own */ body.orbit #main-header #et-top-navigation #et_mobile_nav_menu .et_mobile_menu .menu-item-has-children .sub-menu .menu-item-has-children .caret:before { font-weight: 700; content: '\f0d7'; /* downward caret */ } body.orbit #main-header #et-top-navigation #et_mobile_nav_menu .et_mobile_menu .menu-item-has-children .sub-menu .menu-item-has-children.open > .caret:before { content: '\f0d8'; /* upward caret */ } /* Level 2 - Sub Menu Container */ body.orbit #main-header #et-top-navigation #et_mobile_nav_menu .et_mobile_menu .menu-item-has-children.open .sub-menu { border-bottom: 1px solid rgba(0,0,0,.15); /*adds border to the top of sub-menu for better separation between parent item and children.*/ } /* Level 2 - Sub Menu List Item */ body.orbit #main-header #et-top-navigation #et_mobile_nav_menu .et_mobile_menu .menu-item-has-children .sub-menu li { padding-left: 10px; border-bottom: none; } /* Level 2 - Sub Menu List Item Anchor */ body.orbit #main-header #et-top-navigation #et_mobile_nav_menu .et_mobile_menu .menu-item-has-children .sub-menu li a { padding-left: 15px; position: relative; font-weight: 500; font-size: 16px; border-bottom: 1px solid rgba(0,0,0,.1); } body.orbit #main-header #et-top-navigation #et_mobile_nav_menu .et_mobile_menu .menu-item-has-children .sub-menu li:last-child a { border-bottom: none } /* Level 2 - Sub Menu List Item Anchor - Pseudo Element - bullet */ body.orbit #main-header #et-top-navigation #et_mobile_nav_menu .et_mobile_menu .menu-item-has-children.open .sub-menu li a:before { content: ''; position: absolute; height: 4px; width: 4px; background: #79bde8; left: 2px; top: 23px; border-radius: 100%; } body.orbit #main-header #et-top-navigation #et_mobile_nav_menu .et_mobile_menu .menu-item-has-children.open .sub-menu li li a:before { background: #999; border-radius: 100%; } /*-------------- Open State --------------*/ /* Hamburger Horizontal Line Overrides */ body.orbit #main-header #et-top-navigation #et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar .bar--one { transform: rotate(45deg); top: 19px; } body.orbit #main-header #et-top-navigation #et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar .bar--three { transform: rotate(-45deg); top: 19px; } /* Mobile Menu ul */ .mobile_nav.opened ul.et_mobile_menu { display: flex; flex-direction: column; box-shadow: rgba(93, 135, 161, 0.85) 0px 2000px 0px 2000px; /* this creates a faux overlay to separate the bottom of the mobile nav from the content underneath. */ } /*-------------- Active State --------------*/ /* List Items */ body.orbit #main-header #et-top-navigation #et_mobile_nav_menu .et_mobile_menu li.current-menu-item > a, body.orbit #main-header #et-top-navigation #et_mobile_nav_menu .et_mobile_menu li.current-menu-ancestor > a { color: #5d87a1; } /*-------------- Hover State --------------*/ /* NOTE: there shouldn't be a hover state for mobile, but for some reason, one is specified in another CSS style sheet. This simply overrides that. */ .nav ul li a:hover, #et_mobile_nav_menu li a:hover{ opacity: unset; background-color: unset; } /**********/ /* Footer */ /**********/ body.orbit #page-container #main-footer {background: #ffffff url('/wp-content/themes/orbitmedia/images/bg-footer-new.jpg') no-repeat center top; background-size: cover; position: relative; padding: 80px 0 30px;} /* Footer > Logo */ body.orbit #page-container #main-footer .footer-logo {display: block; max-width: 294px; margin: 0 0 15px;} /* Footer > Text */ body.orbit #page-container #main-footer p.tagline {font-size: 24px; color: #ffffff; margin-bottom: 60px; max-width: 290px; line-height: 1.167;} body.orbit #page-container #main-footer .connect-area p {font-size: 12px; color: #ffffff; margin-bottom: 8px;} body.orbit #page-container #main-footer .connect-area p a {color: #ffffff; font-weight: normal;} body.orbit #page-container #main-footer .connect-area p a:before {display: none;} body.orbit #page-container #main-footer .connect-area p a:hover {color: #79BDE8;} /* Footer > Social */ body.orbit #page-container #main-footer .social-area {margin-top: 15px;} body.orbit #page-container #main-footer .social-area p {margin: 0;} body.orbit #page-container #main-footer .social-area a {background-size: contain; width: 26px; height: 26px; display: inline-block; background-repeat: no-repeat; background-position: center top;} body.orbit #page-container #main-footer .social-area a + a {margin-left: 16px;} body.orbit #page-container #main-footer .social-area a.facebook {background-image: url('/wp-content/themes/orbitmedia/images/facebook-icon-social-graphic.png');} body.orbit #page-container #main-footer .social-area a.linkedin {background-image: url('/wp-content/themes/orbitmedia/images/linkedin-icon-social-graphic.png'); width: 25px; height: 24px;} body.orbit #page-container #main-footer .social-area a.instagram {background-image: url('/wp-content/themes/orbitmedia/images/instagram-icon-social-graphic.png'); width: 23px; height: 23px;} body.orbit #page-container #main-footer .social-area span {display: none;} /* Footer > Links */ body.orbit #page-container #main-footer #footer-widgets {display: flex; flex-direction: row; padding: 0; flex-wrap: wrap; justify-content: space-between;} body.orbit #page-container #main-footer #footer-widgets .footer-widget {margin: 0 !important;} body.orbit #page-container #main-footer #footer-widgets .footer-widget.widget-services {max-width: 220px;} body.orbit #page-container #main-footer #footer-widgets .footer-widget.widget-resources {max-width: 185px;} body.orbit #page-container #main-footer #footer-widgets .footer-widget.widget-about {max-width: 205px;} body.orbit #page-container #main-footer #footer-widgets .footer-widget .et_pb_widget {float: none;} body.orbit #page-container #main-footer #footer-widgets .footer-widget h4.title {font-size: 12px; font-weight: normal; text-transform: uppercase; letter-spacing: 1px; color: #ffffff !important; margin-bottom: 15px;} body.orbit #page-container #main-footer #footer-widgets .footer-widget .menu {margin-bottom: 25px; line-height: unset;} body.orbit #page-container #main-footer #footer-widgets .footer-widget .menu li {padding-left: 0; margin: 0 0 5px; line-height: 1.2; font-size: 12px;} body.orbit #page-container #main-footer #footer-widgets .footer-widget .menu li:before {border: none; border-radius: unset; left: unset;} body.orbit #page-container #main-footer #footer-widgets .footer-widget .menu li a {color: #ffffff; font-size: 12px;} body.orbit #page-container #main-footer #footer-widgets .footer-widget .menu li a:hover {color: #79BDE8 !important;} body.orbit #page-container #main-footer #footer-widgets .footer-widget .menu li ul {margin-top: 10px; margin-bottom: 10px;} /* Footer > Copyright */ body.orbit #page-container #main-footer #footer-bottom {width: 100%; border-top: 1px solid rgba(217,217,217,0.5); padding: 25px 0 0; background: none;} body.orbit #page-container #main-footer #footer-bottom .copyright-area {display: flex; justify-content: space-between; max-width: 575px; margin: 0 auto;} body.orbit #page-container #main-footer #footer-bottom .copyright-area a {color: #ffffff; font-size: 12px; color: #ffffff; text-transform: uppercase; letter-spacing: 1px; font-weight: normal;} body.orbit #page-container #main-footer #footer-bottom .copyright-area a:hover {color: #79BDE8;} /* Footer > Responsive */ @media (min-width: 981px) { body.orbit #page-container #main-footer #footer-widgets .footer-widget {width: 20% !important; margin: 0 !important;} body.orbit #page-container #main-footer #footer-widgets .footer-widget:first-child {width: 40% !important;} body.orbit #page-container #main-footer #footer-widgets .footer-widget:nth-child(2) {margin-left: auto;} body.orbit #page-container #main-footer #footer-widgets .footer-widget .widget_nav_menu {border-left: 1px solid #90a6b3; padding-left: 27px; min-height: 140px;} } @media (max-width: 980px) { body.orbit #page-container #main-footer .container {max-width: 500px;} body.orbit #page-container #main-footer #footer-widgets .footer-widget.widget-logo {order: 1;} body.orbit #page-container #main-footer #footer-widgets .footer-widget.widget-connect {order: 2;} body.orbit #page-container #main-footer #footer-widgets .footer-widget.widget-services {order: 3;} body.orbit #page-container #main-footer #footer-widgets .footer-widget.widget-about {order: 4;} body.orbit #page-container #main-footer #footer-widgets .footer-widget.widget-resources {order: 5;} body.orbit #page-container #main-footer #footer-widgets .footer-widget.widget-services .widget_nav_menu {border: none; padding-top: 0; margin-bottom: 15px !important;} body.orbit #page-container #main-footer #footer-widgets .footer-widget:nth-child(n) {margin: 0 !important; width: calc(50% - 20px) !important; padding-top: 0; max-width: 100%;} body.orbit #page-container #main-footer #footer-widgets .footer-widget:first-child {width: 100% !important; border-bottom: none;} body.orbit #page-container #main-footer #footer-widgets .footer-widget:nth-child(2) {border-top: none;} body.orbit #page-container #main-footer #footer-widgets .footer-widget .widget_nav_menu {border-left: none; border-top: 1px solid #90a6b3; padding-left: 0; padding-top: 20px;} body.orbit #page-container #main-footer #footer-widgets .footer-widget .menu {margin-bottom: 0;} body.orbit #page-container #main-footer #footer-bottom {width: calc(50% - 20px); margin-top: 15px; padding-top: 15px;} body.orbit #page-container #main-footer #footer-bottom .copyright-area {flex-direction: column;} body.orbit #page-container #main-footer #footer-bottom .copyright-area a {text-transform: initial;} body.orbit #page-container #main-footer #footer-bottom .copyright-area a + a {margin-left: 0; margin-top: 3px;} } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// 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 (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; } } @media (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*/ } } @media (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 (max-width: 980px) { body.orbit #main-footer #footer-bottom .footer-credits-menu { order: 2; } #footer-info { width: 100%; } } @media (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(0,0,0,.15); border-right: 1px solid rgba(0,0,0,.15); padding-left: 20px; padding-right: 20px; margin-left: 20px; margin-right: 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: #000; opacity: 1; } } /*------------------------------------------------------------------------------------------------------------------------------- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ ================================================================================================================================= STRUCTURAL COMPONENTS AND MODIFIERS **previosly pre-pended with "COMMON/GLOBAL", but I may be able to remove this if it makes sense ================================================================================================================================= \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ ---------------------------------------------------------------------------------------------------------------------------------*/ /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- ALIGNMENTS ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= Vertical Align ===============================================================================*/ /* NOTE: Use to vertically align column content. Add class to both columns via row and turn on 'Equalize Column Heights' toggle */ /* Base Styling */ .oms-vertical-align { display: flex; flex-direction: column; justify-content: center; } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- BACKGROUNDS ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= Black BG ===============================================================================*/ /* Base Styling */ .oms-bg-black { background-color: #000; } /*================================================================================= Slate BG ===============================================================================*/ /* Base Styling */ .oms-bg-slate, body.orbit .et_pb_section.oms-bg-slate { /* NOTE: I had to add in the second selector above because there was a conflict in Divi's Visual Builder. */ background-image: linear-gradient(300deg, rgba(93,135,161,1) 0%, rgba(41,79,103,1) 100%) !important; background: none; } /*================================================================================= Light-Gray BG ===============================================================================*/ /* Base Styling */ .oms-bg-gray-light { background-color: #f5f5f5; } /* Special Variations */ .oms-overlay-white + div.et_pb_section.oms-bg-gray-light, .oms-bg-gray-light + div.et_pb_section.oms-bg-gray-light { /* needs these extra selectors to override Visual Builder. */ background-color: rgb(228,229,230); background-image: linear-gradient(0deg,rgba(245,245,245,1) 0%,rgba(255,255,255,1) 100%)!important; } /*================================================================================= White BG ===============================================================================*/ /* Base Styling */ .oms-bg-white { background-color: #ffffff; } /* Special Variations */ .oms-bg-white + div.et_pb_section.oms-bg-white{ /* needs these extra selectors to override Visual Builder. */ background-color: rgb(228,229,230); background-image: linear-gradient(0deg,rgba(255,255,255,1) 0%, rgba(245,245,245,1) 100%)!important; } /*================================================================================= Transitional BG - One ===============================================================================*/ /* Base Styling */ body.orbit .et_pb_section.oms-bg-transitional-one { background-image: linear-gradient(180deg,#f5f5f5 50%,#fff 50%)!important; background: none; } /*================================================================================= Transitional BG - Two ===============================================================================*/ /* Base Styling */ body.orbit .et_pb_section.oms-bg-transitional-two { background-image: linear-gradient(180deg,#fff 50%,#f5f5f5 50%)!important; background: none; } /*================================================================================= Background Frame Variation ===============================================================================*/ /* Base Styling */ .oms-bg-frame:before, .oms-bg-frame:after { content: ''; position: absolute; top: 0; bottom: 0; width: 20px; background: #fff; } .oms-bg-frame:before { left: 0; } .oms-bg-frame:after { right: 0; } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- COLUMNS ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= BASE COLUMNS & CONTAINER STYLING ===============================================================================*/ /* 767px and below --------------*/ @media (max-width: 767px) { /* Basic Styling */ /* NOTE: Removes margin bottom on columns */ .et_pb_column { margin-bottom: 0px !important; } } /* 768px to 980px --------------*/ @media (min-width: 768px) and (max-width: 980px) { /* Basic Styling */ .et_pb_column:not(:last-of-type) { margin-bottom: 25px !important; } } /*================================================================================= FLEX COLUMN ===============================================================================*/ /* Flexbox Container */ .oms-col-flex { display: flex; flex-wrap: wrap; justify-content: center; margin-left: -15px; margin-bottom: 25px !important; /* This always applies a consistent margin to the bottom of the containing element. */ width: auto !important; float: none; /* This is really useful, to disable this... especially helps in instances when only one module is used within a column. */ } .oms-col-flex.et_pb_column:last-child, .oms-col-flex.et_pb_column.et-last-child { margin-right: -15px !important; /* this overrides the default Divi styling that wants to set the margin-right to ZERO on the last child. */ } /* Flex Items */ /* General */ .oms-col-flex.et_pb_column .et_pb_module { margin-left: 15px; margin-right: 15px; margin-top: 30px; } .oms-col-flex.et_pb_column .et_pb_module.et_pb_image { margin-bottom: 0 !important; /* This override is necessary to OVERRIDE the previous override... a little confusing. This allows for cleaner spacing for Client Logo Blocks. */ } /* Column Types */ /* NOTE: the different column/row types are listed in the media queries below. */ /* Logos Variation */ .oms-col-flex.logos.et_pb_column { align-items: center; /* This helps for logo blocks, in case someone uploads graphic that isn't 400x225. */ } .oms-col-flex.logos.et_pb_column .et_pb_module.et_pb_image { display: flex; justify-content: center; } .oms-col-flex.logos.et_pb_column .et_pb_module.et_pb_image .et_pb_image_wrap { width: 75%; max-width: 125px; } /* Divider/Border Variation */ /* NOTE: In theory, just adding .oms-divider to the oms-col-flex should be enough to enable the border. */ .oms-col-flex.oms-divider { overflow: hidden; } .oms-col-flex.oms-divider.et_pb_column { margin-left: -30px; } .oms-col-flex.oms-divider.et_pb_column:last-child, .oms-col-flex.oms-divider.et_pb_column.et-last-child { margin-right: -30px !important; /* this overrides the default Divi styling that wants to set the margin-right to ZERO on the last child. */ } .oms-col-flex.oms-divider.et_pb_column .et_pb_module { position: relative; border-top: 1px solid rgba(0,0,0,.2); border-left: 1px solid rgba(0,0,0,.2); margin-left: 0; margin-right: 0; margin-top: 0; padding: 40px 40px 15px; } /* more details in the media queries below. */ /* Event Details Variation */ .oms-col-flex.oms-event-details.et_pb_column .et_pb_module { /* NOTE: The styling below quickly overwrites some details that I spec'd above. */ margin-top: 0 !important; margin-left: 5px; margin-right: 5px; } .oms-col-flex.oms-event-details.et_pb_column .et_pb_module p { margin-bottom: 0; } /* Sibling Modules */ .oms-col-flex.oms-event-details.et_pb_column .et_pb_module + .et_pb_module { border-left: 1px solid #000; padding-left: 10px; } /* 767px and below --------------*/ @media (max-width: 767px) { /* Flexbox Container */ .oms-col-flex.et_pb_column { margin-left: -10px; } .oms-col-flex.et_pb_column:last-child, .oms-col-flex.et_pb_column.et-last-child { margin-right: -10px !important; /* this adjustment is similar to above, and coincides with the margin-right from the flex item listed below. */ } /* Flex Items */ .oms-col-flex.et_pb_column .et_pb_module { margin-left: 10px; margin-right: 10px; margin-top: 20px !important; } /* Remove Margin Top */ .oms-col-flex.col-2-2-1.et_pb_column .et_pb_module:nth-of-type(-n+1), .oms-col-flex.col-3-2-1.et_pb_column .et_pb_module:nth-of-type(-n+1), .oms-col-flex.col-4-2-1.et_pb_column .et_pb_module:nth-of-type(-n+1), .oms-col-flex.col-6-3-2.et_pb_column .et_pb_module:nth-of-type(-n+2), .oms-col-flex.col-6-4-3.et_pb_column .et_pb_module:nth-of-type(-n+3), .oms-col-flex.col-8-4-4.et_pb_column .et_pb_module:nth-of-type(-n+4) { margin-top: 0 } /* 2-2-1, 3-2-1 and 4-2-1 */ .oms-col-flex.col-2-2-1.et_pb_column .et_pb_module, .oms-col-flex.col-3-2-1.et_pb_column .et_pb_module, .oms-col-flex.col-4-2-1.et_pb_column .et_pb_module { flex: 0 0 calc(100% - 20px); } /* 6-3-2 */ .oms-col-flex.col-6-3-2.et_pb_column .et_pb_module { flex: 0 0 calc(50% - 20px); } /* 6-4-3 */ .oms-col-flex.col-6-4-3.et_pb_column .et_pb_module { flex: 0 0 calc(33.33% - 20px); } /* 8-4-4 */ .oms-col-flex.col-8-4-4.et_pb_column .et_pb_module { flex: 0 0 calc(25% - 20px); } /* Border Variation */ /* NOTE: These variations piggy-back on some of the code directly above. */ /* Flexbox Container WITH BORDERS */ .oms-col-flex.oms-divider.et_pb_column { margin-left: 0; margin-bottom: 0 !important; /* I'm removing this margin from BORDER variations because it's unnecessary. */ } .oms-col-flex.oms-divider.et_pb_column:last-child, .oms-col-flex.oms-divider.et_pb_column.et-last-child { margin-right: 0px !important; /* this overrides the default Divi styling that wants to set the margin-right to ZERO on the last child. */ } /* Flex Items WITH BORDERS */ .oms-col-flex.oms-divider.et_pb_column .et_pb_module { padding: 25px 0 0; margin-top: 0 !important } .oms-col-flex.col-2-2-1.oms-divider.et_pb_column .et_pb_module, .oms-col-flex.col-3-2-1.oms-divider.et_pb_column .et_pb_module, .oms-col-flex.col-4-2-1.oms-divider.et_pb_column .et_pb_module { border-left: none; } /* 2-2-1, 3-2-1 and 4-2-1 */ .oms-col-flex.col-2-2-1.oms-divider.et_pb_column .et_pb_module, .oms-col-flex.col-3-2-1.oms-divider.et_pb_column .et_pb_module, .oms-col-flex.col-4-2-1.oms-divider.et_pb_column .et_pb_module { flex: 0 0 100%; } } /* 768px to 980px --------------*/ @media (min-width: 768px) and (max-width: 980px) { /* Flex Items */ /* NOTE: This is a more traditional breakpoint, and specifies styling for 2-2-1 and 8-4-4. */ /* Remove Margin Top */ .oms-col-flex.col-2-2-1.et_pb_column .et_pb_module:nth-of-type(-n+2), .oms-col-flex.col-8-4-4.et_pb_column .et_pb_module:nth-of-type(-n+4) { margin-top: 0 } /* 2-2-1*/ .oms-col-flex.col-2-2-1.et_pb_column .et_pb_module { flex: 0 0 calc(50% - 30px); } /* 8-4-4 */ .oms-col-flex.col-8-4-4.et_pb_column .et_pb_module { flex: 0 0 calc(25% - 30px); } /* Border Variation */ /* NOTE: These variations piggy-back on some of the code directly above. Only 2-2-1 is styled below because we don't use the divider for 8-4-4. */ .oms-col-flex.col-2-2-1.oms-divider.et_pb_column .et_pb_module:nth-child(2n+1) { border-left: none; } .oms-col-flex.col-2-2-1.oms-divider.et_pb_column .et_pb_module:nth-of-type(-n+2) { border-top: none; padding-top: 0; } /* 2-2-1 */ .oms-col-flex.col-2-2-1.oms-divider.et_pb_column .et_pb_module { flex: 0 0 50%; } } /* 768px to 1024px --------------*/ @media (min-width: 768px) and (max-width: 1024px) { /* Flex Items */ /* NOTE: This is a unique breakpoint, created to optimize visual experience for 3-2-1 and 6-4-3. */ /* Remove Margin Top */ .oms-col-flex.col-3-2-1.et_pb_column .et_pb_module:nth-of-type(-n+2), .oms-col-flex.col-6-3-2.et_pb_column .et_pb_module:nth-of-type(-n+3), .oms-col-flex.col-6-4-3.et_pb_column .et_pb_module:nth-of-type(-n+4) { margin-top: 0 } /* 3-2-1 */ .oms-col-flex.col-3-2-1.et_pb_column .et_pb_module { flex: 0 0 calc(50% - 30px); } /* 6-3-2 */ .oms-col-flex.col-6-3-2.et_pb_column .et_pb_module { flex: 0 0 calc(33.33% - 30px); } /* 6-4-3 */ .oms-col-flex.col-6-4-3.et_pb_column .et_pb_module { flex: 0 0 calc(25% - 30px); } /* Border Variation */ /* NOTE: These variations piggy-back on some of the code directly above. Only 3-2-1 is styled below because we don't use the divider for 6-4-3. */ .oms-col-flex.col-3-2-1.oms-divider.et_pb_column .et_pb_module:nth-child(2n+1) { border-left: none; } .oms-col-flex.col-3-2-1.oms-divider.et_pb_column .et_pb_module:nth-of-type(-n+2) { border-top: none; padding-top: 0; } /* 3-2-1 */ .oms-col-flex.col-3-2-1.oms-divider.et_pb_column .et_pb_module { flex: 0 0 50%; } } /* 768px to 1199 --------------*/ @media (min-width: 768px) and (max-width: 1199px) { /* Flex Items */ /* NOTE: This is a unique breakpoint, created to optimize visual experience for 4-2-1... trying to cram 4 columns of text all the way down to 981px is not legible. */ /* Remove Margin Top */ .oms-col-flex.col-4-2-1.et_pb_column .et_pb_module:nth-of-type(-n+2) { margin-top: 0 } /* 4-2-1 */ .oms-col-flex.col-4-2-1.et_pb_column .et_pb_module { flex: 0 0 calc(50% - 30px); } /* Border Variation */ /* NOTE: These variations piggy-back on some of the code directly above. */ .oms-col-flex.col-4-2-1.oms-divider.et_pb_column .et_pb_module:nth-child(2n+1) { border-left: none; } .oms-col-flex.col-4-2-1.oms-divider.et_pb_column .et_pb_module:nth-of-type(-n+2) { border-top: none; padding-top: 0; } /* 4-2-1 */ .oms-col-flex.col-4-2-1.oms-divider.et_pb_column .et_pb_module { flex: 0 0 50%; } } @media (min-width: 981px) { /* Flex Items */ /* NOTE: This is a more traditional breakpoint, and specifies styling for 2-2-1 and 8-4-4. */ /* Remove Margin Top */ .oms-col-flex.col-2-2-1.et_pb_column .et_pb_module:nth-of-type(-n+2), .oms-col-flex.col-8-4-4.et_pb_column .et_pb_module:nth-of-type(-n+8) { margin-top: 0 } /* 2-2-1 */ .oms-col-flex.col-2-2-1.et_pb_column .et_pb_module { flex: 0 0 calc(50% - 30px); } /* 8-4-4 */ .oms-col-flex.col-8-4-4.et_pb_column .et_pb_module { flex: 0 0 calc(12.5% - 30px); } /* Border Variation */ /* NOTE: These variations piggy-back on some of the code directly above. Only 2-2-1 is styled below because we don't use the divider for 8-4-4. */ .oms-col-flex.col-2-2-1.oms-divider.et_pb_column .et_pb_module:nth-child(2n+1) { border-left: none; } .oms-col-flex.col-2-2-1.oms-divider.et_pb_column .et_pb_module:nth-of-type(-n+2) { border-top: none; padding-top: 0; } /* 2-2-1 */ .oms-col-flex.col-2-2-1.oms-divider.et_pb_column .et_pb_module { flex: 0 0 50%; } } @media (min-width: 1025px) { /* Flex Items */ /* NOTE: This is a unique breakpoint, created to optimize visual experience for 3-2-1 and 6-4-3. */ /* Remove Margin Top */ .oms-col-flex.col-3-2-1.et_pb_column .et_pb_module:nth-of-type(-n+3), .oms-col-flex.col-6-3-2.et_pb_column .et_pb_module:nth-of-type(-n+6), .oms-col-flex.col-6-4-3.et_pb_column .et_pb_module:nth-of-type(-n+6) { margin-top: 0 } /* 3-2-1 */ .oms-col-flex.col-3-2-1.et_pb_column .et_pb_module { flex: 0 0 calc(33.333333% - 30px); } /* 6-3-2 */ .oms-col-flex.col-6-3-2.et_pb_column .et_pb_module { flex: 0 0 calc(16.66% - 30px); } /* 6-4-3 */ .oms-col-flex.col-6-4-3.et_pb_column .et_pb_module { flex: 0 0 calc(16.66% - 30px); } /* Border Variation */ /* NOTE: These variations piggy-back on some of the code directly above. Only 3-2-1 is styled below because we don't use the divider for 6-4-3. */ .oms-col-flex.col-3-2-1.oms-divider.et_pb_column .et_pb_module:nth-child(3n+1) { border-left: none; } .oms-col-flex.col-3-2-1.oms-divider.et_pb_column .et_pb_module:nth-of-type(-n+3) { border-top: none; padding-top: 0; } /* 3-2-1 */ .oms-col-flex.col-3-2-1.oms-divider.et_pb_column .et_pb_module { flex: 0 0 33.333333%; } } @media (min-width: 1200px) { /* Flex Items */ /* Remove Margin Top */ .oms-col-flex.col-4-2-1.et_pb_column .et_pb_module:nth-of-type(-n+4) { margin-top: 0 } /* 4-2-1 */ .oms-col-flex.col-4-2-1.et_pb_column .et_pb_module { flex: 0 0 calc(25% - 30px); } /* Border Variation */ /* NOTE: These variations piggy-back on some of the code directly above. */ .oms-col-flex.col-4-2-1.oms-divider.et_pb_column .et_pb_module:nth-child(4n+1) { border-left: none; } .oms-col-flex.col-4-2-1.oms-divider.et_pb_column .et_pb_module:nth-of-type(-n+4) { border-top: none; padding-top: 0; } /* 4-2-1 */ .oms-col-flex.col-4-2-1.oms-divider.et_pb_column .et_pb_module { flex: 0 0 25%; } } /*================================================================================= GRID COLUMN ===============================================================================*/ /* Establish Grid */ .oms-col-grid.et_pb_column { display: grid; margin-bottom: 25px !important; } /* Layout Types */ .oms-col-grid.col-2-1-1.et_pb_column, .oms-col-grid.col-2-2-1.et_pb_column, .oms-col-grid.col-3-2-1.et_pb_column, .oms-col-grid.col-4-2-1.et_pb_column, .oms-col-grid.col-4-2-2.et_pb_column, .oms-col-grid.col-6-4-3.et_pb_column { /* grid-template-columns for each of these selectors are available in media queries below. */ } /* Gutter Types */ /* Common Gutters */ .oms-col-grid.small-gap.et_pb_column, .oms-col-grid.regular-gap.et_pb_column { grid-gap: 20px; } /* Card Modules */ /* Common Gutters */ .oms-col-grid .card { width: 100%; } /* Special Variations */ /* No Margin */ .oms-col-grid.no-marg.et_pb_column .et_pb_module.et_pb_image { margin-bottom: 0 !important; /* This eliminates the margin-bottom that I specify for general image modules in this CSS */ } /* Horizontal and Vertical Rules */ .oms-col-grid.oms-divider.et_pb_column { grid-gap: 0; } .oms-col-grid.oms-divider.et_pb_column .et_pb_module { border-top: 1px solid rgba(255,255,255,.15); /* I chose this is the more "default" style because I thought it was easier to write - less characters. */ } .oms-bg-white .oms-col-grid.oms-divider.et_pb_column .et_pb_module, .oms-bg-gray-light .oms-col-grid.oms-divider.et_pb_column .et_pb_module { border-color: rgba(0,0,0,0.2) !important; /* This is the exception to the border color... again, I just thought it'd be easier to write. */ } /* 767px and below --------------*/ @media (max-width: 767px) { /* 1 Column */ .oms-col-grid.col-2-1-1.et_pb_column, .oms-col-grid.col-2-2-1.et_pb_column, .oms-col-grid.col-3-2-1.et_pb_column, .oms-col-grid.col-4-2-1.et_pb_column { grid-template-columns: repeat(1, 1fr); } /* 4-2-2 Column */ .oms-col-grid.col-4-2-2.et_pb_column { grid-template-columns: repeat(2, 1fr); } /* 6-4-3 Column */ .oms-col-grid.col-6-4-3.et_pb_column { grid-template-columns: repeat(3, 1fr); } } /* 768px to 980px --------------*/ @media (min-width: 768px) and (max-width: 980px) { /* 2-2-1 Column */ .oms-col-grid.col-2-2-1.et_pb_column { grid-template-columns: repeat(2, 1fr); } } /* 768px to 1024px --------------*/ @media (min-width: 768px) and (max-width: 1024px) { /* 3-2-1 Column */ .oms-col-grid.col-3-2-1.et_pb_column { grid-template-columns: repeat(2, 1fr); } /* 6-4-3 Column */ .oms-col-grid.col-6-4-3.et_pb_column { grid-template-columns: repeat(4, 1fr); } } /* 768px to 1199 --------------*/ @media (min-width: 768px) and (max-width: 1199px) { /* 4-2-1 Column and 4-2-2 Column */ .oms-col-grid.col-4-2-1.et_pb_column, .oms-col-grid.col-4-2-2.et_pb_column { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 768px) { /* Gutters */ .oms-col-grid.regular-gap.et_pb_column { grid-gap: 30px; } } /* 980px and below --------------*/ @media (max-width: 980px) { /* 2-1-1 Column */ .oms-col-grid.col-2-1-1.et_pb_column { grid-template-columns: repeat(1, 1fr); } /* Horizontal and Vertical Rules */ .oms-col-grid.col-2-1-1.oms-divider.et_pb_column .et_pb_module { padding: 35px; } .oms-col-grid.col-2-1-1.oms-divider.et_pb_column .et_pb_module:first-child { border-top: none; } } @media (min-width: 981px) { /* 2 Column on desktop */ .oms-col-grid.col-2-1-1.et_pb_column, .oms-col-grid.col-2-2-1.et_pb_column { grid-template-columns: repeat(2, 1fr); } /* 3 Column on desktop */ .oms-col-grid.col-3-2-1.et_pb_column { grid-template-columns: repeat(3, 1fr); } /* 4 Column on desktop */ .oms-col-grid.col-4-2-1.et_pb_column, .oms-col-grid.col-4-2-2.et_pb_column { grid-template-columns: repeat(4, 1fr); } /* 6 Column on desktop - For sections that showcase Partners, Sponsors, Clients */ .oms-col-grid.col-6-4-3.et_pb_column { grid-template-columns: repeat(6, 1fr); } /* Divider Variation */ .oms-col-grid.oms-divider.et_pb_column .et_pb_module { border-left: 1px solid rgba(255,255,255,.15); } /* Divider Variation for 2-1-1 Column */ .oms-col-grid.col-2-1-1.oms-divider.et_pb_column .et_pb_module { padding: 75px; } .oms-col-grid.col-2-1-1.oms-divider.et_pb_column .et_pb_module:nth-child(-n+2) { border-top: none; } .oms-col-grid.col-2-1-1.oms-divider.et_pb_column .et_pb_module:nth-child(odd) { border-left: none; } } /*================================================================================= SIDEBAR ===============================================================================*/ /*-------------- Base Styling --------------*/ .oms-col-sidebar { padding-bottom: 1px; /* This 1 pixel helps activate the margin-bottom on the inside. */ margin-bottom: 25px !important; } .oms-bg-slate .oms-col-sidebar { border-color: rgba(255, 255, 255, .2) } /* 767px and below --------------*/ @media (max-width: 767px) { .oms-col-sidebar { padding-top: 35px; } } /* 768px to 980px --------------*/ @media (min-width: 768px) and (max-width: 980px) { .oms-col-sidebar { padding-top: 50px; } } /* 980px and below --------------*/ @media (max-width: 980px) { .oms-col-sidebar { border-top: 1px solid rgba(0,0,0,.15); margin-top: 15px; } } @media (min-width: 981px) { .oms-col-sidebar { border-left: 1px solid rgba(0,0,0,.15); padding-left: 35px; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- DISPLAY ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= Tablet & Mobile Hide ===============================================================================*/ /* 980px and below --------------*/ @media (max-width: 980px) { /* Basic Styling */ /* NOTE: Hides */ .oms-tabletMobile-hide { display: none; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- MIN-HEIGHT ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= Min-Height One ===============================================================================*/ @media (min-width: 1700px) { .oms-minheight-one { display: flex; min-height: 750px !important; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- OVERLAYS ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /* Use to add overlays to background images on sections and rows * You can duplicate and change name to match desired colors */ /*================================================================================= Dark Overlay ===============================================================================*/ .oms-overlay-dark:before { content: ''; background: rgba(99, 102, 102, .7); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; } /*================================================================================= Dark Gradient Overlay ===============================================================================*/ .oms-overlay-dark-gradient:before { content: ''; background-image: linear-gradient(90deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,0.2) 100%)!important; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; } /*================================================================================= White Overlay ===============================================================================*/ .oms-overlay-white:before { content: ''; background: rgb(247,247,247); background: linear-gradient(280deg, rgba(247,247,247,0.85) 0%, rgba(255,255,255,1) 65%); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; } .oms-section-form + .oms-overlay-white:before { background: rgb(247,247,247); background: linear-gradient(280deg, rgba(247,247,247,0.85) 0%, rgba(245,245,245,1) 65%); } /*================================================================================= Blue Overlay ===============================================================================*/ .oms-overlay-blue-gradient:before { content: ''; background-image: linear-gradient(90deg,rgba(41,79,103,.99) 0%,rgba(93,135,161,.89) 100%)!important; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; } /* @media (max-width: 767px) { body.orbit .et_pb_row, body.orbit .container, body.orbit #main-content .container { width: 86%; overflow: visible; } } @media (min-width: 768px) and (max-width: 980px) { body.orbit .et_pb_row, body.orbit .container, body.orbit #main-content .container { width: 80%; overflow: visible; } } @media (min-width: 981px) { body.orbit .et_pb_row, body.orbit .container, body.orbit #main-content .container { width: 86% } } */ /*================================================================================= BASE SECTION ROW PADDING ===============================================================================*/ /* Base Styling */ /* Basic Padding */ .et_pb_section .et_pb_row { padding-top: 0; padding-bottom: 50px; z-index: 1; /* This is helpful to coinide with the angled pseudo elements on oms-bg-transitional backgrounds. */ } /* Last-Child Padding */ .et_pb_section .et_pb_row:last-of-type { padding-bottom: 0; } /* 767px and below --------------*/ @media (max-width: 767px) { .et_pb_section .et_pb_row { padding-bottom: 0; } } /* 768px to 980px --------------*/ @media (min-width: 768px) and (max-width: 980px) { /* Basic Padding */ .et_pb_section .et_pb_row { padding-bottom: 25px; } } /*================================================================================= FULL-WIDTH ROW ===============================================================================*/ /* Base Styling */ .oms-row-fullwidth { width: 100% !important; max-width: none; } /*================================================================================= REVERSE COLUMN ROW STYLING ===============================================================================*/ /* NOTE: This reverses the order of the columns, so that when the 5050 image appears on the right on desktop, it shifts to the top when viewed on tablet and mobile. This was the easiest solution; I tried a similar "flexcol" approach as to what I'm using below, but I was fighting with the code too much to accomplish. */ /* 980px and below --------------*/ @media (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. */ .oms-row-sticky .et_pb_column.this-scrolls .et_pb_module { margin-bottom: 50px !important; margin: 0 auto; max-width: 500px; } .oms-row-sticky .et_pb_column.this-scrolls .et_pb_module:last-child { /*margin-bottom: 0 !important;*/ } @media (min-width: 600px) { } @media (min-width: 981px) { .oms-row-sticky { padding-bottom: 100px !important; } .oms-row-sticky .et_pb_column.this-sticks { position: sticky !important; top: 25vh; } .oms-row-sticky .et_pb_column.this-scrolls { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; flex: 1.5 1 0%; } .oms-row-sticky .et_pb_column.this-scrolls .et_pb_module { width: calc(50% - 50px); margin: unset; } .oms-row-sticky .et_pb_column.this-scrolls .et_pb_module:nth-child(2n) { transform: translate3d(0px, 130px, 0px); } } /*================================================================================= ZERO-PADDING ROW - removes the padding-bottom ===============================================================================*/ /* Base Styling */ .oms-row-zero { padding-bottom: 0 !important; } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- SECTIONS ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= BASIC SECTION PADDING ===============================================================================*/ /* NOTE: this is the most commonly used section. */ /* BASE STYLING */ /* Section Padding */ body.orbit .et_pb_section.et_section_regular { padding-top: 100px; padding-bottom: 75px; } /* 767px and below --------------*/ @media (max-width: 767px) { body.orbit .et_pb_section.et_section_regular { padding-top: 50px; padding-bottom: 25px; } } /* 768px to 980px --------------*/ @media (min-width: 768px) and (max-width: 980px) { body.orbit .et_pb_section.et_section_regular { padding-top: 75px; padding-bottom: 50px; } } @media (min-width: 981px) { /* NOTE: Client asked us to lessen the padding on this first hero */ body.orbit .et_pb_section.et_section_regular.et_section_regular:first-of-type { padding-top: 75px; padding-bottom: 50px; } } /*================================================================================= OMS SECTION FORM - This section contains the forms that begin in the hero, and overlap onto following sections. This styling has effectively replaced a previous style called oms-section-bgmedia. ===============================================================================*/ /* 980px and below --------------*/ @media (max-width: 980px) { /* Large Variation */ body.orbit .oms-section-form.large { min-height: calc(85vh - 60px); /* I changed to 60px because that's how tall the masthead is. */ } } @media (min-width: 981px) { body.orbit .oms-section-form { overflow: visible !important; z-index: 10; } body.orbit .oms-section-form .oms-box-style-two { position: absolute !important; } /* KELLY: Changed 500px to 600px because the form was overlapping the section below it on some pages */ body.orbit .oms-section-form + .et_pb_section { min-height: 600px; } /* Large Variation */ body.orbit .oms-section-form { height: calc(85vh - 60px); max-height: 700px; min-height: 700px; } body.orbit .oms-section-form .et_pb_row { height: 100%; } body.orbit .oms-section-form .et_pb_row .et_pb_column:first-child { display: flex; align-items: center; height: 100%; } } /*================================================================================= OMS SECTION 50/50, EDGE-TO-EDGE IMAGE ===============================================================================*/ /* BASE STYLING */ /* Section Styling */ .oms-section-fifty50 { padding: 0 !important; overflow: hidden; } /* Row Styling */ .oms-section-fifty50 .et_pb_row { padding: 0 !important; border-radius: 5px; overflow: hidden !important; /* This important is necessary to override the basic overflow styling on the basic/general .et_pb_row */ } /* NOTE: In situations where I need this section to go full-width, simply apply the class oms-row-fullwidth to the row within this section. */ /* Column Styling */ .oms-section-fifty50 .et_pb_column { margin: 0 !important; /* NOTE: More styling in media queries below. */ } /* Text Module Styling */ .oms-section-fifty50 .et_pb_text { margin: 0 auto; } .oms-section-fifty50 .et_pb_text :last-child { margin-bottom: 0 !important; } .oms-section-fifty50 .et_pb_text .et_pb_text_inner { max-width: 550px; } /* Image Module Styling */ .oms-section-fifty50 .et_pb_image { width: 100%; height: 100%; } .oms-section-fifty50 .et_pb_column .et_pb_module.et_pb_image { margin: 0 !important; } .oms-section-fifty50 .et_pb_image .et_pb_image_wrap { width: 100%; transition: all .5s ease; } .oms-section-fifty50 .et_pb_image .et_pb_image_wrap:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; background: #000; height: 100%; } .oms-section-fifty50 .et_pb_image .et_pb_image_wrap img { object-fit: cover; transition: all 1.25s ease; transition-delay: .15s; } /* Optimizing Visual Builder */ /* NOTE: I need to specify a little further so that the image module displays the images in Visual Builder for a better admin experience. */ .oms-section-fifty50 .et_pb_image:not(.ui-sortable) .et_pb_image_wrap img { opacity: 0; transform: scale(1.05); } /* BASE ANIMATION TRIGGERED ACTIONS */ /* Image Module */ .oms-section-fifty50 .et_pb_row.et_had_animation .et_pb_image_wrap picture, .oms-section-fifty50 .et_pb_row.et_had_animation .et_pb_image_wrap img { max-width: initial; max-height: 100%; width: auto !important; min-width: 100%; opacity: 1; transform: scale(1.01); left: -1px; float: right; } body.orbit .et_pb_section.et_section_regular .et_pb_row:not(.et_pb_row_fullwidth) .et_pb_column picture, body.orbit .et_pb_section.et_section_regular .et_pb_row:not(.et_pb_row_fullwidth) .et_pb_column img {min-height: 100%; width: auto; min-width: 100%;} /* SPECIAL VARIATIONS */ /* Full-Width Row */ .oms-section-fifty50 .et_pb_row.oms-row-fullwidth { border-radius: unset; } /* 767px and below --------------*/ @media (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: 40px 7% 50px; } } /* 768px to 980px --------------*/ @media (min-width: 768px) and (max-width: 980px) { .oms-section-fifty50 .et_pb_text { padding: 60px 10% 75px; } } /* 980px and below --------------*/ @media (max-width: 980px) { /* Image is desired to be on top on tablet & mobile */ .oms-section-fifty50 .et_pb_column:first-child.col-image .et_pb_image_wrap, .oms-section-fifty50 .oms-row-reverse-columns .et_pb_column:last-child.col-image .et_pb_image_wrap { clip-path: polygon(0 0,100% 0,100% 0,0 0); width: 100%; /* Added this to force the animation to work. */ } .oms-section-fifty50 .et_pb_column:first-child.col-image .et_pb_image_wrap:before, .oms-section-fifty50 .oms-row-reverse-columns .et_pb_column:last-child.col-image .et_pb_image_wrap:before { clip-path: polygon(0 0,100% 0,100% calc(100% - 0.1px),0 100%); } /* Image is desired to be on bottom on tablet & mobile */ .oms-section-fifty50 .et_pb_column:last-child.col-image .et_pb_image_wrap { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); } .oms-section-fifty50 .et_pb_column:last-child.col-image .et_pb_image_wrap:before { clip-path: polygon(0 0.1px,100% 0.1px,100% 100%,0 100%); } /* ANIMATION TRIGGERED VARIATION */ /* Image is desired to be on top on tablet & mobile */ .oms-section-fifty50 .et_pb_row.et_had_animation .et_pb_column:first-child.col-image .et_pb_image_wrap, .oms-section-fifty50 .et_pb_row.oms-row-reverse-columns.et_had_animation .et_pb_column:last-child.col-image .et_pb_image_wrap { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); } /* Image is desired to be on bottom on tablet & mobile */ .oms-section-fifty50 .et_pb_row.et_had_animation .et_pb_column:last-child.col-image .et_pb_image_wrap { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); } } @media (min-width: 981px) { /* General Row */ .oms-section-fifty50 .et_pb_row { min-height: 600px; display: flex; } /* General Column */ .oms-section-fifty50 .et_pb_column { display: flex; justify-content: center; flex-direction: column; width: 50%; } /* Text Module */ /* first child column */ .oms-section-fifty50 .et_pb_column .et_pb_text { padding: 5% 14%; /* the 12% coincides with the .container width which is 86%, and centered on the screen, so 6% from each side. */ } /* Image Module */ .oms-section-fifty50 .et_pb_image .et_pb_image_wrap { display: flex; position: absolute; height: calc(100% + 2px); margin-top: -1px; } /* Image is in the first column */ .oms-section-fifty50 .et_pb_column:first-child.col-image .et_pb_image_wrap { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); } .oms-section-fifty50 .et_pb_column:first-child.col-image .et_pb_image_wrap:before { clip-path: polygon(0 0,calc(100% - 0.1px) 0,100% 100%,0 100%) } /* Image is in the second column */ /* NOTE: I included the second selector line with the nth-child to help display better in Visual Builder. */ .oms-section-fifty50 .et_pb_column:last-child.col-image .et_pb_image_wrap, .oms-section-fifty50 .et_pb_column:nth-child(2).col-image .et_pb_image_wrap { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); } .oms-section-fifty50 .et_pb_column:last-child.col-image .et_pb_image_wrap:before, .oms-section-fifty50 .et_pb_column:nth-child(2).col-image .et_pb_image_wrap:before { clip-path: polygon(0.1px 0,100% 0,100% 100%,0 100%); } /* ANIMATION TRIGGERED VARIATION */ .oms-section-fifty50 .et_pb_row.et_had_animation .et_pb_column:first-child.col-image .et_pb_image_wrap, .oms-section-fifty50 .et_pb_row.ui-sortable .et_pb_column:first-child.col-image .et_pb_image_wrap { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); } .oms-section-fifty50 .et_pb_row.et_had_animation .et_pb_column:last-child.col-image .et_pb_image_wrap, .oms-section-fifty50 .et_pb_row.ui-sortable .et_pb_column:nth-child(2).col-image .et_pb_image_wrap { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); } } /*================================================================================= OMS SECTION SMALL ===============================================================================*/ /* BASE STYLING */ /* Section Styling */ body.orbit .et_pb_section.oms-section-small { padding-top: 50px; padding-bottom: 25px; } /*================================================================================= OMS SECTION FEATURE ===============================================================================*/ /* NOTE: this section has more narrow rows on desktop, and is used to feature/promote things like a large testimonial, or a Resource. */ /* BASE STYLING */ /* Section */ body.orbit .et_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: 85px 125px 60px; border-radius: 5px; max-width: 1200px; } /* SMALL VARIATION */ /* Row */ body.orbit .et_pb_section.oms-section-feature.small .et_pb_row { max-width: 800px; } /* SIBLING VARIATION */ .et_pb_section.oms-section-feature + .et_pb_section.oms-section-feature:not(.ui-sortable) { z-index: -1; } /* 767px and below --------------*/ @media (max-width: 767px) { body.orbit .et_pb_section.oms-section-feature.regular .et_pb_row { padding: 25px; } } /* 768px to 980px --------------*/ @media (min-width: 768px) and (max-width: 980px) { .et_pb_section.oms-section-feature + .et_pb_section.oms-section-feature { padding-top: 50px; } body.orbit .et_pb_section.oms-section-feature.regular .et_pb_row { padding: 50px; } } @media (min-width: 981px) { .et_pb_section.oms-section-feature + .et_pb_section.oms-section-feature { padding-top: 100px; } } /*================================================================================= OMS SECTION SECONDARY NAV ===============================================================================*/ /* NOTE: this section is for secondary navigation, like on the About Sterling pages. */ /* BASE STYLING */ body.orbit .et_pb_section.et_section_regular.oms-section-navigation { background: #fff; padding-top: 0; padding-bottom: 0; z-index: 2; overflow: hidden; box-shadow: 0 2px 5px 0 rgba(0,0,0,.15); } /* Pseudo Element for inset drop shadow */ body.orbit .et_pb_section.et_section_regular.oms-section-navigation:after { content: ''; position: absolute; top: -5px; left: -5%; width: 110%; background: rgba(0,0,0,.8); height: 7px; filter: blur(5px); } /* 980px and below --------------*/ @media (max-width: 980px) { body.orbit .et_pb_section.et_section_regular.oms-section-navigation {display: none;} body.orbit .et_pb_section.et_section_regular:last-child {padding: 0;} } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- PAGE TYPE OVERRIDES ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= OVERRIDES for Commonly-Used elements in the Divi markup ===============================================================================*/ /* BASE STYLING */ /* This padding is similar to ".et_section_regular" */ #main-content .container, body:not(.et-tb) #main-content .container, body:not(.et-tb-has-header) #main-content .container { padding-top: 75px; /* I chose to lessen the padding-top for these kinds of pages (compared to the basic section styling above). */ padding-bottom: 50px; } /* 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. */ } /* Post Meta Links - Exists on several template pages, and in modules, and even in page modules. */ #left-area .post-meta a, .et_pb_post .post-meta a, .et_pb_portfolio_item .post-meta a { box-shadow: 0 -2px 0 #79bde8 inset!important; } #left-area .oms-bg-slate .post-meta a { color: #fff!important; } /* 767px and below --------------*/ @media (max-width: 767px) { #main-content .container, body:not(.et-tb) #main-content .container, body:not(.et-tb-has-header) #main-content .container { padding-top: 35px; /* I chose to lessen the padding-top for these kinds of pages (compared to the basic section styling above). */ padding-bottom: 10px; } } /* 768px to 980px --------------*/ @media (min-width: 768px) and (max-width: 980px) { #main-content .container, body:not(.et-tb) #main-content .container, body:not(.et-tb-has-header) #main-content .container { padding-top: 50px; /* I chose to lessen the padding-top for these kinds of pages (compared to the basic section styling above). */ padding-bottom: 25px; } } @media (min-width: 981px) { /* Hover State */ /* Post Meta */ #left-area .post-meta a:hover, .et_pb_post .post-meta a:hover, .et_pb_portfolio_item .post-meta a:hover { text-decoration: none !important; box-shadow: 0 -8px 0 #79bde8 inset !important; } } /*================================================================================= Category / Archive / Listing Page ===============================================================================*/ /* BASE STYLING */ /* Main Content Container - Common for Archive/Category and Search Results */ body.orbit.blog #main-content, body.orbit.archive #main-content, body.orbit.search-results #main-content { background-color: #f5f5f5 /* matches the bg color used on other parts of the site, aka "oms-bg-gray-light" */ } /* Left Area */ body.orbit.blog #content-area #left-area, body.orbit.category #content-area #left-area, body.orbit.archive #content-area #left-area, body.orbit.author #content-area #left-area { margin-right: unset; padding-bottom: unset; /* This overrides some silly styling of 23px */ margin-bottom: 25px; /* This establishes the consistent margin-bottom that I apply on many assets. */ width: 100%; } /* Sidebar */ body.orbit.blog #content-area #sidebar, body.orbit.category #content-area #sidebar, body.orbit.archive #content-area #sidebar, body.orbit.author #content-area #sidebar { display: none; } /* Title */ body.orbit.archive .archive-title h1 { text-transform: unset; font-family: Helvetica,Arial,sans-serif; line-height: 1.1; } /* There's lots to override here. I'm going to undo a handful of default settings, then add this class/target to the other items below for consolidation. I've chosen to group all these basic overrides here with the other basic overrides for the Category/Archive listing page. These overrides put these elements back to a basic baseline, and then I call upon these again down with the other styling for blog posts... trying to keep "like things with like things" */ /* OVERRIDING for Default Category Listing Page Post Item */ body.orbit .post-wrapper-global article { display: unset; margin-bottom: unset !important; box-shadow: unset; transition: unset; position: unset; top: unset; border-radius: unset; overflow: unset; /* These override specific nth-of-type default targets */ margin-right: 0 !important; margin-left: 0 !important; } /* OVERRIDING the hover effect for Default Category Listing Page Post Item */ body.orbit .post-wrapper-global article:hover { box-shadow: 0px 10px 60px -30px rgba(0,0,0,0.5); top: unset; } /* OVERRIDING for Default Category Listing Page Post Item "Post Data" */ body.orbit .post-wrapper-global article .post-data { padding: 0; display: flex; flex-direction: column; height: 100%; } /* OVERRIDING for Default Category Listing Page Post Item "Post Data" Entry Title */ body.orbit .post-wrapper-global article .post-data .entry-title { margin-bottom: 15px; /* Rather than use "unset", I plugged in the actual value because there's no way for me to specify which header tag that gets used here, and the default theme styling makes specific styling to influence this element. */ line-height: 1.25; } /* OVERRIDING for Default Category Listing Page Post Item "Post Data" Post Meta */ body.orbit #left-area .post-wrapper-global article .post-data .post-meta { margin-bottom: unset; border-bottom: unset; font-size: unset; font-style: unset; padding-bottom: unset; } @media (min-width: 981px) { /* Title */ body.orbit.archive .archive-title h1 { font-size: 50px; } } /*================================================================================= Search Results Page ===============================================================================*/ /* BASE STYLING */ /* Title Wrap */ body.orbit.search-results .title-wrap { margin-bottom: 35px; } /* Search Term span */ span.search-term { font-style: italic; color: #79bde8; } /* Search Results Left Area */ body.orbit.search-results #left-area { width: unset; } /* Search Results */ .search-results--posts { /* NOTE: See styling below in the Posts section, where I've consolidated some common styling. */ } /* Pseudo Element - Chevron */ /* NOTE: I've chosen to place this styling here because it's particular to how uniquely the Sandbox treats the Search Results markup. */ body.search-results .et_pb_post h2 a:after { content: '\f054'; font-family: "FontAwesome"; font-weight: 600; font-size: 80%; position: relative; left: 8px; color: #79bde8; transition: all .2s ease-out; } @media (min-width: 981px) { /* Hover State */ body.search-results .et_pb_post h2:hover a:after { left: 13px; } } @media (min-width: 1100px) { /* Title Wrap */ body.orbit.search-results .title-wrap { margin-bottom: 75px; } } /*================================================================================= Single Post (Detail) ===============================================================================*/ /* BASE STYLING */ /* Removes default spacing at the bottom of the content */ .single .et_pb_post { margin-bottom: 0; padding-bottom: 0; } /* Container */ body.orbit.single-post #main-content .container { padding-top: 0; /* Overrides more general styling from above */ padding-bottom: 75px; /* Overrides more general styling from above */ width: 100%; max-width: none; } /* Left Area Container */ body.orbit.single-post.full-width #content-area #left-area { max-width: unset; padding-bottom: 0; } /* Override's Razz styling he implemented while I was on paternity leave */ body.orbit.single-post #left-area article.post .et_post_meta_wrapper, body.orbit.single-post #left-area article.post .entry-content { padding-left: 0; padding-right: 0; } /* Common Styling for Header, Post Meta and Entry Content */ body.orbit.single-post #page-container h1, body.orbit.single-post .et_post_meta_wrapper .post-meta, body.orbit.single-post .entry-content { max-width: 1000px; margin-left: auto; margin-right: auto; } /* Post Meta */ #left-area .post-meta { font-size: 12px; } body.single-post #left-area .post-meta { font-size: 16px; } /* Entry Content */ body.orbit .et_pb_post .entry-content { padding-top: 75px; } /* In Post Media */ /* NOTE: this forces a "clear" on videos or images that are in the middle of the body copy, and potentially overlap the Featured Image. */ .et_pb_post .entry-content .fluid-width-video-wrapper, .et_pb_post .entry-content img { clear: both; } /* Inline Images */ .et_pb_post .entry-content p img { width: 80%; max-width: 700px; } /* DIVI BUILDER ACTIVATED */ /* Post Meta Wrapper */ body.orbit.single-post.et_pb_pagebuilder_layout .et_post_meta_wrapper { margin-bottom: 0; /* Overriding this Divi default value. */ } /* Sections within the Post content */ /* NOTE: hopefully, client doesn't over-use Divi Builder on Blog posts, becasue these should really be simple and streamlined, no need to over design/engineer blog posts. */ body.orbit.single-post .et_pb_post .entry-content .et_pb_section.et_section_regular { padding: 0 !important; /* removes the padding-top and padding-bottom */ } /* Column within the very first "section" */ /* My goal is to target the column in the first section, and remove the float so that the text wraps around the Featured Image... whilst not affecting following columns. */ .et_pb_post .entry-content .et_pb_section:first-of-type .et_pb_column { float: unset; } /* 767px and below --------------*/ @media (max-width: 767px) { /* Container*/ body.orbit.single-post #main-content .container { padding-bottom: 25px; /* Overrides more general styling from above */ } /* Common */ body.orbit.single-post #page-container h1, body.orbit.single-post .et_post_meta_wrapper .post-meta, body.orbit.single-post .entry-content { width: 86%; } /* Entry Content */ body.orbit .et_pb_post .entry-content { padding-top: 50px; } /* Inline Images */ body.orbit .entry-content p img { margin: 35px 0; } } /* 768px to 980px --------------*/ @media (min-width: 768px) and (max-width: 980px) { /* Container*/ body.orbit.single-post #main-content .container { padding-bottom: 50px; /* Overrides more general styling from above */ } /* Common */ body.orbit.single-post #page-container h1, body.orbit.single-post .et_post_meta_wrapper .post-meta, body.orbit.single-post .entry-content { width: 80%; } /* Entry Content */ body.orbit .et_pb_post .entry-content { padding-top: 75px; } /* Inline Images */ body.orbit .entry-content p img { margin: 50px 0; } } @media (min-width: 981px) { /* Common */ body.orbit.single-post #page-container h1, body.orbit.single-post .et_post_meta_wrapper .post-meta, body.orbit.single-post .entry-content { width: 88%; } /* Inline Images */ body.orbit .entry-content p img { margin: 50px 0; } } /*------------------------------------------------------------------------------------------------------------------------------- \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ ================================================================================================================================= CONTENT - More-complicated objects that are used in the site ================================================================================================================================= \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ ---------------------------------------------------------------------------------------------------------------------------------*/ /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- MODULES ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= General Module Styles ===============================================================================*/ /*-------------- Base Styling --------------*/ /* General Zero-Out */ /* NOTE: Removes margin bottom on modules within columns; this allows the spacing below each piece of content to be influenced by the smaller components within. */ .et_pb_column .et_pb_module { margin-bottom: 0px !important; } /* Common Margin Bottom */ .et_pb_column .et_pb_module.et_pb_image, .et_pb_column .et_pb_module.et_pb_slider, .et_pb_column .et_pb_module.et_pb_video, .et_pb_column .et_pb_module.et_pb_filterable_portfolio, .et_pb_column .et_pb_portfolio_grid, .et_pb_column .et_pb_module.et_pb_tabs, .et_pb_column .et_pb_module.et_pb_search, .et_pb_column .et_pb_module.oms-box-style-two, /* This overrides my general module styling above. */ .et_pb_column .et_pb_module.et_pb_accordion { margin-bottom: 25px !important; } /* 768px to 980px --------------*/ @media (min-width: 768px) and (max-width: 980px) { /* Common Margin Bottom */ .et_pb_column .et_pb_module.et_pb_image, .et_pb_column .et_pb_module.et_pb_slider, .et_pb_column .et_pb_module.et_pb_video, .et_pb_column .et_pb_module.et_pb_filterable_portfolio, .et_pb_column .et_pb_portfolio_grid, .et_pb_column .et_pb_module.et_pb_tabs, .et_pb_column .et_pb_module.et_pb_search, .et_pb_column .et_pb_module.oms-box-style-two, /* This overrides my general module styling above. */ .et_pb_column .et_pb_module.et_pb_accordion { margin-bottom: 50px !important; } } /*================================================================================= Card Variations ===============================================================================*/ /*-------------- Base Styling --------------*/ /* Container */ /* NOTE: I removed ".et_clickable" from this styling because the Visual Builder doesn't include that class, so these specs were not visible. */ .et_pb_module.card { background: #fff; padding: 25px; border-radius: 5px; overflow: hidden; box-shadow: 0px 10px 25px -10px rgba(0,0,0,0.15); } /* Last Child */ .et_pb_blurb.card .et_pb_blurb_description :last-child { margin: 0 !important; } /*-------------- Dark Variation --------------*/ .et_pb_module.card.et_pb_bg_layout_dark { background: linear-gradient(300deg,rgba(93,135,161,1) 0%,rgba(41,79,103,1) 100%)!important; } /*-------------- Clickable Card Variation --------------*/ /* Transition */ .et_pb_module.card.et_clickable { transition: all .2s ease-out; } @media (min-width: 981px) { /*-------------- Hover State --------------*/ .et_pb_module.et_clickable.card:hover { box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.25); cursor: pointer; transform: translateY(-5px); } /* CTA Link */ .et_pb_module.et_clickable.card:hover .cta-link { box-shadow: 0 -18px 0 #addaf7 inset; } /* General text hyperlink within a clickable card */ .et_pb_module.et_clickable.card:hover p a:not(.cta-button):not(.cta-button-reverse):not(.cta-button-ghost):not(.cta-link) { box-shadow: 0 -13px 0 #ceebea inset; } } @media (min-width: 1025px) { /* 2 Column Layout and 3 Column Layout */ .col-2-2-1 .et_pb_module.card, .col-3-2-1 .et_pb_module.card { padding: 35px; /* Increased padding (for all blurbs with the .card add-on) within the card on 2-wide columns. */ } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- ACCORDION MODULE ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= Accordion Style One ===============================================================================*/ /* Base Styling */ /* Toggle Module Container */ .oms-accordion-style-one { background: #fff; padding: 50px; border-radius: 5px; box-shadow: 0px 10px 60px -30px rgba(0,0,0,0.5) } /* Toggle Open and Toggle Close */ .oms-accordion-style-one .et_pb_toggle_open, .oms-accordion-style-one .et_pb_toggle_close { background-color: unset; padding: unset; } /* Toggle */ .oms-accordion-style-one .et_pb_toggle { border: none; padding-top: 25px; padding-bottom: 25px; border-bottom: 1px solid #ddd; } .oms-accordion-style-one .et_pb_toggle:first-child { padding-top: 0; } .oms-accordion-style-one .et_pb_toggle:last-child { border-bottom: none; padding-bottom: 0; } /* Title */ .oms-accordion-style-one .et_pb_toggle_title { color: #000; margin-bottom: 0; } .oms-accordion-style-one .et_pb_toggle_title:before { content: '\f055'; font-family: "FontAwesome" !important; color: #79bde8; font-weight: 700; font-size: 100%; margin-top: unset; transform: translateY(-50%); } .oms-accordion-style-one .et_pb_toggle_open .et_pb_toggle_title:before { content: '\f056'; display: block !important; } /* Content Container */ .oms-accordion-style-one .et_pb_toggle_content { padding-top: 10px; padding-right: 50px; } .oms-accordion-style-one .et_pb_toggle_content :last-child { margin-bottom: 0; } /* 767px and below --------------*/ @media (max-width: 767px) { /* Toggle Module Container */ .oms-accordion-style-one { padding: 25px; } /* Title */ .oms-accordion-style-one .et_pb_toggle_title { padding-right: 30px; } /* Content Container */ .oms-accordion-style-one .et_pb_toggle_content { padding-right: 30px; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- BLOG MODULE, LISTING PAGES, ARCHIVE PAGES, SEARCH RESULTS ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= CONTAINING ELEMENT ===============================================================================*/ /* Base Styling */ /* Establish the grid */ body.orbit .post-wrapper-global, body.search-results #left-area .search-results--posts, .et_pb_posts > div { /* Don't target the class on this div because it produces mixed results in Visual Builder. */ display: grid; grid-gap: 30px; margin-bottom: 25px; } body.orbit .post-wrapper-global, body.search-results #left-area .search-results--posts, .et_pb_posts.col-3 > div { grid-template-columns: repeat(3, 1fr); /*Establishes columns within grid*/ } .et_pb_posts.col-4 > div { grid-template-columns: repeat(4, 1fr); /*Establishes columns within grid*/ } /*================================================================================= INDIVIDUAL POST ITEM ===============================================================================*/ /* Resting State */ /* OVERRIDING for Default Category Listing Page Containing element. */ /* There's lots to override here. I'm going to undo a handful of default settings, then add this class/target to the other items below for consolidation. */ body.orbit .post-wrapper-global article { display: unset; } /* Common Styling for the Container */ body.orbit .post-wrapper-global article, body.search-results .et_pb_post, .et_pb_posts .et_pb_post { background: #fff; padding: 25px; margin: 0 !important; word-wrap: break-word; border: none !important; border-radius: 5px; overflow: hidden; display: flex; /* This allows the content within to be able to be reordered */ flex-direction: column; box-shadow: 0px 10px 25px -10px rgba(0,0,0,0.15); transition: all .3s ease-out; } /* Container Pseudo Element - Top Border */ /* body.search-results .et_pb_post:before, .et_pb_posts .et_pb_post:before { content: ''; height: 5px; top: 0; position: absolute; width: 100%; left: 0px; background: rgb(110,204,110); background: linear-gradient(90deg, rgba(110,204,110,1) 0%, rgba(16,178,108,1) 100%); } */ /* Thumbnail Image */ body.orbit .post-wrapper-global .entry-featured-image-url, body.search-results .et_pb_post.has-post-thumbnail > a, .et_pb_posts .et_pb_post .entry-featured-image-url { margin: -25px -25px 25px !important; display: flex; justify-content: center; align-items: center; position: relative; } /* Native Category Thumbnail */ .et_pb_post a img { width: 100%; /* this is needed for the basic default Category teaser featured images. */ } /* Overlay */ body.orbit .post-wrapper-global .entry-featured-image-url:before, body.search-results .et_pb_post.has-post-thumbnail > a:before, .et_pb_posts .et_pb_post .entry-featured-image-url:before { content: ''; background: linear-gradient(300deg, rgba(93,135,161,.8) 0%, rgba(41,79,103,.8) 100%); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; opacity: 0; transition: all .2s ease-out; } /* Overlay Icon */ body.orbit .post-wrapper-global .entry-featured-image-url:after, body.search-results .et_pb_post.has-post-thumbnail > a:after, .et_pb_posts .et_pb_post .entry-featured-image-url:after { position: absolute; font-size: 32px; content: "\e046"; z-index: 2; font-family: "ETmodules" !important; -moz-osx-font-smoothing: grayscale; line-height: 1; text-transform: none; color: #fff; transform: translateY(10px); opacity: 0; transition: all .2s ease-out; } /* Header / Title */ body.orbit .post-wrapper-global article .post-data .entry-title, body.search-results .et_pb_post h2, .et_pb_posts .entry-title { font-size: 26px; /* On previous sites, this .entry-title is intended to be smaller than the standard h3... but this site has a smaller h3 to begin with. */ order: 1; /* Reorders this header to beneath the other text */ } body.orbit .post-wrapper-global article .post-data .entry-title a, body.search-results .et_pb_post h2 a, .et_pb_posts .entry-title a { color: #000; } body.orbit .post-wrapper-global article .post-data .entry-title a:after, body.search-results .et_pb_post h2 a:after, .et_pb_posts .entry-title a:after { content: '\f054'; font-family: "FontAwesome"; font-weight: 500; font-size: 75%; position: relative; left: 8px; color: #79bde8; transition: all .2s ease-out; } /* Post Meta - Date & Category */ body.orbit .post-wrapper-global article .post-data .post-meta, body.search-results .et_pb_post .post-meta, .et_pb_posts article .post-meta { order: 3; font-size: 12px !important; margin-bottom: 0px !important; border-top: 1px solid rgba(0,0,0,.2); padding-top: 5px; margin-top: auto; font-style: unset; color: #000 !important; display: none; /* Client didn't want to see the Categories in the teaser; WordPress still outputs a tag, so I'm simply displaying-none. */ } /* Post Content - Excerpt */ body.orbit .post-wrapper-global article .post-data p:not(.post-meta), body.search-results .et_pb_post p:last-child, .et_pb_posts .post-content p, .et_pb_posts .post-content { order: 2; font-size: 16px !important; /*This size is set to be the same as the p on a mobile device. */ margin-bottom: 0; } /* Post Content - Last Child Paragraph Text */ body.search-results .et_pb_post p:last-child, .et_pb_posts .post-content p:last-child { margin-bottom: 0; } /* Social Warfare Sharing Buttons */ .swp_social_panel { margin-top: 50px !important; } /*-------------- Hover State --------------*/ /* NOTE: More Hover State styling in the Media Queries below. */ /*================================================================================= PAGINATION ===============================================================================*/ /* Base Styling */ /* This is for when I use the Blog module on a Page; Divi tucks the pagination within the larger container along with the individual articles... bad markup... so I had to get creative using the grid-column styling. */ .et_pb_posts > div > div:last-of-type { grid-column: 1/4; margin-top: 35px; } body.orbit .pagination { border-top: 1px solid rgba(0,0,0,.2); padding-top: 20px; } /* Button Alignment */ body.orbit .pagination .alignleft { float: right; } body.orbit .pagination .alignright { float: left; } /* Button Styling */ /* NOTE: This styling is located with the other button styling */ /* This styling is used on Archive Template and on Cateogry Template. This is just the fastest solution, without overhauling the base template files. */ .post-wrapper-global + .pagination { margin-top: 75px; } /*================================================================================= MEDIA QUERIES ===============================================================================*/ /* 767px and below --------------*/ @media (max-width: 767px) { /* Establish the grid */ body.orbit .post-wrapper-global, body.search-results #left-area .search-results--posts, .et_pb_posts > div { grid-gap: 20px; } body.orbit .post-wrapper-global, body.search-results #left-area .search-results--posts, .et_pb_posts.col-3 > div, .et_pb_posts.col-4 > div { grid-template-columns: repeat(1, 1fr); } /* Pagination */ .et_pb_posts > div > div:last-of-type { grid-column: 1/2; margin-top: 15px; } .post-wrapper-global + .pagination { margin-top: 35px; } /* Header / Title */ body.orbit .post-wrapper-global article .post-data .entry-title, body.search-results .et_pb_post h2, .et_pb_posts .entry-title { font-size: 19px; /* This matches the font-size adjustments that the body.orbit h3 makes. */ } /* Layout Variation - Just trying this out, going to present to client before completely committing to this idea. */ /* NOTE: This puts posts side-by-side, 2-across on mobile */ .et_pb_posts.col-3.variation > div { grid-template-columns: repeat(2, 1fr); grid-gap: 15px; } .et_pb_posts.col-3.variation .et_pb_post { padding: 15px 15px 5px; } .et_pb_posts.col-3.variation .et_pb_post .entry-featured-image-url { margin-bottom: 15px !important; } .et_pb_posts.col-3.variation .entry-title { font-size: 12px; } .et_pb_posts.col-3.variation .post-content { display: none; } .et_pb_posts.col-3.variation article .post-meta { font-size: 10px; display: none; } } /* 768px to 980 --------------*/ @media (min-width: 768px) and (max-width: 980px) { /* Header / Title */ body.orbit .post-wrapper-global article .post-data .entry-title, body.search-results .et_pb_post h2, .et_pb_posts .entry-title { font-size: 22px; /* This matches the font-size adjustments that the body.orbit h3 makes. */ } } /* 768px to 1024 --------------*/ @media (min-width: 768px) and (max-width: 1024px) { /* Establish the grid */ body.orbit .post-wrapper-global, body.search-results #left-area .search-results--posts, .et_pb_posts.col-3 > div { grid-template-columns: repeat(2, 1fr); } /* Pagination */ .et_pb_posts > div > div:last-of-type { grid-column: 1/3; } } /* 768px to 1199 --------------*/ @media (min-width: 768px) and (max-width: 1199px) { /* Establish the grid */ .et_pb_posts.col-4 > div { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 981px) { /* Hover State */ /* Thumbnail Image */ body.orbit .post-wrapper-global .entry-featured-image-url:hover:before, body.search-results .et_pb_post.has-post-thumbnail:hover > a:before, .et_pb_posts .et_pb_post .entry-featured-image-url:hover:before { opacity: 1; } body.orbit .post-wrapper-global .entry-featured-image-url:hover:after, body.search-results .et_pb_post.has-post-thumbnail:hover > a:after, .et_pb_posts .et_pb_post .entry-featured-image-url:hover:after { transform: translateY(0px); opacity: 1; } /* Title */ /* NOTE: VARIATION for 4-Column Layouts (on desktop) because the default option was too large. */ body.orbit #page-container .et_pb_posts.col-4 .entry-title { font-size: 23px; /* matches font-size of the h4 at this breakpoint. */ } body.orbit .post-wrapper-global article .post-data .entry-title a:hover, body.search-results .et_pb_post h2 a:hover, .et_pb_posts .entry-title a:hover { color: #5d87a1; } body.orbit .post-wrapper-global article .post-data .entry-title a:hover:after, body.search-results .et_pb_post h2 a:hover:after, .et_pb_posts .entry-title a:hover:after { left: 13px; } } @media (min-width: 1025px) { /* Basic Layout */ body.orbit .post-wrapper-global article, body.search-results .et_pb_post, .et_pb_posts.col-3 .et_pb_post { padding: 35px; /* Increased padding within the card on larger viewport. */ } body.orbit .post-wrapper-global .entry-featured-image-url, body.search-results .et_pb_post.has-post-thumbnail > a, .et_pb_posts.col-3 .et_pb_post .entry-featured-image-url { margin: -35px -35px 35px !important; /* Increased negative margins that correspond with the padding in the styling just above. */ } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- BLURB MODULE ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= Common Base Styling ===============================================================================*/ /*-------------- General Styling --------------*/ /* General Styling For the "Content" container. Overrides the Divi default styling. */ .et_pb_blurb .et_pb_blurb_content { max-width: unset; } /* General Blurb Image Styling */ .et_pb_blurb .et_pb_main_blurb_image { display: block; margin-bottom: 0; } /* Remove Default Animation */ .et_pb_blurb .et_pb_animation_top.et-animated { animation: none; } /*-------------- Blurb Position Left General Styling --------------*/ .et_pb_blurb_position_left { /* See styling for general Modules for margin-bottom styling. */ } .et_pb_blurb_position_left .et_pb_blurb_content { display: flex; } .et_pb_blurb_position_left .et_pb_main_blurb_image { margin-right: 20px; } .et_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_blurb.et_clickable .et_pb_module_header a { color: #000; /* Overrides the Header color if link is applied to it. */ position: relative; } /* Pseudo Element for Header */ .et_pb_blurb.et_clickable .et_pb_module_header:after { content: '\f054'; font-family: "FontAwesome"; font-weight: 500; font-size: 75%; position: relative; left: 8px; color: #79bde8; transition: all .2s ease-out; } /* 767px and below --------------*/ @media (max-width: 767px) { /* General Styling for Blurb Position Left */ .et_pb_blurb_position_left .et_pb_main_blurb_image { margin-right: 15px; } } @media (min-width: 981px) { /*-------------- Hover State --------------*/ /* Header */ .et_pb_blurb.card.et_clickable:hover .et_pb_module_header { color: #5d87a1 !important; } /* Header Pseudo Element */ .et_pb_blurb.card.et_clickable:hover .et_pb_module_header:after { left: 13px; } } /*================================================================================= Blurb Style One ===============================================================================*/ /* NOTE: This blurb is kind of a general-use blurb. Image is positioned above the text.*/ /* Base Styling */ /* Image Wrap */ .oms-blurb-style-one.et_pb_blurb.card .et_pb_image_wrap { margin: -25px -25px 25px; position: relative; /* this helps with hover overlay */ display: flex; /* this helps with hover overlay */ justify-content: center; /* this helps with hover overlay */ align-items: center; /* this helps with hover overlay */ clip-path: polygon(0 0,100% 0,100% 92%,0 100%); /* this helps create the angle */ } /* Overlay */ .oms-blurb-style-one.et_pb_blurb.card .et_pb_image_wrap: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 0.3s; } /* Overlay Icon */ .oms-blurb-style-one.et_pb_blurb.card .et_pb_image_wrap: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; transform: translateY(10px); opacity: 0; transition: all 0.3s; } /*-------------- Feature Variation --------------*/ blurb-style-one modules (from 599px and below) */ @media (min-width: 600px) { .oms-section-feature.small .oms-blurb-style-one { padding: 0; } .oms-section-feature.small .oms-blurb-style-one .et_pb_blurb_content { display: flex; } .oms-section-feature.small .oms-blurb-style-one .et_pb_main_blurb_image { margin-right: 0; display: flex; max-width: unset; width: 40%; margin-bottom: 0; } .oms-section-feature.small .oms-blurb-style-one .et_pb_main_blurb_image .et_pb_image_wrap { display: flex; height: 100%; background: #000; width: 100%; margin: 0; clip-path: unset; } .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; display: flex; flex-direction: column; width: 60%; justify-content: center; } } /* 767px and below */ @media (max-width: 767px) { .oms-blurb-style-one:last-child .et_pb_blurb_description p:last-child { margin-bottom: 0; } } @media (min-width: 981px) { /* 2 Column Layout */ .col-2-1-1 .oms-blurb-style-one.et_pb_blurb.card { padding: 50px; /* Increased padding within the card on 2-wide columns. */ } .col-2-1-1 .oms-blurb-style-one.et_pb_blurb.card .et_pb_image_wrap { margin: -50px -50px 50px; /* Increased negative margins that correspond with the padding in the styling just above. */ } /* Hover State */ .oms-blurb-style-one.et_pb_blurb.et_clickable.card:hover .et_pb_image_wrap:before { opacity: 1; } .oms-blurb-style-one.et_pb_blurb.et_clickable.card:hover .et_pb_image_wrap:after { transform: translateY(0px); opacity: 1; } } @media (min-width: 1025px) { /* 2 Column Layout and 3 Column Layout */ .col-2-2-1 .oms-blurb-style-one.et_pb_blurb.card .et_pb_image_wrap, .col-3-2-1 .oms-blurb-style-one.et_pb_blurb.card .et_pb_image_wrap { margin: -35px -35px 35px; /* Increased negative margins (for only blurb-style-one) that correspond with the padding in the styling just above. */ } } /*================================================================================= Blurb Style Two ===============================================================================*/ /* NOTE: This blurb is used for testimonial authors. Image is positioned to the left of text.*/ /*-------------- Base Styling --------------*/ /* Margin Bottom for this blurb */ .et_pb_module.oms-blurb-style-two { max-width: 450px; margin-left: auto; margin-right: auto; margin-bottom: 25px !important; display: flex; /* NOTE: I recently added this, so that this whole module would ALWAYS be centered, even if a person had a very short name and title. */ } .oms-blurb-style-two .et_pb_blurb_content { align-items: center; min-height: 65px; } /* Image Styling */ .oms-blurb-style-two.et_pb_blurb_position_left .et_pb_main_blurb_image { width: 20%; max-width: 85px; flex: 0 0 100%; /* NOTE: this needs to be used in conjunction with the width setting above. */ } .oms-blurb-style-two .et_pb_image_wrap { border-radius: 100%; border: 2px solid #fff; } .oms-blurb-style-two .et_pb_image_wrap img { border-radius: 100%; transform: scale(.91); } /* Text Container */ .oms-blurb-style-two.et_pb_blurb.et_pb_text_align_left .et_pb_blurb_content .et_pb_blurb_container { text-align: center; } .oms-blurb-style-two.et_pb_blurb.et_pb_text_align_left .et_pb_main_blurb_image + .et_pb_blurb_container { text-align: left; } /* Header */ .oms-blurb-style-two .et_pb_module_header { margin-bottom: 0; } /* Paragraph Text */ .oms-blurb-style-two .et_pb_blurb_description, .oms-blurb-style-two .et_pb_blurb_description p { font-size: 16px !important; margin-bottom: 0; } .oms-blurb-style-two.et_pb_bg_layout_dark .et_pb_blurb_description, .oms-blurb-style-two.et_pb_bg_layout_dark .et_pb_blurb_description p { color: rgba(255, 255, 255, 0.6); } /* 767px and below --------------*/ @media (max-width: 767px) { /* Image Styling */ .oms-blurb-style-two.et_pb_blurb_position_left .et_pb_main_blurb_image { max-width: 60px; } /* Header */ .oms-blurb-style-two .et_pb_module_header { font-size: 13px; } /* Paragraph Text */ .oms-blurb-style-two .et_pb_blurb_description, .oms-blurb-style-two .et_pb_blurb_description p { font-size: 12px !important; line-height: 1.2 !important; } } /*================================================================================= Blurb Style Three ===============================================================================*/ /* NOTE: This blurb is used for the Testimonials that feature the logo and text... could be logo or headshot. Image/logo is positioned above the text. Both regular and featured size. */ /*-------------- Base Styling --------------*/ /* Image Styling */ .oms-blurb-style-three .et_pb_main_blurb_image { width: 50%; max-width: 125px; margin-bottom: 50px; overflow: visible; } .oms-blurb-style-three .et_pb_image_wrap img { } /* Header */ .oms-blurb-style-three .et_pb_module_header { display: none; } /* Blurb Description Container */ .oms-blurb-style-three .et_pb_blurb_description { margin-bottom: 50px; /* I added spacing here because I don't target this div anywhere else (no conflicts), and this helps add space between module below. */ } /* Blurb Description Container / first of type */ .oms-blurb-style-three .et_pb_blurb_description, .oms-blurb-style-three .et_pb_blurb_description p:first-of-type { font-size: 20px; line-height: 1.4; position: relative; } .et_pb_bg_layout_dark.oms-blurb-style-three .et_pb_blurb_description p:first-of-type { color: #fff; } /* Blurb Description Container - last-child */ .oms-blurb-style-three .et_pb_blurb_description :last-child { margin: 0 !important; } /* 767px and below --------------*/ @media (max-width: 767px) { /* Image */ .oms-blurb-style-three .et_pb_main_blurb_image { width: 50%; max-width: 125px; margin-bottom: 25px; } /* Blurb Description */ .oms-blurb-style-three .et_pb_blurb_description { margin-bottom: 25px; } } /*-------------- Featured Variation --------------*/ .oms-blurb-style-three.featured { margin-bottom: 25px !important; } /* Blurb Image */ .oms-blurb-style-three.featured .et_pb_main_blurb_image { width: 100%; max-width: unset; margin-bottom: 0 } .oms-blurb-style-three.featured .et_pb_image_wrap img { border-radius: 5px 5px 0 0; overflow: hidden; } /* Blurb Container */ .oms-blurb-style-three.featured .et_pb_blurb_container { border-radius: 0 0 5px 5px; padding: 35px 25px 25px; } .oms-blurb-style-three.featured.et_pb_bg_layout_light .et_pb_blurb_container { background: #fff; } .oms-blurb-style-three.featured.et_pb_bg_layout_dark .et_pb_blurb_container { background-image: linear-gradient(300deg,rgba(93,135,161,1) 0%,rgba(41,79,103,1) 100%)!important; } /* Blurb Description */ .oms-blurb-style-three.featured .et_pb_blurb_description { margin-bottom: 0; } /* Blurb Description Container - first .featured variation */ .oms-blurb-style-three.featured .et_pb_blurb_description p:first-of-type:before { content: '“'; position: absolute; color: #9fd6bc; top: 0; left: 50%; font-size: 45px; line-height: 1; transform: translate(-50%, -60%); font-weight: 500; } /* h6 */ .oms-blurb-style-three.featured .et_pb_blurb_container h6 { margin-bottom: 0 !important; } /* paragraph text that follows the h6 */ .oms-blurb-style-three.featured .et_pb_blurb_container h6 + p { font-size: 16px; } /* 767px and below --------------*/ @media (max-width: 767px) { } /* 768px to 980px --------------*/ @media (min-width: 650px) and (max-width: 980px) { /* Blurb Container */ .oms-blurb-style-three.featured .et_pb_blurb_container { padding: 60px 50px 50px; } /* Blurb Description Container / first of type */ .oms-blurb-style-three.featured .et_pb_blurb_description, .oms-blurb-style-three.featured .et_pb_blurb_description p:first-of-type { font-size: 22px; } .oms-blurb-style-three.featured .et_pb_blurb_description p:first-of-type:before { font-size: 60px; } } /* 980px and below --------------*/ @media (max-width: 980px) { .oms-blurb-style-three.featured .et_pb_blurb_content { box-shadow: 0px 10px 60px -30px rgba(0,0,0,0.5); } } @media (min-width: 981px) { .oms-blurb-style-three.featured .et_pb_blurb_content { display: flex; justify-content: center; align-items: center; max-width: 100% !important; } /* Blurb Image */ .oms-blurb-style-three.featured .et_pb_main_blurb_image { display: block; width: 70%; } .oms-blurb-style-three.featured .et_pb_image_wrap img { border-radius: 5px; box-shadow: 0px 10px 60px -30px rgba(0,0,0,0.5); } /* Blurb Container */ .oms-blurb-style-three.featured .et_pb_blurb_container { width: 40%; padding: 5%; z-index: 9; margin-left: -10%; border-radius: 5px; box-shadow: 0px 10px 60px -30px rgba(0,0,0,0.5); } /* Blurb Description Container / first of type */ .oms-blurb-style-three.featured .et_pb_blurb_description, .oms-blurb-style-three.featured .et_pb_blurb_description p:first-of-type { font-size: 25px; text-align: left; } .oms-blurb-style-three.featured .et_pb_blurb_description p:first-of-type:before { left: 0; font-size: 75px; transform: translate(-50%, -50%); } /* Reversed Order */ .oms-blurb-style-three.featured.reverse .et_pb_blurb_content { flex-direction: row-reverse; } .oms-blurb-style-three.featured.reverse .et_pb_blurb_container { margin-left: unset; margin-right: -10%; } } /*================================================================================= Blurb Style Four ===============================================================================*/ /* NOTE: This blurb is used for icons. Image can be positioned either ABOVE the header, or to the LEFT of the header.*/ /*-------------- Base Styling --------------*/ /* Icon Color (if this option is selected) */ .oms-blurb-style-four .et-pb-icon { color: #5d87a1 !important; } /*-------------- Position Top Variation --------------*/ /* Image Styling */ .oms-blurb-style-four.et_pb_blurb_position_top .et_pb_main_blurb_image { width: 50%; max-width: 75px; overflow: visible; } /*-------------- Position Left Variation --------------*/ /* Image Styling */ .oms-blurb-style-four.et_pb_blurb_position_left .et_pb_main_blurb_image { width: 25%; max-width: 60px; position: relative; } /* Icon Styling */ .oms-blurb-style-four.et_pb_blurb_position_left .et-pb-icon { font-size: 39px; } /* Typography */ .oms-blurb-style-four.et_pb_blurb_position_left .et_pb_blurb_description p { font-size: 16px; } /* 767px and below --------------*/ @media (max-width: 767px) { .oms-blurb-style-four.et_pb_blurb_position_top .et_pb_main_blurb_image { max-width: 50px; } } /*================================================================================= Blurb Style Five ===============================================================================*/ /* NOTE: This blurb is used for the Leadership Bios. This has the name/title positioned to the left of the headshot on desktop. */ /*-------------- Base Styling --------------*/ .oms-blurb-style-five.et_pb_blurb_position_left .et_pb_main_blurb_image { width: 30%; max-width: 300px; margin-right: 0; position: absolute; bottom: 0; right: 0; transform: translateY(35%); box-shadow: 0px 25px 30px -20px rgba(0,0,0,0.6); } .oms-blurb-style-five.et_pb_blurb_position_left .et_pb_blurb_container { display: block; width: 65%; } .oms-blurb-style-five.et_pb_blurb_position_left .et_pb_blurb_description { clear: both; } /* 450px and below */ @media (max-width: 450px) { .oms-blurb-style-five.et_pb_blurb_position_left .et_pb_blurb_content { justify-content: space-between; align-items: center; } .oms-blurb-style-five.et_pb_blurb_position_left .et_pb_main_blurb_image { transform: unset; bottom: unset; position: relative; order: 2; right: unset; margin-bottom: 25px; } } /* 451px to 767px --------------*/ @media (min-width: 451px) and (max-width: 767px) { .oms-blurb-style-five.et_pb_blurb_position_left .et_pb_main_blurb_image { max-width: 150px; transform: translateY(30%); } } /* 981px to 1099px --------------*/ @media (min-width: 981px) and (max-width: 1099px) { .oms-blurb-style-five.et_pb_blurb_position_left .et_pb_main_blurb_image { max-width: 250px; transform: translateY(30%); } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- BOXES ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= Common Base Styling ===============================================================================*/ /*================================================================================= Box Style Two - box enclosure ===============================================================================*/ /*-------------- Base Styling --------------*/ .oms-box-style-two { padding: 50px; background: #fff; box-shadow: 0px 5px 35px 0px rgba(0,0,0,0.2); border-radius: 5px; } .oms-box-style-two :last-child { margin-bottom: 0; /* removes margin-bottom of the bottom-most item for optimum padding within this box enclosure. */ } /* 980px and below --------------*/ @media (max-width: 980px) { .oms-box-style-two { padding: 25px; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- BUTTONS ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= Common Base Styling ===============================================================================*/ /*-------------- Resting State --------------*/ /* Common Base Styles for ALL Buttons */ .menu-btn a, .cta-button, .cta-button-reverse, .cta-button-ghost, .field-wrap input[type=submit], .et_pb_search input.et_pb_searchsubmit, .cta-link, .gform_footer input[type=submit], body.orbit .pagination a { display: inline-block; position: relative; vertical-align: middle; font-size: 20px !important; line-height: 1.2 !important; /*letter-spacing: .25px;*/ font-weight: 500; } /* Common Base Style Margins for ALL Buttons */ /* Margins - General align left */ /*.menu-btn a, NOTE: don't inlcude this because you don't want unnecessary margins in the navigation */ .cta-button, .cta-button-reverse, .cta-button-ghost, .field-wrap input[type=submit], .et_pb_search input.et_pb_searchsubmit, .cta-link, .gform_footer 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-reverse, .et_pb_module.et_pb_text_align_center .cta-button-ghost, .et_pb_module.et_pb_text_align_center .cta-link { margin: 10px; } /* CTA Buttons Common Base Styles - General */ .menu-btn a, .cta-button, .cta-button-reverse, .cta-button-ghost, .field-wrap input[type=submit], .et_pb_search input.et_pb_searchsubmit, .gform_footer input[type=submit], body.orbit .pagination a { z-index: 1; border-style: solid; border-width: 2px; border-radius: 5px; transition: all .2s ease-out; /*text-transform: uppercase;*/ } /* Blog CTA Button */ .blog-cta-button { margin: 10px 0; background: #f58466 !important; border: none !important; font-size: 40px !important; } /* Inline Page CTA Button */ .inline-cta-button { margin: 10px 0; background: #f58466 !important; border: none !important; font-size: 32px !important; } /* Change CTA button color to peach */ .accent-button { background-color: #f58466 !important; border-color: #F58466 !important; } /* Common Button Padding */ .cta-button, .cta-button-reverse, .cta-button-ghost, .field-wrap input[type=submit], .et_pb_search input.et_pb_searchsubmit, .gform_footer input[type=submit], body.orbit .pagination a { padding: 8px 20px !important; } /* Common Base Styles for Pseudo Elements for the various CTA Buttons - THIS DOES NOT WORK ON INPUT BUTTONS, SO DON'T TRY. */ .menu-btn a:after, .cta-button:after, .cta-button-reverse:after, .cta-button-ghost:after { content: '\f054'; font-family: "FontAwesome"; font-weight: 500; position: absolute; right: 25px; opacity: 0; top: 50%; transform: translateY(-50%); transition: all .2s ease-out; font-size: 70%; } /* CTA Button Common Text Styles */ /*see text styles above*/ /*-------------- Hover State --------------*/ /* NOTE: More Hover State styling in the Media Queries below. */ /*================================================================================= Primary Navigation CTA Button ===============================================================================*/ /*-------------- Resting State --------------*/ /* Apply styling to anchor within this class */ .menu-btn a { background: #f58466; color: #fff !important; border-color: #f58466 !important; padding: 8px 20px!important; /*text-transform: capitalize !important;*/ line-height: 1.2 !important; height: auto !important; margin-left: 15px; font-weight: 500 !important; font-size: 20px !important; } .menu-btn a:hover {background-color: #5D87A1 !important; border-color: #5D87A1 !important;} /* Hide bottom border for CTA Button in the main nav */ #top-menu-nav ul li.menu-btn a:before { display: none; } /* NOTE: this styling is slightly different from the other CTA Buttons because the padding for this button is slightly different from the others. */ .menu-btn a:after { right: 20px; } /*-------------- Hover State --------------*/ /* NOTE: More Hover State styling in the Media Queries below. */ /*================================================================================= CTA Button (Regular) ===============================================================================*/ /*-------------- Resting State --------------*/ .cta-button, #footer-widgets .footer-widget a.cta-button, .field-wrap input[type=submit], .et_pb_search input.et_pb_searchsubmit, .gform_footer input[type=submit] { background: #5d87a1; color: #fff; border-color: #5d87a1; } .cta-button:after { color: #fff; } /*-------------- Hover State --------------*/ /* NOTE: More Hover State styling in the Media Queries below. */ /*================================================================================= CTA Button Reverse ===============================================================================*/ /*-------------- Resting State --------------*/ .cta-button-reverse { background: #fff; color: #294f67 !important; border-color: #fff; } .cta-button-reverse:after { color: #294f67; } /*-------------- Hover State --------------*/ /* NOTE: More Hover State styling in the Media Queries below. */ /*================================================================================= CTA Button Ghost ===============================================================================*/ /*-------------- Resting State --------------*/ .cta-button-ghost { color: #294f67; border-color: #5d87a1; } .cta-button-ghost:after { color: #fff; } /* Variations */ .et_pb_bg_layout_dark .cta-button-ghost { color: #fff; border-color: #fff; } .et_pb_bg_layout_dark .cta-button-ghost:after { color: #294f67; } /*-------------- Hover State --------------*/ /* NOTE: More Hover State styling in the Media Queries below. */ /*================================================================================= CTA Text Link ===============================================================================*/ /*-------------- Resting State --------------*/ .cta-link { box-shadow: 0 -3px 0 #79bde8 inset; padding: 0 2px 3px; transition: .3s cubic-bezier(.17,.88,.5,1.5); 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 */ .et_pb_bg_layout_dark .cta-link { color: #ffffff !important; } /*-------------- Hover State --------------*/ /* NOTE: The hover state for .cta-link is located in the media query below. */ /*================================================================================= Back To... Text Link ===============================================================================*/ /*-------------- Resting State --------------*/ .back-link { font-weight: 500; font-size: 14px; line-height: 1; letter-spacing: .75px; /*text-transform: uppercase; color: #000;*/ position: relative; overflow: visible!important; left: 10px; } .back-link:before { content: "\f053" !important; /* I had to add importants to most quickly override the sandbox styling. */ font-family: "FontAwesome"; font-weight: 500; left: -10px !important; /* I had to add importants to most quickly override the sandbox styling. */ top: 0 !important; /* I had to add importants to most quickly override the sandbox styling. */ color: #79bde8; transition: all .2s ease-out !important; /* I had to add importants to most quickly override the sandbox styling. */ } .back-link:after { display: none; } /* Variations */ .et_pb_bg_layout_dark .back-link { color: #ffffff; } /*-------------- Hover State --------------*/ /* NOTE: The hover state for .cta-link is located in the media query below. */ /*================================================================================= PAGINATION BUTTONS ===============================================================================*/ /*-------------- Resting State --------------*/ body.orbit .pagination a { background: #5d87a1; color: #fff !important; border-color: #5d87a1; font-size: 0 !important; } body.orbit .pagination a::after { font-size: 15px; } body.orbit .pagination .alignleft a::after { content: 'Older Posts »'; } body.orbit .pagination .alignright a::after { content: '« Newer Posts'; } /*-------------- Hover State --------------*/ /* NOTE: More Hover State styling in the Media Queries below. */ /*================================================================================= MEDIA QUERIES ===============================================================================*/ /* 767px and below --------------*/ @media (max-width: 767px) { /*-------------- Resting State --------------*/ .cta-button, .cta-button-reverse, .cta-button-ghost, .field-wrap input[type=submit], .et_pb_search input.et_pb_searchsubmit, .cta-link, .gform_footer input[type=submit] { font-size: 17px !important; } .back-link { font-size: 13px; /* follows the same size as the .pre-title */ } .cta-button, .cta-button-reverse, .cta-button-ghost, .field-wrap input[type=submit], .et_pb_search input.et_pb_searchsubmit, .gform_footer input[type=submit] { padding: 10px 20px !important; } .cta-button:after, .cta-button-reverse:after, .cta-button-ghost:after { right: 25px; /*resets the idle position of the pseudo element*/ } } /* 768px to 980px --------------*/ @media (min-width: 768px) and (max-width: 980px) { /*-------------- Resting State --------------*/ .cta-button, .cta-button-reverse, .cta-button-ghost, .field-wrap input[type=submit], .et_pb_search input.et_pb_searchsubmit, .cta-link, .gform_footer input[type=submit] { font-size: 18px !important; } .back-link { font-size: 14px; /* follows the same size as the .pre-title */ } } @media (min-width: 981px) { /*-------------- Sticky/Fixed State --------------*/ /* CTA Nav Button Override when the header/nav is sticky/fixed. */ .et-fixed-header #top-menu-nav ul li.menu-btn a { color: #fff !important; } /*-------------- Hover State --------------*/ /* NOTE: Since hover states don't exist on tablet or mobile, I've simplified the styling to only target hover states on larger viewports. */ /* Multiple Button types on hover */ .menu-btn a:hover, .cta-button:hover, .cta-button-reverse:hover, .cta-button-ghost:hover, .cta-link:hover, .field-wrap input[type=submit]:hover, .et_pb_search input.et_pb_searchsubmit:hover, .gform_footer input[type=submit]:hover { cursor: pointer; text-decoration: none; } /* Main CTA Buttons on hover */ .menu-btn a:hover, .cta-button:hover, .cta-button-reverse:hover, .cta-button-ghost:hover { padding-left:12px !important; padding-right:28px !important; } /* Leave enough space for hover icon on Blog and inline CTA Buttons */ .blog-cta-button, .inline-cta-button { padding-left: 30px!important; padding-right: 30px!important; } .blog-cta-button:hover, .inline-cta-button:hover { padding-left: 18px!important; padding-right: 42px!important; } /* Main CTA Buttons Pseudo Element on hover */ .menu-btn a:hover:after, .cta-button:hover:after, .cta-button-reverse:hover:after, .cta-button-ghost:hover:after { right: 12px; opacity: 1; } /* CTA Nav Button on hover */ #top-menu-nav>ul>li.menu-btn > a:hover { color: #fff !important; background: #f58466; } /* CTA Button (Regular) */ .cta-button:hover, .field-wrap iinput[type=submit]:hover, .gform_footer input[type=submit]:hover{ color: #fff; } /* Basic Input Button (for example, for forms) */ .field-wrap input[type=submit]:hover, .gform_footer input[type=submit]:hover { background: #506d80; border-color: #506d80; } /* CTA Button (Reverse) */ .cta-button-reverse:hover { color: #fff; } /* CTA Button (Ghost) */ .cta-button-ghost:hover { background: #5d87a1; border-color: #5d87a1; color: #fff; } .et_pb_bg_layout_dark .cta-button-ghost:hover { background: #fff; border-color: #fff; color: #294f67; } /* CTA Text Link on hover */ .cta-link:hover { box-shadow: 0 -18px 0 #addaf7 inset; } .et_pb_bg_layout_dark .cta-link:hover { box-shadow: 0 -18px 0 #5d87a1 inset; } /* Back Link on hover */ .back-link:hover:before { left: -15px !important; /* I had to add importants to most easily override the sandbox styling. */ } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- GALLERY SLIDER ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= Common Base Styling ===============================================================================*/ /* Images Container */ .et_pb_slider .et_pb_gallery_items { border-radius: 5px; overflow: hidden; } .et_pb_slider .et-pb-active-slide { z-index: 3 !important; } /* 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: #79bde8; } /* Arrows */ .et-pb-arrow-prev, .et-pb-arrow-next { transform: translateY(calc(-50% + 10px)); color: #fff !important; } /* Image File Name */ .mfp-title { display: none; /* This hides the file name, just in the event that the file name is something wonky. */ } /* Slider Functionality Bug Fix */ /* Slider Item */ .et_pb_gallery_fullwidth .et_pb_gallery_item { display: block !important; opacity: 0; } .et_pb_gallery_fullwidth .et_pb_gallery_item:first-child { opacity: 1; } /* 767px and below --------------*/ @media (max-width: 767px) { .et-pb-controllers a { width: 8px; height: 8px; margin-right: 12px; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- IMAGES ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= Common Base Styling ===============================================================================*/ /* Basic Styling */ .et_pb_module.et_pb_image { width: 100%; } /*================================================================================= Featured Images ===============================================================================*/ /* Basic Styling */ .oms-image-featured, .featured-image-wrap { margin-bottom: 30px; box-shadow: 0px 25px 30px -20px rgba(0,0,0,0.2); } .featured-image-wrap img { display: block; /* this gets weird of spacing on bottom. */ } /* 767px and below --------------*/ @media (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 (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; } } @media (min-width: 981px) { /* Common Styling */ .et_pb_column .et_pb_module.et_pb_image.oms-image-featured, .featured-image-wrap { width: 35%; float: right; margin-left: 5% !important; } } /*================================================================================= Image Style One ===============================================================================*/ /* Basic Styling */ .et_pb_image.oms-image-style-one { border-radius: 5px; overflow: hidden; } .et_pb_image.oms-image-style-one.primary { box-shadow: 0px 10px 25px -10px rgba(0,0,0,0.15) } .et_pb_image.oms-image-style-one.secondary { box-shadow: 0px 10px 45px -15px rgba(0,0,0,0.45) } @media (min-width: 981px) { .et_pb_image.oms-image-style-one.primary { width: 80%; } .et_pb_image.oms-image-style-one.secondary { width: 40%; bottom: -15% !important; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- NAVIGATION - Interior/Children Navigation ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= NAV STYLE ONE ===============================================================================*/ /* NOTE: this nav is used as a sidebar nav, ie on the How To pages. */ /*-------------- Base Styling --------------*/ /* Widget */ .oms-nav-style-one .et_pb_widget { width: 100% !important; margin: 0 !important; } /* List - Top Level */ .oms-nav-style-one #leftBar > ul { border-top: 2px solid rgba(0,0,0,.2); } /* List - Sub Level */ .oms-nav-style-one ul.sub-menu { border-top: 1px solid rgba(0,0,0,.1); margin-bottom: 0 !important; } /* List Item */ .oms-nav-style-one ul li { margin: 0 !important; border-bottom: 1px solid rgba(0,0,0,.1); } /* List Item - Sub Level last child */ .oms-nav-style-one ul.sub-menu li:last-child { border-bottom: none; } /* List Item Pseudo Element */ body.orbit #main-content .et_pb_section .oms-nav-style-one ul li:before { content: none; /* This overrides my base styling. */ } /* Anchor Tag */ .oms-nav-style-one ul li a { color: #333 !important; position: relative; padding-top: 15px; padding-bottom: 15px; display: inline-block; line-height: 1.3; font-weight: 500; font-size: 20px; /* For Clean Method project, I made this text the same size as the text for my CTA Buttons and CTA Links. */ } /* Anchor Tag - Sub Level */ .oms-nav-style-one ul.sub-menu li a { margin-left: 25px; font-weight: 400; font-size: 85%; } /* Pseudo Element */ .oms-nav-style-one ul li a:after { content: '\f054'; font-family: "FontAwesome"; font-weight: 500; font-size: 80%; position: relative; left: 8px; color: #79bde8; transition: all .2s ease-out; } /*-------------- Active State --------------*/ .oms-nav-style-one ul li.current-menu-item a { color: #5d87a1 !important; } @media (min-width: 981px) { /*-------------- Hover State --------------*/ /* NOTE: Since hover states don't exist on tablet or mobile, I've simplified the styling to only target hover states on larger viewports. */ /* Text Link on hover */ .oms-nav-style-one ul li a:hover { color: #5d87a1 !important; text-decoration: none; } /* Pseudo element on hover */ .oms-nav-style-one ul li a:hover:after { left: 13px; } } /*================================================================================= NAV STYLE TWO ===============================================================================*/ /* NOTE: this nav is used on Desktop, just under the main navigation; this nav is horizontal. */ /*-------------- Base Styling --------------*/ .oms-nav-style-two { padding-right: 0; border-right: none; } .oms-nav-style-two .et_pb_widget { width: 100% !important; margin: 0 !important; } body.orbit #main-content .oms-nav-style-two ul.menu { margin: 0; display: flex; justify-content: center; } body.orbit #main-content .oms-nav-style-two ul.menu li { margin:0; } body.orbit #main-content .oms-nav-style-two ul.menu li a { position: relative; color: #79bde8; padding: 20px 13px; display: block; font-size: 13px; letter-spacing: .5px; line-height: 1; } body.orbit #main-content .oms-nav-style-two ul.menu li a:before { content: ''; display: block; position: absolute; background: #79bde8; bottom: 0; left: 0; right: 0; height: 5px; width: 100%; z-index: 10000; -webkit-transform: scaleY(0); -moz-transform: scaleY(0); -ms-transform: scaleY(0); -o-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 0 100%; -ms-transform-origin: 0 100%; transform-origin: 0 100%; transition: transform .2s ease-out; -webkit-backface-visibility: hidden; } /* Active State */ /* Active Menu Item & Current Menu Ancestor */ body.orbit #main-content .oms-nav-style-two ul.menu li.current_page_item > a, body.orbit #main-content .oms-nav-style-two ul.menu li.current-page-ancestor > a { background: rgb(250,250,250); background: linear-gradient(180deg, rgba(250,250,250,0) 0%, rgba(240,240,240,1) 100%); } body.orbit #main-content .oms-nav-style-two ul.menu li.current_page_item > a:before, body.orbit #main-content .oms-nav-style-two ul.menu li.current-page-ancestor > a:before { -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); } @media (min-width: 981px) { /* Hover State */ body.orbit #main-content .oms-nav-style-two ul.menu li a:hover { text-decoration: none; background: rgb(250,250,250); background: linear-gradient(180deg, rgba(250,250,250,0) 0%, rgba(240,240,240,1) 100%); } body.orbit #main-content .oms-nav-style-two ul.menu li a:hover:before { -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); } } /*================================================================================= NAV STYLE THREE ===============================================================================*/ /* NOTE: this nav is used on Desktop, just under the main navigation; this nav is horizontal. */ /*-------------- Base Styling --------------*/ .oms-nav-style-three { padding-right: 0; border-right: none; } .et_pb_column .et_pb_module.oms-nav-style-three { margin-bottom: 40px !important; /* I had to target this specifically to override the general override I added to basic modules. */ } .oms-nav-style-three .et_pb_widget { width: 100% !important; margin: 0 !important; /* These styles mimic the styling for the portfolio module. */ background: rgba(0,0,0,.05); border-radius: 5px; /*border: 1px solid rgba(0,0,0,.15);*/ } .oms-nav-style-three .et_pb_widget ul.menu { padding: 25px 25px 15px!important; margin-bottom: 0!important; display: flex; flex-wrap: wrap; justify-content: center; } .oms-nav-style-three ul li:before { display: none; /* this overrides the stylized bullet point that is set to the basic unordered list. */ } .oms-nav-style-three .et_pb_widget ul.menu li a { color: #000; padding: 5px 20px; line-height: 1.8; } /* 767px and below --------------*/ @media (max-width: 767px) { .et_pb_column .et_pb_module.oms-nav-style-three { margin-bottom: 25px; } .oms-nav-style-three .et_pb_widget ul.menu li a { padding: 5px; font-size: 12px; word-break: break-word; } } @media (min-width: 981px) { /* Hover State */ /* This hover state is set up to match the same hover state for the Portfolio filter. */ .oms-nav-style-three .et_pb_widget ul.menu li a:hover { text-decoration: none; color: #fff; background-color: #000; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- 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. */ } /* KELLY: Commented this out because the extra spacing isn't needed. */ /* this adds in a little extra spacing for when the form follows content. */ /* body.orbit .et_pb_module:not(.ui-sortable) p + .nf-form-cont { margin-top: 50px !important; } */ /* Form Wrap */ body.orbit .ninja-forms-form-wrap { margin: 0; /* NOTE: So much dumb styling from Divi. */ max-width: unset; } /* Before Form Content */ .nf-before-form-content { display: none; } /* Field Container */ body.orbit .ninja-forms-form-wrap nf-fields-wrap { position: static; } body.orbit .ninja-forms-form-wrap nf-fields-wrap nf-field .nf-field-container { margin-bottom: 25px; } body.orbit .oms-box-style-two .ninja-forms-form-wrap nf-fields-wrap nf-field:last-child .nf-field-container { margin-bottom: 0; } /* Form Labels */ body.orbit .ninja-forms-form-wrap nf-fields-wrap nf-field .nf-field-label { margin-bottom: 5px; } body.orbit .ninja-forms-form-wrap nf-fields-wrap nf-field .nf-field-label label { font-size: 13px; /* This size should match the mobile size of the .pre-title */ text-transform: unset; font-weight: 500; letter-spacing: .75px; color: #000; display: block; /* Necessary to customize the line-height of label */ line-height: 1.2; } /* Common styling for input and textarea */ body.orbit .ninja-forms-form-wrap nf-fields-wrap nf-field input[type=text], body.orbit .ninja-forms-form-wrap nf-fields-wrap nf-field input[type=tel], body.orbit .ninja-forms-form-wrap nf-fields-wrap nf-field input[type=email], body.orbit .ninja-forms-form-wrap nf-fields-wrap nf-field textarea, body.orbit .ninja-forms-form-wrap nf-fields-wrap nf-field select:not([multiple]), body.orbit input[type=email], body.orbit input[type=text] { outline: none; padding: 10px 10px; /*font-size: 14px;*/ color: #000; border: 1px solid rgba(0,0,0,.15); width: 100%; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* Common styling for multiselect */ body.orbit .ninja-forms-form-wrap nf-fields-wrap nf-field select[multiple] { outline: none; padding: 10px 10px; /*font-size: 14px;*/ color: #000; border: 1px solid rgba(0,0,0,.15); width: 100%; border-radius: 0; overflow: auto; } /* Common height styling for inputs, excluding textarea */ body.orbit .ninja-forms-form-wrap nf-fields-wrap nf-field input[type="text"], body.orbit .ninja-forms-form-wrap nf-fields-wrap nf-field input[type="tel"], body.orbit .ninja-forms-form-wrap nf-fields-wrap nf-field input[type="email"] { height: auto; } /* Color Variation for input and textarea */ body.orbit .ninja-forms-form-wrap nf-fields-wrap nf-field input[type=text], body.orbit .ninja-forms-form-wrap nf-fields-wrap nf-field input[type=tel], body.orbit .ninja-forms-form-wrap nf-fields-wrap nf-field input[type=email], body.orbit .ninja-forms-form-wrap nf-fields-wrap nf-field textarea, body.orbit .ninja-forms-form-wrap nf-fields-wrap nf-field select, body.orbit input[type=email], body.orbit input[type=text] { background-color: rgba(210,210,225,.2); } /* Placeholder Styling for input and textarea */ body.orbit .ninja-forms-form-wrap nf-fields-wrap nf-field input[type=text]::placeholder, body.orbit .ninja-forms-form-wrap nf-fields-wrap nf-field input[type=tel]::placeholder, body.orbit .ninja-forms-form-wrap nf-fields-wrap nf-field input[type=email]::placeholder, body.orbit .ninja-forms-form-wrap nf-fields-wrap nf-field textarea::placeholder { color: rgba(0,0,0,.3); font-style: italic; } /* Input, Textarea, and Select :focus styling */ body.orbit input[type=text]:focus, body.orbit input[type=tel]:focus, body.orbit input[type=email]:focus, body.orbit textarea:focus, body.orbit select:focus { outline: none !important; border-color: rgba(0,0,0,.3) !important; } /* Textarea styling */ body.orbit .nf-field-element textarea { height: 170px; } /* Dropdown Arrow Styling ORBIT 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. */ /* KELLY NOTE: Arrow wasn't appearing in correct position so added this line: */ .list-select-wrap .nf-field-element { position: relative; display: block; } .list-select-wrap .nf-field-element:after { content: "\f0d7"; font-family: "FontAwesome"; font-weight: 700; font-size: 1.5em; color: #79bde8; position: absolute; /* KELLY NOTE: Corrected arrow position by changing top value from 50% to 20px; */ top: 20px; right: 20px; pointer-events: none; -webkit-transform: translateY(-50%); transform: translateY(-50%); } /* Checkbox and Radio Button */ .list-checkbox-wrap .nf-field-element li, .list-radio-wrap .nf-field-element li { display: flex; flex-direction: row; align-items: center; } .list-checkbox-wrap .nf-field-element li input[type=checkbox], .list-radio-wrap .nf-field-element li input[type=radio] { float: none; margin: 0 15px 0 0; } .list-checkbox-wrap .nf-field-element li label, .list-radio-wrap .nf-field-element li label { margin-left: 0 !important; } /* Asterisk */ .nf-error-msg, .ninja-forms-req-symbol { color: #f58466; } /* Required Message */ body.orbit .ninja-forms-form-wrap .nf-form-fields-required { font-size: 12px; } /* Input Error Message */ .nf-after-field .nf-error-msg { margin-right: 0; font-size: 12px; } /* Submit Button */ .field-wrap input[type=submit] { /* NOTE: Other styling is organized with the styling for CTA buttons. */ border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* Layout Styling */ .oms-formfield { clear: none !important; float: left; margin-right: 5%; } .oms-formfield.col-2 { width: 47.5%; } .oms-formfield.last { margin-right: 0; } /* Blog Sign-Up VARIATION */ .oms-formsimple { max-width: 700px; margin-left: auto; margin-right: auto; margin-bottom: 25px; } body.orbit .oms-formsimple .ninja-forms-form-wrap nf-fields-wrap { display: flex; flex-direction: row; } body.orbit .oms-formsimple .ninja-forms-form-wrap nf-fields-wrap nf-field:last-child { width: unset; margin-left: -1px; } .oms-formsimple .nf-field-label { display: none; } body.orbit .oms-formsimple .ninja-forms-form-wrap nf-fields-wrap nf-field .nf-field-container { margin: 0; } body.orbit .oms-formsimple .ninja-forms-form-wrap nf-fields-wrap nf-field .nf-field-container.submit-container .field-wrap input[type=submit] { margin: 0; height: 43px; border-radius: 0 5px 5px 0; } /* Fullwidth Submit Button */ body.orbit .nf-form-cont:not(.oms-formsimple) .ninja-forms-form-wrap nf-fields-wrap nf-field .nf-field-container.submit-container .field-wrap input { width: 100%; font-size: 28px !important; height: 75px; font-weight: 600; } @media (min-width: 768px) { .oms-formfield.col-3 { width: 30%; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- NUMBER COUNTER MODULE ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*================================================================================= Base Styling ===============================================================================*/ .et_pb_number_counter .percent { height: auto !important; } .et_pb_number_counter.et_pb_with_title .percent { margin-bottom: 15px; } /* Large Number */ .et_pb_number_counter .percent p { font-weight: 500; font-size: 75px; line-height: 1; margin-bottom: 0; } /* Title */ .et_pb_number_counter .title { margin-bottom: 0; text-shadow: none; /* This is necessary because it overrides the shadow that's spec'd on the containing overlay bg. */ } /* Drop Shadow for Text */ .et_pb_number_counter.et_pb_bg_layout_dark .percent p { text-shadow: 1px 5px 8px rgba(0,0,0,.3); } .et_pb_number_counter.et_pb_bg_layout_dark .title { text-shadow: 1px 1px 5px rgba(0,0,0,.5); } /*================================================================================= MEDIA QUERIES ===============================================================================*/ /* 767px and below --------------*/ @media (max-width: 767px) { .et_pb_number_counter.et_pb_with_title .percent { margin-bottom: 5px; } .et_pb_number_counter.et_pb_with_title .percent p { font-size: 50px; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- PORTFOLIO / PROJECTS MODULE ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /* NOTE: We ran into an issue with the other portfolio module and it's inability to display tags correctly within the title field of each individual portfolio project. However, the tag trick works fine with the filterable portfolio module, so I'm electing to use that module and simply display:none the filter... the path of least resistance. */ /* NOTE: For HubStor project, we ran into bug with filterable portfolio modulue that doesn't allow custom post count number, it displays all. However, the regular portfolio module allows you to customize the number that gets displayed. /* NOTE: The Grid Layout offers the color overlay with icon hover state. The fullwidth layout does NOT. /*================================================================================= PORTFOLIO FILTER MENU ===============================================================================*/ /* No Filter Option * * NOTE: We want to always use the filterable portfolio, instead of the regular non-filter portfolio, because it allows us to enter in tags. However, there may be times when we don't need to show the filter, so this class ".no-filter" helps enable that.*/ .et_pb_filterable_portfolio.no-filter .et_pb_portfolio_filters { display: none; } .et_pb_filterable_portfolio .et_pb_portfolio_filters { background: rgba(0,0,0,.05); border-radius: 5px; /*border: 1px solid rgba(0,0,0,.15);*/ } .et_pb_filterable_portfolio .et_pb_portfolio_filters ul { padding: 25px 25px 15px !important; margin-bottom: 0 !important; display: flex; flex-wrap: wrap; justify-content: center; } .et_pb_filterable_portfolio .et_pb_portfolio_filters ul li { margin-bottom: 10px !important; font-size: unset; /* This forces the font-size to follow the basic font-size that I've set towards the top of this style sheet. */ } .et_pb_filterable_portfolio .et_pb_portfolio_filters ul li:before { display: none; /* this overrides the stylized bullet point that is set to the basic unordered list. */ } .et_pb_filterable_portfolio .et_pb_portfolio_filters ul li a { background: none; border: none; color: #000; padding: 5px 20px; text-align: center; line-height: 1.8; display: unset; } .et_pb_filterable_portfolio .et_pb_portfolio_filters ul li a:hover { text-decoration: none; color: #fff; background-color: #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 (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; } @media (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,0,0,.15); margin-top: 75px; } .et_pb_portfolio .et_pb_portofolio_pagination ul { text-align: center; padding-left: 0; } /* 767px and below --------------*/ @media (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 (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); } } @media (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); } /* 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"; transform: translateY(10px); top:50%; transition: all .2s ease-out; } /* 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; transform: translateY(10px); opacity: 0; transition: all .2s ease-out; } /* 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: "FontAwesome"; font-weight: 600; font-size: 80%; position: relative; left: 8px; color: #79bde8; transition: all .2s ease-out; } /* Project Meta - Name & Cateogry */ .et_pb_portfolio_item .post-meta { font-size: 12px; border-top: 1px solid rgba(0,0,0,.2); 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; } @media (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: #79bde8; } /* 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 { 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*/ { transform: translateY(0px); opacity: 1; } /* Post Meta hover */ .et_pb_portfolio_item .post-meta a:hover { text-decoration: underline; } } @media (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; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- COMMUNITY SUPPORT PAGE ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*-------------- Long Quote --------------*/ p.community-long-quote {line-height: 1.4em !important; font-size: 20px !important; margin-top: -80px !important; } p.community-quote-icon:before {content: '“'; color: #9fd6bc; font-size: 75px; } @media (min-width: 650px) and (max-width: 980px) { p.community-long-quote {font-size: 22px !important; } } /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- VIDEO EMBED MODULE ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /*-------------- Common Styling --------------*/ /* Video Container */ .et_pb_video_overlay_hover { transition: all 0.3s ease-out; } /* Video Play Button */ .et_pb_video .et_pb_video_overlay .et_pb_video_overlay_hover a { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 50%; margin: 0; font-size: 0; line-height: 0; background: rgba(159,214,188,.97); width: 100px; height: 100px; } .et_pb_video .et_pb_video_overlay .et_pb_video_overlay_hover a:before { font-size: 35px; line-height: 1; font-family: "FontAwesome"; content: "\f04b"; font-weight: 700; position: absolute; top: 50%; left: 50%; transform: translate(-42%, -50%); } /* 499px and below --------------*/ @media (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; } .et_pb_video .et_pb_video_overlay .et_pb_video_overlay_hover a:before { font-size: 28px; } } /* 981px to 1199px --------------*/ @media (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; } } @media (min-width: 981px) { /*-------------- Hover State --------------*/ /* Video Overlay */ .et_pb_video .et_pb_video_overlay_hover:hover { background: rgba(0,0,0,.5)!important; } /* Play Button */ .et_pb_video .et_pb_video_overlay_hover:hover a { background: rgba(159,214,188,1); } .et_pb_video .et_pb_video_overlay .et_pb_video_overlay_hover a:hover { text-decoration: none; color: #fff; } } @media (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. ================================================================================================================================= \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ ---------------------------------------------------------------------------------------------------------------------------------*/ /*///////////////////////////////////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------------------------------------- SLIDE - used for sliding border-bottom on text links ------------------------------------------------------------------------------------------------------------- /////////////////////////////////////////////////////////////////////////////////////////////////////////////*/ /* Vender Prefixes */ @-webkit-keyframes slide { 0% { -webkit-transform:translateX(0) } 50% { -webkit-transform:translateX(100%) } 50.01% { -webkit-transform:translateX(-100%) } to { -webkit-transform:translateX(0) } } @keyframes slide { 0% { transform:translateX(0) } 50% { transform:translateX(100%) } 50.01% { transform:translateX(-100%) } to { transform:translateX(0) } } /* 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; } /* Hero Videos */ .et_pb_section_video_bg .mejs-container { background: transparent; } /* Ninja Forms Honeypot */ .nf-form-hp { visibility: hidden; } /* Cookie Consent Banner */ .cky-notice-des p { font-size: 14px !important; } .cky-consent-container { z-index: 2000000001 !important; } /* Footer social icons ADA text */ #footer-bottom ul.et-social-icons li .hide-social {display: none;} /* Footer accolades */ @media (min-width: 1100px) { .footer-widget .custom-html-widget p.bottom-logos {max-width: 390px;} .footer-widget .custom-html-widget p.bottom-logos img {max-height: 37px; width: auto;} } @media (min-width: 1200px) { .footer-widget .custom-html-widget p.bottom-logos {max-width: 450px;} .footer-widget .custom-html-widget p.bottom-logos img {max-height: 42px; width: auto;} } @media (max-width: 767px) { #footer-widgets .custom-html-widget p.bottom-logos img {max-height: 50px; width: auto;} } /* Gravity Forms */ .gform-theme--foundation .gform_fields {grid-row-gap: 20px !important;} .gform-theme--foundation p.gform_required_legend {display: none;} body.orbit .gform_wrapper.gform-theme--foundation .gfield label {font-weight: 600;} .gform-theme--framework ::placeholder {color: #0000004d !important; opacity: 1; font-style: italic;} .gform-theme--foundation .gfield input[type="tel"] {background-color: #f6f6f9; border-color: #d1d1d4;} .gform-theme--foundation .ginput_address_state {inline-size: 100%;} .gform-theme--foundation .ginput_address_state select {background-color: #f6f6f9; border-color: #d1d1d4;} .gform-theme--foundation .gfield textarea {background-color: #f6f6f9; border-color: #d1d1d4;} .gform-theme--foundation .gfield select {background-color: #f6f6f9; border-color: #d1d1d4;} .gform-theme--foundation input#gform_submit_button_1, .gform-theme--foundation input#gform_submit_button_2, .gform-theme--foundation input#gform_submit_button_3, .gform-theme--foundation input#gform_submit_button_4, .gform-theme--foundation input#gform_submit_button_5, .gform-theme--foundation input#gform_submit_button_8, .gform-theme--foundation input#gform_submit_button_9, .gform-theme--foundation input#gform_submit_button_10, .gform-theme--foundation input#gform_submit_button_11, .gform-theme--foundation input#gform_submit_button_12, .gform-theme--foundation input#gform_submit_button_13, .gform-theme--foundation input#gform_submit_button_14, .gform-theme--foundation input#gform_submit_button_15, .gform-theme--foundation input#gform_submit_button_16, .gform-theme--foundation input#gform_submit_button_17 {background-color: #5d87a1; width: 100%; font-size: 28px !important; font-weight: 600; height: 75px;} .gform-theme--foundation input#gform_submit_button_1:hover, .gform-theme--foundation input#gform_submit_button_2:hover, .gform-theme--foundation input#gform_submit_button_3:hover, .gform-theme--foundation input#gform_submit_button_4:hover, .gform-theme--foundation input#gform_submit_button_5:hover, .gform-theme--foundation input#gform_submit_button_8:hover, .gform-theme--foundation input#gform_submit_button_9:hover, .gform-theme--foundation input#gform_submit_button_10:hover, .gform-theme--foundation input#gform_submit_button_11:hover, .gform-theme--foundation input#gform_submit_button_12:hover, .gform-theme--foundation input#gform_submit_button_13:hover, .gform-theme--foundation input#gform_submit_button_14:hover, .gform-theme--foundation input#gform_submit_button_15:hover, .gform-theme--foundation input#gform_submit_button_16:hover, .gform-theme--foundation input#gform_submit_button_17:hover {background: #506d80; border-color: #506d80;} /* Home */ .gform-theme--foundation input#gform_submit_button_6 {background-color:#f58466; width: 100%; font-size: 28px !important; font-weight: 600; height: 75px; border-color: #f58466;} .gform-theme--foundation input#gform_submit_button_6:hover {background: #d5674a; border-color: #d5674a;} /* Gravity Perks phone field */ body.orbit #main-content .et_pb_post .gform_wrapper ul, body.orbit #main-content .et_pb_section .gform_wrapper ul, body.orbit #page-container .et_pb_section.formtext-section .gform_wrapper ul {padding-left: 0 !important; margin-bottom: 0 !important;} body.orbit #main-content .et_pb_post .gform_wrapper ul li, body.orbit #main-content .et_pb_section .gform_wrapper ul li, body.orbit #page-container .et_pb_section.formtext-section .gform_wrapper ul li {font-size: 16px; line-height: 1.2; width: 100%; margin-bottom: 0;} body.orbit #main-content .et_pb_post .gform_wrapper ul li:before, body.orbit #main-content .et_pb_section .gform_wrapper ul li:before, body.orbit #page-container .et_pb_section.formtext-section .gform_wrapper ul li:before {display: none;} /* Blog Signup */ .gform-theme--foundation#gform_wrapper_7 {max-width: 700px; margin: 0 auto;} .gform-theme--foundation#gform_wrapper_7 .gfield input[type="email"] {height: 45px; text-align: left; font-size: 16px;} .gform-theme--foundation input#gform_submit_button_7 {background-color: #5d87a1; width: 100%; font-size: 22px !important; height: 45px; border-radius: 0 6px 6px 0;} .gform-theme--foundation input#gform_submit_button_7:hover {background: #506d80; border-color: #506d80;} @media (max-width: 980px) { .gform-theme--foundation input#gform_submit_button_1, .gform-theme--foundation input#gform_submit_button_2, .gform-theme--foundation input#gform_submit_button_3, .gform-theme--foundation input#gform_submit_button_4, .gform-theme--foundation input#gform_submit_button_5, .gform-theme--foundation input#gform_submit_button_8, .gform-theme--foundation input#gform_submit_button_9, .gform-theme--foundation input#gform_submit_button_10, .gform-theme--foundation input#gform_submit_button_11, .gform-theme--foundation input#gform_submit_button_12, .gform-theme--foundation input#gform_submit_button_13, .gform-theme--foundation input#gform_submit_button_14, .gform-theme--foundation input#gform_submit_button_15, .gform-theme--foundation input#gform_submit_button_16, .gform-theme--foundation input#gform_submit_button_17 {font-size: 20px !important;} } @media (min-width: 640px) { .gform-theme--foundation#gform_wrapper_7 .gform_fields {-moz-column-gap: 0; column-gap: 0;} } @media (max-width: 639px) { .gform-theme--foundation input#gform_submit_button_7 {border-radius: 6px;} } html h1, html h2, html h3, html h4, html h5, html h6, html p {transition: none;} /* FAQ Images */ body.orbit .et_pb_section.et_section_regular.faqs-section .et_pb_row:not(.et_pb_row_fullwidth) .et_pb_column .et_pb_blurb .et_pb_image_wrap {text-align: left;} body.orbit .et_pb_section.et_section_regular.faqs-section .et_pb_row:not(.et_pb_row_fullwidth) .et_pb_column img {min-width: initial;} /* Blog Category */ body.orbit.category .et_pb_row, body.orbit.category .container, body.orbit.category #main-content .container {max-width: 1200px;} body.orbit.category #main-content .container {padding-top: 60px; padding-bottom: 80px;} body.orbit.category .archive-title {background-image: linear-gradient(145deg,#517a94 0%,#25475e 100%) !important; margin-bottom: 30px;} body.orbit.category #main-content .archive-title .container {text-align: center; padding-top: 80px;} body.orbit.category #page-container .archive-title p {color: #ffffff; margin: 0; font-size: 25px; color: rgba(255, 255, 255, .85);} body.orbit.category #page-container .archive-title p a {color: #ffffff;} body.orbit.category #page-container .archive-title h1 {color: #ffffff; margin: 0 0 2px;} body.orbit.category .post-wrapper-global {display: flex; flex-direction: column; grid-template-columns: auto;} body.orbit.category .post-wrapper-global article.et_pb_post {display: flex; flex-direction: row; box-shadow: none; background-color: #f5f5f5; border-bottom: 1px solid #e2e2e2 !important; padding: 0 0 30px;} body.orbit.category .post-wrapper-global article.et_pb_post .featured-image {width: 300px;} body.orbit.category .post-wrapper-global article.et_pb_post .featured-image .entry-featured-image-url {margin: 0 !important;} body.orbit.category .post-wrapper-global article.et_pb_post .post-data {width: calc(100% - 300px); padding-left: 30px;} body.orbit.category .post-wrapper-global article.et_pb_post .post-data h3.entry-title {} body.orbit.category .post-wrapper-global article.et_pb_post .post-data h3.entry-title a:after {display: none;} body.orbit.category .post-wrapper-global article.et_pb_post .post-data h3.entry-title a:hover {color: #79bde8;} body.orbit.category .post-wrapper-global article.et_pb_post .post-data p.post-meta {display: block; order: 2; border: none; margin: 0 0 15px !important; padding: 0; font-size: 16px !important;} body.orbit.category #left-area .post-wrapper-global article.et_pb_post .post-data p.post-meta a {color: #000000;} body.orbit.category .post-wrapper-global article.et_pb_post .post-data p:not(.post-meta) {order: 3;} body.orbit.category .post-wrapper-global article.et_pb_post .post-data p.read-more {text-align: right; margin: 20px 0 0;} body.orbit.category .post-wrapper-global article.et_pb_post .post-data p.read-more a {color: #79bde8;} body.orbit.category .post-wrapper-global article.et_pb_post .post-data p.read-more a:hover {color: #000000;} body.orbit.category .post-wrapper-global article.et_pb_post .post-data p.read-more a .fa {font-weight: normal; margin-left: 3px; position: relative; top: 1px;} body.orbit.category .pagination {border: none; padding: 0;} body.orbit.category .oms-section-fifty50 .et_pb_row {max-width: 100%;} body.orbit.category #page-container .et_pb_section.expert-section h2 {color: #ffffff;} body.orbit.category #page-container .et_pb_section.expert-section h3 {color: #ffffff;} body.orbit #page-container .et_pb_section.expert-section h3 a {text-decoration: none; box-shadow: 0 -2px 0 #79bde8 inset; padding: 0 2px 2px; transition: .3s cubic-bezier(.17,.88,.5,1.5); font-weight: 500;} body.orbit #page-container .et_pb_section.expert-section h3 a:hover {box-shadow: 0 -13px 0 #addaf7 inset;} @media (max-width: 850px) { body.orbit.category .post-wrapper-global article.et_pb_post {flex-direction: column;} body.orbit.category .post-wrapper-global article.et_pb_post .featured-image {width: 100%; max-width: 300px; margin: 0 auto 15px;} body.orbit.category .post-wrapper-global article.et_pb_post .post-data {width: 100%; padding: 0;} } /* Fix form overlay issue */ body.orbit .et_pb_section.et_section_regular.formtext-section {position: relative; z-index: 2;}