313 lines
12 KiB
CSS
313 lines
12 KiB
CSS
/*---------- Media Query min-width Structure ----------*/
|
|
/*---------- Media Query max-width Structure ----------*/
|
|
/*---------- Break-point min-width Structure ----------*/
|
|
/*---------- Break-point max-width Structure ----------*/
|
|
/**
|
|
* Sticky Header Layouts
|
|
*/
|
|
.ast-sticky-active {
|
|
position: fixed !important;
|
|
left: 0;
|
|
right: 0;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.ast-nav-up {
|
|
transform: translateY(-100%);
|
|
}
|
|
|
|
.site-header .sticky-custom-logo {
|
|
display: none;
|
|
}
|
|
|
|
.ast-primary-sticky-header-active li.ast-masthead-custom-menu-items a,
|
|
.ast-primary-sticky-header-active li.ast-masthead-custom-menu-items a:hover,
|
|
.ast-primary-sticky-header-active li.ast-masthead-custom-menu-items a:focus {
|
|
background: transparent;
|
|
}
|
|
|
|
.ast-offcanvas-active .ast-above-header,
|
|
.ast-fullscreen-active .ast-above-header {
|
|
z-index: 4;
|
|
}
|
|
|
|
.ast-offcanvas-active .ast-above-header.ast-sticky-active,
|
|
.ast-fullscreen-active .ast-above-header.ast-sticky-active {
|
|
z-index: 0;
|
|
}
|
|
|
|
#ast-fixed-header {
|
|
position: fixed;
|
|
visibility: hidden;
|
|
top: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
#ast-fixed-header .main-header-bar {
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
#ast-fixed-header.ast-header-slide {
|
|
transform: translateY(-100%);
|
|
transition: transform 0.3s linear, top 0.3s linear, visibility 0.3s linear;
|
|
}
|
|
|
|
#ast-fixed-header.ast-header-fade {
|
|
opacity: 0;
|
|
transition: opacity 0.3s linear;
|
|
}
|
|
|
|
.main-header-bar.ast-sticky-active {
|
|
box-shadow: 0 2px 10px 0 rgba(36, 50, 66, 0.075);
|
|
}
|
|
|
|
.ast-sticky-custom-logo .ast-header-sticked .custom-logo-link,
|
|
.ast-sticky-custom-logo .ast-header-sticked .custom-mobile-logo-link {
|
|
display: none;
|
|
}
|
|
|
|
.ast-sticky-custom-logo .ast-header-sticked .sticky-custom-logo {
|
|
display: inline-block;
|
|
}
|
|
|
|
.ast-sticky-custom-logo.ast-primary-sticky-header-active.ast-header-break-point.ast-replace-site-logo-transparent.ast-theme-transparent-header .transparent-custom-logo {
|
|
display: none;
|
|
}
|
|
|
|
.ast-header-stick-slide-active .ast-sticky-custom-logo.ast-primary-sticky-header-active.ast-header-break-point.ast-replace-site-logo-transparent.ast-theme-transparent-header .transparent-custom-logo,
|
|
.ast-header-stick-fade-active .ast-sticky-custom-logo.ast-primary-sticky-header-active.ast-header-break-point.ast-replace-site-logo-transparent.ast-theme-transparent-header .transparent-custom-logo,
|
|
.ast-header-stick-scroll-active .ast-sticky-custom-logo.ast-primary-sticky-header-active.ast-header-break-point.ast-replace-site-logo-transparent.ast-theme-transparent-header .transparent-custom-logo {
|
|
display: inline-block;
|
|
}
|
|
|
|
.ast-sticky-main-shrink {
|
|
/* Mobile Header */
|
|
}
|
|
|
|
.ast-sticky-main-shrink .ast-sticky-shrunk.main-header-bar,
|
|
.ast-sticky-main-shrink .ast-sticky-shrunk .main-header-bar {
|
|
line-height: 55px;
|
|
}
|
|
|
|
.ast-sticky-main-shrink .ast-sticky-shrunk.main-header-bar .ast-site-identity,
|
|
.ast-sticky-main-shrink .ast-sticky-shrunk .main-header-bar .ast-site-identity {
|
|
padding-top: 0.5em;
|
|
padding-bottom: 0.5em;
|
|
}
|
|
|
|
.ast-sticky-main-shrink .ast-sticky-shrunk .site-navigation {
|
|
line-height: 3;
|
|
}
|
|
|
|
.ast-sticky-main-shrink .ast-sticky-shrunk .site-logo-img img {
|
|
max-height: 55px !important;
|
|
width: auto;
|
|
}
|
|
|
|
.ast-sticky-main-shrink.ast-header-break-point .ast-sticky-shrunk .main-header-bar, .ast-sticky-main-shrink.ast-header-break-point .ast-sticky-shrunk.main-header-bar {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.ast-sticky-main-shrink.ast-header-break-point .ast-sticky-shrunk .ast-mobile-menu-buttons {
|
|
line-height: 0;
|
|
padding-bottom: 0.5em;
|
|
}
|
|
|
|
.ast-sticky-main-shrink.ast-header-break-point .ast-sticky-shrunk .site-branding {
|
|
padding-bottom: 0.5em;
|
|
}
|
|
|
|
.ast-sticky-above-shrink {
|
|
/* Mobile Header */
|
|
}
|
|
|
|
.ast-sticky-above-shrink .ast-sticky-shrunk.ast-above-header-bar .ast-site-identity,
|
|
.ast-sticky-above-shrink .ast-sticky-shrunk .ast-above-header-bar .ast-site-identity {
|
|
padding-top: 0.5em;
|
|
padding-bottom: 0.5em;
|
|
}
|
|
|
|
.ast-sticky-above-shrink .ast-sticky-shrunk .site-navigation {
|
|
line-height: 3;
|
|
}
|
|
|
|
.ast-sticky-above-shrink .ast-sticky-shrunk .site-logo-img img {
|
|
max-height: 55px;
|
|
width: auto;
|
|
}
|
|
|
|
.ast-sticky-above-shrink.ast-header-break-point .ast-sticky-shrunk .ast-above-header-bar, .ast-sticky-above-shrink.ast-header-break-point .ast-sticky-shrunk.ast-above-header-bar {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.ast-sticky-above-shrink.ast-header-break-point .ast-sticky-shrunk .ast-mobile-menu-buttons {
|
|
line-height: 0;
|
|
padding-bottom: 0.5em;
|
|
}
|
|
|
|
.ast-sticky-above-shrink.ast-header-break-point .ast-sticky-shrunk .site-branding {
|
|
padding-bottom: 0.5em;
|
|
}
|
|
|
|
.ast-sticky-below-shrink {
|
|
/* Mobile Header */
|
|
}
|
|
|
|
.ast-sticky-below-shrink .ast-sticky-shrunk.ast-below-header-bar .ast-site-identity,
|
|
.ast-sticky-below-shrink .ast-sticky-shrunk .ast-below-header-bar .ast-site-identity {
|
|
padding-top: 0.5em;
|
|
padding-bottom: 0.5em;
|
|
}
|
|
|
|
.ast-sticky-below-shrink .ast-sticky-shrunk .site-navigation {
|
|
line-height: 3;
|
|
}
|
|
|
|
.ast-sticky-below-shrink .ast-sticky-shrunk .site-logo-img img {
|
|
max-height: 55px;
|
|
width: auto;
|
|
}
|
|
|
|
.ast-sticky-below-shrink.ast-header-break-point .ast-sticky-shrunk .ast-below-header-bar, .ast-sticky-below-shrink.ast-header-break-point .ast-sticky-shrunk.ast-below-header-bar {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.ast-sticky-below-shrink.ast-header-break-point .ast-sticky-shrunk .ast-mobile-menu-buttons {
|
|
line-height: 0;
|
|
padding-bottom: 0.5em;
|
|
}
|
|
|
|
.ast-sticky-below-shrink.ast-header-break-point .ast-sticky-shrunk .site-branding {
|
|
padding-bottom: 0.5em;
|
|
}
|
|
|
|
.ast-header-break-point .ast-sticky-active .sticky-custom-logo img {
|
|
display: block;
|
|
}
|
|
|
|
.ast-header-break-point .ast-has-mobile-header-logo .ast-header-sticked .sticky-custom-logo img {
|
|
display: block;
|
|
}
|
|
|
|
.ast-header-break-point .ast-has-mobile-header-logo .ast-header-sticked .ast-mobile-header-logo {
|
|
display: none;
|
|
}
|
|
|
|
.ast-header-break-point .ast-header-sticked .sticky-custom-logo img {
|
|
display: block;
|
|
}
|
|
|
|
.ast-header-break-point.ast-inherit-site-logo-sticky .ast-has-mobile-header-logo .ast-header-sticked .custom-logo-link img {
|
|
display: none;
|
|
}
|
|
|
|
.ast-header-break-point.ast-inherit-site-logo-sticky .ast-has-mobile-header-logo .ast-header-sticked .custom-mobile-logo-link img {
|
|
display: inline-block;
|
|
}
|
|
|
|
.above-header-toggle-on .main-header-bar {
|
|
z-index: 1;
|
|
}
|
|
|
|
.ast-main-header-nav-open.ast-hfb-header #ast-fixed-header .ast-mobile-header-wrap .ast-mobile-header-content {
|
|
display: none;
|
|
}
|
|
|
|
.ast-main-header-nav-open.ast-hfb-header #ast-fixed-header .ast-desktop-header-content {
|
|
display: none;
|
|
}
|
|
|
|
.ast-main-header-nav-open.ast-hfb-header .ast-mobile-header-wrap .ast-mobile-header-content {
|
|
display: block;
|
|
}
|
|
|
|
.ast-main-header-nav-open.ast-hfb-header .ast-desktop-header-content {
|
|
display: block;
|
|
}
|
|
|
|
.ast-header-stick-slide-active .ast-main-header-nav-open.ast-hfb-header #ast-fixed-header .ast-mobile-header-wrap .ast-mobile-header-content,
|
|
.ast-header-stick-fade-active .ast-main-header-nav-open.ast-hfb-header #ast-fixed-header .ast-mobile-header-wrap .ast-mobile-header-content,
|
|
.ast-header-stick-scroll-active .ast-main-header-nav-open.ast-hfb-header #ast-fixed-header .ast-mobile-header-wrap .ast-mobile-header-content {
|
|
display: block;
|
|
}
|
|
|
|
.ast-header-stick-slide-active .ast-main-header-nav-open.ast-hfb-header #ast-fixed-header .ast-desktop-header-content,
|
|
.ast-header-stick-fade-active .ast-main-header-nav-open.ast-hfb-header #ast-fixed-header .ast-desktop-header-content,
|
|
.ast-header-stick-scroll-active .ast-main-header-nav-open.ast-hfb-header #ast-fixed-header .ast-desktop-header-content {
|
|
display: block;
|
|
}
|
|
|
|
.ast-header-stick-slide-active .ast-main-header-nav-open.ast-hfb-header #masthead > .ast-mobile-header-wrap .ast-mobile-header-content,
|
|
.ast-header-stick-fade-active .ast-main-header-nav-open.ast-hfb-header #masthead > .ast-mobile-header-wrap .ast-mobile-header-content,
|
|
.ast-header-stick-scroll-active .ast-main-header-nav-open.ast-hfb-header #masthead > .ast-mobile-header-wrap .ast-mobile-header-content {
|
|
display: none;
|
|
}
|
|
|
|
.ast-header-stick-slide-active .ast-main-header-nav-open.ast-hfb-header #masthead > .ast-desktop-header-content,
|
|
.ast-header-stick-fade-active .ast-main-header-nav-open.ast-hfb-header #masthead > .ast-desktop-header-content,
|
|
.ast-header-stick-scroll-active .ast-main-header-nav-open.ast-hfb-header #masthead > .ast-desktop-header-content {
|
|
display: none;
|
|
}
|
|
|
|
.ast-header-stick-slide-active.ast-off-canvas-active .ast-main-header-nav-open.ast-hfb-header #ast-fixed-header .ast-mobile-header-wrap .ast-mobile-header-content,
|
|
.ast-header-stick-fade-active.ast-off-canvas-active .ast-main-header-nav-open.ast-hfb-header #ast-fixed-header .ast-mobile-header-wrap .ast-mobile-header-content,
|
|
.ast-header-stick-scroll-active.ast-off-canvas-active .ast-main-header-nav-open.ast-hfb-header #ast-fixed-header .ast-mobile-header-wrap .ast-mobile-header-content {
|
|
display: none;
|
|
}
|
|
|
|
.ast-header-stick-slide-active.ast-off-canvas-active .ast-main-header-nav-open.ast-hfb-header #ast-fixed-header .ast-desktop-header-content,
|
|
.ast-header-stick-fade-active.ast-off-canvas-active .ast-main-header-nav-open.ast-hfb-header #ast-fixed-header .ast-desktop-header-content,
|
|
.ast-header-stick-scroll-active.ast-off-canvas-active .ast-main-header-nav-open.ast-hfb-header #ast-fixed-header .ast-desktop-header-content {
|
|
display: none;
|
|
}
|
|
|
|
.ast-primary-sticky-header-active.ast-main-header-nav-open.ast-hfb-header #masthead > .ast-mobile-header-wrap .ast-mobile-header-content,
|
|
.ast-primary-sticky-header-active.ast-main-header-nav-open.astra-hfb-header #masthead > .ast-mobile-header-wrap .ast-mobile-header-content,
|
|
.ast-primary-sticky-header-active.ast-main-header-nav-open.astra-hfb-header #masthead > #ast-desktop-header .ast-desktop-header-content,
|
|
.ast-primary-sticky-header-active.ast-main-header-nav-open.ast-hfb-header #masthead > #ast-desktop-header .ast-desktop-header-content,
|
|
.ast-above-sticky-header-active.ast-main-header-nav-open.ast-hfb-header #masthead > .ast-mobile-header-wrap .ast-mobile-header-content,
|
|
.ast-above-sticky-header-active.ast-main-header-nav-open.astra-hfb-header #masthead > .ast-mobile-header-wrap .ast-mobile-header-content,
|
|
.ast-above-sticky-header-active.ast-main-header-nav-open.astra-hfb-header #masthead > #ast-desktop-header .ast-desktop-header-content,
|
|
.ast-above-sticky-header-active.ast-main-header-nav-open.ast-hfb-header #masthead > #ast-desktop-header .ast-desktop-header-content,
|
|
.ast-below-sticky-header-active.ast-main-header-nav-open.ast-hfb-header #masthead > .ast-mobile-header-wrap .ast-mobile-header-content,
|
|
.ast-below-sticky-header-active.ast-main-header-nav-open.astra-hfb-header #masthead > .ast-mobile-header-wrap .ast-mobile-header-content,
|
|
.ast-below-sticky-header-active.ast-main-header-nav-open.astra-hfb-header #masthead > #ast-desktop-header .ast-desktop-header-content,
|
|
.ast-below-sticky-header-active.ast-main-header-nav-open.ast-hfb-header #masthead > #ast-desktop-header .ast-desktop-header-content {
|
|
position: fixed;
|
|
}
|
|
|
|
/* Added transition to smoothen shrink effect */
|
|
.site-primary-header-wrap, .site-above-header-wrap, .site-below-header-wrap {
|
|
transition: all 0.2s linear;
|
|
}
|
|
|
|
.ast-header-stick-slide-active .ast-flyout-menu-enable.ast-header-break-point #masthead > .main-header-bar-navigation {
|
|
display: none !important;
|
|
}
|
|
|
|
.ast-header-stick-fade-active .ast-flyout-menu-enable.ast-header-break-point #masthead > .main-header-bar-navigation {
|
|
display: none !important;
|
|
}
|
|
|
|
.ast-flyout-menu-overlay .ast-stick-primary-below-wrapper.ast-sticky-active {
|
|
z-index: 5;
|
|
}
|
|
|
|
.ast-fullscreen-menu-overlay #ast-fixed-header {
|
|
z-index: 9;
|
|
}
|
|
|
|
/**
|
|
* Need to override the overflow-y which is given form the javascript
|
|
* To fix the rendering problem with the flyout menu
|
|
*/
|
|
.ast-flyout-menu-enable.ast-primary-sticky-enabled .main-header-bar,
|
|
.ast-flyout-menu-enable.ast-primary-sticky-enabled .ast-stick-primary-below-wrapper {
|
|
overflow-y: unset !important;
|
|
}
|
|
|
|
#ast-mobile-header .content-align-flex-start {
|
|
max-height: 60vh;
|
|
overflow: auto;
|
|
}
|