/*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Imports # Custom properties # Reset # Typography # Elements # Links # Accessibility # Layout # Forms # Header # Main navigation menu # Main navigation icons # Buddypress navigation icons # Content navigation # Footer # Infinite scroll # Site Layout # Site Sub Header Layout # Site Single Blog Layout # Site Text Editor # WP Idea Stream --------------------------------------------------------------*/ /*-------------------------------------------------------------- # Imports --------------------------------------------------------------*/ @import "_custom-properties.css"; @import "_reset.css"; @import "_typography.css"; @import "_elements.css"; @import "_links.css"; @import "_grid.css"; /*-------------------------------------------------------------- # Accessibility --------------------------------------------------------------*/ /** * Text meant only for screen readers. * Re: word-wrap: Many screen reader and browser combinations announce broken * words as they would appear visually. */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; word-wrap: normal !important; } .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #21759b; display: block; font-size: 0.875rem; font-weight: 700; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ } /* Do not show the outline on the skip link target. */ #primary[tabindex="-1"]:focus { outline: 0; } canvas { width: 100% !important; height: auto !important; } body.elementor-editor-active .site-header-wrapper { z-index: 99; } .elementor-template-full-width #page>.container, .elementor-template-full-width #page>.container-fluid { max-width: 100%; padding: 0; } p:empty { content: none; margin: 0; } p:empty::before { content: none; } .wp-embed-responsive .wp-block-embed-vimeo .wp-block-embed__wrapper::before, .wp-embed-responsive .wp-block-embed-youtube .wp-block-embed__wrapper::before { content: none; } /*-------------------------------------------------------------- # Layouts --------------------------------------------------------------*/ .site { margin: 0 auto; max-width: 100%; overflow: hidden; } .blog .site-wrapper, .home-page .site-wrapper { margin-top: 15px; } @media (min-width: 768px) { #primary, .site-wrapper { min-height: calc(100vh - 190px); } .page-template-full-width #primary, .page-template-full-width .site-wrapper { min-height: calc(100vh - 130px); } } @media (max-width: 767px) { .page-template-full-width:not(.elementor-editor-active) .site { padding-top: 36px !important; } } @media (--sidebar-query) { .has-sidebar-right:not(.buddypress):not(.bbpress):not(.woocommerce):not(.woocommerce-page):not(.page-template-full-width-container) .site-wrapper, .has-sidebar-right.buddyx-dokan.woocommerce:not(.buddypress):not(.bbpress):not(.woocommerce-page):not(.page-template-full-width-container) .site-wrapper, .has-sidebar-right.bpsh-buddypress .site-wrapper, .has-buddypress-sidebar-right:not(.bp-user):not(.single-item):not(.group-create):not(.page-template-full-width-container) .site-wrapper, .has-bbpress-sidebar-right.bbpress:not(.buddypress) .site-wrapper, .has-woocommerce-sidebar-right .site-wrapper { display: grid; grid-template-columns: 3fr 260px; grid-gap: 2rem; justify-content: center; } .has-sidebar-left:not(.buddypress):not(.bbpress):not(.woocommerce):not(.woocommerce-page):not(.page-template-full-width-container) .site-wrapper, .has-sidebar-left.buddyx-dokan.woocommerce:not(.buddypress):not(.bbpress):not(.woocommerce-page):not(.page-template-full-width-container) .site-wrapper, .has-sidebar-left.bpsh-buddypress .site-wrapper, .has-buddypress-sidebar-left:not(.bp-user):not(.single-item):not(.group-create):not(.page-template-full-width-container) .site-wrapper, .has-bbpress-sidebar-left.bbpress:not(.buddypress) .site-wrapper, .has-woocommerce-sidebar-left .site-wrapper { display: grid; grid-template-columns: 260px 3fr; grid-gap: 2rem; justify-content: center; } .has-sidebar-both:not(.buddypress):not(.bbpress):not(.woocommerce):not(.woocommerce-page):not(.page-template-full-width-container) .site-wrapper, .has-sidebar-both.buddyx-dokan.woocommerce:not(.buddypress):not(.bbpress):not(.woocommerce):not(.woocommerce-page):not(.page-template-full-width-container) .site-wrapper, .has-sidebar-both.bpsh-buddypress .site-wrapper, .has-buddypress-sidebar-both:not(.bp-user):not(.single-item):not(.group-create):not(.page-template-full-width-container) .site-wrapper, .has-bbpress-sidebar-both.bbpress:not(.buddypress) .site-wrapper, .has-woocommerce-sidebar-both .site-wrapper { display: grid; grid-template-columns: 260px 2fr 260px; grid-gap: 1.5rem; justify-content: center; } .has-sidebar-both:not(.buddypress):not(.bbpress):not(.woocommerce):not(.woocommerce-page):not(.page-template-full-width-container) .primary-sidebar, .has-sidebar-both.buddyx-dokan.woocommerce:not(.buddypress):not(.bbpress):not(.woocommerce-page):not(.page-template-full-width-container) .primary-sidebar, .has-sidebar-both.bpsh-buddypress .primary-sidebar, .has-buddypress-sidebar-both:not(.bp-user):not(.single-item):not(.group-create):not(.page-template-full-width-container) .primary-sidebar, .has-bbpress-sidebar-both.bbpress:not(.buddypress) .primary-sidebar, .has-woocommerce-sidebar-both .primary-sidebar { padding: 0; grid-column: 3; min-width: 0; } .has-sidebar-both:not(.buddypress):not(.bbpress):not(.woocommerce):not(.woocommerce-page):not(.page-template-full-width-container) .site-main, .has-sidebar-both.buddyx-dokan.woocommerce:not(.buddypress):not(.bbpress):not(.woocommerce-page):not(.page-template-full-width-container) .site-main, .has-sidebar-both.bpsh-buddypress .site-main, .has-buddypress-sidebar-both:not(.bp-user):not(.single-item):not(.group-create):not(.page-template-full-width-container) .site-main, .has-bbpress-sidebar-both.bbpress:not(.buddypress) .site-main, .has-woocommerce-sidebar-both .site-main { grid-column: 2; min-width: 0; } .has-sidebar-both:not(.buddypress):not(.bbpress):not(.woocommerce):not(.woocommerce-page):not(.page-template-full-width-container) .primary-sidebar, .has-sidebar-both.buddyx-dokan.woocommerce:not(.buddypress):not(.bbpress):not(.woocommerce-page):not(.page-template-full-width-container) .primary-sidebar, .has-sidebar-both.bpsh-buddypress .primary-sidebar, .has-buddypress-sidebar-both:not(.bp-user):not(.single-item):not(.group-create):not(.page-template-full-width-container) .primary-sidebar, .has-bbpress-sidebar-both.bbpress:not(.buddypress) .primary-sidebar, .has-woocommerce-sidebar-both .primary-sidebar { grid-column: 3; min-width: 0; } .site-header { grid-column: span 2; } .site-main, .has-woocommerce-sidebar-right .site-wrapper>.content-area { grid-column: 1; min-width: 0; } .has-sidebar-left:not(.buddypress):not(.bbpress):not(.woocommerce):not(.woocommerce-page):not(.page-template-full-width-container) .site-main, .has-sidebar-left.buddyx-dokan.woocommerce:not(.buddypress):not(.bbpress):not(.woocommerce-page):not(.page-template-full-width-container) .site-main, .has-sidebar-left.bpsh-buddypress .site-main, .has-buddypress-sidebar-left:not(.bp-user):not(.single-item):not(.group-create):not(.page-template-full-width-container) .site-main, .has-bbpress-sidebar-left.bbpress:not(.buddypress) .site-main, .has-woocommerce-sidebar-left .site-main { grid-column: 2; min-width: 0; } .primary-sidebar, .has-woocommerce-sidebar-left .site-wrapper>.content-area, .has-woocommerce-sidebar-both .site-wrapper>.content-area { grid-column: 2; min-width: 0; } .site-footer { grid-column: span 2; } /* BuddyPress Sidebar */ .has-buddypress-sidebar-both.has-no-buddypress-sidebar-left .site-wrapper { grid-template-columns: 3fr 260px !important; } .has-buddypress-sidebar-both.has-no-buddypress-sidebar-right .site-wrapper { grid-template-columns: 260px 3fr !important; } .has-buddypress-sidebar-both.has-no-buddypress-sidebar-left .site-main { grid-column: 1 !important; } .has-buddypress-sidebar-both.has-no-buddypress-sidebar-left .primary-sidebar { grid-column: 2 !important; } /* Page Templates */ .page-template-page-left-sidebar .site-wrapper { display: grid; grid-template-columns: 260px 3fr !important; grid-gap: 2rem; justify-content: center; } .page-template-page-left-sidebar .site-main { grid-column: 2 !important; min-width: 0; } .page-template-page-right-sidebar .site-wrapper { display: grid; grid-template-columns: 3fr 260px !important; grid-gap: 2rem; justify-content: center; } .page-template-page-right-sidebar .site-main { grid-column: 1 !important; min-width: 0; } .page-template-page-both-sidebar .site-wrapper { display: grid; grid-template-columns: 260px 2fr 260px !important; grid-gap: 1.5rem; justify-content: center; } .page-template-page-both-sidebar .site-main { grid-column: 2 !important; min-width: 0; } .page-template-page-both-sidebar .primary-sidebar { grid-column: 3 !important; min-width: 0; } } @media screen and (max-width: 60em) { /* Sidebar and Content ordering in mobile */ .site-wrapper { display: flex; flex-flow: row wrap; } .left-sidebar, .woo-left-sidebar { order: 2; width: 100%; } #primary { order: 1; width: 100%; } .primary-sidebar, .woo-primary-sidebar { order: 3; width: 100%; } } /*-------------------------------------------------------------- # Forms --------------------------------------------------------------*/ /* stylelint-disable */ textarea { width: 100%; } /* stylelint-enable */ /* stylelint-disable */ input[type="button"], input[type="reset"], input[type="submit"], a.read-more.button { font-family: inherit; font-size: inherit; color: #fff; background-color: var(--button_background_color); border-radius: 3px; padding: 10px 20px; font-weight: 500; font-style: normal; text-decoration: none; text-align: center; cursor: pointer; display: inline-block; line-height: 1.3; border: 1px solid var(--button_border_color); outline: 0; vertical-align: middle; -webkit-appearance: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transition: all linear .2s; transition: all linear .2s; } .customize-partial-edit-shortcut button, .widget .customize-partial-edit-shortcut button { color: #fff !important; font-size: 18px !important; border-radius: 50% !important; border: 2px solid #fff !important; padding: 3px !important; } /* stylelint-enable */ input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, a.read-more.button:hover { background-color: var(--button_background_hover_color); border: 1px solid var(--button_border_hover_color); } button:active, button:focus, input[type="button"]:active, input[type="button"]:focus, input[type="reset"]:active, input[type="reset"]:focus, input[type="submit"]:active, input[type="submit"]:focus { border-color: #aaa #bbb #bbb; } button:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus { outline: thin dotted; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea { color: #666; border: 1px solid var(--global-border-color); border-radius: 4px; padding: 10px; min-height: 38px; } input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="range"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="color"]:focus, textarea:focus { color: #111; outline: thin dotted; } table { border-collapse: collapse; border-spacing: 0; width: 100%; margin: 0 0 1rem; border: 1px solid var(--global-border-color); } table td, table th { padding: 1rem; border: 1px solid var(--global-border-color); } .widget_calendar table th { padding: 0.2em; } select { display: inline-block; font-family: inherit; font-style: inherit; font-size: 15px; height: 35px; outline: none; vertical-align: middle; background-color: #fff; border: 1px solid var(--global-border-color); border-radius: 3px; box-shadow: none; padding: 0 12px; color: inherit; } /*-------------------------------------------------------------- # Header --------------------------------------------------------------*/ .site-header-wrapper { position: relative; margin: 0; padding-top: 5px; padding-bottom: 5px; border-top: 0; background: #fff; min-height: 51px; z-index: 999; box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.05), 0 5px 10px 0 rgba(189, 189, 189, 0.15); } .site-header-wrapper.has-sticky-header { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 999; } @media (max-width: 767px) { .site-header-wrapper { z-index: 9999; } } .site-header-wrapper.has-sticky-header { box-shadow: 0 1px 0 0 rgba(206, 206, 206, 0.05), 0 5px 10px 0 rgba(132, 132, 132, 0.15); } .site-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } .header-image { margin: 0 auto; } .header-image img { display: block; margin: 0 auto; } .custom-logo-link { display: block; } .site-branding { display: flex; align-items: center; } .site-logo-wrapper>a { margin-right: 15px; } .site-branding img { width: 100%; max-width: 150px; } .site-title { margin: 0; margin-bottom: 6px; font-size: 38px; font-weight: 700; line-height: 1.2; color: #333332; } .site-title a { text-decoration: none; color: inherit; } .site-description { margin: -5px 0 0; font-size: 14px; font-weight: inherit; line-height: 1.4; word-wrap: break-word; color: #757575; } /*-------------------------------------------------------------- ## Basic navigation menus - handles submenu and small screen toggle --------------------------------------------------------------*/ .nav--toggle-small .menu-toggle { display: block; margin: 0; margin-top: 3px; margin-left: 10px; padding: 10px !important; font-family: var(--highlight-font-family); font-size: 80%; line-height: 0 !important; color: #111; text-transform: uppercase; border: 0; border-radius: 0; background: transparent; float: right; cursor: pointer; order: 2; } .nav--toggle-small .menu-toggle .fa { font-size: 24px; } .nav--toggle-sub .dropdown, .mobile-menu-heading { display: none; } body.admin-bar .site-header-wrapper.has-sticky-header { top: 32px; } @media (max-width: 782px) { body.admin-bar .site-header-wrapper.has-sticky-header { top: 46px; } .main-navigation .user-profile-menu .sub-menu { border-top: 1px solid var(--global-border-color); } } @media (max-width: 600px) { body.admin-bar .site-header-wrapper.has-sticky-header { top: 0; } body.admin-bar .has-sticky-header .main-navigation .primary-menu-container { top: 0; } } .main-navigation .user-profile-menu li a, .main-navigation .bp-header-submenu li a { padding: 6px 15px; } .main-navigation .user-profile-menu li+li, .main-navigation .bp-header-submenu li+li { border-top: 1px solid var(--global-border-color); } .main-navigation .buddyx-mobile-menu, .moible-icons { display: none; } @media (max-width: 767px) { .main-navigation .primary-menu-container.buddyx-desktop-menu, .desktop-icons { display: none; } .main-navigation .buddyx-mobile-menu, .moible-icons { display: block; } .nav--toggle-small.nav--toggled-on .menu, .nav--toggle-small .menu { display: block; padding: 0 20px 20px 20px; } .mobile-menu-close { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; opacity: 0; visibility: hidden; background-color: rgba(0, 0, 0, 0.7); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .has-sticky-header .mobile-menu-close { z-index: 99; } .mobile-menu-opened .mobile-menu-close { opacity: 1; visibility: visible; } .main-navigation .primary-menu-container { position: fixed; top: 0; bottom: 0; right: 0; width: 340px; overflow: auto; background-color: white; z-index: 9999; transform: translate3d(340px, 0, 0); transition: all .2s ease; opacity: 0; visibility: hidden; } body.admin-bar .main-navigation .primary-menu-container { top: 46px; } .mobile-menu-opened .primary-menu-container { display: block; transform: none; opacity: 1; visibility: visible; transition: transform .3s ease; } .mobile-menu-heading { margin-bottom: 20px; padding: 28px 20px; background-color: black; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; } .mobile-menu-heading .menu-title { letter-spacing: .6px; margin-bottom: 0px; padding-bottom: 0px; font-size: 24px; text-transform: uppercase; vertical-align: middle; display: inline-block; color: #fff; } .mobile-menu-heading .menu-close { width: auto; color: #fff; text-transform: uppercase; text-decoration: none; font-size: 12px; letter-spacing: .6px; line-height: 35px; position: relative; cursor: pointer; padding-right: 21px; } .mobile-menu-heading .menu-close:before, .mobile-menu-heading .menu-close:after { content: " "; position: absolute; right: 0px; top: 50%; margin-top: -1px; width: 15px; height: 2px; display: inline-block; background-color: white; -webkit-transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out, width 0.2s ease-in-out; -moz-transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out, width 0.2s ease-in-out; -o-transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out, width 0.2s ease-in-out; transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out, width 0.2s ease-in-out; } .mobile-menu-heading .menu-close:before, .mobile-menu-heading .menu-close:after { transform: rotate(0deg); } .mobile-menu-heading .menu-close:hover:before { transform: rotate(45deg); } .mobile-menu-heading .menu-close:hover:after { transform: rotate(-45deg); } .buddyx-mobile-menu .dropdown-toggle { display: block; position: absolute; top: 0; right: 0; margin: 0; padding: 0; width: 36px; height: 36px; text-align: center; outline: 0; background-color: var(--button_background_color); border: 1px solid var(--button_border_color); border-radius: 3px; } .buddyx-mobile-menu .dropdown-toggle:after { content: "\f107"; font-family: "FontAwesome"; font-size: 18px; } .main-navigation ul.menu ul li { padding-left: 0; } #primary-menu .sub-menu { display: none; } #primary-menu .sub-menu.toggle-show { display: block; } .main-navigation ul.menu li+li { border-top: 1px solid rgba(34, 36, 38, .1); } .main-navigation ul li.menu-item-has-children { position: relative; } .buddyx-mobile-menu .menu-icons-wrapper #searchform input[type=text] { width: 155px; padding-left: 10px; } .buddyx-mobile-menu .menu-icons-wrapper #searchform input[type=submit] { height: 40px; } } @media (max-width: 480px) { .main-navigation .primary-menu-container { width: 300px; } } @media (min-width: 768px) { .primary-menu-container { float: left; display: flex; align-items: center; } .nav--toggle-small .menu-toggle { display: none; } .nav--toggle-small .menu { display: block; } .nav--toggle-sub .dropdown-symbol { display: block; background: transparent; position: absolute; right: 20%; top: 50%; width: 60%; height: 60%; border: solid #000; border-width: 0 2px 2px 0; transform: translateY(-50%) rotate(45deg); } .nav--toggle-sub ul ul { display: none; position: absolute; top: 100%; right: 0; flex-direction: column; background: #fff; margin-left: 0; z-index: 1; text-shadow: none; text-align: left; box-shadow: 0 2px 7px 1px rgba(0, 0, 0, .05), 0 6px 32px 0 rgba(18, 43, 70, .1); border: 0; border-radius: .28571429rem; transition: none; } .nav--toggle-sub ul .hideshow ul { margin-left: -10px; } .hideshow.menu-item--has-toggle>ul.sub-menu:before { right: 24px; } .nav--toggle-sub ul.user-profile-menu .sub-menu::before, .menu-item--has-toggle>ul.sub-menu::before { content: ' '; position: absolute; width: 0; height: 0; top: 0; right: 28px; border: 7px solid #000; border-color: #fff #fff transparent transparent; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); box-shadow: 2px -3px 3px 0 rgba(0, 0, 0, .02); z-index: 100; } .nav--toggle-sub ul.user-profile-menu .sub-menu::before, .sub-menu li.menu-item--has-toggle>ul.sub-menu:before { top: 11px; left: auto; right: -13px; transform: rotate(45deg); } .nav--toggle-sub ul.user-profile-menu .sub-menu { top: 0; left: -100%; right: auto; } .main-navigation ul.sub-menu li a { padding: 9px 15px; } .nav--toggle-sub .dropdown, .nav--toggle-sub .dropdown-toggle { background: transparent; position: absolute; right: 0; top: 50%; width: var(--dropdown-symbol-width); height: var(--dropdown-symbol-width); font-size: inherit; line-height: inherit; margin: 0; padding: 0; border: none; border-radius: 0; transform: translateY(-50%); overflow: visible; display: none; } .nav--toggle-sub ul ul .dropdown, .nav--toggle-sub ul ul .dropdown-toggle { top: 32%; right: 12px; transform: rotate(90deg); } .nav--toggle-sub ul ul .dropdown-symbol { transform: rotate(-45deg); } .nav--toggle-sub .dropdown-toggle:hover, .nav--toggle-sub .menu-item--has-toggle:hover .dropdown-toggle { pointer-events: none; } /* Need menu-item-has-children for non-JS */ .nav--toggle-sub li.menu-item-has-children, .nav--toggle-sub li.menu-item--has-toggle { position: relative; padding-right: var(--dropdown-symbol-width); } .nav--toggle-sub li.menu-item-has-children::after, .nav--toggle-sub li.menu-item--has-toggle::after { content: "\f107"; font-family: FontAwesome; display: inline-block; width: 12px; height: 20px; line-height: 20px; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; font-size: inherit; font-weight: 900; } .nav--toggle-sub li.menu-item-has-children .sub-menu li::after, .nav--toggle-sub li.menu-item--has-toggle .sub-menu li::after { right: 10px; } /* * If the dropdown toggle is active with JS, then * we'll take care of showing the submenu with JS. */ .nav--toggle-sub li:hover>ul, .nav--toggle-sub li.menu-item--toggled-on>ul, .nav--toggle-sub li:not(.menu-item--has-toggle):focus>ul { display: block; transition: none; } /* * "focus-within" is an alternative to focus class for * supporting browsers (all but IE/Edge) for no-JS context * (e.g. AMP) See https://caniuse.com/#feat=css-focus-within * * This selector needs to stay separated, otherwise submenus * will not be displayed with IE/Edge. */ .nav--toggle-sub li:not(.menu-item--has-toggle):focus-within>ul { display: block; transition: none; } } /*-------------------------------------------------------------- ## Main navigation menu --------------------------------------------------------------*/ .main-navigation { clear: both; display: flex; max-width: var(--content-width); font-family: var(--highlight-font-family); } .main-navigation a { display: block; width: 100%; padding: 0.5em 1em 0.5em 0; text-decoration: none; color: #000; } .main-navigation ul { display: block; list-style: none; margin: 0; padding: 0; } .main-navigation ul ul li { padding-left: 1em; } .main-navigation ul ul li+li { border-top: 1px solid var(--global-border-color); } @media (min-width: 768px) { .main-navigation ul#primary-menu>li>a { padding: 1.5em 0.5em; } .main-navigation ul li a { padding: 0.8em 0.5em; } .main-navigation ul li { margin: 0 0 0 0.5em; } .main-navigation ul li:first-child { margin-left: 0; } .main-navigation ul ul a { width: 200px; } /* stylelint-disable */ .main-navigation ul ul li { padding-left: 0; margin-left: 0; } /* stylelint-enable */ .main-navigation ul ul li a { width: 170px; background: none; } .main-navigation ul ul ul { top: 0; right: 100%; min-height: 100%; } .main-navigation ul ul ul ul { right: -170px; } .sub-menu li.menu-item--has-toggle>ul ul.sub-menu:before { top: 30px; left: 0; right: auto; transform: rotate(230deg); } .main-navigation .menu { display: flex; flex-wrap: wrap; justify-content: flex-end; flex: 1; float: left; } } /*-------------------------------------------------------------- ## Main navigation icons --------------------------------------------------------------*/ .menu-icons-wrapper { float: right; margin: 0px 0px 0px 10px; padding: 10px 0px; min-width: 30px; } .menu-icons-wrapper .search { position: relative; } .main-navigation .search a, .main-navigation .cart a { padding: 0; } .menu-icons-wrapper .search, .menu-icons-wrapper .cart { float: left; margin: 0px 10px; } .menu-icons-wrapper div:last-child { margin-right: 0px; } .menu-icons-wrapper .top-menu-search-container { display: none; position: absolute; right: -10px; top: calc(100% + 20px); z-index: 9; } .menu-icons-wrapper #searchform { max-width: 250px; position: relative; background: #fff; margin: 0px; padding: 5px 15px; padding-right: 40px; border-radius: 8px; border: 1px solid var(--global-border-color); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1); } .menu-icons-wrapper #searchform input[type="text"] { border: none; background: none; padding: 0px; text-transform: uppercase; font-size: 12px; width: 190px; -webkit-appearance: none; } .menu-icons-wrapper #searchform input[type="text"], .cart-info:before, .cart-total:before { color: #aaaaaa; } #searchform .search-icon { display: none; } .menu-icons-wrapper #searchform input[type="submit"] { width: 45px; height: 45px; margin: 0px; padding: 0px; position: absolute; right: 0px; top: 0px; z-index: 1; cursor: pointer; background: none; border: 0; text-indent: -9999px; } .menu-icons-wrapper #searchform input[type=submit]:focus { border: 1px dotted #aaa; } .menu-icons-wrapper #searchform:before { content: "\f002"; position: absolute; font-family: FontAwesome; font-size: 14px; right: 15px; top: 0; bottom: 0px; margin: auto; height: 22px; } .menu-icons-wrapper #searchform:before { color: #c2c2c2; } .menu-icons-wrapper .cart sup, .buddypress-icons-wrapper .bp-msg sup, .buddypress-icons-wrapper .user-notifications sup { width: 15px; height: 15px; line-height: 15px; text-align: center; letter-spacing: 0; font-size: 9px; font-weight: bold; background: var(--color-link-active); color: #fff; border-radius: 50%; position: relative; top: -8px; left: -9px; display: inline-block; } @media (max-width: 767px) { .menu-icons-wrapper:after { content: ""; display: table; clear: both; } .menu-icons-wrapper { float: none; } .menu-icons-wrapper #searchform { max-width: 200px; padding: 0; padding-right: 40px; } .menu-icons-wrapper .top-menu-search-container { position: relative; left: 0; display: block !important; } .menu-icons-wrapper .search .search-icon { display: none; } .menu-icons-wrapper .cart { line-height: 45px; } } /*-------------------------------------------------------------- ## Buddypress navigation icons --------------------------------------------------------------*/ .buddypress-icons-wrapper { display: flex; align-items: center; float: right; flex: 0 0 auto; } .buddypress-icons-wrapper.buddyx-mobile-icon { display: none; } .buddypress-icons-wrapper a { padding: 0; } .buddypress-icons-wrapper .bp-msg, .buddypress-icons-wrapper .user-notifications, .buddypress-icons-wrapper .user-link-wrap { margin: 0 0 0 10px; padding: 10px 0; height: 100%; display: flex; align-items: center; } .buddypress-icons-wrapper .user-notifications { position: relative; } .buddypress-icons-wrapper .user-link-wrap img.avatar { width: 40px; height: 40px; border-radius: 50%; } .buddypress-icons-wrapper .user-link-wrap { padding: 0; position: relative; } .buddypress-icons-wrapper ul#bp-notify { width: 300px; } .buddypress-icons-wrapper ul#bp-notify li { margin: 0; } .buddypress-icons-wrapper ul#bp-notify li.bp-view-all { border-top: 1px solid var(--global-border-color); } .user-link-wrap .user-link { display: flex; align-items: center; position: relative; cursor: pointer; } .user-link-wrap .bp-user { padding-right: 15px; } #user-profile-menu { width: 170px; } .main-navigation #user-profile-menu, .main-navigation .bp-header-submenu { display: none; position: absolute; top: 100%; right: -8px; flex-direction: column; background: #fff; margin-left: 0; z-index: 1; text-shadow: none; text-align: left; box-shadow: 0 2px 7px 1px rgba(0, 0, 0, .05), 0 6px 32px 0 rgba(18, 43, 70, .1); border: 0; border-radius: .28571429rem; transition: all .3s; } .bp-header-submenu::before, .user-profile-menu::before { content: ' '; position: absolute; width: 0; height: 0; top: 0; right: 28px; border: 7px solid #000; border-color: #fff #fff transparent transparent; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); box-shadow: 2px -3px 3px 0 rgba(0, 0, 0, .02); z-index: 100; } .main-navigation #user-profile-menu { right: 0; } .user-profile-menu::before { right: 50px; } .buddypress-icons-wrapper .user-notifications:hover ul#bp-notify, .buddypress-icons-wrapper .user-notifications.active ul#bp-notify, .buddypress-icons-wrapper .user-link-wrap:hover #user-profile-menu, .buddypress-icons-wrapper .user-link-wrap.active #user-profile-menu { display: block; } #user-profile-menu li { margin: 0; padding: 0; } .buddypress-icons-wrapper .btn-login, .buddypress-icons-wrapper .btn-register { padding: .8em .5em; } .buddypress-icons-wrapper .btn-login span, .buddypress-icons-wrapper .btn-register span { margin-right: 6px; } @media (max-width: 767px) { .buddypress-icons-wrapper { display: none; } .buddypress-icons-wrapper.buddyx-mobile-icon { display: flex; } .buddypress-icons-wrapper .btn-login, .buddypress-icons-wrapper .btn-register { font-size: 12px; } .buddypress-icons-wrapper .bp-msg, span.bp-user { display: none; } .main-navigation #user-profile-menu { top: calc(100% + 8px); } .user-profile-menu::before { right: 24px; } .buddyx-mobile-icon .user-notifications>.bp-icon-wrap, .buddyx-mobile-icon .user-link-wrap .user-link { pointer-events: none; } } @media (max-width: 480px) { .main-navigation { margin-left: auto; flex: 0 0 auto; } } @media (min-width: 360px) and (max-width: 440px) { .buddypress-icons-wrapper ul#bp-notify { right: -80px; } ul#bp-notify.bp-header-submenu:before { right: 100px } } @media (max-width: 359px) { .buddypress-icons-wrapper ul#bp-notify { width: 280px; right: -100px; } ul#bp-notify.bp-header-submenu:before { right: 122px; } } /*-------------------------------------------------------------- # Content navigation --------------------------------------------------------------*/ .site-main .comment-navigation, .site-main .posts-navigation, .site-main .post-navigation, .site-main .pagination { border-bottom: 1px solid var(--global-border-color); margin: 0 auto 2em; max-width: var(--content-width); overflow: hidden; padding: 0 1.5rem 2em; } .site-main .posts-navigation, .site-main .post-navigation { position: relative; margin: 1rem 0; padding: 1em 0; border-top: 1px solid var(--global-border-color); border-bottom: 1px solid var(--global-border-color); } .post-navigation-sub { display: none; } .nav-previous a::before { content: "\f104"; font-family: 'FontAwesome'; display: inline-block; margin-right: 10px; } .nav-next a::after { content: "\f105"; font-family: 'FontAwesome'; display: inline-block; margin-left: 10px; } @media (--content-query) { .site-main .comment-navigation, .site-main .pagination { padding-left: 0; padding-right: 0; position: relative; margin: 1rem 0; padding: 1em; border: 1px solid var(--global-border-color); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1); border-radius: 8px; background: #fff; } } .nav-links { display: flex; } .comment-navigation .nav-previous, .posts-navigation .nav-previous, .post-navigation .nav-previous { width: 50%; flex: 1 0 50%; } .comment-navigation .nav-next, .posts-navigation .nav-next, .post-navigation .nav-next { text-align: end; flex: 1 0 50%; } .post-navigation-sub span { color: var(--global-font-color); text-decoration: none; display: inline-block; } .site-main .pagination { background: transparent; margin-bottom: 1.5em; border: 0; box-shadow: none; } .pagination .nav-links { justify-content: center; flex-wrap: wrap; } .pagination .page-numbers { display: inline-block; margin-bottom: 0.5em; margin-right: 1em; min-width: 1.75em; line-height: 1.5; text-align: center; background: #fff!important; font-weight: 400; border-radius: .28571429rem; text-transform: none; text-shadow: none!important; box-shadow: inset 0 0 0 1px #e8e8e8; padding: 10px 15px; text-decoration: none; } .pagination a:hover, .pagination a:active { border-color: #00a0d2; } .pagination .prev, .pagination .next { min-width: auto; border-color: transparent; } .pagination .prev:hover, .pagination .prev:focus, .pagination .prev:active, .pagination .next:hover, .pagination .next:focus, .pagination .next:active { border-color: transparent; } .pagination .dots { min-width: auto; border: none; } .pagination .current { color: var(--color-link-active); border-color: var(--global-font-color); } /*-------------------------------------------------------------- # Footer --------------------------------------------------------------*/ .site-footer { margin: 1em 0 0; background: #fff; border-top: 1px solid var(--global-border-color); } .page-template-full-width .site-footer { margin: 0; } .footer-inner { padding: 50px 0; display: flex; grid-gap: 25px; } .footer-widget { width: 100%; margin: 0 15px; } .footer-widget ul { list-style: none; margin: 0; padding: 0; } .footer-widget:first-child { margin-left: 0; } .footer-widget:last-child { margin-right: 0; } @media (max-width: 991px) { .footer-inner { flex-wrap: wrap; } .footer-widget { width: 50%; margin: 0; } } @media (--narrow-menu-query) { .footer-inner { margin: 50px 0; display: block; } .footer-widget { width: 100%; } } .site-info { padding: 2em 0; background: #fff; border-top: 1px solid var(--global-border-color); border-bottom: 1px solid var(--global-border-color); text-align: center; } /*-------------------------------------------------------------- # Infinite scroll --------------------------------------------------------------*/ /* Globally hidden elements when Infinite Scroll is supported and in use. */ .infinite-scroll .posts-navigation, .infinite-scroll .pagination, .infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */ display: none; } /* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */ .infinity-end.neverending .site-footer { display: block; } /*-------------------------------------------------------------- # Site Layout --------------------------------------------------------------*/ body.layout-boxed { background-attachment: fixed; background-color: rgba(0, 0, 0, 0.025); } @media (min-width: 1170px) { .layout-boxed .site, .layout-boxed .site-header-wrapper { width: 1170px; margin: 0 auto; background: #fff; } } /*-------------------------------------------------------------- # Site Sub Header Layout --------------------------------------------------------------*/ .bp-user .site-sub-header, .single-item.groups .site-sub-header, .group-create .site-sub-header { display: none; } .site-sub-header { position: relative; color: #505050; margin-bottom: 1rem; padding: 30px 0; background: rgba(255, 255, 255, 0.5); width: 100vw; margin-left: -50vw; left: 50%; } .site-sub-header>.container, .site-sub-header .woocommerce-products-header { display: flex; justify-content: space-between; align-items: center; flex-flow: row wrap; padding: 0 15px; } .site-sub-header .woocommerce-products-header { width: 100%; padding: 0; } .site-sub-header>.container::before { content: none; } @media (max-width: 991px) { .site-sub-header>.container { padding: 0 20px; } } .archive-description p { margin: 0; } .site-sub-header .entry-header .entry-title, .site-sub-header .page-header .page-title, .site-sub-header .entry-header, .site-sub-header .page-header, .site-sub-header .entry-title, .site-sub-header .page-title { position: relative; margin: 0; z-index: 1; } .site-sub-header .entry-title, .site-sub-header .page-title, .site-sub-header .page-header { color: #111; margin-right: auto; } @media (--narrow-menu-query) { .site .site-sub-header .entry-title, .site .site-sub-header .page-title { font-size: 24px; } } /*-------------------------------------------------------------- # Site Single Blog Layout --------------------------------------------------------------*/ .single-post.single-post-layout-1 .site-sub-header>.container, .single-post.single-post-layout-2 .site-sub-header>.container, .single-post.single-post-layout-3 .site-sub-header>.container { justify-content: center; flex-direction: column; } .single-post.single-post-layout-1 .site-sub-header .entry-title, .single-post.single-post-layout-1 .site-sub-header .page-header, .single-post.single-post-layout-1 .site-sub-header .page-title { margin: auto; } .single-post.single-post-layout-1 aside, .single-post.single-post-layout-2 aside, .single-post.single-post-layout-3 aside { display: none; } .single-post.single-post-layout-1 .site-wrapper, .single-post.single-post-layout-2 .site-wrapper, .single-post.single-post-layout-3 .site-wrapper { grid-template-columns: auto !important; } .single-post.single-post-layout-1 article .entry-header { margin: auto; } .single-post.single-post-layout-1 .entry-meta { margin-top: 10px; justify-content: center; } .single-post.single-post-layout-1 .post-thumbnail img, .single-post.single-post-layout-2 .post-thumbnail img, .single-post.single-post-layout-3 .post-thumbnail img { width: 100%; border-radius: 0; } .single-post.single-post-layout-1 .alignfull, .single-post.single-post-layout-2 .alignfull, .single-post.single-post-layout-3 .alignfull { margin-left: calc(-100vw / 2 + 100% / 2); margin-right: calc(-100vw / 2 + 100% / 2); max-width: 100vw; } @media (min-width: 768px) { .single-post.single-post-layout-1 .post-thumbnail, .single-post.single-post-layout-1 h1.entry-title, .single-post.single-post-layout-1 .entry-content, .single-post.single-post-layout-1 .entry-summary, .single-post.single-post-layout-1 .page-content, .single-post.single-post-layout-1 .entry-footer, .single-post.single-post-layout-1 .post-navigation, .single-post.single-post-layout-1 .comments-area { max-width: 811px; margin: auto; } .single-post.single-post-layout-1 .entry-content, .single-post.single-post-layout-1 .entry-summary, .single-post.single-post-layout-1 .page-content, .single-post.single-post-layout-1 .comments-area { padding: 1rem 30px; } .single-post.single-post-layout-1 .entry-footer, .single-post.single-post-layout-1 .post-navigation { max-width: calc(811px - 60px); margin: auto; } .single-post.single-post-layout-2 .site-sub-header>.container, .single-post.single-post-layout-2 .entry-header, .single-post.single-post-layout-2 .entry-content, .single-post.single-post-layout-2 .entry-summary, .single-post.single-post-layout-2 .page-content, .single-post.single-post-layout-2 .entry-footer, .single-post.single-post-layout-2 .post-navigation, .single-post.single-post-layout-2 .comments-area, .single-post.single-post-layout-3 .site-sub-header>.container, .single-post.single-post-layout-3 .entry-header, .single-post.single-post-layout-3 .entry-content, .single-post.single-post-layout-3 .entry-summary, .single-post.single-post-layout-3 .page-content, .single-post.single-post-layout-3 .entry-footer, .single-post.single-post-layout-3 .post-navigation, .single-post.single-post-layout-3 .comments-area { max-width: 45rem; margin: auto; } .single-post.single-post-layout-2 .site-sub-header>.container, .single-post.single-post-layout-3 .site-sub-header>.container { padding: 0; } } .single-post.single-post-layout-2 .site-sub-header, .single-post.single-post-layout-3 .site-sub-header { background: transparent; } .single-post.single-post-layout-2 .site-sub-header>.container, .single-post.single-post-layout-3 .site-sub-header>.container { align-items: flex-start; } .single-post.single-post-layout-3 header.entry-header { display: flex; flex-direction: column-reverse; } .single-post.single-post-layout-3 .site-sub-header { margin-bottom: 0; padding-bottom: 0; } .single-post.single-post-layout-3 .post-thumbnail+.post-categories { position: static; margin-top: 10px; margin-bottom: 10px; } /*-------------------------------------------------------------- # Breadcrumbs --------------------------------------------------------------*/ .buddyx-breadcrumbs, #breadcrumbs { font-size: 14px; } .buddyx-breadcrumbs a, #breadcrumbs a { color: var(--color-link-active); } .buddyx-breadcrumbs a:hover, #breadcrumbs a:hover { text-decoration: underline; } .buddyx-trail-items { list-style: none; } .buddyx-trail-items, .buddyx-trail-items li { display: inline-block; margin: 0; padding: 0; border: none; background: inherit; text-indent: 0; } .buddyx-trail-items li:not(.trail-end)::after { padding: 0 0.3em; content: "\00bb"; } /*-------------------------------------------------------------- # Site Text Editor --------------------------------------------------------------*/ .wp-editor-container button { background-color: inherit !important; border-color: inherit !important; } .wp-editor-wrap .wp-switch-editor.switch-tmce, .wp-editor-wrap .wp-switch-editor.switch-html { background: #f5f5f5; border-color: #e2e2e2; color: #555; } .wp-editor-wrap.html-active .switch-tmce { border-color: #e2e2e2; } .wp-editor-wrap.tmce-active .switch-tmce { border-color: #e2e2e2; } .mce-container iframe, .wp-editor-container textarea.wp-editor-area { height: 250px !important; } .mce-toolbar .mce-btn-group .mce-btn:focus, .mce-toolbar .mce-btn-group .mce-btn:hover, .qt-dfw:focus, .qt-dfw:hover { box-shadow: none !important; border: 1px solid transparent !important; } .mce-toolbar .mce-btn-group .mce-btn.mce-active, .mce-toolbar .mce-btn-group .mce-btn:active, .qt-dfw.active { border-color: inherit !important; box-shadow: none !important; } .mce-toolbar .mce-btn-group .mce-btn.mce-listbox { border: 1px transparent solid !important; } .mce-toolbar .mce-listbox button:hover { color: #595959; } .mce-toolbar .mce-btn-group .mce-btn button { background: inherit; border-color: inherit; border: 1px transparent solid !important; } button.media-menu-item { color: #72777c !important; } .media-router .media-menu-item:hover { background: 0 0 !important; border: 0 !important; } /*-------------------------------------------------------------- # WP Idea Stream --------------------------------------------------------------*/ #wp-idea-stream button:not(.ed_button):not(.search-submit):not(.submit-sort):not(.wp-embed-share-dialog-close), #wp-idea-stream a.button, a.wpis-title-button, #wp-idea-stream input[type=submit]:not(.search-submit), #wp-idea-stream input[type=button]:not(.ed_button), #wp-idea-stream input[type=reset], body.single-ideas #comments .comment-reply-link { font-family: inherit; font-size: inherit; color: #fff; background-color: var(--button_background_color); border-radius: 3px; padding: 10px 20px; font-weight: 500; font-style: normal; text-decoration: none; text-align: center; cursor: pointer; display: inline-block; line-height: 1.3; border: 1px solid var(--button_border_color); outline: 0; vertical-align: middle; -webkit-appearance: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transition: all linear .2s; transition: all linear .2s; } #wp-idea-stream button:hover:not(.ed_button):not(.search-submit):not(.submit-sort):not(.wp-embed-share-dialog-close), #wp-idea-stream a.button:hover, #wp-idea-stream a.button:focus, a.wpis-title-button:hover, a.wpis-title-button:focus, #wp-idea-stream input[type=submit]:hover:not(.search-submit), #wp-idea-stream input[type=button]:hover:not(.ed_button), #wp-idea-stream input[type=reset]:hover, body.single-ideas #comments .comment-reply-link:hover { background-color: var(--button_background_hover_color); border: 1px solid var(--button_border_hover_color); } #wp-idea-stream div#pag-top { margin-bottom: 2em; border-bottom: 1px solid var(--global-border-color); border-radius: 0; } #wp-idea-stream div#pag-bottom { border-top: 1px solid var(--global-border-color); border-radius: 0; } #wp-idea-stream ul.idea-list>li { position: relative; margin: 1rem 0; padding: 1em; border: 1px solid var(--global-border-color); box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%); border-radius: 8px; background: #fff; } #wp-idea-stream ul.idea-list>li+li { margin-top: 2em; } .idea-footer { border-top: 1px solid var(--global-border-color); } #wp-idea-stream .idea-list li .has_featured_image div.idea-footer { margin-bottom: 0; } #wp-idea-stream ul.idea-list .idea-content.has_featured_image { margin: 0; } ul#ideas-main-nav form#searchform { display: flex; align-items: center; } #wp-idea-stream ul#ideas-main-nav li form input { height: 38px; } #wp-idea-stream ul#ideas-main-nav li form input[type=submit] { line-height: 1.1; } #wp-idea-stream ul.idea-list .idea-avatar img, #wp-idea-stream ul.idea-comments-list .idea-comment-avatar img { border-radius: 3px; }