/*! Theme Name: TrendingNews Theme URI: https://wpinterface.com/themes/trendingnews/ Author: WPInterface Author URI: https://wpinterface.com/ Description: Step into the world of TrendingNews, a sleek and adaptable WordPress theme built for bloggers and digital storytellers. Combining creativity with powerful functionality, TrendingNews is the ideal choice for personal blogs, lifestyle journals, fashion magazines, or editorial platforms. Tailored for influencers and modern content creators, it features a fully responsive design that looks flawless across all devices—from desktops to tablets and smartphones. Whether you’re showcasing your personal style, curating trending content, or running a digital magazine, TrendingNews makes sure your voice shines with elegance and impact. Requires at least: 5.9 Tested up to: 6.8 Requires PHP: 5.6 Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: trendingnews Tags: one-column, two-columns, right-sidebar, left-sidebar, flexible-header, custom-header, custom-background, custom-menu, custom-colors, sticky-post, threaded-comments, translation-ready, featured-images, theme-options, post-formats, footer-widgets, blog, e-commerce, rtl-language-support This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /*-------------------------------------------------------------- # Generic --------------------------------------------------------------*/ /* Normalize --------------------------------------------- */ :root { --wpi-gutter: 0.938rem; --wpi--base-bg-color: #f6f7fa; --wpi--base-text-color: #000000; --wpi--base-border-color: #cccccc; --wpi--link-color: #000000; --wpi--link-hover-color: #0267ff; --wpi--primary-bg-color: #ff0000; --wpi--primary-text-color: #fff; --wpi--secondary-bg-color: #ed6904; --wpi--secondary-text-color: #fff; --wpi--preloader-bg: #fff; --wpi--preloader-color: #036; --wpi-submenu-bg-color: #1E2124; --wpi-submenu-text-color: #fff; --wpi--rgb-color: 0, 0, 0; --wpi--alt-rgb-color: 255, 255, 255; --wpi--verticle-spacing-large: 7.5rem; --wpi--verticle-spacing-big: 5rem; --wpi--verticle-spacing-medium: 2.5rem; --wpi--verticle-spacing-small: 1.25rem; --wpi--site-title-font-family: "Roboto", sans-serif; --wpi--site-title-font-size: 3.125rem; --wpi--site-title-font-weight: 500; --wpi--letter-spacing-site-title: 0; --wpi--text-transform-site-title: capitalize; --wpi--font-general: "Roboto", sans-serif; --wpi--font-general-weight: 400; --wpi--font-size-general: 1rem; --wpi--letter-spacing-general: 0; --wpi--font-family-section-heading: "Roboto", sans-serif; --wpi--font-family-large: "Roboto", sans-serif; --wpi--font-size-large: clamp(2rem, 1.9299rem + 0.1951vw, 2.125rem); --wpi--font-weight-large: 700; --wpi--letter-spacing-large: 0; --wpi--line-height-large: 1.2; --wpi--text-transform-large: inherit; --wpi--font-family-big: "Roboto", sans-serif; --wpi--font-size-big: clamp(1.625rem, 1.5549rem + 0.1951vw, 1.75rem); --wpi--font-weight-big: 700; --wpi--letter-spacing-big: 0; --wpi--line-height-big: 1.2; --wpi--text-transform-big: inherit; --wpi--font-family-medium: "Roboto", sans-serif; --wpi--font-size-medium: clamp(1.125rem, 1.0549rem + 0.1951vw, 1.25rem); --wpi--font-weight-medium: 700; --wpi--letter-spacing-medium: 0; --wpi--line-height-medium: 1.2; --wpi--text-transform-medium: inherit; --wpi--font-family-small: "Roboto", sans-serif; --wpi--font-size-small: clamp(0.875rem, 0.8049rem + 0.1951vw, 1rem); --wpi--font-weight-small: 700; --wpi--letter-spacing-small: 0; --wpi--line-height-small: 1.4; --wpi--text-transform-small: inherit; --wpi--meta-font-family: "Roboto", sans-serif; --wpi--meta-font-size: 0.75rem; --wpi--meta-font-weight: 400; --swiper-theme-color: #FF5722; --swiper-navigation-size: 0.875rem; --swiper-navigation-sides-offset: 0; --swiper-pagination-bullet-inactive-color: #000; --swiper-pagination-bullet-inactive-opacity: .7; } @media (min-width: 1400px) { :root { --wpi-gutter: 0.938rem; } } /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; -webkit-text-size-adjust: 100%; } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Render the `main` element consistently in IE. */ main { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; height: 0; overflow: visible; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; font-size: 1em; } /* Text-level semantics ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; text-decoration: underline dotted; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; font-size: 1em; } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ img { border-style: none; vertical-align: top; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; outline-offset: -2px; } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } /* Interactive ========================================================================== */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } /* Box sizing --------------------------------------------- */ /* Inherit box-sizing to more easily change it's value on a component level. @link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ *, *::before, *::after { box-sizing: border-box; } html { box-sizing: border-box; } ::-moz-selection { background: #000000; color: #ffffff; } ::selection { background: #000000; color: #ffffff; } .align-text-center { text-align: center; } .align-text-center .entry-meta { justify-content: center; } .align-text-left { text-align: left; } .align-text-right { text-align: right; } .vertical-align-top { align-items: flex-start; } .vertical-align-middle { align-items: center; } .vertical-align-bottom { align-items: flex-end; } .site .mb-2 { margin-bottom: 1.25rem; } .site .mb-3 { margin-bottom: 1.875rem; } .site .mb-4 { margin-bottom: 2.5rem; } /*-------------------------------------------------------------- # Base --------------------------------------------------------------*/ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; overflow-x: hidden; } /* Typography --------------------------------------------- */ body { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } body, button, input, select, optgroup, textarea { color: var(--wpi--base-text-color); font-family: var(--wpi--font-general); font-weight: var(--wpi--font-general-weight); font-size: var(--wpi--font-size-general); font-optical-sizing: auto; letter-spacing: var(--wpi--letter-spacing-general); line-height: 1.5; font-variation-settings: "wdth" 100; } h1, h2, h3, h4, h5, h6 { clear: both; line-height: 1.2; } h1 { font-family: var(--wpi--font-family-large); font-size: var(--wpi--font-size-large); font-weight: var(--wpi--font-weight-large); } h2 { font-family: var(--wpi--font-family-big); font-size: var(--wpi--font-size-big); font-weight: var(--wpi--font-weight-big); } h3 { font-family: var(--wpi--font-family-medium); font-size: var(--wpi--font-size-medium); font-weight: var(--wpi--font-weight-medium); } h4 { font-family: var(--wpi--font-family-small); font-size: var(--wpi--font-size-small); font-weight: var(--wpi--font-weight-small); } p { margin: 0 0 0.938rem; } .entry-title { margin: 0 0 0.938rem; } .entry-title-normal { font-style: normal; } .entry-title-italic { font-style: italic; } .entry-title-large { font-family: var(--wpi--font-family-large); font-size: var(--wpi--font-size-large); font-weight: var(--wpi--font-weight-large); letter-spacing: var(--wpi--letter-spacing-large); line-height: var(--wpi--line-height-large); text-transform: var(--wpi--text-transform-large); } .entry-title-sub-large { font-family: var(--wpi--font-family-large); font-weight: var(--wpi--font-weight-large); letter-spacing: var(--wpi--letter-spacing-large); line-height: var(--wpi--line-height-large); text-transform: var(--wpi--text-transform-large); font-size: calc(var(--wpi--font-size-large) - 0.625rem); } .entry-title-large { color: var(--wpi--link-color); } .entry-title-big { font-family: var(--wpi--font-family-big); font-size: var(--wpi--font-size-big); font-weight: var(--wpi--font-weight-big); letter-spacing: var(--wpi--letter-spacing-big); line-height: var(--wpi--line-height-big); text-transform: var(--wpi--text-transform-big); } .entry-title-medium { font-family: var(--wpi--font-family-medium); font-size: var(--wpi--font-size-medium); font-weight: var(--wpi--font-weight-medium); letter-spacing: var(--wpi--letter-spacing-medium); line-height: var(--wpi--line-height-medium); text-transform: var(--wpi--text-transform-medium); } .entry-title-small { font-family: var(--wpi--font-family-small); font-size: var(--wpi--font-size-small); font-weight: var(--wpi--font-weight-small); letter-spacing: var(--wpi--letter-spacing-small); line-height: var(--wpi--line-height-small); text-transform: var(--wpi--text-transform-small); } .entry-title a { background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 0 2px; transition: background-size 0.5s ease; } .entry-title a:hover, .entry-title a:focus { background-size: 100% 2px; } .site [class*="limit-line-"] { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--limit-line-clamp, 5); } .limit-line-1 { --limit-line-clamp: 1; } .limit-line-2 { --limit-line-clamp: 2; } .limit-line-3 { --limit-line-clamp: 3; } .limit-line-4 { --limit-line-clamp: 4; } dfn, cite, em, i, blockquote { font-style: italic; } blockquote { margin: 0 1.5em; } address { margin: 0 0 1.5em; } pre { background: #eee; font-family: "Courier 10 Pitch", courier, monospace; line-height: 1.6; margin-bottom: 1.6em; max-width: 100%; overflow: auto; padding: 1.6em; } code, kbd, tt, var { font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace; } abbr, acronym { border-bottom: 1px dotted #666; cursor: help; } mark, ins { background: #fff9c0; text-decoration: none; } big { font-size: 125%; } /* Elements --------------------------------------------- */ body { background-color: var(--wpi--base-bg-color); } hr { background-color: #ccc; border: 0; height: 1px; margin-bottom: 0.938rem; margin-top: 0.938rem; } ul, ol { margin: 0 0 0.938rem 1.875rem; } ul { list-style: disc; } ol { list-style: decimal; } li > ul, li > ol { margin-bottom: 0; margin-left: 0.938rem; } .reset-list-style, .reset-list-style ul, .reset-list-style ol { list-style: none; margin: 0; padding: 0; } .reset-list-style li { margin: 0; } dt { font-weight: 700; } dd { margin: 0 0.938rem 0.938rem; } /* Make sure embeds and iframes fit their containers. */ embed, iframe, object { max-width: 100%; } img { height: auto; max-width: 100%; } figure { margin: 0.625rem 0; } table { margin: 0 0 0.938rem; width: 100%; } @media (max-width: 767px) { .hide-on-mobile { display: none !important; } } @media (min-width: 768px) and (max-width: 1024px) { .hide-on-tablet { display: none !important; } } @media (min-width: 1025px) { .hide-on-desktop { display: none !important; } } /* Links --------------------------------------------- */ a { color: var(--wpi--link-color); } a, .text-decoration-reset { text-decoration: none; } a:hover, a:focus, a:active { color: var(--wpi--link-hover-color); } a:hover, a:focus, a:active { outline: 0; } a:focus-visible { outline: 2px solid var(--wpi--link-hover-color); } .entry-content a:not(.button, .wpi-button, .wp-element-button, .wp-block-button__link, .text-decoration-reset), .entry-summary a:not(.button, .wpi-button, .wp-element-button, .wp-block-button__link, .text-decoration-reset), .entry-excerpt a:not(.button, .wpi-button, .wp-element-button, .wp-block-button__link, .text-decoration-reset) { text-decoration: underline; } /* Forms --------------------------------------------- */ button, input[type="button"], input[type="reset"], input[type="submit"], .wp-block-search__button { border: 0; border-radius: 0; background: var(--wpi--primary-bg-color); color: var(--wpi--primary-text-color); line-height: 1; padding: 0.313rem 0.938rem; -webkit-appearance: none; min-height: 3.125rem; } button:active, button:hover, button:focus, input[type="button"]:active, input[type="button"]:hover, input[type="button"]:focus, input[type="reset"]:active, input[type="reset"]:hover, input[type="reset"]:focus, input[type="submit"]:active, input[type="submit"]:hover, input[type="submit"]:focus, .wp-block-search__button:active, .wp-block-search__button:hover, .wp-block-search__button:focus { background: var(--wpi--secondary-bg-color); color: var(--wpi--secondary-text-color); } .wp-block-search__button { margin: 0; } .wpi-button-group { display: flex; align-items: center; justify-content: center; margin-top: 2.5rem; gap: 1.25rem; } .wpi-button { background: none; display: inline-block; font-size: var(--wpi--font-size-general); padding: 0.938rem 1.875rem; text-align: center; min-width: 8.75rem; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; } .wpi-button-block { display: block; } .wpi-button-small { padding: 0.625rem 1.25rem; } .wpi-button-primary { background: var(--wpi--primary-bg-color); color: var(--wpi--primary-text-color); } .wpi-button-secondary { background: var(--wpi--secondary-bg-color); color: var(--wpi--secondary-text-color); } .wpi-button-outline { border: 0.125rem solid var(--wpi--primary-bg-color); } .wpi-button-outline:hover, .wpi-button-outline:focus { border-color: var(--wpi--secondary-bg-color); } .wpi-button-primary:hover, .wpi-button-primary:focus { background: var(--wpi--secondary-bg-color); color: var(--wpi--secondary-text-color); } .wpi-button-secondary:hover, .wpi-button-secondary:focus { background: var(--wpi--primary-bg-color); color: var(--wpi--primary-text-color); } 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, select { color: #666; border: 0.063rem solid var(--wpi--base-border-color); border-radius: 0; min-height: 3.125rem; padding: 0.313rem 0.625rem; -webkit-appearance: none; } 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 { border-color: var(--wpi--link-hover-color); color: #111; outline: none; } textarea { width: 100%; } /*-------------------------------------------------------------- # Layouts --------------------------------------------------------------*/ /*-------------------------------------------------------------- # Components --------------------------------------------------------------*/ #wpi-preloader { width: 100%; height: 100vh; position: fixed; background-color: var(--wpi--preloader-bg); display: flex; justify-content: center; align-items: center; opacity: 1; transition: opacity 1s ease-out; z-index: 99999; } #wpi-preloader.wpi-preloader-exit { opacity: 0; } .wpi-preloader-wrapper { position: relative; } .wpi-menu-icon { display: block; position: relative; width: 22px; height: 12px; cursor: pointer; } .wpi-menu-icon span { position: absolute; display: block; width: 100%; height: 2px; background-color: currentColor; border-radius: 1px; transition: all 0.2s cubic-bezier(0.1, 0.82, 0.76, 0.965); } .wpi-menu-icon span:first-of-type { top: 0; width: 32px; } .wpi-menu-icon span:last-of-type { bottom: 0; } .showing-menu-modal .wpi-menu-icon span:first-of-type { transform: rotate(45deg); top: 5px; width: 22px; } .showing-menu-modal .wpi-menu-icon span:last-of-type { transform: rotate(-45deg); bottom: 5px; } /* Social Icons ------------------------------ */ ul.social-icons { display: flex; flex-wrap: wrap; } ul.social-icons.none, ul.social-icons.has-brand-color { gap: 0.625rem; } .social-icons a { align-items: center; display: flex; justify-content: center; padding: 0; } .social-icons .svg-icon { height: 1.25rem; width: 1.25rem; transition: all .3s ease; } .social-icons a[href*="twitter"] .svg-icon, .social-icons a[href*="x"] .svg-icon, .social-icons a[href*="tiktok"] .svg-icon { width: 2.25rem; } .social-icons.has-brand-background a { background-color: var(--wpi--primary-bg-color); color: var(--wpi--primary-text-color); height: 2rem; width: 2rem; } .social-icons.has-border-radius { gap: 0.125rem; } .social-icons.has-border-radius a { border-radius: 50%; } .social-icons a:focus .svg-icon, .social-icons a:hover .svg-icon { transform: scale(1.1); } /* Cover Modals ------------------------------ */ .cover-modal { display: none; } .search-modal { overflow-x: hidden; overflow-y: scroll; /* Always enable vertical scroll */ /* Hide scrollbar for IE and Edge */ -ms-overflow-style: none; /* Hide scrollbar for Firefox */ scrollbar-width: none; } .cover-modal::-webkit-scrollbar { display: none; /* For Chrome, Safari, and Opera */ } .cover-modal.show-modal { display: block; cursor: pointer; } .header-promote-bg { --wpi--promote-background: #f1f1f1; } .header-promote-bg { background-color: var(--wpi--promote-background); } .wpi-promote-center { display: block; text-align: center; } .wpi-promote-right { display: block; text-align: right; } .site-topbar { --wpi--base-bg-color: #eeeeee; --wpi--base-text-color: #333333; --wpi--link-color: #000000; --wpi--link-hover-color: #ed6904; } .site-topbar { background-color: var(--wpi--base-bg-color); color: var(--wpi--base-text-color); padding-bottom: 0.625rem; padding-top: 0.625rem; } .topbar-wrapper { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--wpi-gutter); padding-right: var(--wpi-gutter); padding-left: var(--wpi-gutter); } .site-topbar .topbar-components { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; } /* -------------------------------------------------------------------------- */ /* 4. Site Header /* -------------------------------------------------------------------------- */ .site-header { position: relative; } @media (max-width: 767px) { .site-header { padding-bottom: 0.938rem; padding-top: 0.938rem; } } .header-branding-area { padding-bottom: var(--wpi--verticle-spacing-medium); padding-top: var(--wpi--verticle-spacing-small); } @media (min-width: 992px) { .site-header .sticky-header-active { --wpi--base-bg-color: #000; --wpi--base-text-color: #ffffff; --wpi--link-color: #ffffff; background: var(--wpi--base-bg-color); display: block !important; position: fixed; top: 0; left: 0; right: 0; margin-left: auto; margin-right: auto; padding-bottom: 0.625rem; padding-top: 0.625rem; z-index: 999; width: 100%; animation: stickyheader 1s ease 0s; backface-visibility: hidden; -webkit-backface-visibility: hidden; } @keyframes stickyheader { from { top: -4.375rem; } to { top: 0; } } } .site-header .header-wrapper { display: -ms-flexbox; display: flex; justify-content: space-between; align-items: center; gap: var(--wpi-gutter); } .header-wrapper-bg { --wpi--base-bg-color: #1E2124; --wpi--base-text-color: #777; --wpi--link-color: #fff; --wpi--link-hover-color: #ed6904; --wpi--base-border-color: #ed6904; } .header-wrapper-bg { background: var(--wpi--base-bg-color); border-top: 0.313rem solid var(--wpi--base-border-color); border-radius: 4px; color: var(--wpi--base-text-color); } .site-header .header-wrapper .header-components { display: -ms-flexbox; display: flex; justify-content: center; align-items: center; gap: var(--wpi-gutter); } .site-header:not(.site-header-1) .site-header-desktop .header-components.header-components-left, .site-header:not(.site-header-1) .site-header-desktop .header-components.header-components-right { align-items: center; flex: 0 0 auto; width: auto; } .site-header.site-header-3 .site-header-desktop .header-components.header-components-right { flex-shrink: 1; } .site-header-1 .site-header-desktop { padding-bottom: var(--wpi--verticle-spacing-small); padding-top: var(--wpi--verticle-spacing-small); } .site-header-1 .site-header-desktop .header-components.header-components-left, .site-header-1 .site-header-desktop .header-components.header-components-right { display: flex; align-items: center; gap: var(--wpi-gutter); min-width: 0; } .site-header-1 .site-header-desktop .header-components.header-components-right { display: flex; align-items: center; gap: var(--wpi-gutter); } .site-header-1 .site-header-desktop .search-toggle { background-color: var(--wpi--header-desktop-background); margin-right: 0; flex: none; min-width: 0; padding: 0.625rem; width: fit-content; } .site-header-3 .header-navigation-area .offcanvas-toggle, .site-header-3 .header-navigation-area .search-toggle { padding-left: 1.5rem; padding-right: 1.5rem; } .site-header-4 .site-header-desktop .header-components.header-components-left, .site-header-4 .site-header-desktop .header-components.header-components-right { display: flex; align-items: center; gap: var(--wpi-gutter); min-width: 0; flex: 1; } .site-header-4 .site-header-desktop .header-components.header-components-left { justify-content: flex-start; } .site-header-4 .site-header-desktop .header-components.header-components-center { margin: 0 auto; text-align: center; } .site-header-4 .site-header-desktop .header-components.header-components-right { justify-content: flex-end; } .header-components.header-components-center { flex: 1; display: flex; align-items: center; justify-content: center; } .header-components.header-components-center .site-branding { text-align: center; } .toggle { background: none; border: none; box-shadow: none; color: var(--wpi--link-color); cursor: pointer; display: flex; align-items: center; gap: 0.313rem; padding: 0; position: relative; } .toggle:active, .toggle:hover, .toggle:focus { background: none; color: inherit; } .toggle:focus-visible { box-shadow: none; outline: 2px solid var(--wpi--link-hover-color); } .site-header.site-header-4 .desktop-nav-toggle { background: var(--wpi--primary-bg-color); color: var(--wpi--primary-text-color); } .site-header.site-header-4 .desktop-nav-toggle:hover, .site-header.site-header-4 .desktop-nav-toggle:focus { border-color: var(--wpi--primary-bg-color); } .header-has-spacing { padding-bottom: var(--wpi--verticle-spacing-small); padding-top: var(--wpi--verticle-spacing-small); } /* Header Titles ----------------------------- */ .site-branding-wrapper { align-items: center; display: flex; justify-content: center; padding: 0 2.5rem; text-align: center; } body:not(.enable-search-modal) .site-branding-wrapper { justify-content: flex-start; padding-right: 0; text-align: right; } .site-title, .site-logo, .site-description { margin: 0; } .site-title { display: inline-block; font-family: var(--wpi--site-title-font-family); font-size: var(--wpi--site-title-font-size); font-weight: var(--wpi--site-title-font-weight); text-transform: var(--wpi--text-transform-site-title); letter-spacing: var(--wpi--letter-spacing-site-title); font-optical-sizing: auto; line-height: 1; } .site-title a { display: block; } .site-description { font-size: var(--wpi--font-size-small); position: relative; transition: all 0.15s linear; } .site-logo a, .site-logo img { display: block; } @media (min-width: 1025px) { .site-header-1 .site-header-desktop .site-branding { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .site-header-1 .site-header-desktop .site-branding .site-logo, .site-header-1 .site-header-desktop .site-branding .site-title { flex: 1 auto auto; min-width: 0; } .site-header-1 .site-header-desktop .site-branding .site-description { flex: 0 0 100%; } } .site-logo img { height: 2.5rem; width: auto; margin-left: auto; margin-right: auto; max-width: 100%; object-fit: contain; display: block; } .site-header-responsive .site-logo img { height: 2.5rem; } .site-header-responsive .site-title { font-size: 2.125rem; } /* Primary Menu ---------------------------- */ .primary-menu { display: flex; flex-wrap: wrap; gap: 0.625rem; } .primary-menu .icon { display: inline-block; line-height: 1; padding-left: 0.313rem; vertical-align: middle; } .primary-menu .icon .svg-icon { height: 0.75rem; width: 0.75rem; } .primary-menu li { position: relative; } .primary-menu a { display: block; font-size: 0.813rem; font-weight: 700; line-height: 1; letter-spacing: 0.125rem; text-transform: uppercase; word-break: normal; word-wrap: normal; } @media (min-width: 1025px) { .primary-menu > li > a { padding: 1.25rem 0.625rem; position: relative; } .primary-menu > li.menu-item-has-children > a { padding-right: 0.625rem; } .primary-menu > li.current-menu-item > a { background-color: var(--wpi--secondary-bg-color); color: var(--wpi--secondary-text-color); } } /* SUB MENU */ .primary-menu ul { background: var(--wpi-submenu-bg-color); color: var(--wpi-submenu-text-color); opacity: 0; position: absolute; right: 9999rem; top: calc(100% + 1.25rem); transition: opacity 0.15s linear, transform 0.15s linear, right 0s 0.15s; transform: translateY(0.375rem); width: 15rem; z-index: 9; } .primary-menu li.menu-item-has-children:hover > ul, .primary-menu li.menu-item-has-children:focus > ul, .primary-menu li.menu-item-has-children.focus > ul { right: 0; opacity: 1; transform: translateY(0); transition: opacity 0.15s linear, transform 0.15s linear; } .primary-menu ul::before, .primary-menu ul::after { content: ""; display: block; position: absolute; bottom: 100%; } .primary-menu ul::before { height: 1.25rem; left: 0; right: 0; } .primary-menu ul::after { border: 0.5rem solid transparent; border-bottom-color: var(--wpi-submenu-bg-color); right: 0.938rem; } .primary-menu ul a { background: transparent; border: none; display: flex; align-items: center; justify-content: space-between; padding: 1.25rem; transition: background-color 0.15s linear; width: 100%; } .primary-menu ul a:not(:hover, :focus) { color: inherit; } .primary-menu ul a:hover, .primary-menu ul a:focus { background: rgba(var(--wpi--alt-rgb-color), 0.1); } .primary-menu ul li.menu-item-has-children .icon { right: 0.938rem; bottom: 0; top: 0; } /* DEEP DOWN */ .primary-menu ul ul { top: 0; } .primary-menu ul li.menu-item-has-children:hover > ul, .primary-menu ul li.menu-item-has-children:focus > ul, .primary-menu ul li.menu-item-has-children.focus > ul { right: calc(100% + 1.25rem); } .primary-menu ul ul::before { bottom: 0; height: auto; left: auto; right: -1.25rem; top: 0; width: 1.25rem; } .primary-menu ul ul::after { border-bottom-color: transparent; /*rtl:ignore*/ border-left-color: var(--wpi-submenu-bg-color); bottom: auto; right: -1rem; top: 1.25rem; } .rtl .primary-menu ul ul::after { transform: rotate(180deg); } /* * Enable nav submenu expansion with tapping on arrows on large-viewport * touch interfaces (e.g. tablets or laptops with touch screens). * These rules are supported by all browsers (>IE11) and when JS is disabled. */ @media (any-pointer: coarse) { .primary-menu > li.menu-item-has-children > a { padding-right: 0; margin-right: 1.25rem; } .primary-menu ul li.menu-item-has-children > a { margin-right: 2.813rem; padding-right: 0; width: unset; } } /* Repeat previous rules for IE11 (when JS enabled for polyfill). */ body.touch-enabled .primary-menu > li.menu-item-has-children > a { padding-right: 0; margin-right: 1.25rem; } body.touch-enabled .primary-menu ul li.menu-item-has-children > a { margin-right: 2.813rem; padding-right: 0; width: unset; } /* -------------------------------------------------------------------------- */ /* 5. Menu Modal /* -------------------------------------------------------------------------- */ .menu-modal { display: none; font-weight: 500; opacity: 0; overflow-y: auto; overflow-x: hidden; position: fixed; bottom: 0; right: -99999rem; left: 99999rem; top: 0; transition: opacity 0.25s ease-in, right 0s 0.25s, left 0s 0.25s; z-index: 9999; } .admin-bar .menu-modal { top: 32px; } @media (max-width: 782px) { .admin-bar .menu-modal { top: 46px; } } .menu-modal.show-modal { display: flex; } .menu-modal.active { left: 0; opacity: 1; right: 0; transition: opacity .25s ease-out; } .menu-modal-inner { background: var(--wpi--base-bg-color); color: var(--wpi--base-text-color); display: flex; justify-content: stretch; overflow: auto; -ms-overflow-style: auto; width: 100%; } .menu-wrapper { display: flex; flex-direction: column; justify-content: space-between; position: relative; } button.close-nav-toggle { align-items: center; display: flex; font-size: 1rem; font-weight: 500; justify-content: flex-end; padding: 1.938rem 1.563rem; width: 100%; } button.close-nav-toggle svg { height: 1rem; width: 1rem; } .menu-modal .menu-top { flex-shrink: 0; } /* Main Menu --------------------------------- */ .modal-menu li { border-color: var(--wpi--base-border-color); border-style: solid; border-width: 0.063rem 0 0 0; display: flex; flex-wrap: wrap; line-height: 1; justify-content: flex-start; margin: 0; } .modal-menu > li:last-child { border-bottom-width: 0.063rem; } .modal-menu .ancestor-wrapper { display: flex; justify-content: space-between; width: 100%; } .modal-menu a { display: block; padding: 1.25rem 1.563rem; width: 100%; } button.sub-menu-toggle { border-left: 0.063rem solid var(--wpi--base-border-color); flex-shrink: 0; padding: 0 1.563rem; } button.sub-menu-toggle svg { height: 0.625rem; transition: transform 0.15s linear; width: 0.625rem; } button.sub-menu-toggle.active svg { transform: rotate(-180deg); } .modal-menu ul { display: none; margin: 0; width: 100%; } /* Main menu animation ----------------------- */ .menu-wrapper .menu-item { position: relative; } .menu-wrapper .active { display: block; } .menu-wrapper.is-toggling { pointer-events: none; } .menu-wrapper.is-toggling .menu-item { position: absolute; top: 0; right: 0; margin: 0; width: 100%; } .menu-wrapper.is-animating .menu-item, .menu-wrapper.is-animating .toggling-target { transition-duration: 250ms; } .menu-wrapper.is-animating .menu-item { transition-property: transform; } .menu-wrapper.is-toggling .toggling-target { display: block; position: absolute; top: 0; right: 0; opacity: 1; } .menu-wrapper.is-toggling .toggling-target.active { opacity: 0; } .menu-wrapper.is-animating.is-toggling .toggling-target { display: block; transition-property: opacity; opacity: 0; } .menu-wrapper.is-animating.is-toggling .toggling-target.active { opacity: 1; } .menu-wrapper.is-toggling .modal-menu > li:last-child li { border-top-color: transparent; border-bottom-width: 0.063rem; } @media (prefers-reduced-motion: reduce) { .menu-wrapper.is-animating .menu-item, .menu-wrapper.is-animating .toggling-target { transition-duration: 1ms !important; } } /* Menu Bottom ------------------------------- */ .menu-bottom { flex-shrink: 0; margin-bottom: 0; margin-top: auto; padding: 2.5rem 1.563rem; } .menu-bottom nav { width: 100%; } .menu-copyright { padding: 2.5rem 1.563rem; } .menu-copyright a { text-decoration: underline; } /* -------------------------------------------------------------------------- */ /* 6. Search Modal /* -------------------------------------------------------------------------- */ .search-modal { background: rgba(0, 0, 0, 0.2); display: none; opacity: 0; position: fixed; bottom: 0; right: -9999rem; top: 0; transition: opacity 0.2s linear, right 0s 0.2s linear; width: 100%; z-index: 999; } .admin-bar .search-modal.active { top: 32px; } @media (max-width: 782px) { .admin-bar .search-modal.active { top: 46px; } } .search-modal-inner { background: var(--wpi--base-bg-color); transform: translateY(-100%); transition: transform 0.15s linear, box-shadow 0.15s linear; } .search-modal-inner .search-modal-panel { padding-bottom: var(--wpi--verticle-spacing-large); padding-top: var(--wpi--verticle-spacing-large); position: relative; } .search-modal-inner .search-modal-form { display: flex; justify-content: space-between; } .search-modal.active { right: 0; opacity: 1; transition: opacity 0.2s linear; } .search-modal.active .search-modal-inner { box-shadow: 0 0 1.25rem 0 rgba(0, 0, 0, 0.08); transform: translateY(0); transition: transform 0.25s ease-in-out, box-shadow 0.1s 0.25s linear; } button.search-untoggle { align-items: center; display: flex; flex-shrink: 0; justify-content: center; padding: 0 1.563rem; } .search-modal button.search-untoggle { color: inherit; padding: 0; position: absolute; top: 0; right: 0; } .search-modal.active .search-untoggle { animation: popIn both 0.3s 0.2s; } .search-untoggle svg { height: 1rem; transition: transform 0.15s ease-in-out; width: 1rem; } .search-untoggle:focus svg, .search-untoggle:hover svg { transform: scale(1.15); } /* Modal Search Form ------------------------- */ .search-modal form { margin: 0; position: relative; width: 100%; } .search-modal .search-field { font-size: 1.25rem; height: 5rem; width: 100%; } .search-modal .search-field::-webkit-input-placeholder { color: inherit; } .search-modal .search-field:-ms-input-placeholder { color: inherit; } .search-modal .search-field::-moz-placeholder { color: inherit; line-height: 4; } .search-modal .search-submit { position: absolute; right: -9999rem; top: 50%; transform: translateY(-50%); } .search-modal .search-submit:focus { right: 0; } .menu-modal { opacity: 1; justify-content: flex-end; padding: 0; transition: background-color 0.3s ease-in, left 0s 0.3s, right 0s 0.3s; } .menu-modal.active { background: rgba(0, 0, 0, 0.2); transition: background-color 0.3s ease-out; } .menu-wrapper { flex-grow: 1; } .menu-modal-inner { max-width: 40rem; opacity: 0; transform: translateX(31.25rem); transition: transform .2s ease-in, opacity .2s ease-in; } .menu-modal.active .menu-modal-inner { opacity: 1; transform: translateX(0); transition-timing-function: ease-out; } .wpi-search-articles { display: grid; grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)); gap: 1.25rem; } .offcanvas-drawer-active { overflow: hidden; } .offcanvas-toggle { display: flex; align-items: center; font-size: 24px; cursor: pointer; } .offcanvas-toggle:focus-visible { outline: 2px solid var(--wpi--link-hover-color); } .site-drawer-offcanvas { position: fixed; top: 0; left: -100%; width: 40rem; height: 100%; background-color: var(--wpi--base-bg-color); transition: left 0.3s ease; z-index: 999; display: flex; flex-direction: column; padding: calc(2 * var(--wpi-gutter)); overflow-y: scroll; scrollbar-width: none; -ms-overflow-style: none; } .site-drawer-offcanvas::-webkit-scrollbar { width: 0; height: 0; } @media screen and (max-width: 640px) { .site-drawer-offcanvas { width: 18.75rem; } } .site-drawer-offcanvas.show { left: 0; } .site-drawer-offcanvas .site-drawer-close-btn { align-self: flex-end; background: none; border: none; color: var(--wpi--link-color); font-size: 20px; cursor: pointer; } .site-drawer-offcanvas .site-drawer-close-btn:focus-visible { box-shadow: none; outline: 2px solid var(--wpi--link-hover-color); } .site-drawer-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transition: opacity 0.3s ease; } .site-drawer-overlay.show { opacity: 1; visibility: visible; z-index: 999; } /* Navigation --------------------------------------------- */ .comment-navigation .nav-links, .posts-navigation .nav-links, .post-navigation .nav-links { display: flex; } .comment-navigation .nav-previous, .posts-navigation .nav-previous, .post-navigation .nav-previous { flex: 1 0 50%; } .comment-navigation .nav-next, .posts-navigation .nav-next, .post-navigation .nav-next { text-align: end; flex: 1 0 50%; } .navigation.post-navigation { border-bottom: 0.063rem solid var(--wpi--base-border-color); margin-bottom: var(--wpi--verticle-spacing-large); padding-bottom: var(--wpi--verticle-spacing-large); position: relative; } .navigation.post-navigation:after { background: none; box-sizing: border-box; content: " "; position: absolute; height: 0.25rem; width: 100%; bottom: 0; left: 0; } .post-navigation .nav-links .nav-subtitle { font-weight: 700; display: block; } .post-navigation .nav-links .nav-title { font-family: var(--wpi--font-family-medium); font-size: var(--wpi--font-size-medium); font-weight: var(--wpi--font-weight-medium); } /* Posts and pages --------------------------------------------- */ .wrapper-gutter-small { --wpi-gutter: 0.063rem; } .wrapper { width: 100%; padding-right: var(--wpi-gutter); padding-left: var(--wpi-gutter); margin-right: auto; margin-left: auto; max-width: 87.5rem; } .row-group { display: flex; flex-wrap: wrap; margin-right: calc(-1 * var(--wpi-gutter)); margin-left: calc(-1 * var(--wpi-gutter)); } .row-group > * { flex-shrink: 0; width: 100%; max-width: 100%; padding-right: var(--wpi-gutter); padding-left: var(--wpi-gutter); } .row-group-collapse { margin-right: 0; margin-left: 0; } .row-group-collapse > * { padding-right: 0; padding-left: 0; } @media (min-width: 768px) { .row-group-reverse { flex-direction: row-reverse; } .column-md-1 { flex: 0 0 auto; width: 8.33333333%; } .column-md-2 { flex: 0 0 auto; width: 16.66666667%; } .column-md-3 { flex: 0 0 auto; width: 25%; } .column-md-4 { flex: 0 0 auto; width: 33.33333333%; } .column-md-5 { flex: 0 0 auto; width: 41.66666667%; } .column-md-6 { flex: 0 0 auto; width: 50%; } .column-md-7 { flex: 0 0 auto; width: 58.33333333%; } .column-md-8 { flex: 0 0 auto; width: 66.66666667%; } .column-md-9 { flex: 0 0 auto; width: 75%; } .column-md-10 { flex: 0 0 auto; width: 83.33333333%; } .column-md-11 { flex: 0 0 auto; width: 91.66666667%; } .column-md-12 { flex: 0 0 auto; width: 100%; } } @media (min-width: 1200px) { .column-lg-1 { flex: 0 0 auto; width: 8.33333333%; } .column-lg-2 { flex: 0 0 auto; width: 16.66666667%; } .column-lg-3 { flex: 0 0 auto; width: 25%; } .column-lg-4 { flex: 0 0 auto; width: 33.33333333%; } .column-lg-5 { flex: 0 0 auto; width: 41.66666667%; } .column-lg-6 { flex: 0 0 auto; width: 50%; } .column-lg-7 { flex: 0 0 auto; width: 58.33333333%; } .column-lg-8 { flex: 0 0 auto; width: 66.66666667%; } .column-lg-9 { flex: 0 0 auto; width: 75%; } .column-lg-10 { flex: 0 0 auto; width: 83.33333333%; } .column-lg-11 { flex: 0 0 auto; width: 91.66666667%; } .column-lg-12 { flex: 0 0 auto; width: 100%; } .order-lg-1 { order: 1; } .order-lg-2 { order: 2; } .order-lg-3 { order: 3; } } @media (max-width: 767px) { .column-sm-1 { flex: 0 0 auto; width: 8.33333333%; } .column-sm-2 { flex: 0 0 auto; width: 16.66666667%; } .column-sm-3 { flex: 0 0 auto; width: 25%; } .column-sm-4 { flex: 0 0 auto; width: 33.33333333%; } .column-sm-5 { flex: 0 0 auto; width: 41.66666667%; } .column-sm-6 { flex: 0 0 auto; width: 50%; } .column-sm-7 { flex: 0 0 auto; width: 58.33333333%; } .column-sm-8 { flex: 0 0 auto; width: 66.66666667%; } .column-sm-9 { flex: 0 0 auto; width: 75%; } .column-sm-10 { flex: 0 0 auto; width: 83.33333333%; } .column-sm-11 { flex: 0 0 auto; width: 91.66666667%; } .column-sm-12 { flex: 0 0 auto; width: 100%; } } @media (min-width: 992px) { #primary, .wpi-primary-widgetarea { flex: 1; overflow: hidden; } .single #primary { overflow: inherit; } #secondary, .wpi-secondary-widgetarea { flex: 0 0 18.75rem; width: 18.75rem; } .left-sidebar #primary { order: 2; } .left-sidebar #secondary { order: 1; } } @media (min-width: 1400px) { #secondary, .wpi-secondary-widgetarea { flex: 0 0 31.25rem; width: 31.25rem; } } .has-sticky-sidebar .site-sticky-components { position: -webkit-sticky; position: sticky; } .has-sticky-sidebar .site-sticky-components { top: 0; } .has-affix-navbar.has-sticky-sidebar .site-sticky-components { top: 6.25rem; } .article-groups { display: flex; flex-direction: column; flex-wrap: wrap; gap: 1.875rem; max-width: 100%; } .archive_style_1 .wpi-post-default { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 1.25rem; max-width: 100%; } @media (min-width: 768px) { .archive_style_1 .wpi-post-default { flex-direction: row; align-items: flex-start; } .archive_style_1 .wpi-post-default .entry-image { flex-basis: 45%; margin: 0; } .archive_style_1 .wpi-post-default .entry-image + .entry-details { flex-basis: 55%; align-self: stretch; } .archive_style_1 .wpi-post-default .entry-image + .entry-details .entry-content-excerpt { opacity: 0.7; } } @media (min-width: 768px) { .archive_style_3 { display: grid; grid-template-columns: repeat(2, 1fr); } .archive_style_3 .wpi-post:nth-child(3n + 1) { grid-column: 1 / -1; /* Full width */ } .archive_style_3 .wpi-post:nth-child(3n + 1) .entry-image img { height: 36rem; } } .archive_style_3 .page-header { grid-column: 1 / -1; } .sticky { display: block; } .updated:not(.published) { display: none; } .wpi-breadcrumb-trails { font-size: 85%; margin: 0 auto 1.25rem; } .wpi-breadcrumb-trails .breadcrumbs ul { list-style: none; margin: 0 auto; padding: 0; } .wpi-breadcrumb-trails .breadcrumbs ul li { display: inline-block; } .wpi-breadcrumb-trails .breadcrumbs span[itemprop="name"] { display: inline-block; position: relative; margin: 0 0.313rem 0.25rem 0; background: rgba(var(--wpi--rgb-color), 0.045); padding: 0.625rem 0.9756rem 0.625rem 0.25rem; border-radius: 2px; line-height: 1; max-width: 31.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wpi-breadcrumb-trails .breadcrumbs span[itemprop="name"]:hover, .wpi-breadcrumb-trails .breadcrumbs span[itemprop="name"]:focus { background: rgba(var(--wpi--rgb-color), 0.085); } .wpi-breadcrumb-trails .breadcrumbs span[itemprop="name"]:before { content: ""; background-color: var(--wpi--primary-bg-color); display: inline-block; margin-left: .45rem; margin-right: .65rem; width: 4px; height: 4px; border-radius: 4px; vertical-align: middle; margin-top: -2px; } .theme-svg-seperator { color: rgba(0, 0, 0, 0.1); display: flex; height: 100%; } .wpi-section { padding-bottom: var(--wpi--verticle-spacing-medium); padding-top: var(--wpi--verticle-spacing-medium); position: relative; overflow: hidden; } .site-tags-panel { display: -ms-flexbox; display: flex; align-items: center; gap: var(--wpi-gutter); position: relative; z-index: 1; } .site-tags-panel .site-tags-title { display: flex; align-items: center; justify-content: center; gap: 0.313rem; height: 3.125rem; padding-right: 0.938rem; position: relative; text-transform: uppercase; font-size: 14px; font-weight: 700; } .site-tags-panel .site-tags-content { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: center; } @media (max-width: 767px) { .site-tags-panel .site-tags-content { padding-bottom: 0.625rem; padding-top: 0.625rem; } } .site-tags-panel .site-tags-item { background-color: rgba(var(--wpi--rgb-color), 0.08); padding: 2px 12px; border-radius: 3px; line-height: 21px; display: block; font-size: 13px; font-weight: 500; } .site-tags-panel .site-tags-item:hover, .site-tags-panel .site-tags-item:focus { background-color: var(--wpi--primary-bg-color); color: var(--wpi--primary-text-color); } /* Ticker Posts */ .wpi-ticker-panel { position: relative; display: flex; gap: var(--wpi-gutter); } .wpi-ticker-title { position: relative; font-weight: 700; display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; flex-shrink: 0; height: 3.125rem; align-self: center; } .wpi-ticker-title .ticker-loader { position: relative; width: 1.25rem; height: 1.25rem; } .wpi-ticker-title .ticker-loader:before { animation: pulse-u9v30vmn 1.5s infinite; display: block; content: ''; height: 100%; width: 100%; border: 2px solid var(--wpi--secondary-bg-color); border-radius: 50%; } @keyframes pulse-u9v30vmn { 0%, 40% { border-width: 0.625rem; } 60% { border-color: var(--wpi--secondary-bg-color); border-width: 2px; opacity: 1; transform: scale(1); } 100% { border-color: var(--wpi--secondary-bg-color); opacity: 0; transform: scale(2); } } .wpi-ticker-content { position: relative; overflow: hidden; width: 100%; display: flex; align-items: center; justify-content: space-between; } .wpi-ticker-init .wpi-ticker-init-wrapper { transition-timing-function: linear !important; display: flex; align-items: center; gap: 1.25rem; position: relative; width: 100%; height: 100%; z-index: 1; transition-property: transform; transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial); box-sizing: content-box; } .wpi-ticker-init .wpi-ticker-init-wrapper .wpi-ticker-init-item { width: auto; display: flex; align-items: center; flex-shrink: 0; height: 100%; margin: 0; position: relative; transition-property: transform; transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; font-size: .875em; } .wpi-ticker-content .wpi-post-ticker, .wpi-ticker-content .wpi-post-ticker .entry-details { display: flex; align-items: center; gap: 1.25rem; margin: 0; } .wpi-ticker-content .wpi-post-ticker { min-height: 3.75rem; } .wpi-post-ticker .entry-meta-wrapper, .wpi-post-ticker .entry-meta, .wpi-post-ticker .entry-title { margin: 0; } .wpi-header-popular { --swiper-pagination-bottom: 0.625; } .wpi-header-popular { padding-bottom: var(--wpi--verticle-spacing-small); padding-top: var(--wpi--verticle-spacing-small); } .wpi-popular-panel { position: relative; width: 100%; } .wpi-banner-section { --wpi--base-bg-color: #fff; } .wpi-banner-section .wpi-post-list:not(:last-child) { border-bottom: 0.063rem solid var(--wpi--base-border-color); margin-bottom: calc(2 * var(--wpi-gutter)); padding-bottom: calc(2 * var(--wpi-gutter)); } .wpi-banner-area .wpi-banner-prime { grid-area: area1; } .wpi-banner-area .wpi-banner-subprime { grid-area: area2; } .wpi-banner-area .wpi-banner-subprime:last-child { grid-area: area3; } .wpi-banner-section .wpi-banner-area { display: grid; gap: calc(2 * var(--wpi-gutter)); box-sizing: border-box; grid-template-areas: "area1 area1" "area2 area3"; } @media (max-width: 575px) { .wpi-banner-section .wpi-banner-area { grid-template-areas: "area1" "area2" "area3"; grid-template-columns: 1fr; } } @media (max-width: 991px) { .wpi-banner-section .column-sm-12 { margin-bottom: 1.25rem; } } .wpi-slider-banner { padding-bottom: 0; position: relative; } .wpi-slider-banner, .wpi-slider-banner a:not(:hover, :focus, .wpi-button) { color: inherit; } .site-banner-hero .swiper-hero-slide, .site-banner-hero .hero-slide-image { height: 36.25rem; } .site-banner-hero .swiper-hero-slide { background-color: #222; } .site-banner-hero .hero-slide-image { position: relative; overflow: hidden; } .site-banner-hero .hero-slide-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; overflow: hidden } .slider-banner-has-overlay .swiper-hero-slide { color: #fff; } .slider-banner-has-overlay .swiper-hero-slide .swiper-slide-image:before { content: ""; background: rgba(0, 0, 0, 0.55); position: absolute; left: 0; right: 0; bottom: 0; top: 0; } .slider-banner-has-overlay .swiper-hero-slide.banner-description-bottom .swiper-slide-image:before { background-color: #7d8c91; background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 30%, rgb(0, 0, 0) 100%); } .site-banner-hero .site-banner-description { padding: 1.25rem; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 99; width: 100%; display: flex; flex-direction: column; } .site-banner-hero .banner-description-top .site-banner-description { justify-content: flex-start; } .site-banner-hero .banner-description-space .site-banner-description { justify-content: space-between; } .site-banner-hero .banner-description-bottom .has-post-thumbnail .site-banner-description { justify-content: flex-end; } .site-banner-hero .site-banner-description .entry-meta-wrapper { border-color: rgba(var(--wpi--alt-rgb-color), 0.25); } .wpi-mustread-section { --wpi--base-bg-color: #151515; --wpi--base-text-color: #fff; --wpi--link-color: #fff; --wpi--link-hover-color: #0267ff; --gap: 3.75rem; --line-offset: calc(var(--gap) / 2); --line-thickness: 0.063rem; } .wpi-mustread-section { background-color: var(--wpi--base-bg-color); color: var(--wpi--base-text-color); } .wpi-mustread-section .mustread-carousel { max-width: 83.75rem; margin-right: auto; margin-left: auto; } .wpi-mustread-section .swiper { overflow: visible; } .wpi-post-slide { display: flex; align-items: center; } .wpi-post-slide .entry-image, .wpi-post-slide .entry-details { flex: 0 0 50%; } .wpi-post-slide .entry-details { padding: calc(2 * var(--wpi-gutter)); } @media (max-width: 767px) { .wpi-post-slide { flex-direction: column; } .wpi-post-slide .entry-image, .wpi-post-slide .entry-details { flex: 0 0 100%; } } .categories-section-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(15.625rem, 1fr)); gap: 1.25rem; justify-content: center; overflow: hidden; } .categories-section-content, .categories-section-content a:not(:hover, :focus) { color: #fff; } .categories-section-content .wpi-category-panel { -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; overflow: hidden; position: relative; } .categories-section-content .wpi-category-panel:before { content: ''; display: block; padding-bottom: 26.25rem; } .entry-category-image .post-thumbnail:before { content: ''; position: absolute; bottom: 0; background-image: linear-gradient(to top, #1a1919e3, transparent); width: 100%; height: 100%; z-index: 1; } .entry-category-image a { height: 100%; width: 100%; position: absolute; top: 0; left: 0; background-color: #e7e7e7e7; overflow: hidden; } .entry-category-image a img { display: block; width: 100%; height: 100%; object-fit: cover; } .entry-category-details { position: absolute; } .category-details-vertical { bottom: var(--wpi-gutter); right: 0; writing-mode: vertical-lr; text-align: right; text-orientation: mixed; transform: translate(0, 0); z-index: 1; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; } .category-details-vertical .entry-category-title { margin: 0; } .wpi-category-panel:hover .category-details-vertical, .wpi-category-panel:focus .category-details-vertical { right: -140px; } .category-details-horizontal { left: -200%; bottom: 20px; z-index: 2; padding: 20px; opacity: 0; width: 100%; -webkit-transition: left .4s ease-in-out; -moz-transition: left .4s ease-in-out; -o-transition: left .4s ease-in-out; -ms-transition: left .4s ease-in-out; } .wpi-category-panel:hover .category-details-horizontal, .wpi-category-panel:focus .category-details-horizontal { left: 0; opacity: 1; } .wpi-category-panel .entry-category-label { display: block; } .wpi-recommendation-section { --wpi--base-bg-color: #fff; --wpi--base-text-color: #000000; --wpi--link-color: #000000; --wpi--link-hover-color: #0267ff; } .wpi-recommendation-section { background: var(--wpi--base-bg-color); color: var(--wpi--base-text-color); } .recommendation-section-content { display: grid; gap: calc(2 * var(--wpi-gutter)); position: relative; } .recommendation-style-2.recommendation-section-content { gap: var(--wpi-gutter) calc(2 * var(--wpi-gutter)); } .recommendation-section-content:after { background: none; box-sizing: border-box; content: " "; position: absolute; height: 0.25rem; width: 100%; bottom: 0; left: 0; } @media screen and (min-width: 1025px) { .recommendation-style-1 { grid-template-areas: "area1 area2 area3 area5" "area1 area2 area4 area6"; grid-template-columns: repeat(4, 1fr); } .recommendation-style-2 { grid-template-areas: "area1 area2 area3 area3" "area1 area2 area4 area4"; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); } .recommendation-style-3 { grid-template-areas: "area2 area1 area1 area4" "area3 area1 area1 area5"; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, auto); } .wpi-post-recommendation-1 { grid-area: area1; } .wpi-post-recommendation-2 { grid-area: area2; } .wpi-post-recommendation-3 { grid-area: area3; } .wpi-post-recommendation-4 { grid-area: area4; } .wpi-post-recommendation-5 { grid-area: area5; } .wpi-post-recommendation-6 { grid-area: area6; } } .recommendation-style-2 .wpi-post-recommendation-3, .recommendation-style-2 .wpi-post-recommendation-4 { display: flex; justify-content: space-between; gap: 1.25rem; margin: 0; } .recommendation-style-2 .wpi-post-recommendation-3 .entry-image, .recommendation-style-2 .wpi-post-recommendation-4 .entry-image { flex-basis: calc(100% * 1 / 3); flex-shrink: 0; min-width: 7.5em; } .recommendation-style-3 .wpi-post-recommendation { margin: 0; } @media (max-width: 991px) { .recommendation-section-content { grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr)); } .recommendation-section-content .wpi-post-recommendation .entry-image { height: 15rem; } } @media (max-width: 767px) { .recommendation-section-content { grid-template-columns: 1fr; } } .image-hover-effect { overflow: hidden; position: relative; } .hover-effect-shine .post-thumbnail:after { position: absolute; top: 0; left: -100%; z-index: 2; display: block; content: ""; width: 50%; height: 100%; background: -webkit-linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%); transform: skewX(-25deg); } .hover-effect-shine:hover .post-thumbnail:after, .hover-effect-shine:focus .post-thumbnail:after { animation: shine 0.85s; } @keyframes shine { 100% { left: 100%; } } .hover-effect-zoom .post-thumbnail img { transition: all 0.6s ease; } .hover-effect-zoom:hover .post-thumbnail img, .hover-effect-zoom:focus .post-thumbnail img { transform: scale(1.2); } .hover-effect-slide img { margin-left: 1.25rem; -webkit-transform: scale(1.5); transform: scale(1.5); -webkit-transition: .3s ease-in-out; transition: 0.5s ease-in-out; } .hover-effect-slide:hover img, .hover-effect-slide:focus img { margin-left: 0; } .entry-image .post-thumbnail { display: block; } .entry-image-overlay img { mix-blend-mode: overlay; } .image-overlay-regular { background-color: rgba(0, 0, 0, 0.35); } .image-overlay-gradient { background: -webkit-linear-gradient(to top, #0c0b11 8.71%, rgba(12, 11, 17, 0) 72.11%); background: -o-linear-gradient(to top, #0c0b11 8.71%, rgba(12, 11, 17, 0) 72.11%); background: linear-gradient(to top, #0c0b11 8.71%, rgba(12, 11, 17, 0) 72.11%); } .data-bg { background-repeat: no-repeat; background-position: center; background-size: cover; } .entry-image { margin: 0 0 0.938rem; } body .entry-image img { display: block; object-fit: cover; width: 100%; } body .entry-image-large img { height: 36.563rem; } body .entry-image-highlight img { height: 40rem; } body .entry-image-big img { height: 20rem; } body .entry-image-medium img { height: 16.25rem; } body .entry-image-small img { height: 11.25rem; } body .entry-image-thumbnail img { height: 7.5rem; } @media (max-width: 767px) { body .entry-image-large img, body .entry-image-highlight img, body .entry-image-big img { height: 25rem; } } .entry-background-image { position: relative; background-size: cover; background-repeat: no-repeat; background-position: center; width: 100%; } .background-image-fixed { background-attachment: fixed; } .background-image-overlay { background-color: #000; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 1; opacity: 0.6; } .entry-meta-wrapper { display: flex; flex-wrap: wrap; align-items: center; gap: 0.313rem; margin-bottom: 0.313rem; } .entry-meta-wrapper .entry-meta-separator { position: relative; width: 0.625rem; } .entry-meta-wrapper .entry-meta-separator:before { content: ""; position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); left: 0; width: 0.625rem; border-style: solid; border-width: 0 0 2px; border-color: var(--wpi--base-border-color); } .entry-meta { display: flex; font-family: var(--wpi--meta-font-family); font-size: var(--wpi--meta-font-size); font-weight: var(--wpi--meta-font-weight); flex-wrap: wrap; align-items: center; gap: 0.313rem; } .entry-meta .svg-icon { height: 0.875rem; width: 0.875rem; } .wpi-post-frontline { border-bottom: 0.063rem solid var(--wpi--base-border-color); margin-bottom: var(--wpi--verticle-spacing-medium); padding: var(--wpi--verticle-spacing-small); text-align: center; } .wpi-post-frontline .entry-header, .wpi-post-frontline .entry-details { max-width: 70rem; margin-left: auto; margin-right: auto; } .wpi-post-frontline .entry-image { margin: 0 0 1.875rem; } .wpi-post-frontline .entry-details { font-size: calc(var(--wpi--font-size-general) * 1.25); } .wpi-post-frontline .entry-meta-wrapper, .wpi-post-frontline .entry-meta { justify-content: center; } .wpi-tile-post .entry-image, .wpi-post-card .entry-image { background-color: #656565; } .wpi-tile-post { margin: 0; overflow: hidden; } .wpi-tile-post.has-post-thumbnail, .wpi-tile-post.has-post-thumbnail a:not(:hover, :focus) { color: #fff; } .wpi-tile-post .entry-image { margin: 0; position: relative; } .wpi-tile-post .entry-image a { background: linear-gradient(0deg, #0c0b11 8.71%, rgba(12, 11, 17, 0) 72.11%); display: block; } .wpi-tile-post .entry-image img { mix-blend-mode: overlay; } .wpi-tile-post.has-post-thumbnail .entry-details { position: absolute; bottom: 0; left: 0; z-index: 1; } .wpi-tile-post .entry-details { padding: 1.25rem; } .wpi-post-module-grid.has-post-thumbnail .entry-details { position: absolute; bottom: 0; left: 0; z-index: 1; padding: 1.25rem; } .entry-tags { gap: 0.188rem; } .entry-author .avatar { border: 0.125rem solid #afafaf; border-radius: 50%; display: inline-block; height: 2.5rem; overflow: hidden; width: 2.5rem; vertical-align: middle; margin-right: 0.5rem; } .entry-categories { font-weight: 700; text-transform: uppercase; font-size: 0.625rem; gap: 0.625rem; position: relative; margin: 0 0 0.313rem; } .entry-categories .has-text-color:nth-child(7n+2) { color: #ed6904; } .entry-categories .has-text-color:nth-child(7n+3) { color: #ff6f61; } .entry-categories .has-text-color:nth-child(7n+4) { color: #97d5df; } .entry-categories .has-text-color:nth-child(7n+5) { color: var(--wpi--secondary-bg-color); } .entry-categories .has-text-color:nth-child(7n+6) { color: #03b9e4; } .entry-categories .has-text-color:nth-child(7n+7) { color: #ffc107; } .entry-categories .has-background-color { color: var(--wpi--secondary-text-color); padding: 0.25rem 0.5rem; position: relative; transition: all 500ms; } .entry-categories .has-background-color:nth-child(7n+2) { background-color: #ed6904; } .entry-categories .has-background-color:nth-child(7n+3) { background-color: #ff0000; color: #fff; } .entry-categories .has-background-color:nth-child(7n+4) { background-color: #97d5df; } .entry-categories .has-background-color:nth-child(7n+5) { background-color: #1f8447; } .entry-categories .has-background-color:nth-child(7n+6) { background-color: #03b9e4; } .entry-categories .has-background-color:nth-child(7n+7) { background-color: #ffc107; } .entry-categories .has-background-color:hover, .entry-categories .has-background-color:focus { background: var(--wpi--primary-bg-color) !important; color: var(--wpi--primary-text-color); } .page-content, .entry-content, .entry-summary { margin: 0 0 1rem; } .page-links { clear: both; margin: 0 0 1rem; } .section-header .has-header-controls { display: flex; align-items: center; justify-content: space-between; } .section-header-controls { display: flex; align-items: center; gap: 0.313rem; } .section-header-controls .banner-slider-control { border: 0.063rem solid var(--wpi--base-border-color); width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; margin-top: -2.5rem; } .single-post .entry-read-time { margin-bottom: 0.313rem; } .single-post .primary-area .wpi-post-default .entry-header .entry-meta-wrapper { margin-top: 1.25rem; } .single-post .primary-area .wpi-post-default .entry-details h2:not(.entry-title) { font-size: var(--wpi--font-size-big); } .single-post .primary-area .wpi-post-default .entry-details h3:not(.entry-title) { font-size: var(--wpi--font-size-medium); } .single-post .primary-area .wpi-post-default .entry-details h4:not(.entry-title) { font-size: var(--wpi--font-size-small); } @media (min-width: 768px) { .single-post.no-sidebar .primary-area .wpi-post-default .entry-details { padding: 0 calc(30px + ((100% - 200px) / 12 * 2)); } } .sticky-article-link { background-color: var(--wpi--base-bg-color); color: var(--wpi--base-text-color); border: 0.125rem solid var(--wpi--base-border-color); overflow: hidden; display: block; width: 48px; height: 8.125rem; position: fixed; z-index: 99; top: 50%; transform: translateY(-50%); transition: width 375ms ease-in-out; } .sticky-article-link:hover, .sticky-article-link:focus { width: 448px; } .sticky-article-prev, .sticky-article-prev .sticky-article-icon { left: 0; right: auto; } .sticky-article-next, .sticky-article-next .sticky-article-icon { right: 0; left: auto; } .sticky-article-link .sticky-article-icon { display: flex; height: 100%; align-items: center; justify-content: center; width: 48px; position: absolute; z-index: 2; margin: 0; text-align: center; cursor: pointer; background-color: inherit; } .sticky-article-link .site-sticky-article { box-sizing: border-box; display: -ms-flexbox; display: -webkit-flex; display: flex; gap: 0.625rem; -ms-flex-align: center; -webkit-align-items: center; align-items: center; width: 400px; height: 8.125rem; position: absolute; top: 0; margin: 0; } .sticky-article-link .site-sticky-article .entry-image { width: 8.75rem; flex-shrink: 0; margin: 0; } .sticky-article-prev .site-sticky-article { left: auto; right: 0; padding-right: var(--wpi-gutter); } .sticky-article-next .site-sticky-article { -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; padding-left: var(--wpi-gutter); left: 0; right: auto; } @media only screen and (max-width: 575px) { .sticky-article-navigation { display: none; visibility: hidden; opacity: 0; } } .wpi-single-section { margin-bottom: var(--wpi--verticle-spacing-medium); } .wpi-single-section:not(.single-author-panel):after { background: none; box-sizing: border-box; content: " "; position: absolute; height: 0.25rem; width: 100%; bottom: 0; left: 0; } .wpi-single-section .section-header { padding-left: 2rem; } .wpi-single-section .section-header .section-title { font-size: var(--wpi--font-size-large); } .wpi-single-section .wpi-section-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(16.25rem, 1fr)); gap: 1.25rem; } .single-post .primary-area .wpi-single-section .wpi-section-content .wpi-post-default .entry-details { padding: 0; } .single-author-panel .single-author-wrapper { background: rgba(var(--wpi--rgb-color), 0.025); display: grid; grid-template-columns: calc(100% * 1 / 4) 1fr; width: 100%; position: relative; z-index: 1; } .single-author-wrapper .entry-image { display: flex; margin: 0; width: 100%; } .single-author-wrapper .entry-image > a { display: flex; align-self: stretch; width: 100%; } .single-author-wrapper .entry-details { padding: 1.25rem; } @media (max-width: 767px) { .single-author-panel .single-author-wrapper { display: block; } } .entry-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 0.625rem; } .post-more-link .svg-icon { display: inline-block; height: 0.75rem; vertical-align: middle; width: 0.75rem; } /* Comments --------------------------------------------- */ .comment-content a { word-wrap: break-word; } .bypostauthor { display: block; } /* Widgets --------------------------------------------- */ .widget { margin: 0 0 1.875rem; } .widget .wp-block-heading { display: inline-flex; font: 700 1.15rem / 1 var(--wpi--font-family-section-heading); text-transform: uppercase; padding-right: 2rem; position: relative; } .widget .wp-block-heading:before, .widget .wp-block-heading:after { content: ''; background-color: var(--wpi--primary-bg-color); position: absolute; height: 10px; width: 2px; } .widget .wp-block-heading:before { right: 3px; top: 2px; transform: skewX(-30deg); } .widget .wp-block-heading:after { right: 11px; top: 4px; transform: skewX(-30deg); } .widget select { max-width: 100%; } .wp-block-tag-cloud a, .tagcloud a { background-color: rgba(var(--wpi--rgb-color), 0.05); font-size: var(--wpi--font-size-general) !important; padding: 0.313rem 0.625rem; margin-bottom: 0.313rem; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; } .tagcloud a { display: inline-block; } .wp-block-tag-cloud a:hover, .wp-block-tag-cloud a:focus, .tagcloud a:hover, .tagcloud a:focus { background: var(--wpi--primary-bg-color); color: var(--wpi--primary-text-color); } .wp-block-calendar table, .wp-calendar-table { margin: 0; } .wp-block-calendar caption, .wp-block-calendar .wp-calendar-nav, .wp-calendar-table caption, .widget_calendar .wp-calendar-nav { line-height: 1; padding: 1rem; } .widget_recent_comments ul, .widget_categories ul, .widget_recent_entries ul, .widget_archive ul { margin: 0 0 1.25rem; } .widget_recent_comments ul li, .widget_categories ul li, .widget_recent_entries ul li, .widget_archive ul li { margin-bottom: 0.313rem; padding-bottom: 0.313rem; } .widget_block ul, .widget_block ol, .widget ul, .widget ol { list-style: none; margin: 0; padding: 0; } .widget_block ul li, .widget_block ol li, .widget_meta ul li { margin-bottom: 0.313rem; padding-bottom: 0.313rem; } .widget .wp-block-categories-list .cat-item, .widget .no-comments.wp-block-latest-comments, .widget .wp-block-latest-posts__list li, .widget .wp-block-latest-comments li, .widget .wp-block-archives-list li, .widget .wp-block-page-list li, .widget_meta ul li { padding: 0.625rem 0; margin: 0; } .widget .wp-block-tag-cloud, .widget .tagcloud, .widget .wp-block-categories-dropdown { margin: 0; } .widget .wp-block-categories-dropdown .postform { padding: 0.625rem 1rem; width: 100%; } .regular-widget-area .widget .wp-block-categories-dropdown .postform { border: 1px solid var(--wpi--base-border-color); } .widget_media_image > a { display: block; } .wp-calendar-table td, .wp-calendar-table th { border: 1px solid; } .regular-widget-area .wp-block-calendar table:where(:not(.has-text-color)) td, .regular-widget-area .wp-block-calendar table:where(:not(.has-text-color)) th, .wp-calendar-table td, .wp-calendar-table th { border-color: var(--wpi--base-border-color); } .regular-widget-area .wp-block-calendar table:where(:not(.has-text-color)) th:first-child, .regular-widget-area .wp-block-calendar table:where(:not(.has-text-color)) td:first-child { border-left: 0; } .regular-widget-area .wp-block-calendar table:where(:not(.has-text-color)) th:last-child, .regular-widget-area .wp-block-calendar table:where(:not(.has-text-color)) td:last-child { border-right: 0; } .wpi-post-regular { margin: 0; } .wpi-post { position: relative; } .wpi-post.post-has-padding { padding: 1.875rem 0; } .wpi-post.post-has-padding:not(:last-child) { border-bottom: 1px solid var(--wpi--base-border-color); } .entry-details-border { --wpi--base-border-color: #000; } .entry-details-border { border: 0.125rem solid var(--wpi--base-border-color); border-top: none; padding: 0 2.188rem 1.563rem; } .wpi-post-list { display: flex; flex-wrap: wrap; gap: 1.875rem; margin: 0; } .wpi-post-list-reverse { flex-direction: row-reverse; } .has-margin-bottom { margin-bottom: 1.25rem; } .wpi-post-list .entry-image { overflow: hidden; position: relative; width: calc(100% * 1 / 3); margin: 0; } .wpi-post-list .entry-counter { font-size: var(--wpi--font-size-medium); } .wpi-post-list .entry-counter span { border: 0.125rem solid var(--wpi--primary-bg-color); color: var(--wpi--primary-bg-color); display: flex; align-items: center; justify-content: center; height: 3.125rem; width: 3.125rem; } .wpi-post-list .entry-details { flex: 1; min-width: 1px; } .wpi-post-list .entry-title { margin: 0 0 0.313rem; } .wpi-post-prime { margin-bottom: 1.25rem; padding-bottom: 1.25rem; } .wpi-post-prime .entry-image { width: calc(100% * 1 / 2); padding-right: var(--wpi-gutter); } @media (max-width: 575px) { .wpi-post-prime .entry-image { width: 100%; padding-right: 0; } } .wpi-post-card { margin: 0; position: relative; } .wpi-post-card, .wpi-post-card a:not(:hover, :focus) { color: #fff; } .wpi-post-card .entry-image { margin: 0; padding-bottom: 100%; } .wpi-post-card .entry-image:before { background: linear-gradient(to bottom, rgba(50, 50, 50, 0) 0, rgba(16, 15, 15, 0.91) 89%, rgba(16, 15, 15, 0.93) 93%); width: 100%; height: 100%; content: ''; position: absolute; left: 50%; top: 50%; opacity: 0.5; transform: translate(-50%, -50%); z-index: 1; -webkit-transition: all 0.4s ease-in-out 0s; -moz-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } .wpi-post-card:hover .entry-image:before, .wpi-post-card:focus .entry-image:before { background-color: rgba(0, 0, 0, 0.5); } .wpi-post-card .entry-image .wp-post-image { height: 100%; width: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: scale(1) translate(-50%, -50%); } .wpi-post-card .entry-details { position: absolute; bottom: 0; left: 0; z-index: 1; width: 100%; padding: var(--wpi-gutter); } .wpi-slides-card { margin: 0; } .wpi-slides-card, .wpi-slides-card a:not(:hover, :focus) { color: #fff; } .wpi-slides-card .entry-image { margin-bottom: 0; } .wpi-slides-card .entry-details { padding: 2.5rem 1.25rem; position: absolute; left: 0; right: 0; width: 100%; z-index: 1; } .vertical-align-top .wpi-slides-card .entry-details { top: 0; } .vertical-align-middle .wpi-slides-card .entry-details { top: 50%; transform: translateY(-50%); } .vertical-align-bottom .wpi-slides-card .entry-details { bottom: 0; } .wpi-slider-widget .align-text-left .entry-meta { justify-content: left; } .wpi-slider-widget .align-text-center .entry-meta, .wpi-slider-widget .align-text-center .entry-meta-wrapper { justify-content: center; } .wpi-slider-widget .align-text-right .entry-meta { justify-content: right; } .wpi-carousel-widget .wpi-slides-card .entry-details { padding: 1.25rem; } .wpi-widget-list { padding-top: 0.5rem; } .wpi-widget-list .wpi-post-list { padding-bottom: 1.25rem; padding-top: 1.25rem; } .wpi-widget-list .wpi-post { border-top: 0.063rem solid var(--wpi--base-border-color); } .has-post-counter .wpi-post-counter { position: absolute; background: var(--wpi--base-bg-color); color: var(--wpi--primary-bg-color); border: 0.063rem solid var(--wpi--base-border-color); box-shadow: 0.188rem 0.188rem var(--wpi--base-border-color); font-size: 1.5rem; font-weight: 700; width: 2.5rem; height: 2.5rem; text-align: center; line-height: 2.5rem; top: -0.5rem; left: 0.625rem; z-index: 9; } .wpi-post-counter:before { content: ""; width: 0; height: 0; border-style: solid; border-width: 0.5rem 0 0 0.5rem; border-color: transparent transparent transparent var(--wpi--base-border-color); display: block; position: absolute; right: -0.563rem; top: -0.063rem; } .tabbed-widget-header { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.625rem, 1fr)); padding: 0 0 1.25rem; text-align: center; } .tabbed-widget-header .tabbed-header-item a { background: #000; color: var(--wpi--secondary-text-color); display: block; text-transform: uppercase; font-size: 0.625rem; font-weight: 700; margin: 0; padding: 1.25rem 0.313rem; position: relative; } .tabbed-widget-header .tabbed-header-item:first-child a { background-color: var(--wpi--secondary-bg-color); } .tabbed-widget-header .tabbed-header-item:last-child a { background-color: var(--wpi--primary-bg-color); } .tabbed-widget-header .tabbed-header-item.active a:after { content: ""; display: block; position: absolute; bottom: -9px; right: 50%; margin-right: -10px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #000; } .tabbed-widget-header .tabbed-header-item:first-child a:after { border-top-color: var(--wpi--secondary-bg-color); } .tabbed-widget-header .tabbed-header-item:last-child a:after { border-top-color: var(--wpi--primary-bg-color); } .tabbed-widget-content .tabbed-content-item { display: none; opacity: 0; visibility: hidden; } .tabbed-widget-content .tabbed-content-item.active { display: block; opacity: 1; visibility: visible; } .wpi-categories-widget { --wpi-gutter: 0.625rem; } .wpi-categories-widget .wpi-tile-post { margin-bottom: var(--wpi-gutter); padding-bottom: var(--wpi-gutter); } .site-youtube-widget { --site--youtube-widget-background: #000; --site--youtube-widget-color: #fff; --site--youtube-widget-background-hover: #333; --site--dark-youtube-widget-background: #111; display: flex; flex-direction: column; gap: 0.625rem; background-color: var(--site--youtube-widget-background); text-align: center } [data-theme=dark] .site-youtube-widget { background-color: var(--site--dark-youtube-widget-background) } .site-youtube-channel, .site-youtube-subscribe { display: block; text-align: center } .site-youtube-subscribe { background-color: #c00; font-weight: 700; padding: 1rem; text-transform: uppercase; font-size: var(--site--font-size-tiny) } .site-youtube-subscribe:hover, .site-youtube-subscribe:focus { background-color: var(--site--youtube-widget-background-hover) } .site-youtube-channel, .site-youtube-subscribe, .site-youtube-subscribe:hover, .site-youtube-subscribe:focus { color: var(--site--youtube-widget-color) !important } .fullwidth-widget-area .display-fullwidth-layout { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 1000%; width: auto } .fullwidth-widget-area .display-fullwidth-layout .wpi-post .entry-details { padding-left: var(--wpi-gutter); padding-right: var(--wpi-gutter); } .widget-has-background .widget-wrapper { width: 100%; position: relative; margin-right: auto; margin-left: auto; z-index: 1; } .widget-wrapper { margin-left: auto; margin-right: auto; width: 100%; } .fullwidth-widget-area .wpi-slides-card .widget-wrapper, .fullwidth-widget-area .display-fullwidth-layout .wpi-post-regular .widget-wrapper { padding: 1.875rem var(--wpi-gutter); } @media (min-width: 1400px) { .fullwidth-widget-area .display-fullwidth-layout .widget-wrapper { max-width: 87.5rem; } } @media (max-width: 1600px) and (min-width: 1400px) { .fullwidth-widget-area .display-fullwidth-layout .widget-wrapper { padding-left: 10%; padding-right: 10%; } } .trendingnews-image-widget { --image-widget-background: #000; --wpi--image-widget-rgb: 0, 0, 0; --image-widget-color: #fff; } .trendingnews-image-widget .wpi-button { --wpi--base-border-color: #fff; border: 0.063rem solid var(--wpi--base-border-color); } .wpi-image-widget { position: relative; overflow: hidden; display: block; width: 100%; } .wpi-image-widget, .wpi-image-widget a:not(:hover, :focus, .wpi-button) { color: var(--image-widget-color); } .wpi-image-widget.style_1 { height: 31.25rem; } .wpi-image-widget.style_2 { background-color: var(--image-widget-background); } .wpi-image-widget:before { content: ""; position: absolute; inset: var(--wpi--verticle-spacing-small); border: 0.063rem solid var(--wpi--base-border-color); z-index: 2; transition: all 0.25s ease; } .wpi-image-widget.style_1:before { background-color: rgba(var(--wpi--image-widget-rgb), 0.65); } .wpi-image-widget.style_1:hover:before, .wpi-image-widget.style_1:focus:before { background-color: rgba(var(--wpi--image-widget-rgb), 0.5); } .wpi-image-widget .image-widget-background img { width: 100%; object-fit: cover; object-position: center; } .wpi-image-widget.style_1 .image-widget-background img { height: 31.25rem; } .wpi-image-widget.style_2 .image-widget-background img { height: 18.75rem; } .wpi-image-widget .image-widget-description { display: flex; flex-direction: column; gap: 1rem; } .wpi-image-widget .image-widget-description .image-widget-title { margin: 0; } .wpi-image-widget.style_1 .image-widget-description { position: absolute; display: flex; flex-direction: column; justify-content: center; inset: var(--wpi--verticle-spacing-small); padding: 1.25rem; z-index: 3; line-height: 1.5; } .wpi-image-widget.style_2 .image-widget-description { position: relative; margin: var(--wpi--verticle-spacing-big); z-index: 2; } .wpi-image-widget.style_2 .image-widget-description:before { content: ""; position: absolute; top: -100px; left: -59px; right: -59px; background-color: var(--image-widget-background); height: 80px; transform: skewY(8deg); z-index: -1; } .wpi-metro-widget { display: grid; gap: 0.125rem; } .wpi-metro-widget .wpi-post-metro-1 { grid-area: item1; } .wpi-metro-widget .wpi-post-metro-2 { grid-area: item2; } .wpi-metro-widget .wpi-post-metro-3 { grid-area: item3; } .wpi-metro-widget .wpi-post-metro-4 { grid-area: item4; } .wpi-metro-widget .wpi-post-metro-5 { grid-area: item5; } .wpi-metro-widget .wpi-post-metro-6 { grid-area: item6; } .metro-layout-1 .wpi-metro-widget { grid-template-areas: "item1 item2 item4" "item1 item3 item5"; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; } .metro-layout-2 .wpi-metro-widget { grid-template-areas: "item1 item2 item3" "item1 item4 item4"; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; } .metro-layout-3 .wpi-metro-widget { grid-template-areas: "item1 item2 item3" "item4 item2 item5"; grid-template-columns: 1fr 2fr 1fr; grid-template-rows: 1fr 1fr; } .metro-layout-4 .wpi-metro-widget { grid-template-areas: "item1 item2 item5" "item3 item4 item5"; grid-template-columns: 1fr 1fr 2fr; grid-template-rows: 1fr 1fr; } .metro-layout-5 .wpi-metro-widget { grid-template-areas: "item1 item2 item3"; grid-template-columns: 45% 1fr 1fr; grid-template-rows: 1fr; } .metro-layout-style .wpi-tile-post .entry-image-medium img { height: 19.938rem; } @media screen and (max-width: 1199px) { .metro-layout-1 .wpi-metro-widget { grid-template-areas: "item1 item1" "item2 item3" "item4 item5"; grid-template-columns: 1fr 1fr; grid-template-rows: 2fr 1fr 1fr; } .metro-layout-2 .wpi-metro-widget { grid-template-areas: "item1 item1" "item2 item3" "item4 item4"; grid-template-columns: 1fr 1fr; grid-template-rows: 2fr 1fr 1fr; } .metro-layout-3 .wpi-metro-widget { grid-template-areas: "item1 item3" "item2 item2" "item4 item5"; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 2fr 1fr; } .metro-layout-4 .wpi-metro-widget { grid-template-areas: "item1 item2" "item3 item4" "item5 item5"; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 2fr; } .metro-layout-5 .wpi-metro-widget { grid-template-areas: "item1 item1" "item2 item3" "item2 item3"; grid-template-columns: 1fr 1fr; grid-template-rows: 2fr 1fr 1fr; } } .wpi-section .wpi-primary-widgetarea .metro-layout-style .entry-title-big, .wpi-section #primary .metro-layout-style .entry-title-big { font-size: var(--wpi--font-size-medium); } .wpi-section .wpi-primary-widgetarea .metro-layout-style .entry-title-medium, .wpi-section #primary .metro-layout-style .entry-title-medium { font-size: var(--wpi--font-size-small); } .regular-widget-area .metro-layout-style .entry-title { font-size: var(--wpi--font-size-small); } .regular-widget-area .wpi-metro-widget { display: flex; flex-direction: column; margin-bottom: 1.25rem; } .regular-widget-area .wpi-metro-widget .entry-image img { height: 21.875rem; } .regular-widget-area .wpi-metro-widget .entry-title-big { font-size: var(--wpi--font-size-small); } @media screen and (max-width: 640px) { .wpi-metro-widget { display: flex; flex-direction: column; } } .wpi-author-widget { position: relative; text-align: center; transition: all .2s ease; } .wpi-author-widget .author-widget-image { display: flex; align-items: center; justify-content: center } .wpi-author-widget .author-widget-name { background: var(--wpi--primary-bg-color); color: var(--wpi--primary-text-color); position: relative; margin: -35px 30px 20px; padding: 10px; font-size: 18px; line-height: 1.2em } .wpi-author-widget .author-widget-name:after { content: ""; display: block; position: absolute; bottom: -9px; right: 50%; margin-right: -10px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid var(--wpi--primary-bg-color) } .wpi-author-widget.has-border-radius .author-widget-image { width: 13.75rem; height: 13.75rem; margin: 1.25rem auto 1.875rem; } .wpi-author-widget.has-border-radius img { border-radius: 100%; width: 12.5rem; height: 12.5rem; object-fit: cover } .wpi-author-widget .author-social { margin-bottom: 1rem; } .wpi-author-widget .author-social .social-icons { justify-content: center } .wpi-author-widget .author-desc { color: rgba(var(--wpi--rgb-color), 0.4); } .wpi-author-widget .author-position, .wpi-author-widget .author-social, .wpi-author-widget .author-desc { padding-right: var(--wpi-gutter); padding-left: var(--wpi-gutter); } .wpi-social-widget .widget-social-icons { gap: 0.625rem; } .wpi-social-widget .widget-social-icons.has-label-enabled { display: grid; } .wpi-social-widget .has-label-enabled.is-column-one { grid-template-columns: 1fr; } .wpi-social-widget .has-label-enabled.is-column-two { grid-template-columns: repeat(2, minmax(5.625rem, 1fr)); } .wpi-social-widget .has-label-enabled.is-column-three { grid-template-columns: repeat(3, minmax(5.625rem, 1fr)); } .wpi-social-widget .widget-social-icons li { margin: 0; padding: 0; transition: transform 150ms ease-in-out; } .wpi-social-widget .has-label-enabled .social-widget-label { letter-spacing: 0.125rem; padding-bottom: 0.625rem; padding-top: 0.625rem; text-transform: uppercase; font-size: 0.75rem } .wpi-social-widget .widget-social-icons li a { justify-content: flex-start; gap: 0.313rem; width: auto; height: auto; padding: 0.625rem; text-decoration: none; } .wpi-social-widget .widget-social-icons.style_2 li a { flex-direction: row-reverse; gap: 0.313rem; } .wpi-social-widget.is-aligned-left .widget-social-icons.style_2 li a { justify-content: flex-end; } .wpi-social-widget.is-aligned-right .widget-social-icons.style_2 li a { flex-direction: row; } .wpi-social-widget .widget-social-icons.style_3 li a { flex-direction: column-reverse; gap: 0.313rem; } .wpi-social-widget .widget-social-icons.style_4 li a { border-radius: 0.313rem; } .wpi-social-widget.is-aligned-left li a { justify-content: flex-start; } .wpi-social-widget.is-aligned-center li a { justify-content: center; } .wpi-social-widget.is-aligned-right li a { justify-content: flex-end; } @media (min-width: 992px) { .fullwidth-widget-area .multi-grid-content.style_1 { display: grid; grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr)); gap: 1.25rem; justify-content: center; overflow: hidden; } .fullwidth-widget-area .multi-grid-content.style_1 .widget-content-prime { margin-bottom: 0; padding-bottom: 0; } } .site .multi-grid-content .entry-image-thumbnail img { min-height: 10rem; } .multi-grid-content .wpi-post .entry-details { padding: 0 1.25rem; } .multi-grid-content .widget-content-prime .wpi-post .entry-details { padding: 0; } .multi-grid-content .widget-content-prime { margin-bottom: var(--wpi--verticle-spacing-small); padding-bottom: var(--wpi--verticle-spacing-small); } .multi-grid-content .widget-content-regular .wpi-post { display: flex; flex-wrap: wrap; margin: 0 0 1.25rem; } .multi-grid-content .widget-content-regular .wpi-post:not(:last-child) { border-bottom: 0.063rem solid var(--wpi--base-border-color); margin-bottom: 1.25rem; padding-bottom: 1.25rem; } .multi-grid-content .widget-content-regular .wpi-post .entry-image { overflow: hidden; position: relative; width: calc(100% * 1 / 4); margin: 0; min-width: 7.5rem; } .multi-grid-content .widget-content-regular .wpi-post .entry-details { flex: 1; min-width: 1px; } .wpi-jumbo-widget { display: flex; flex-direction: column; flex-wrap: wrap; } .jumbo-layout-1 .wpi-jumbo-widget .jumbo-upper-area { border-bottom: 0.063rem solid var(--wpi--base-border-color); display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.25rem; justify-content: center; overflow: hidden; margin-bottom: 0.625rem; padding-bottom: 0.625rem; } .wpi-section .wpi-primary-widgetarea .jumbo-layout-1 .wpi-jumbo-widget .jumbo-upper-area, .wpi-section #primary .jumbo-layout-1 .wpi-jumbo-widget .jumbo-upper-area { grid-template-columns: repeat(auto-fit, minmax(9.375rem, 1fr)); } .jumbo-layout-1 .wpi-jumbo-widget .jumbo-lower-area .wpi-post-list:not(:last-child) { border-bottom: 0.063rem solid var(--wpi--base-border-color); margin-bottom: 1.25rem; padding-bottom: 1.25rem; } @media (min-width: 1200px) { .fullwidth-widget-area .jumbo-layout-1 .wpi-jumbo-widget { flex-direction: row; margin-right: calc(-1 * var(--wpi-gutter)); margin-left: calc(-1 * var(--wpi-gutter)); } .fullwidth-widget-area .jumbo-layout-1 .wpi-jumbo-widget .jumbo-widget-left, .fullwidth-widget-area .jumbo-layout-1 .wpi-jumbo-widget .jumbo-widget-right { flex: 0 0 auto; width: 50%; padding-right: var(--wpi-gutter); padding-left: var(--wpi-gutter); } } .wpi-section .jumbo-layout-2 .wpi-jumbo-widget { display: grid; grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr)); gap: 1.875rem; justify-content: center; overflow: hidden; } .wpi-section .jumbo-layout-3 .wpi-jumbo-widget .jumbo-upper-area, .wpi-section .jumbo-layout-3 .wpi-jumbo-widget .jumbo-lower-area { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.875rem; justify-content: center; overflow: hidden; } .wpi-section .jumbo-layout-3 .wpi-jumbo-widget .jumbo-upper-area { border-bottom: 0.063rem solid var(--wpi--base-border-color); margin-bottom: 1.875rem; } .wpi-section .jumbo-layout-3 .wpi-jumbo-widget .jumbo-lower-area { --gap: 1.875rem; --line-offset: calc(var(--gap) / 2); --line-thickness: 0.063rem; --line-color: var(--wpi--base-border-color); } .jumbo-lower-area .wpi-post-jumbo { position: relative; } .jumbo-lower-area .wpi-post-jumbo::before, .jumbo-lower-area .wpi-post-jumbo::after { content: ''; position: absolute; background-color: var(--line-color); z-index: 1; } .jumbo-lower-area .wpi-post-jumbo::after { inline-size: 100vw; block-size: var(--line-thickness); inset-inline-start: 0; inset-block-start: calc(var(--line-offset) * -1); } .jumbo-lower-area .wpi-post-jumbo::before { inline-size: var(--line-thickness); block-size: 100vh; inset-block-start: 0; inset-inline-start: calc(var(--line-offset) * -1); } .wpi-section .wpi-primary-widgetarea .jumbo-layout-3 .wpi-jumbo-widget .jumbo-lower-area, .wpi-section #primary .jumbo-layout-3 .wpi-jumbo-widget .jumbo-lower-area { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); } @media (max-width: 1199px) { .wpi-section .jumbo-layout-3 .wpi-jumbo-widget .jumbo-lower-area { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); } } @media (max-width: 991px) { .wpi-section .jumbo-layout-3 .wpi-jumbo-widget .jumbo-upper-area { grid-template-columns: 1fr 1fr; grid-template-rows: auto; } .wpi-section .jumbo-layout-3 .wpi-jumbo-widget .jumbo-upper-area .wpi-post-jumbo:first-child { grid-column: span 2; } .wpi-section .jumbo-layout-3 .wpi-jumbo-widget .jumbo-upper-area .wpi-post-jumbo:first-child .entry-image-big img { height: 25rem; } .wpi-section .jumbo-layout-3 .wpi-jumbo-widget .jumbo-upper-area .wpi-post-jumbo:nth-child(2) { grid-column: 1; } .wpi-section .jumbo-layout-3 .wpi-jumbo-widget .jumbo-upper-area .wpi-post-jumbo:last-child { grid-column: 2; } } /* Media --------------------------------------------- */ .page-content .wp-smiley, .entry-content .wp-smiley, .comment-content .wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } /* Captions --------------------------------------------- */ .wp-caption { margin-bottom: 1.5em; max-width: 100%; } .wp-caption img[class*="wp-image-"] { display: block; margin-left: auto; margin-right: auto; } .wp-caption .wp-caption-text { margin: 0.8075em 0; } .wp-caption-text { text-align: center; } /* Galleries --------------------------------------------- */ .gallery { display: grid; grid-gap: 0.313rem; padding: 0.313rem; } .gallery-item { display: inline-block; margin: 0; text-align: center; width: 100%; } .gallery-columns-2 { grid-template-columns: repeat(2, 1fr); } .gallery-columns-3 { grid-template-columns: repeat(3, 1fr); } .gallery-columns-4 { grid-template-columns: repeat(4, 1fr); } .gallery-columns-5 { grid-template-columns: repeat(5, 1fr); } .gallery-columns-6 { grid-template-columns: repeat(6, 1fr); } .gallery-columns-7 { grid-template-columns: repeat(7, 1fr); } .gallery-columns-8 { grid-template-columns: repeat(8, 1fr); } .gallery-columns-9 { grid-template-columns: repeat(9, 1fr); } .gallery-caption { display: block; } /*-------------------------------------------------------------- # Plugins --------------------------------------------------------------*/ /* Jetpack infinite scroll --------------------------------------------- */ /* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */ .infinite-scroll .posts-navigation, .infinite-scroll.neverending .site-footer { display: none; } /* Re-display the Theme Footer when Infinite Scroll has reached its end. */ .infinity-end.neverending .site-footer { display: block; } /*-------------------------------------------------------------- # Utilities --------------------------------------------------------------*/ /* Accessibility --------------------------------------------- */ /* Text meant only for screen readers. */ .screen-reader-text:focus { font-size: 1.125rem; border-radius: 0.188rem; } /* Do not show the outline on the skip link target. */ #primary[tabindex="-1"]:focus { outline: 0; } /* Alignments --------------------------------------------- */ .alignleft { /*rtl:ignore*/ float: left; /*rtl:ignore*/ margin-right: 1.5em; margin-bottom: 1.5em; } .alignright { /*rtl:ignore*/ float: right; /*rtl:ignore*/ margin-left: 1.5em; margin-bottom: 1.5em; } .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; margin-bottom: 1.5em; } /* Plugin Support --------------------------------------------- */ .elementor-html .wpi-preloader { display: none; } .site-footer { --wpi--base-bg-color: #151515; --wpi--base-text-color: #777; --wpi--link-color: #fff; --wpi--link-hover-color: #0267ff; --wpi--base-border-color: #2d2d2d; } .site-footer { background: var(--wpi--base-bg-color); color: var(--wpi--base-text-color); } .site-footer .site-footer-area { padding-bottom: var(--wpi--verticle-spacing-medium); padding-top: var(--wpi--verticle-spacing-small); } .site-footer .footer-widget-area { border-bottom: 0.063rem solid var(--wpi--base-border-color); padding-top: var(--wpi--verticle-spacing-big); } .site-footer .site-footer-area.site-footer-navigation { border-bottom: 0.063rem solid var(--wpi--base-border-color); padding-bottom: 0; padding-top: 0; } .site-footer .site-info-panel { padding-top: var(--wpi--verticle-spacing-small); display: flex; flex-wrap: wrap; gap: var(--wpi-gutter); } @media (min-width: 992px) { .site-info-panel .copyright-info { flex: 1; overflow: hidden; } } .site-footer-navigation .wp-block-heading { margin-top: 3rem; } .footer-navigation { padding: var(--wpi--verticle-spacing-medium) 0; } .footer-navigation .footer-menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.75rem, 1fr)); gap: 1.5rem; } .footer-navigation .footer-menu li { position: relative; } .footer-navigation .footer-menu li:before { content: ""; display: inline-block; margin-right: 1.5rem; width: 4px; height: 4px; vertical-align: middle; margin-top: -2px; background-color: var(--wpi--primary-bg-color); border-radius: 4px; } #scrollToTopBtn { position: fixed; bottom: 20px; right: 20px; width: 50px; height: 50px; min-height: inherit; background-color: var(--wpi--base-bg-color); color: var(--wpi--base-text-color); border: none; box-shadow: none; border-radius: 50%; display: none; align-items: center; justify-content: center; cursor: pointer; outline: none; padding: 0; z-index: 1000; transition: background-color 0.3s; } .footer-social-navigation { height: 100%; padding: var(--wpi--verticle-spacing-medium) 0; } .footer-social-navigation .social-menu.social-icons { display: grid; grid-template-columns: repeat(auto-fit, minmax(3.75rem, 1fr)); gap: 1.5rem; width: 100%; } .footer-social-navigation .social-icons.none a { border: 0.063rem solid var(--wpi--base-border-color); border-radius: 0.25rem; height: 3rem; width: 3rem; } .footer-social-navigation .social-icons.none .svg-icon { color: var(--wpi--base-text-color); height: 1.5rem; width: 1.5rem; } @media (min-width: 768px) { .footer-social-navigation { border-left: 0.063rem solid var(--wpi--base-border-color); border-right: 0.063rem solid var(--wpi--base-border-color); padding: var(--wpi--verticle-spacing-medium); } } #scrollToTopBtn:hover { background-color: #000; color: #fff; } #scrollToTopBtn #progressCircle { position: absolute; top: 0; left: 0; transform: rotate(-90deg); } #scrollToTopBtn circle { stroke: var(--wpi--primary-bg-color); stroke-dasharray: 138; stroke-dashoffset: 138; transition: stroke-dashoffset 0.3s; } #progressBarContainer { position: fixed; bottom: 0; left: 0; right: 0; width: 100%; height: 5px; background-color: #f3f3f3; } #progressBar { width: 0; height: 100%; background-color: var(--wpi--secondary-bg-color); } .social-icons.has-brand-color a { background: transparent; } .social-icons.has-brand-background a[href*="amazon"] { background: #f90; } .social-icons.has-brand-color a[href*="amazon"] { color: #f90; } .social-icons.has-brand-background a[href*="bandcamp"] { background: #1ea0c3; } .social-icons.has-brand-color a[href*="bandcamp"] { color: #1ea0c3; } .social-icons.has-brand-background a[href*="behance"] { background: #0757fe; } .social-icons.has-brand-color a[href*="behance"] { color: #0757fe; } .social-icons.has-brand-background a[href*="codepen"] { background: #1e1f26; } .social-icons.has-brand-color a[href*="codepen"] { color: #1e1f26; } .social-icons.has-brand-background a[href*="deviantart"] { background: #02e49b; } .social-icons.has-brand-color a[href*="deviantart"] { color: #02e49b; } .social-icons.has-brand-background a[href*="dribbble"] { background: #e94c89; } .social-icons.has-brand-color a[href*="dribbble"] { color: #e94c89; } .social-icons.has-brand-background a[href*="dropbox"] { background: #4280ff; } .social-icons.has-brand-color a[href*="dropbox"] { color: #4280ff; } .social-icons.has-brand-background a[href*="etsy"] { background: #f45800; } .social-icons.has-brand-color a[href*="etsy"] { color: #f45800; } .social-icons.has-brand-background a[href*="facebook"] { background: #1778f2; } .social-icons.has-brand-color a[href*="facebook"] { color: #1778f2; } .social-icons.has-brand-background a[href*="500"] { background: #000; } .social-icons.has-brand-color a[href*="500"] { color: #000; } .social-icons.has-brand-background a[href*="flickr"] { background: #0461dd; } .social-icons.has-brand-color a[href*="flickr"] { color: #0461dd; } .social-icons.has-brand-background a[href*="foursquare"] { background: #e65678; } .social-icons.has-brand-color a[href*="foursquare"] { color: #e65678; } .social-icons.has-brand-background a[href*="github"] { background: #24292d; } .social-icons.has-brand-color a[href*="github"] { color: #24292d; } .social-icons.has-brand-background a[href*="goodreads"] { background: #382110; } .social-icons.has-brand-color a[href*="goodreads"] { color: #382110; } .social-icons.has-brand-background a[href*="google"] { background: #ea4434; } .social-icons.has-brand-color a[href*="google"] { color: #ea4434; } .social-icons.has-brand-background a[href*="instagram"] { background: radial-gradient(circle at 33% 100%, #fed373 4%, #f15245 30%, #d92e7f 62%, #9b36b7 85%, #515ecf); border: 0; } .social-icons.has-brand-color a[href*="instagram"] { color: #9b36b7; } .social-icons.has-brand-background a[href*="lastfm"] { background: #e21b24; } .social-icons.has-brand-color a[href*="lastfm"] { color: #e21b24; } .social-icons.has-brand-background a[href*="linkedin"] { background: #0d66c2; } .social-icons.has-brand-color a[href*="linkedin"] { color: #0d66c2; } .social-icons.has-brand-background a[href*="mastodon"] { background: #3288d4; } .social-icons.has-brand-color a[href*="mastodon"] { color: #3288d4; } .social-icons.has-brand-background a[href*="medium"] { background: #02ab6c; } .social-icons.has-brand-color a[href*="medium"] { color: #02ab6c; } .social-icons.has-brand-background a[href*="meetup"] { background: #f6405f; } .social-icons.has-brand-color a[href*="meetup"] { color: #f6405f; } .social-icons.has-brand-background a[href*="patreon"] { background: #ff424d; } .social-icons.has-brand-color a[href*="patreon"] { color: #ff424d; } .social-icons.has-brand-background a[href*="pinterest"] { background: #e60122; } .social-icons.has-brand-color a[href*="pinterest"] { color: #e60122; } .social-icons.has-brand-background a[href*="pocket"] { background: #ef4155; } .social-icons.has-brand-color a[href*="pocket"] { color: #ef4155; } .social-icons.has-brand-background a[href*="reddit"] { background: #fe4500; } .social-icons.has-brand-color a[href*="reddit"] { color: #fe4500; } .social-icons.has-brand-background a[href*="skype"] { background: #0478d7; } .social-icons.has-brand-color a[href*="skype"] { color: #0478d7; } .social-icons.has-brand-background a[href*="snapchat"] { background-color: #fefc00; stroke: #000; } .social-icons.has-brand-color a[href*="snapchat"] { stroke: #000; } .social-icons.has-brand-background a[href*="soundcloud"] { background: #ff5600; } .social-icons.has-brand-color a[href*="soundcloud"] { color: #ff5600; } .social-icons.has-brand-background a[href*="spotify"] { background: #1bd760; } .social-icons.has-brand-color a[href*="spotify"] { color: #1bd760; } .social-icons.has-brand-background a[href*="telegram"] { background: #2aabee; } .social-icons.has-brand-color a[href*="telegram"] { color: #2aabee; } .social-icons.has-brand-background a[href*="threads"] { background: #000000; } .social-icons.has-brand-color a[href*="threads"] { color: #000000; } .social-icons.has-brand-background a[href*="tiktok"] { background: #000; } .social-icons.has-brand-color a[href*="tiktok"] { color: #000; } .social-icons.has-brand-background a[href*="tumblr"] { background: #011835; } .social-icons.has-brand-color a[href*="tumblr"] { color: #011835; } .social-icons.has-brand-background a[href*="twitch"] { background: #6440a4; } .social-icons.has-brand-color a[href*="twitch"] { color: #6440a4; } .social-icons.has-brand-background a[href*="twitter"], .social-icons.has-brand-background a[href*="x"] { background: #000; color: #fff } .social-icons.has-brand-color a[href*="twitter"], .social-icons.has-brand-color a[href*="x"] { color: #000; } .social-icons.has-brand-background a[href*="vimeo"] { background: #1eb7ea; } .social-icons.has-brand-color a[href*="vimeo"] { color: #1eb7ea; } .social-icons.has-brand-background a[href*="vk"] { background: #4680c2; } .social-icons.has-brand-color a[href*="vk"] { color: #4680c2; } .social-icons.has-brand-background a[href*="wordpress"] { background: #3499cd; } .social-icons.has-brand-color a[href*="wordpress"] { color: #3499cd; } .social-icons.has-brand-background a[href*="wa.me"], .social-icons.has-brand-background a[href*="whatsapp"] { background: #075e54; } .social-icons.has-brand-color a[href*="wa.me"], .social-icons.has-brand-color a[href*="whatsapp"] { color: #075e54; } .social-icons.has-brand-background a[href*="yelp"] { background: #d32422; } .social-icons.has-brand-color a[href*="yelp"] { color: #d32422; } .social-icons.has-brand-background a[href*="youtube"] { background: #ff0000; } .social-icons.has-brand-color a[href*="youtube"] { color: #ff0000; } .swiper-button-prev, .swiper-button-next { background: var(--wpi--secondary-bg-color); color: var(--wpi--secondary-text-color); border-radius: 100%; width: 2.5rem; height: 2.5rem; } .swiper-button-prev, .swiper-button-next { position: absolute; top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; } .swiper-button-prev { transform: translateX(-20px) translateY(-50%); } .swiper-button-next { transform: translateX(20px) translateY(-50%); } .swiper:hover .swiper-button-prev { opacity: 1; transform: translateX(0) translateY(-50%); } .swiper:hover .swiper-button-next { opacity: 1; transform: translateX(0) translateY(-50%); } .swiper-button-prev:hover, .swiper-button-prev:focus, .swiper-button-next:focus, .swiper-button-next:focus { background: var(--wpi--link-color); } .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction { position: relative; margin: 3rem auto 0; } .trendingnews-slider-widget .swiper-pagination { position: relative; margin-top: 1.25rem; margin-bottom: 1.25rem; } .trendingnews-nav-pagination { margin-bottom: 1.25rem; padding-bottom: 1.25rem; margin-top: 1.25rem; padding-top: 1.25rem; } .trendingnews-advanced-pagination { position: relative; } .trendingnews-advanced-pagination .trendingnews-ajax-load-button { padding: 0.625rem 1.25rem; display: block; position: absolute; top: 60%; left: 50%; transform: translate(-50%, -50%); border-radius: 0; min-width: 180px; text-align: center; } #notfound { position: relative; display: flex; flex-direction: column; margin: 6.25rem auto; } #notfound .notfound-404 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: -1; } #notfound .notfound-404 h1 { font-size: 17.5rem; font-weight: 900; color: #e3e3e3; letter-spacing: 7px; line-height: 1; margin: 0; } #notfound h2 { font-weight: 400; margin-top: 12px; margin-bottom: 15px; } #notfound .search-form { display: flex; align-items: center; gap: 0.625rem; } #notfound .notfound-link { display: flex; align-items: center; gap: 0.625rem; font-weight: 700; text-decoration: none; } #notfound .notfound-link .svg-icon { position: relative; display: inline-block; padding: 3px; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } @media only screen and (max-width: 1024px) { #notfound .notfound-404 { position: relative; width: 100%; } #notfound .notfound-404 h1 { font-size: 11.25rem; text-align: center; } } .woocommerce .woocommerce-result-count { margin: 1.25rem 0; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { min-width: 3.75rem; min-height: 2.5rem; font-size: 1rem; line-height: 2.5rem; } .trendingnews_youtube_video .widget-title { text-align: center; } .archive-header { max-width: 43.75rem; } .archive-header .archive-description { font-size: var(--wpi--font-size-small); } .wpi-archive-header { border-bottom: 1px solid var(--wpi--base-border-color); margin-bottom: var(--wpi--verticle-spacing-medium); position: relative; } .archive-header-wrapper { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; gap: var(--wpi-gutter); align-items: start; } @media (min-width: 768px) { .archive-header-wrapper { grid-template-columns: 1fr 1fr; } .archive-header-wrapper .wpi-post:first-child { grid-column: 1 / 3; grid-row: 1; } .archive-header-wrapper .wpi-post:nth-child(2) { grid-column: 1; grid-row: 2; } .archive-header-wrapper .wpi-post:nth-child(3) { grid-column: 2; grid-row: 2; } .archive-header-wrapper .wpi-post:nth-child(4), .archive-header-wrapper .wpi-post:nth-child(5) { grid-column: 1 / 3; } .archive-header-wrapper .wpi-post:nth-child(4) { grid-row: 3; } .archive-header-wrapper .wpi-post:nth-child(5) { grid-row: 4; } } @media (min-width: 992px) and (max-width: 1199px) { .archive-header-wrapper:before, .archive-header-wrapper:after { background: var(--wpi--base-border-color); content: ""; display: block; } .archive-header-wrapper:before { grid-column: 2; grid-row: 1 / 3; width: 1px; height: 100%; } .archive-header-wrapper:after { grid-column: 1 / 4; grid-row: 3; width: 100%; height: 1px; } } @media (min-width: 992px) { .archive-header-wrapper { grid-template-columns: 1fr 1px 1fr; grid-template-rows: auto auto auto; } .archive-header-wrapper .wpi-post:first-child { grid-column: 1; grid-row: 1 / 3; padding-bottom: 0; border-bottom: none; } .archive-header-wrapper .wpi-post:nth-child(2) { grid-column: 3; grid-row: 1; } .archive-header-wrapper .wpi-post:nth-child(3) { grid-column: 3; grid-row: 2; } .archive-header-wrapper .wpi-post:nth-child(4), .archive-header-wrapper .wpi-post:nth-child(5) { grid-row: 4; } .archive-header-wrapper .wpi-post:nth-child(4) { grid-column: 1; } .archive-header-wrapper .wpi-post:nth-child(5) { grid-column: 2 / 4; } } @media (min-width: 1200px) { .archive-header-wrapper { grid-template-columns: calc((100% - 300px - 32px - 48px) / 3 * 2 + 24px + 0.938rem) 1fr 1fr; grid-template-rows: 1fr auto auto; row-gap: var(--wpi-gutter); } .archive-header-wrapper .wpi-post:first-child { grid-column: 1; grid-row: 1 / 4; align-self: stretch; padding-right: var(--wpi-gutter); position: relative; } .archive-header-wrapper .wpi-post:first-child:after { content: ""; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background: var(--wpi--base-border-color); } .archive-header-wrapper .wpi-post:nth-child(2) { grid-column: 2; grid-row: 1; } .archive-header-wrapper .wpi-post:nth-child(3) { grid-column: 3; grid-row: 1; } .archive-header-wrapper .wpi-post:nth-child(4), .archive-header-wrapper .wpi-post:nth-child(5) { grid-column: 2 / 4; padding-top: var(--wpi-gutter); border-top: 1px solid var(--wpi--base-border-color); } .archive-header-wrapper .wpi-post:nth-child(4) { grid-row: 2; } .archive-header-wrapper .wpi-post:nth-child(5) { grid-row: 3; } } @media (min-width: 1448px) { .archive-header-wrapper { grid-template-columns: calc(688px + 0.938rem) 1fr 1fr; } } @media (max-width: 991px) { .archive-header-wrapper .wpi-post:not(.wpi-tile-post, :last-child) { border-bottom: 1px solid var(--wpi--base-border-color); padding-bottom: 1.25rem; } } .single .entry-content .alignwide { margin-left: calc(-1.5 * (30px + ((100% - 200px) / 12 * 2))); margin-right: calc(-1.5 * (30px + ((100% - 200px) / 12 * 2))); } .single .entry-content .alignwide img, .single .entry-content .alignfull img { width: 100%; min-width: 100%; border-radius: 0; } .single.no-sidebar .entry-content .alignwide embed, .single.no-sidebar .entry-content .alignwide iframe, .single.no-sidebar .entry-content .alignwide object { width: 100%; min-height: 700px; } .single.no-sidebar .entry-content .alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 1000%; width: auto; } .single.no-sidebar .entry-content .alignfull embed, .single.no-sidebar .entry-content .alignfull iframe, .single.no-sidebar .entry-content .alignfull object { width: 100%; min-height: 700px; } /* common styling */ .adjust-pagination { padding-bottom: 2rem; } .adjust-pagination .swiper-pagination { bottom: 0; } .wpi-content-overlay.has-post-thumbnail { --wpi--base-text-color: #fff; --wpi--link-color: #fff; } .wpi-content-overlay { background-color: var(--wpi--primary-bg-color); position: relative; } .wpi-content-overlay .entry-image { position: relative; margin: 0; } .wpi-content-overlay .entry-image:before { position: absolute; content: ""; inset: 0; width: 100%; height: 100%; background: linear-gradient(to top, #28292a, rgb(255 255 255 / 0%)); z-index: 5; } .wpi-content-overlay.has-post-thumbnail .entry-details { color: var(--wpi--base-text-color); position: absolute; left: 0; right: 0; bottom: 0; z-index: 10; } .wpi-content-overlay .entry-details { padding: 2rem 4rem 4rem 2rem; } .article-has-border:not(:last-child), .article-grid-right article:not(:last-child, :nth-last-of-type(2)) { border-bottom: 0.063rem solid var(--wpi--base-border-color); margin-bottom: calc(2 * var(--wpi-gutter)); padding-bottom: calc(2 * var(--wpi-gutter)); } .section-header { margin-bottom: var(--wpi-gutter); padding-bottom: var(--wpi-gutter); position: relative; z-index: 1; } .section-header .section-title { font-family: var(--wpi--font-family-section-heading); font-optical-sizing: auto; font-weight: 800; line-height: 1; text-transform: uppercase; margin: 0; } @media (min-width: 768px) { .section-header .section-title { font-size: calc(var(--wpi--font-size-large) * 1.25); } } .section-header .section-title .title-first-word { color: var(--wpi--primary-bg-color); } .section-header-center { text-align: center; } .default-section-header:before { background-color: var(--wpi--link-color); content: ''; display: block; height: 2px; left: 0; top: 50%; transform: translateY(-50%); position: absolute; width: 100%; z-index: -1; } .default-section-header .section-title { background-color: var(--wpi--base-bg-color); display: inline-block; padding-left: 1rem; padding-right: 2rem; position: relative; } .header-has-style { --wpi-gutter: 0.938rem; } .header-has-style .section-title { color: var(--wpi--link-color); line-height: 1; text-transform: uppercase; position: relative; padding: 0 1.25rem; } .header-has-style .section-title::before { position: absolute; content: ""; left: 0; top: 50%; transform: translateY(-50%); width: 0.188rem; height: 100%; background-color: var(--wpi--primary-bg-color); } .wpi-article-grid { --wpi--base-bg-color: #ffffff; } .wpi-article-grid { background-color: var(--wpi--base-bg-color); } @media (max-width: 1199px) { :where(.article-grid-slider, .article-grid-middle) { margin-bottom: 2rem; } } .article-grid-slider .entry-meta-wrapper { margin-bottom: 0.625rem; } .article-grid-slider .entry-summary, .article-grid-middle .entry-meta-wrapper { margin: 0; } .article-grid-middle { --wpi--base-bg-color: #fae9da; } .article-grid-right { display: flex; justify-content: space-between; flex-wrap: wrap; } .article-grid-right article:where(:first-child, :nth-child(2)) { display: flex; justify-content: space-between; gap: 1.875rem; flex-wrap: wrap; width: 100%; } @media (min-width: 576px) { .article-grid-right article:nth-child(2) ~ article { width: calc(50% - 0.938rem); } } .article-grid-right article:where(:first-child, :nth-child(2)) .entry-image { width: 12.5rem; margin: 0; } @media (max-width: 575px) { .article-grid-right article:where(:first-child, :nth-child(2)) .entry-image { width: 100%; } } .article-grid-right article:where(:first-child, :nth-child(2)) .entry-details { flex: 1; } .article-grid-right article:where(:first-child, :nth-child(2)) .entry-summary { margin: 0 !important; } .article-grid-right article:nth-child(2) { flex-direction: row-reverse; } @media (max-width: 575px) { .article-grid-right article:nth-last-of-type(2) { margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--wpi--base-border-color); width: 100%; } .article-grid-right article:nth-last-of-type(2) .entry-meta-wrapper { margin: 0; } } @media (max-width: 1199px) { .split-block-left article { border-bottom: 1px solid var(--wpi--base-border-color); margin-bottom: var(--wpi-gutter); padding-bottom: var(--wpi-gutter); } } .split-block-bottom .wpi-post:first-child .image-hover-effect { overflow: visible; } .split-block-bottom .wpi-post:first-child .entry-image { margin-bottom: var(--wpi-gutter); } .spotlight-border-style { border-color: var(--wpi--primary-bg-color); border-style: solid; border-width: 0; height: 66px; position: absolute; width: 61px; } .border-style-top { border-top-width: 2px; border-right-width: 2px; top: -15px; right: -15px; } .border-style-bottom { border-left-width: 2px; border-bottom-width: 2px; bottom: -15px; left: -15px; } @media (min-width: 768px) { .split-block-bottom { display: flex; flex-wrap: wrap; gap: 1.875rem; } .split-block-bottom article { flex: 1; display: flex; flex-direction: column; } .split-block-bottom article:nth-child(2) { flex-direction: column-reverse; } .split-block-bottom article:nth-child(2) .entry-details { min-height: 11.25rem; } } @media (max-width: 767px) { .grid-list-left { margin-bottom: 2rem; } } .grid-list-left > article { margin-bottom: calc(2 * var(--wpi-gutter)); } @media (min-width: 576px) and (max-width: 767px) { .grid-list-left > article .entry-image img { height: 32.5rem; } } @media (min-width: 576px) { .grid-list-left > article .entry-image { border-right: 2rem solid var(--wpi--primary-bg-color); padding-right: 2rem; margin-bottom: 0; } } @media (max-width: 575px) { .grid-list-left > .wpi-content-overlay.has-post-thumbnail .entry-details { bottom: 1.875rem; } } .grid-list-bottom { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.875rem; margin-bottom: calc(2 * var(--wpi-gutter)); padding-bottom: calc(2 * var(--wpi-gutter)); } @media (max-width: 991px) { .grid-list-bottom { grid-template-columns: repeat(2, 1fr); } } @media screen and (max-width: 640px) { .grid-list-bottom { grid-template-columns: 1fr; } } .grid-list-right { position: sticky; position: -webkit-sticky; top: 0; } .grid-list-right .entry-meta-wrapper { margin: 0; } .grid-list-right article:last-of-type { border-bottom: none; } @media (min-width: 768px) and (max-width: 1199px) { .article-group-slider { position: sticky; position: -webkit-sticky; top: 0; } } @media (max-width: 767px) { .article-group-slider { margin-top: 2rem; } } @media screen and (max-width: 575px) { .topbar-wrapper { justify-content: center; } .topbar-component-social { display: none; opacity: 0; visibility: hidden; } } .wpi-metro-banner { padding: 1rem 0 0; .metro-banner { width: 100%; display: grid; gap: 0.125rem; .wpi-metro-post { position: relative; .entry-image-medium { img { height: 18.25rem; } } } } &.metro-layout-1 { .metro-banner { grid-template-columns: repeat(4, minmax(0, 1fr)); @media (max-width: 991px) { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 768px) { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 600px) { grid-template-columns: repeat(1, minmax(0, 1fr)); } .wpi-metro-post { @media (min-width: 601px) { &:nth-child(1) { grid-row: 2 / -2; grid-column: 2 / 4; } } } } } &.metro-layout-2 { .metro-banner { @media (min-width: 769px) { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 768px) { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 600px) { grid-template-columns: repeat(1, minmax(0, 1fr)); } .wpi-metro-post { @media (min-width: 601px) { &:first-child { grid-row: span 2; grid-column: span 2; } &:nth-child(n + 2) { .single-card-detail { .card-title { font-size: calc(var(--typo-sm) - 3px); } } } } } } } }