.site-header { position: relative; z-index: 9; } .site-header { margin-bottom: 40px; } /* row */ .bb-bldr-row { display: grid; align-items: center; -webkit-align-items: center; gap: 20px; padding: 20px 0; } header .bb-bldr-row.row-one { padding: 50px 0 20px; } body.blog-postx-dark-mode .site .bb-bldr-row { border-color: #575757; } /* column one */ .bb-bldr-row.column-1.layout-one { grid-template-columns: 100%; } /* column two */ .bb-bldr-row.column-2.layout-one { grid-template-columns: repeat(2, 1fr); } .bb-bldr-row.column-2.layout-two { grid-template-columns: 4fr 1fr; } .bb-bldr-row.column-2.layout-three { grid-template-columns: 1fr 4fr; } /* column three */ .bb-bldr-row.column-3.layout-one { grid-template-columns: repeat(3, 1fr); } .bb-bldr-row.column-3.layout-two { grid-template-columns: 3fr 1fr 1fr; } .bb-bldr-row.column-3.layout-three { grid-template-columns: 1fr 1fr 3fr; } .bb-bldr-row.column-3.layout-four { grid-template-columns: 1fr 3fr 1fr; } .bb-bldr-row.column-3.layout-five { grid-template-columns: 2fr 1fr 2fr; } /* column four */ .bb-bldr-row.column-4.layout-one { grid-template-columns: repeat(4, 1fr); } .bb-bldr-row.column-4.layout-two { grid-template-columns: 2fr 1fr 1fr 1fr; } .bb-bldr-row.column-4.layout-three { grid-template-columns: 1fr 1fr 1fr 2fr; } .bb-bldr-row.column-4.layout-four { grid-template-columns: 1fr 2fr 1fr 1fr; } /* responsive */ @media (min-width: 769px) { .bb-bldr--responsive { display: none; } } @media (max-width: 769px) { header .bb-bldr--normal, .bb-bldr-row.mobile-canvas, #site-navigation button.menu-toggle { display: none; } .bb-bldr-row.mobile-canvas.open { display: block; position: absolute; z-index: 999; width: 100%; left: 0; max-height: 300px; overflow-y: auto; padding: 20px; background-color: var(--blog-postx-white-dark-color); } .blog-postx-dark-mode .bb-bldr-row.mobile-canvas.open { background: #333; } .main-navigation ul { display: block; } .bb-bldr-row.mobile-canvas.open .bb-bldr-widget + .bb-bldr-widget { margin-top: 20px; } .bb-bldr-row.mobile-canvas.open .bb-bldr-widget .header-custom-button-wrapper { display: inline-block; } /* scrollbar design */ .bb-bldr-row.mobile-canvas.open::-webkit-scrollbar { width: 2px; } .bb-bldr-row.mobile-canvas.open::-webkit-scrollbar-thumb { background-color: var(--blog-postx-global-preset-theme-color); border-radius: 40px; } /* column layout two */ .bb-bldr--responsive .bb-bldr-row.column-2.tablet-layout-one, footer .bb-bldr-row.column-2.tablet-layout-one { grid-template-columns: repeat(2, 1fr); } .bb-bldr--responsive .bb-bldr-row.column-2.tablet-layout-two, footer .bb-bldr-row.column-2.tablet-layout-two { grid-template-columns: 4fr 1fr; } .bb-bldr--responsive .bb-bldr-row.column-2.tablet-layout-three, footer .bb-bldr-row.column-2.tablet-layout-three { grid-template-columns: 100%; } /* column layout three */ .bb-bldr--responsive .bb-bldr-row.column-3.tablet-layout-one, footer .bb-bldr-row.column-3.tablet-layout-one { grid-template-columns: repeat(3, 1fr); } .bb-bldr--responsive .bb-bldr-row.column-3.tablet-layout-two { grid-template-columns: 3fr 1fr 1fr; } .bb-bldr--responsive .bb-bldr-row.column-3.tablet-layout-three, footer .bb-bldr-row.column-3.tablet-layout-two { grid-template-columns: 100%; } /* column four */ footer .bb-bldr-row.column-4.tablet-layout-one { grid-template-columns: repeat(4, 1fr); } footer .bb-bldr-row.column-4.tablet-layout-two { grid-template-columns: 100%; } } @media (max-width: 426px) { /* column layout two */ .bb-bldr--responsive .bb-bldr-row.column-2.smartphone-layout-one, footer .bb-bldr-row.column-2.smartphone-layout-one { grid-template-columns: repeat(2, 1fr); } .bb-bldr--responsive .bb-bldr-row.column-2.smartphone-layout-two, footer .bb-bldr-row.column-2.smartphone-layout-two { grid-template-columns: 4fr 1fr; } .bb-bldr--responsive .bb-bldr-row.column-2.smartphone-layout-three, footer .bb-bldr-row.column-2.smartphone-layout-three { grid-template-columns: 100%; } /* column layout three */ .bb-bldr--responsive .bb-bldr-row.column-3.smartphone-layout-one, footer .bb-bldr-row.column-3.smartphone-layout-one { grid-template-columns: repeat(3, 1fr); } .bb-bldr--responsive .bb-bldr-row.column-3.smartphone-layout-two { grid-template-columns: 3fr 1fr 1fr; } .bb-bldr--responsive .bb-bldr-row.column-3.smartphone-layout-three, footer .bb-bldr-row.column-3.smartphone-layout-two { grid-template-columns: 100%; } /* column four */ footer .bb-bldr-row.column-4.smartphone-layout-one { grid-template-columns: repeat(4, 1fr); } footer .bb-bldr-row.column-4.smartphone-layout-two { grid-template-columns: 100%; } } /* column */ .bb-bldr-row .bb-bldr-column { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; -webkit-align-items: center; min-width: 0; } /* alignment */ .bb-bldr-row .alignment-left, .bb-bldr-row .alignment-left .menu { justify-content: left; -webkit-justify-content: left; } .bb-bldr-row .alignment-center, .bb-bldr-row .alignment-center .menu { justify-content: center; -webkit-justify-content: center; } .bb-bldr-row .alignment-right, .bb-bldr-row .alignment-right .menu { justify-content: right; -webkit-justify-content: right; } @media (max-width: 769px) { .bb-bldr-row .tablet-alignment--left { justify-content: left; -webkit-justify-content: left; } footer .bb-bldr-row .tablet-alignment--center .social-icons-wrap, footer .bb-bldr-row .tablet-alignment--center .footer-logo, footer .bb-bldr-row .tablet-alignment--center .blog-postx-scroll-btn, footer .bb-bldr-row .tablet-alignment--center .site-info { text-align: left; } .bb-bldr-row .tablet-alignment--center { justify-content: center; -webkit-justify-content: center; } footer .bb-bldr-row .tablet-alignment--cente .social-icons-wrap, footer .bb-bldr-row .tablet-alignment--cente .footer-logo, footer .bb-bldr-row .tablet-alignment--cente .blog-postx-scroll-btn, footer .bb-bldr-row .tablet-alignment--cente .site-info { text-align: center; } .bb-bldr-row .tablet-alignment--right { justify-content: right; -webkit-justify-content: right; } footer .bb-bldr-row .tablet-alignment--right .social-icons-wrap, footer .bb-bldr-row .tablet-alignment--right .footer-logo, footer .bb-bldr-row .tablet-alignment--right .blog-postx-scroll-btn, footer .bb-bldr-row .tablet-alignment--right .site-info { text-align: right; } } @media (max-width: 610px) { .bb-bldr-row .smartphone-alignment--left { justify-content: left; -webkit-justify-content: left; } footer .bb-bldr-row .smartphone-alignment--center .social-icons-wrap, footer .bb-bldr-row .smartphone-alignment--center .footer-logo, footer .bb-bldr-row .smartphone-alignment--center .blog-postx-scroll-btn, footer .bb-bldr-row .smartphone-alignment--center .site-info { text-align: left; } .bb-bldr-row .smartphone-alignment--center { justify-content: center; -webkit-justify-content: center; } footer .bb-bldr-row .smartphone-alignment--cente .social-icons-wrap, footer .bb-bldr-row .smartphone-alignment--cente .footer-logo, footer .bb-bldr-row .smartphone-alignment--cente .blog-postx-scroll-btn, footer .bb-bldr-row .smartphone-alignment--cente .site-info { text-align: center; } .bb-bldr-row .smartphone-alignment--right { justify-content: right; -webkit-justify-content: right; } footer .bb-bldr-row .smartphone-alignment--right .social-icons-wrap, footer .bb-bldr-row .smartphone-alignment--right .footer-logo, footer .bb-bldr-row .smartphone-alignment--right .blog-postx-scroll-btn, footer .bb-bldr-row .smartphone-alignment--right .site-info { text-align: right; } } /* header */ .site-header.full-width--layout .blog-postx-container, .site-footer.full-width--layout .blog-postx-container { width: initial; max-width: initial; padding: 0; } .site-header.full-width--layout .row, .site-footer.full-width--layout .row { margin: 0; } /* site logo */ .bb-bldr-row .alignment-left .site-branding { text-align: left; } .bb-bldr-row .alignment-center .site-branding { text-align: center; } .bb-bldr-row .alignment-right .site-branding { text-align: right; } .bb-bldr-row .site-branding img { width: 160px; } /* header sticky */ .site-header.header-sticky--enabled { position: fixed; z-index: 9999; width: 100%; top: 0; left: 0; } .site-header.header-sticky--enabled { animation: .3s smart-sticky ease-out; transition: transform .3s ease-out; will-change: opacity; background-color: var(--blog-postx-white-dark-color); box-shadow: 0px 1px 7px #0000000d; } .site-header.header-sticky--enabled.fixed--off, .site-header.header-sticky--enabled.fixed--off { transform: translateY(-1000px); } @keyframes smart-sticky { 0% { transform: translateY(-250%); } 100% { transform: translateY(0); } } .admin-bar .site-header.header-sticky--enabled { top: 32px; } .site-header.header-sticky--enabled .bb-bldr-row { display: none; } .site-header.header-sticky--enabled .bb-bldr-row.row-sticky { display: grid; } /* mobile canvas */ .site-header .toggle-button-wrapper .canvas-menu-icon span { background-color: var(--blog-postx-mobile-canvas-icon-color); } .blog-postx-dark-mode .site-header .toggle-button-wrapper .canvas-menu-icon span { background-color: #fff; } .site-header .toggle-button-wrapper .canvas-menu-icon:hover span { background-color: var(--blog-postx-mobile-canvas-icon-color-hover); } .bb-bldr-row.mobile-canvas.alignment--left { text-align: left; } .bb-bldr-row.mobile-canvas.alignment--center { text-align: center; } .bb-bldr-row.mobile-canvas.alignment--right { text-align: right; } .bb-bldr-row.mobile-canvas.alignment--right .main-navigation ul.menu li a.toggle-sub-menu { right: initial; left: 0; } .bb-bldr-row.mobile-canvas .main-navigation .menu li a { color: var(--blog-postx-canvas-color); } /* progress bar */ .single-progress { height: 6px; background-color: var(--blog-postx-global-preset-theme-color); position: fixed; bottom: 0; z-index: 999; } /* MARK: footer */ footer.site-footer { background: var(--blog-postx-white-dark-color); } body footer.site-footer .bb-bldr-row.is-vertical { grid-template-columns: 100% } .site-title { margin: 0; } footer .bb-bldr-row { align-items: self-start; -webkit-align-items: self-start; } footer .bb-bldr-row .alignment-left .social-icons-wrap, footer .bb-bldr-row .alignment-left .footer-logo, footer .bb-bldr-row .alignment-left .blog-postx-scroll-btn, footer .bb-bldr-row .alignment-left .site-info { text-align: left; } footer .bb-bldr-row .alignment-center .social-icons-wrap, footer .bb-bldr-row .alignment-center .footer-logo, footer .bb-bldr-row .alignment-center .blog-postx-scroll-btn, footer .bb-bldr-row .alignment-center .site-info { text-align: center; } footer .bb-bldr-row .alignment-right .social-icons-wrap, footer .bb-bldr-row .alignment-right .footer-logo, footer .bb-bldr-row .alignment-right .blog-postx-scroll-btn, footer .bb-bldr-row .alignment-right .site-info { text-align: right; } /* MARK: FOOTER ROW */ .site-footer .bb-bldr-row.row-one { padding: 40px 0 0; } .site-footer .bb-bldr-row.row-two { padding: 30px 0 40px; } .site-footer .bb-bldr-row.row-three { padding: 20px 0; border-top: 1px solid #9595952b; } /* menu */ footer.site-footer .bb-bldr-widget:not(.has-sidebar) .menu, footer.site-footer .bb-bldr-widget:not(.has-sidebar) .sub-menu { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; -webkit-align-items: center; column-gap: 20px; row-gap: 10px; } footer.site-footer .bb-bldr-widget:not(.has-sidebar) .menu li { display: flex; align-items: center; -webkit-align-items: center; column-gap: 20px; row-gap: 10px; } footer.site-footer .bb-bldr-widget:not(.has-sidebar) .menu li a { text-decoration: none; font-family: var(--blog-postx-footer-menu-family); font-size: var(--blog-postx-footer-menu-size); font-style: var(--blog-postx-footer-menu-font-style); line-height: var(--blog-postx-footer-menu-lineheight); letter-spacing: var(--blog-postx-footer-menu-letterspacing); text-decoration: var(--blog-postx-footer-menu-textdecoration); text-transform: var(--blog-postx-footer-menu-texttransform); font-weight: var(--blog-postx-footer-menu-weight); color: var(--blog-postx-footer-menu-color); transition: all .3s ease-in-out; } @media (max-width: 1024px) { footer.site-footer .bb-bldr-widget:not(.has-sidebar) .sub-menu { display: none; } } /* column */ footer.site-footer .bb-bldr-widget:not(.has-sidebar) .menu li a:hover { color: var(--blog-postx-footer-menu-color-hover); } /* MARK: SOCIAL ICONS */ header .social-icons-wrap a { text-decoration: none; display: inline-block; } header .social-icons-wrap a + a { margin-left: 15px; } header .social-icons-wrap a i { color: var(--blog-postx-header-social-color); } header .social-icons-wrap a:hover i { color: var(--blog-postx-header-social-color-hover); } footer .social-icons-wrap .blog-postx-social-icon { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; } footer .social-icons-wrap a { color: var(--blog-postx-footer-social-color); text-decoration: none; display: inline-block; transition: all .3s ease; display: flex; align-items: center; gap: 10px; } footer .social-icons-wrap a:hover { color: var(--blog-postx-footer-social-color-hover); } .bb-bldr-row .social-icons-wrap a i { font-size: 16px; border-radius: 3px; text-align: center; transition: all .25s cubic-bezier(.02,.01,.45,1); } header .social-icons-wrap .is-border a i, header .social-icons-wrap .is-box-shadow a i, header .social-icons-wrap .is-background a i { width: 40px; height: 35px; line-height: 35px; } footer .social-icons-wrap .is-border a i, footer .social-icons-wrap .is-box-shadow a i, footer .social-icons-wrap .is-background a i { font-size: 0.75rem; width: 28px; height: 26px; line-height: 26px; border-radius: 3px; text-align: center; } footer .social-icons-wrap .is-background a i { color: #fff; background: #c69270; } footer .social-icons-wrap .icon-count:before { content: '.'; padding-right: 2px; } header .social-icons-wrap.blog-postx-show-hover-animation a .icon-label { display: none; } .bb-bldr-row .social-icons-wrap .is-hover-animation a:hover i, .widget_blog_postx_social_platforms_widget .blog-postx-social-icon.is-hover-animation a:hover { transform: translateY(-2px); } /* MARK: FOOTER LOGO */ footer .footer-logo img { width: 200px; display: block; } /* instagram */ .bb-bldr-widget.builder-ymhm-widget { flex: 1; width: 100%; } footer .bb-bldr-widget.has-sidebar { width: 100%; }