/* Theme Name: Bado Blog Theme URI: https://web-zone.org/bado-blog Author: DMCWebZone Author URI: https://web-zone.org Description: Bado Blog is a cool, modern multipurpose WordPress theme with many free settings to create a responsive, fast, SEO optimized website that is easy to modify with a visual customizer. Bado Blog is well suited for magazines, personal blogs, article sites, news, and media. Translated into 20+ languages. Easy to use without coding knowledge. Good flexibility and functionality - multiple site width options (with full-width option), change sidebar orientation (left, right, or no sidebar), category grids with vertical and horizontal posts of various sizes, flexible header with logo, social link builder, ticker, 4 menu locations, main menu (mega menu), breadcrumbs, three pagination options, author block, related posts block, and styled widgets. Powerful Typography – change font size and line height, choose font designs, color typography for posts and pages. Clean code, no frameworks, minimum scripts. Good adaptability for any mobile devices. SEO-optimized with correct headings and markup. Adaptation for WooCommerce, Elementor, bbPress, Events Calendar, Jetpack, WPML, Contact Form 7, and Newsletter. Demo – web-zone.org/bado-blog Requires at least: 6.0 Tested up to: 6.8 Requires PHP: 7.1 Version: 1.3.2 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Copyright: DMCWebZone Text Domain: bado-blog Domain Path: /languages Tags: blog, news, e-commerce, grid-layout, one-column, two-columns, left-sidebar, right-sidebar, block-styles, buddypress, custom-background, custom-colors, custom-header, custom-logo, custom-menu, featured-images, flexible-header, footer-widgets, full-width-template, sticky-post, style-variations, theme-options, threaded-comments, translation-ready */ /*========================================================================================== * Attention! * Do not edit this file, after updating all changes will be lost * To add your own styles, use the special section in the customizer * Instructions: * 1. In your WordPress dashboard, go to - Appearance - Customize * 2. In the customizer panel, select - Additional CSS * 3. In the text editor that opens, add your styles ==========================================================================================*/ /*------------------------------------------------------------------------------------------ Style content: -------------------------------------------------------------------------------------------- # Basic styles # Connecting fonts # Connecting icons # General # Typography # Links # Forms # Images # Media # Gallery # Subtitles # Comments # Screen readers # Infinite scroll # Google adaptation # Alignments # Cleaning # Theme styles # General # Top bar # Ticker # Top menu # Accessibility Top menu # Header # Social Links # Top search # Main menu # Category menu # Breadcrumbs # Pagination # Post navigation # Footer # Common Blocks (Gutenberg) # Widgets (General) # Block widgets (Gutenberg) # Widgets (Footer) # Content part # Widgets (DMCWZ) # Blocks of posts in the category # Meta tags (meta boxs) for post blocks in categories # Meta tags (taxonomy cat) for post blocks in categories # Meta tags (taxonomy tag) for post blocks in categories # Posts and pages # Meta tags for posts # Author block in posts # Links to the next and previous post # Similar posts # Pages 404 # Site map # Block editor (Gutenberg) # Main page # Sliders # Scroll up # Mobile css # Various changes ------------------------------------------------------------------------------------------*/ /*========================================================================================== Basic styles ==========================================================================================*/ /*-------------------------------------------------------------- Basic - Connecting fonts --------------------------------------------------------------*/ @font-face { font-family: 'Open Sans'; src: url('fonts/open-sans/open-sans.eot'); src: local('Open Sans'), url('fonts/open-sans/open-sans.eot?#iefix') format('embedded-opentype'), url('fonts/open-sans/open-sans.woff2') format('woff2'), url('fonts/open-sans/open-sans.woff') format('woff'), url('fonts/open-sans/open-sans.ttf') format('truetype'), url('fonts/open-sans/open-sans.svg#OpenSans') format('svg'); } @font-face { font-family: 'Play'; src: url('fonts/play/play.eot'); src: local('play'), url('fonts/play/play.eot?#iefix') format('embedded-opentype'), url('fonts/play/play.woff2') format('woff2'), url('fonts/play/play.woff') format('woff'), url('fonts/play/play.ttf') format('truetype'), url('fonts/play/play.svg#Play') format('svg'); } /*-------------------------------------------------------------- Basic - Connecting icons --------------------------------------------------------------*/ @font-face { font-family: 'icomoon'; src: url('img/icomoon/fonts/icomoon.eot?nloz38'); src: url('img/icomoon/fonts/icomoon.eot?nloz38#iefix') format('embedded-opentype'), url('img/icomoon/fonts/icomoon.ttf?nloz38') format('truetype'), url('img/icomoon/fonts/icomoon.woff?nloz38') format('woff'), url('img/icomoon/fonts/icomoon.svg?nloz38#icomoon') format('svg'); font-weight: 400; font-style: normal; font-display: block; } [class^="icon-"], [class*=" icon-"] { font-family: 'icomoon' !important; /* use important to prevent issues with browser extensions that change fonts */ speak: never; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /*-------------------------------------------------------------- Basic - General --------------------------------------------------------------*/ *, *:before, *:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior */ box-sizing: inherit; } html { font-family: sans-serif; box-sizing: border-box; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { color: #404040; font-family: "Open Sans", "Play", Helvetica, Arial, sans-serif; font-size: 18px; line-height: 1.5; margin: 0; background: #63637a; /* For mobile devices and older browsers */ word-break: break-word; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; } main { /* margin: 0 5px; */ /* IE 10 */ display: block; } div, p, a, li, h1, h2, h3, h4, h5, h6 { transition: 0.2s; } button, input, select, span { /* For mobile devices and older browsers */ word-break: normal; overflow-wrap: break-word; } article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary, cite { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } template, [hidden] { display: none; } abbr[title] { border-bottom: 1px dotted; } dfn { font-style: italic; } mark { background: #ff0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } svg:not(:root) { overflow: hidden; } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } button { overflow: visible; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input[type="checkbox"], input[type="radio"] { min-height: 20px; min-width: 20px; margin-right: 7px; box-sizing: border-box; padding: 0; cursor: pointer; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration, input[type=text], input[type="search"], input[type=submit], textarea, select { -webkit-appearance: none; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { display: table; border: 0; box-sizing: border-box; color: inherit; max-width: 100%; padding: 0; white-space: normal; } textarea { overflow: auto; } optgroup { font-weight: 700; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } /*-------------------------------------------------------------- Basic - Typography --------------------------------------------------------------*/ h1, h2, h3, h4, h5, h6 { color: #404046; } h1 { font-size: 32px; margin: 1.5em 0; } h2 { font-size: 26px; margin: 1.375em 0; } h3 { font-size: 24px; margin: 1.25em 0; } h4 { font-size: 22px; margin: 1.125em 0; } h5 { font-size: 20px; margin: 1.0625em 0; } h6 { font-size: 18px; margin: 1em 0; } dt, b, strong { font-weight: 700; } blockquote { margin: 1.5em; padding: 1.25em; } @media (max-width: 700px) { blockquote { margin: 1.5em 0; } } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } code, kbd, tt, var, pre { margin: 1.5em; max-width: 100%; overflow: auto; padding: 1.5em; } abbr, acronym { border-bottom: 1px dotted #777; cursor: help; } a, ins { text-decoration: none; } big { font-size: 125%; } hr { background: #ccc; border: 0; height: 1px; margin-bottom: 1.5em; } ul { list-style: disc; } ol { list-style: decimal; } dd { margin: 0 1.5em 1.5em; } table { margin: 0 0 1.5em; width: 100%; } /*-------------------------------------------------------------- Basic - Links --------------------------------------------------------------*/ a { color: #1e73bb; } a:hover { color: #dd9925; outline: 0; } /* Support focus */ a:focus { outline: 2px solid #4c65ad; } /* Support focus for img */ a:focus img { border: 1px solid #4c65ad; } @supports selector(:focus-visible) { a:focus { outline: none; } a:focus-visible { outline: 2px solid #4c65ad; } a:focus img { border: none; } a:focus-visible img { border: 1px solid #4c65ad; } } /*-------------------------------------------------------------- Basic - Forms --------------------------------------------------------------*/ button, input[type="button"], input[type="reset"], input[type="submit"] { border-radius: 30px; background: #4c65ad; color: #fffffc; font-size: 16px; line-height: 1.5; padding: 15px 25px; border: 0; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea { color: #555; background: #ffffff; border: 1px solid #4c65ad; border-radius: 20px; width: 100%; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); font-size: 18px; padding: 10px; min-height: 60px; line-height: 1.5; } select { max-width: 100%; border: 1px solid #4c65ad; padding: 0.4em; cursor: pointer; } textarea { width: 100%; } .badoblog-css-loadmore-button:hover, .badoblog-css-top-search-modal-inner button:hover, .search-form button:hover, .widget_search button:hover, .comment-form input[type="submit"]:hover { transition-duration: 0.2s; box-shadow: 0 0.1em 0.4em rgba(0, 0, 0, 0.5); } /* Search */ .search-form { display: flex; font-size: 16px; line-height: 1.5; width: 100%; } .search-wrap { width: 100%; } .search-wrap input[type="text"] { border-radius: 20px 0 0 20px; border: 1px solid #4c65ad; font-size: 20px; } .search-icon { border-radius: 0 20px 20px 0; border: 0; padding: 0; line-height: 0; } .search-icon:before { display: inline-block; content: '\26B2'; font-family: 'Open Sans',Helvetica,Arial,sans-serif; font-size: 36px; transform: rotate(-45deg); padding: 20px 45px 18px 40px; } @media (max-width: 400px) { .search-icon:before { padding: 20px 25px 18px 20px; } } input[type="search"] { -webkit-appearance: textfield; } /*-------------------------------------------------------------- Basic - Images --------------------------------------------------------------*/ img { max-width: 100%; vertical-align: middle; height: auto; border-radius: 15px; /* IE 10 */ border-style: none; } figure { height: auto; margin: 0; } .size-auto, .size-full, .size-large, .size-medium, .size-thumbnail { max-width: 100%; height: auto; } /*-------------------------------------------------------------- Basic - Media --------------------------------------------------------------*/ /* Emoticons */ img.wp-smiley { border: none; margin: 0; padding: 0; } /* Make sure embeds and iframes fit their containers. */ embed, iframe, object { max-width: 100%; } /*-------------------------------------------------------------- Basic - Gallery --------------------------------------------------------------*/ .gallery-item { display: inline-block; text-align: center; vertical-align: top; width: 100%; } .gallery-columns-2 .gallery-item { max-width: 50%; } .gallery-columns-3 .gallery-item { max-width: 33.33%; } .gallery-columns-4 .gallery-item { max-width: 25%; } .gallery-columns-5 .gallery-item { max-width: 20%; } .gallery-columns-6 .gallery-item { max-width: 16.66%; } .gallery-columns-7 .gallery-item { max-width: 14.28%; } .gallery-columns-8 .gallery-item { max-width: 12.5%; } .gallery-columns-9 .gallery-item { max-width: 11.11%; } .gallery-caption { display: block; } .wp-block-gallery.alignleft:not(.has-nested-images) { margin-right: 15px; } /*-------------------------------------------------------------- Basic - Subtitles --------------------------------------------------------------*/ .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; } figcaption { padding-bottom: 15px; } /*-------------------------------------------------------------- Basic - Comments --------------------------------------------------------------*/ #comments ol { list-style: none; margin: 0; padding: 0; } #comments li { padding-top: 30px; } #comments > ol > li { box-shadow: 0 0.1em 0.4em rgba(0,0,0,0.2); padding-left: 30px; padding-right: 30px; padding-bottom: 35px; margin-bottom: 30px; border-radius: 20px; } #comments .comment-author { display: inline-block; } #comments .comment-metadata { margin-top: 10px; } #comments .comment-author img { border-radius: 50%; height: auto; width: 40px; } #comments .comment-meta { font-size: 0.875em; border-radius: 20px; } #comments .comment-body ol { list-style: decimal; padding: 0 0 0 35px; } #comments .comment-body li { line-height: 1.3; } #comments .comment .children { margin-left: 15px; } #comments .comment .children .comment-body { padding-left: 25px; border-left: 1px dashed #4C65AD; } #respond { background: #fdfcfc; margin-top: 30px; } .form-submit .submit { white-space: pre-wrap; } .comment-content a { word-wrap: break-word; } .bypostauthor { display: block; } .fn { padding-left: 10px; } .comment-awaiting-moderation { display: block; padding: 20px 0; } .comments-area { border-radius: 20px; } /*-------------------------------------------------------------- Basic - Screen readers --------------------------------------------------------------*/ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal!important; } .screen-reader-text:focus { display: block; background-color: #eee; clip: auto!important; clip-path: none; color: #444; font-size: 1em; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ opacity: 0.8; } /* Remove content selection (when using the keyboard) */ #primary[tabindex="-1"]:focus { outline: 0; } /*-------------------------------------------------------------- Basic - Infinite scroll --------------------------------------------------------------*/ /* Globally hidden elements when Infinite Scroll is supported and in use. */ .infinite-scroll .posts-navigation, /* Older / Newer Posts Navigation (always hidden) */ .infinite-scroll.neverending .badoblog-css-site-footer { /* Theme Footer (when set to scrolling) */ display: none; } /* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */ .infinity-end.neverending .badoblog-css-site-footer { display: block; } .infinite-scroll .badoblog-css-loadmore, .infinite-scroll #badoblog-id-loadmore, .infinite-scroll .pagination { display: none!important; } /*-------------------------------------------------------------- Basic - Google adaptation --------------------------------------------------------------*/ .adsbygoogle-noablate { z-index: 99999!important; } /*-------------------------------------------------------------- Basic - Alignments --------------------------------------------------------------*/ .alignleft { display: inline; float: left; margin-right: 1.5em; margin-bottom: 1em; } .alignright { display: inline; float: right; margin-left: 1.5em; margin-bottom: 1em; } .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; } /*-------------------------------------------------------------- Basic - Cleaning --------------------------------------------------------------*/ .clear:before, .clear:after, .comment-content:before, .comment-content:after { content: ""; display: table; table-layout: fixed; } .clear:after, .comment-content:after { clear: both; } /*========================================================================================== Theme styles ==========================================================================================*/ /*-------------------------------------------------------------- Theme - General --------------------------------------------------------------*/ /* Cleaning */ .clear-both { clear: both; } .clear-title-box:before, .clear-title-box:after { content: ""; display: table; table-layout: fixed; clear: both; } .hidden { display: none; } .badoblog-css-post-content:before, .badoblog-css-post-content:after, .badoblog-css-page-content:before, .badoblog-css-page-content:after, .badoblog-css-mod-pp-content:before, .badoblog-css-mod-pp-content:after, .badoblog-css-site-header:before, .badoblog-css-site-header:after, .badoblog-css-site-content:before, .badoblog-css-site-content:after, .badoblog-css-site-footer:before, .badoblog-css-site-footer:after { content: ""; display: table; table-layout: fixed; } .badoblog-css-related-box:after, .badoblog-css-post-content:after, .badoblog-css-page-content:after, .badoblog-css-mod-pp-content:after, .badoblog-css-site-header:after, .badoblog-css-site-content:after, .badoblog-css-site-footer:after { clear: both; } /* Indentation */ .top-margin { margin-top: 15px; } /* Alignments */ .badoblog-css-post-thumbnail, .badoblog-css-page-thumbnail, .badoblog-css-related-thumbnail, .badoblog-css-cat-thumbnail, .badoblog-css-site-brand-top { text-align: center; } /* Subpixel rendering Affects the animated displacement of images when hovering over Applies to the block in which the image is located */ .badoblog-css-soc-top-box-anime, .badoblog-css-cat-thumbnail, .badoblog-css-cat-thum-anime, .badoblog-css-related-post-box { /* Chrome */ -webkit-transform: rotate(-0.0000000001deg); /* Firefox (Not supported in new versions, but required for older ones) */ -moz-transform: rotate(-0.1deg); /* All */ transform: rotate(-0.0000000001deg); /* Image rendering (Fix blur in pictures) Adds sharpness - suitable for uncompressed images If the image is compressed it will distort the lines */ /* Firefox */ /* image-rendering: optimizeQuality; */ /* Chrome */ /* image-rendering: -webkit-optimize-contrast; */ /* IE */ /* -ms-interpolation-mode: nearest-neighbor; */ } /* Animation speed */ /* Important! Animation decrease images in mozilla, works correctly max at 0.2s */ .badoblog-css-soc-top-box-child img, .badoblog-css-bio-post-autor-posts-child img { transition: 0.2s; } .badoblog-css-top-menu-pc a, .badoblog-css-soc-top-box-child, .badoblog-css-soc-top-box-anime { transition: 0.3s; } .badoblog-css-nav-top-mobile a, .badoblog-css-related-thumbnail img { transition: 0.4s; } /* Various links */ /* Link underlining in content and comments (WP requirements) */ .badoblog-css-post-content a, .badoblog-css-page-content a, .badoblog-css-mod-pp-content a, .comment-content a { text-decoration: underline; } /* Correct wrapping of a link with an image inside (to control the keyboard) */ .badoblog-css-site-logo-box a, .badoblog-css-bio-post-autor-posts-child a, .badoblog-css-related-thumbnail a { display: block; } a.badoblog-css-more-link, #comments .reply a { display: inline-block; background: #4c65ad; border-radius: 30px; color: #fffffc; cursor: pointer; font-size: 15px; line-height: 1.5; padding: 10px 20px; } a:hover.badoblog-css-more-link, #comments .reply a:hover { box-shadow: 0 0.1em 0.4em rgba(0, 0, 0, 0.5); color: #fffffc; } /* Background for sticky posts */ .sticky { background: #ffedd8; } .byline, .updated:not(.published) { display: none; } .single .byline, .group-blog .byline { display: inline; } .page-links { clear: both; padding: 1em 0; } /* Fixing a bug (link to unreply a comment - no space) */ #cancel-comment-reply-link { margin-left: 10px; } /* Common global margin */ .badoblog-css-top-bar, .badoblog-css-site-branding, .badoblog-css-mega-menu-box, #content, .badoblog-css-site-footer { margin-top: 30px; } /* Common global shadow */ .badoblog-css-top-bar, .badoblog-css-site-branding, .badoblog-css-mega-menu-box, .badoblog-css-content-area, .badoblog-css-widget-area, .badoblog-css-site-footer { box-shadow: 0.1em 0.1em 0.5em rgba(0, 0, 0, 0.2); } /*-------------------------------------------------------------- Theme - Top bar --------------------------------------------------------------*/ .badoblog-css-top-bar { display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 35px; padding: 10px 40px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #fdfcfc; border-radius: 25px; line-height: 1.5; } .badoblog-css-top-bar a, .badoblog-css-top-date { font-size: 14px; } /*-------------------------------------------------------------- Theme - Ticker --------------------------------------------------------------*/ .badoblog-css-top-left { float: left; width: 30%; padding: 5px 0; padding-right: 30px; } .badoblog-css-ticker-box { display: flex; overflow: hidden; } .badoblog-css-ticker { display: flex; width: 100%; animation: badoblog-ticker 15s linear forwards; } .badoblog-css-ticker:hover { animation-play-state: paused; } @keyframes badoblog-ticker { 0% {transform: translate(100%, 0);} 100% { transform: translate(0, 0);} } .badoblog-css-ticker-post { display: flex; white-space: nowrap; } .badoblog-css-ticker-post a { color: #ea4646; } @media (max-width: 700px) { .badoblog-css-top-left { padding: 10px 0; } } @media (max-width: 400px) { .badoblog-css-top-left { display: none; } .badoblog-css-top-bar { justify-content: flex-end; min-height: 42px; } } /*-------------------------------------------------------------- Theme - Top menu --------------------------------------------------------------*/ /* Common */ .badoblog-css-top-menu a { padding: 8px 15px; border-radius: 15px; } /* PC version */ .badoblog-css-top-menu { display: flex; justify-content: flex-end; align-items: center; clear: both; float: right; width: 70%; } .badoblog-css-top-menu:empty { display: none; } .badoblog-css-top-menu-pc ul { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; list-style: none; margin: 0; padding: 2px 0; } .badoblog-css-top-menu-pc li { float: left; position: relative; } .badoblog-css-top-menu-pc a { display: block; max-width: 300px; } .badoblog-css-top-menu-pc a:hover { color: #1e73bb; } .badoblog-css-top-menu-pc ul ul { background: #525252; float: left; position: absolute; left: -999em; z-index: 99999; padding: 15px; max-width: 250px; border-radius: 25px; } .badoblog-css-top-menu-pc ul ul li a { padding: 10px 15px; } .badoblog-css-top-menu-pc ul ul ul { left: -999em; top: 0; } .badoblog-css-top-menu-pc ul ul a { min-width: 200px; color: #fffffd; } .badoblog-css-top-menu-pc ul li:hover { box-shadow: 0 1px 2px rgba(0,0,0,0.3); border-radius: 15px; } .badoblog-css-top-menu-pc li:hover > a { background: #4c65ad; color: #fffffd; } .badoblog-css-top-menu-pc ul li:hover > ul { left: auto; } .badoblog-css-top-menu-pc ul li:hover > ul { right: 0; } .badoblog-css-top-menu-pc ul ul li:hover > ul { right: 100%; } @media (min-width: 700px) { .badoblog-css-top-menu-mobile { display: none; } } @media (max-width: 700px) { .badoblog-css-top-menu-pc { display: none; } } @media (max-width: 400px) { .badoblog-css-top-menu { width: 100%; } } /* Top menu - mobile version */ .badoblog-css-nav-top-mobile-burger:after { content: '\2630'; font-family: "Play", "Open Sans", Helvetica, Arial, sans-serif; font-size: 22px; position: relative; padding: 3px 15px 5px; cursor: pointer; border: 1px solid #1e73bb; border-radius: 30px; color: #1e73bb; } .badoblog-css-nav-top-mobile { background: #525252; width: 300px; min-width: 300px; height: 100%; position: fixed; top: 0; bottom: 0; margin: 0; right: -400px; transition: right 0.3s; z-index: 100000; } .badoblog-css-nav-top-mobile-ul { display: none; padding: 15px; } .badoblog-css-nav-top-mobile-toggle { line-height: 0; cursor: pointer; } .badoblog-css-nav-top-mobile-burger:hover, .badoblog-css-nav-top-mobile-toggle:hover { opacity: .8; } [id='badoblog-id-nav-top-mobile-toggle'] { display: none; position: absolute; } [id='badoblog-id-nav-top-mobile-toggle']:checked ~ .badoblog-css-nav-top-mobile > .badoblog-css-nav-top-mobile-title > .badoblog-css-nav-top-mobile-toggle { font-size: 2em; } [id='badoblog-id-nav-top-mobile-toggle']:checked ~ .badoblog-css-nav-top-mobile { right: 0; overflow-y: auto; } [id='badoblog-id-nav-top-mobile-toggle']:checked ~ .badoblog-css-nav-top-mobile > .badoblog-css-nav-top-mobile-ul { display: block; } [id='badoblog-id-nav-top-mobile-toggle']:checked ~ .badoblog-css-nav-top-mobile > .badoblog-css-nav-top-mobile-title > .badoblog-css-nav-top-mobile-toggle:after { content: '\2715'; color: #4c65ad; } @-webkit-keyframes bugfix { to { padding: 0; } } @media (max-width: 400px) { .badoblog-css-nav-top-mobile { width: 100%; min-width: 100%; } } .badoblog-css-nav-top-mobile-title { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #4c65ad; padding: 8px 25px; background: #f7f7f7; } .badoblog-css-nav-top-mobile-h { font-size: 1.5em; margin-right: 10px; color: #404046; } .badoblog-css-nav-top-mobile ul { line-height: 2; margin: 0; padding: 0; list-style: none; } .badoblog-css-nav-top-mobile a { display: block; font-size: 16px; color: #fffffd; } .badoblog-css-nav-top-mobile a:hover { padding-left: 22px; background: #4c65ad; color: #fffffd; } .badoblog-css-nav-top-mobile > ul > li > a { text-transform: uppercase; } .badoblog-css-mask-content { display: block; position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); visibility: hidden; opacity: 0; } [id='badoblog-id-nav-top-mobile-toggle']:checked ~ .badoblog-css-mask-content { visibility: visible; opacity: 1; -webkit-transition: opacity .5s, visibility .5s; transition: opacity .5s, visibility .5s; } /*-------------------------------------------------------------- Theme - Accessibility Top menu --------------------------------------------------------------*/ /* Common */ .badoblog-css-top-jsmenu-box ul { list-style: none; margin: 0; padding: 2px 0; font-size: initial; } .badoblog-css-top-jsmenu-box ul li { position: relative; } .badoblog-css-top-jsmenu-box li:hover > a { background: rgba(0,0,0,0.1); } .badoblog-css-top-jsmenu-box li a:hover, .badoblog-css-top-jsmenu-box li a:focus { background: #4c65ad; color: #fffffd; } /* PC version */ .badoblog-css-top-jsmenu-pc ul { display: flex; flex-wrap: wrap; justify-content: flex-end; } .badoblog-css-top-jsmenu-pc ul li a { display: inline-block; } .badoblog-css-top-jsmenu-pc ul .sub-menu { display: block; position: absolute; top: 100%; right: 0; width: 250px; box-shadow: 0 2px 3px rgba(0,0,0,0.1); opacity: 0; clip: rect(1px, 1px, 1px, 1px); z-index: 9999; transition: all ease 0.4s; padding: 15px; background: #505062; border-radius: 25px; } .badoblog-css-top-jsmenu-pc ul .sub-menu ul { top: 0; right: 100%; } .badoblog-css-top-jsmenu-pc .sub-menu li a, .badoblog-css-top-jsmenu-pc .sub-menu li a:hover, .badoblog-css-top-jsmenu-pc .sub-menu li a:focus { color: #fffffd; } .badoblog-css-top-jsmenu-pc ul li:hover > ul, .badoblog-css-top-jsmenu-pc ul li.focused > ul { opacity: 1; clip: unset; } .badoblog-css-top-jsmenu-pc div > ul > li.menu-item-has-children > a:after { font-family: 'icomoon'; content: "\e903"; margin-left: 4px; line-height: 0; } .badoblog-css-top-jsmenu-pc ul ul .menu-item-has-children > a:before { content: "\276E"; margin-right: 8px; font-size: 0.875em; } .badoblog-css-top-jsmenu-pc ul .sub-menu li a { display: block; padding: 10px 15px; } /* Hiding the mobile menu and the PC version of the burger */ @media (min-width: 701px) { .badoblog-css-top-jsmenu-mobile, button.badoblog-css-toggle-btn { display: none!important; } } /* Mobile version */ @media screen and (max-width: 700px) { /* Off PC version */ .badoblog-css-top-jsmenu-pc .badoblog-css-top-jsmenu-container-box { display: none; } /* Burger button */ button.badoblog-css-toggle-btn { display: block; padding: 0; width: 25px; height: 25px; min-height: auto; position: relative; background: none; } button.badoblog-css-toggle-btn .badoblog-css-toggle-bar { background: #1e73bb; width: 20px; height: 2px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; transition: all ease 0.35s; } button.badoblog-css-toggle-btn .badoblog-css-toggle-bar:first-child { top: -12px; } button.badoblog-css-toggle-btn .badoblog-css-toggle-bar:last-child { bottom: -12px; } button.badoblog-css-toggle-btn:hover .badoblog-css-toggle-bar { opacity: 0.9; } /* Menu close button */ .badoblog-css-top-jsmenu-box .badoblog-css-top-jsmenu-mobile .badoblog-css-close-top-jsmenu-nav-toggle { position: absolute; top: 20px; right: 24px; padding: 0; min-height: auto; width: 30px; height: 30px; background: none; border: none; } .badoblog-css-top-jsmenu-box .badoblog-css-top-jsmenu-mobile .badoblog-css-close-top-jsmenu-nav-toggle:before, .badoblog-css-top-jsmenu-box .badoblog-css-top-jsmenu-mobile .badoblog-css-close-top-jsmenu-nav-toggle:after { content: ""; background: #fffffd; width: 30px; height: 3px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; transform: rotate(45deg); } .badoblog-css-top-jsmenu-box .badoblog-css-top-jsmenu-mobile .badoblog-css-close-top-jsmenu-nav-toggle:after { transform: rotate(-45deg); } body:not(.badoblog-css-showing-top-jsmenu-modal) .badoblog-css-mobile-top-jsmenu { display: none; } /* Mobile menu */ .badoblog-css-top-jsmenu-mobile { display: none; position: fixed; top: 0; right: 0; width: 300px; height: 100%; z-index: 9999999; background: #525252; box-shadow: 0 0 10px rgba(0,0,0,0.2); overflow-y: auto; overflow-x: hidden; padding: 60px 0 40px 0; } .badoblog-css-top-jsmenu-mobile a { color: #fffffd; font-size: 16px; } .badoblog-css-top-jsmenu-mobile ul li a { display: block; padding: 10px 10px 10px 20px; } .badoblog-css-top-jsmenu-mobile li.menu-item-has-children > a { display: flex; align-items: center; min-height: 45px; padding-right: 50px; } .badoblog-css-top-jsmenu-mobile .submenu-toggle { position: absolute; top: 0; right: 0; height: 45px; width: 45px; padding: 0; margin-right: 10px; background: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-tap-highlight-color: transparent; transition: all ease 0.4s; } .badoblog-css-top-jsmenu-mobile button.submenu-toggle:after { font-family: 'icomoon'; content: "\e907"; font-size: 1.5em; } .badoblog-css-top-jsmenu-mobile .submenu-toggle.active { transform: rotate(180deg); } .badoblog-css-top-jsmenu-box .badoblog-css-top-jsmenu-mobile ul .sub-menu { display: none; width: 100%; position: static; opacity: 1; visibility: visible; background: rgba(0,0,0,0.02); box-shadow: none; transition: none; } .badoblog-css-mobile-top-jsmenu { margin: 0 5px; } } @media (max-width: 400px) { .badoblog-css-top-jsmenu-mobile { width: 100%; } } /*-------------------------------------------------------------- Theme - Header --------------------------------------------------------------*/ .badoblog-css-site-branding { background: #fdfcfc; padding: 0 40px 40px 40px; border-radius: 25px; } .badoblog-css-site-brand-top { padding-top: 40px; } .badoblog-css-site-brand-top-img-anime img { border-radius: 22px; } .badoblog-css-site-logo-box { margin: 10px 0; } .badoblog-css-site-logo-box img { border-radius: 0; } .badoblog-css-logo-fix { min-width: 150px; } .badoblog-css-logo-free { min-width: 120px; } .badoblog-css-site-title-box { min-width: 130px; } .badoblog-css-site-brand-top-img-anime { border-radius: 20px; } .badoblog-css-site-brand-bottom { display: flex; justify-content: space-between; align-items: center; column-gap: 50px; } .badoblog-css-site-brand-bottom-1 { width: 70%; display: flex; } .badoblog-css-site-brand-bottom-box { display: flex; column-gap: 25px; border-radius: 22px; padding: 20px 50px; margin-top: 40px; width: 100%; } @media (max-width: 450px) { .badoblog-css-site-brand-bottom-box { padding: 15px 25px; } } .badoblog-css-site-title { font-size: 42px; line-height: 1.5; margin: 0; font-weight: 400; color: #fffffb; } .badoblog-css-site-title a { color: #fffffb; } .badoblog-css-site-description { display: inline-block; line-height: 1.7; font-size: 16px; margin-top: 10px; margin-bottom: 10px; color: #fffffb; } /*-------------------------------------------------------------- Theme - Social Links --------------------------------------------------------------*/ /* Social links the header */ .badoblog-css-soc-top-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; list-style: none; gap: 16px; } .badoblog-css-soc-top-box img { border-radius: 0; } .badoblog-css-soc-top-box-anime { display: flex; justify-content: center; align-items: center; } /* Right header (Bottom part) */ .badoblog-css-site-brand-bottom-2 { display: flex; justify-content: flex-end; align-items: center; column-gap: 20px; width: 30%; } .badoblog-css-site-brand-bottom-2:empty { display: none; } .badoblog-css-site-brand-banner, .badoblog-css-site-brand-soc { margin-top: 40px; text-align: right; } .badoblog-css-site-brand-banner { border-radius: 15px; overflow: hidden; } .badoblog-css-site-brand-banner:hover { box-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.4); } .badoblog-css-site-brand-banner img { border-radius: 0; } .badoblog-css-site-brand-soc { flex: 1; min-width: 125px; } /* Right header (Top part) */ .badoblog-css-site-brand-top-2 { display: none; } /* Header (mobile version) */ @media (max-width: 900px) { .badoblog-css-site-branding { display: flex; justify-content: center; flex-direction: column; align-items: stretch; } .badoblog-css-site-brand-bottom-1, .badoblog-css-site-brand-bottom-2 { width: 100%!important; } .badoblog-css-site-brand-bottom-1 { justify-content: center; } .badoblog-css-site-brand-bottom, .badoblog-css-site-brand-bottom-2, .badoblog-css-site-brand-bottom-box { text-align: center; flex-direction: column; } .badoblog-css-site-brand-banner { text-align: center; } .badoblog-css-soc-top-box { justify-content: center; } } /*-------------------------------------------------------------- Theme - Top search --------------------------------------------------------------*/ .badoblog-css-search-top-bar { margin-right: 10px; } .badoblog-css-search-soc-styles { line-height: 0; } .badoblog-css-soc-top-box-child.badoblog-css-search-soc-styles-not, .badoblog-css-soc-top-box-child.badoblog-css-search-soc-styles-not:hover { border: none; } .badoblog-css-search-top-bar .badoblog-css-top-search-button, .badoblog-css-search-soc-styles .badoblog-css-top-search-button { background: rgba(0,0,0, 0); box-shadow: none; } .badoblog-css-search-top-bar .badoblog-css-top-search-button:hover, .badoblog-css-search-soc-styles .badoblog-css-top-search-button:hover { opacity: 1; } .badoblog-css-search-top-bar .badoblog-css-top-search-button { color: #4c65ad; } .badoblog-css-search-top-bar .badoblog-css-top-search-button:hover { color: #404040; } .badoblog-css-search-soc-styles .badoblog-css-top-search-button:before { display: none; } .badoblog-css-top-search-button.search-icon { border-radius: 50px; } .badoblog-css-top-search-button:before { font-size: 28px; padding: 20px 11px 18px; } .search-very-small.badoblog-css-top-search-button:before { font-size: 22px; padding: 18px 11px 16px; } .search-mid.badoblog-css-top-search-button:before { font-size: 34px; padding: 24px 13px 20px; } .search-big.badoblog-css-top-search-button:before { font-size: 48px; padding: 30px 14px 24px; } .search-very-big.badoblog-css-top-search-button:before { font-size: 54px; padding: 34px 17px 30px; } .badoblog-css-search-top-bar .badoblog-css-top-search-button:before { font-size: 28px; padding: 18px 10px; } .badoblog-css-search-top-bar .search-very-small.badoblog-css-top-search-button:before { font-size: 22px; } .badoblog-css-search-top-bar .search-mid.badoblog-css-top-search-button:before { font-size: 34px; padding: 22px 10px 18px; } .badoblog-css-search-top-bar .search-big.badoblog-css-top-search-button:before { font-size: 40px; padding: 24px 10px 22px; } .badoblog-css-search-top-bar .search-very-big.badoblog-css-top-search-button:before { font-size: 48px; padding: 30px 14px 24px; } .badoblog-css-cover-search { display: none; -ms-overflow-style: none; overflow: -moz-scrollbars-none; } .badoblog-css-cover-search::-webkit-scrollbar { display: none!important; } .badoblog-css-cover-search.show-search-modal { display: block; cursor: pointer; } .badoblog-css-cover-search.show-search-modal > * { cursor: default; } .badoblog-css-top-search-modal { display: none; background: rgba(0, 0, 0, 0.5); opacity: 0; position: fixed; bottom: 0; left: -9999rem; top: 0; transition: opacity 0.2s linear, left 0s 0.2s linear; width: 100%; z-index: 999999; } .badoblog-css-top-search-modal.active-search { left: 0; opacity: 1; transition: opacity 0.2s linear; } .badoblog-css-top-search-modal-inner { display: flex; align-items: center; justify-content: center; background: #ffffff; transform: translateY(-100%); transition: transform 0.15s linear, box-shadow 0.15s linear; padding: 30px; } .badoblog-css-top-search-modal.active-search .badoblog-css-top-search-modal-inner { box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.5); transform: translateY(0); transition: transform 0.25s ease-in-out, box-shadow 0.1s 0.25s linear; } .badoblog-css-top-search-modal-inner .search-form { margin-right: 20px; } .badoblog-css-top-search-modal-inner .search-wrap input[type="text"] { font-size: 24px; } .badoblog-css-top-close-search-toggle { padding: 12px 20px 12px; margin: 0; } .search-close-icon { line-height: 1.5; } .search-close-icon:before { content: '\2715'; font-size: 24px; font-weight: 600; } /*-------------------------------------------------------------- Theme - Main menu --------------------------------------------------------------*/ .badoblog-css-mega-menu-box, .badoblog-css-mega-menu-container { border-radius: 25px; } .badoblog-css-mega-menu-container { width: 100%; max-width: 1500px; background: #fdfcfc; padding: 40px; line-height: 1.5; } /* for fix menu */ .badoblog-css-fix-main-menu { top: 0; padding: 20px; border-radius: 0 0 20px 20px; position: fixed; z-index: 999; box-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.5); transition-duration: 0.4s; } @media (max-width: 1577px) { .badoblog-css-fix-main-menu { max-width: none; left: 0; right: 0; } } /* Style scroll for fix menu */ .badoblog-css-scroll-main-menu .badoblog-css-mega-menu > ul > li > .sub-menu { clip-path: inset(0 round 25px); } .badoblog-css-scroll-main-menu .badoblog-css-mega-menu > ul > li > .sub-menu::-webkit-scrollbar { width: 6px; } .badoblog-css-scroll-main-menu .badoblog-css-mega-menu > ul > li > .sub-menu::-webkit-scrollbar-thumb { border-radius: 50px; background-color: rgba(0, 0, 0, 0.3); } @-moz-document url-prefix() { .badoblog-css-scroll-main-menu .badoblog-css-mega-menu > ul > li > .sub-menu { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.3) transparent; } } .badoblog-css-mega-menu-box { position: relative; } .badoblog-css-mega-menu { width: 100%; max-width: 1500px; margin: 0 auto; } .badoblog-css-mega-menu-dropdown-icon:before { display: none; } .badoblog-css-mega-menu > ul { display: flex; flex-wrap: wrap; justify-content: center; margin: 0 auto; width: 100%; list-style: none; padding: 0; position: relative; box-sizing: border-box; gap: 20px; } .badoblog-css-mega-menu > ul:after { clear: both; } .badoblog-css-mega-menu > ul > li { float: left; background: #4c65ad; padding: 10px 15px; border-radius: 50px; } .badoblog-css-mega-menu > ul > li > a { display: block; padding: 8px 12px 7px 12px; text-transform: uppercase; font-size: 15px; cursor: pointer; line-height: 1.5; } .badoblog-css-mega-menu > ul > li > a, .badoblog-css-mega-menu > ul > li:hover > a { color: #fffffb; } .badoblog-css-mega-menu > ul > li:hover { background: #454554; } .badoblog-css-mega-menu > ul > li > ul { display: none; flex-wrap: wrap; width: 100%; background: #505062; padding: 17px 35px; position: absolute; z-index: 99; left: 0; margin: 10px 0 0; list-style: none; border-bottom: 2px solid #4c65ad; border-top: 2px solid #4c65ad; box-shadow: 0 3px 3px rgba(0,0,0,0.4); border-radius: 25px; } /* Support focus */ .badoblog-css-mega-menu li.focused > ul { /* important - is needed to override display-none after the hover event via js */ display: flex!important; } .badoblog-css-mega-menu > ul > li > ul:before, .badoblog-css-mega-menu > ul > li > ul:after { content: ""; display: table; } .badoblog-css-mega-menu > ul > li > ul:after { clear: both; } .badoblog-css-mega-menu > ul > li > ul > li { margin: 0; padding-bottom: 0; list-style: none; width: 25%; background: none; float: left; } .badoblog-css-mega-menu > ul > li > ul > li a { display: block; color: #fffffb; padding: 12px 0 1px 0; width: 95%; border-bottom: 1px solid #4c65ad; transition-duration: 0.4s; font-size: 0.875em; } .badoblog-css-mega-menu > ul > li > ul > li a:hover { padding-left: 8px; } .badoblog-css-mega-menu > ul > li > ul > li > ul { display: block; padding: 0; margin: 10px 0 0; list-style: none; box-sizing: border-box; } .badoblog-css-mega-menu > ul > li > ul > li > ul:before, .badoblog-css-mega-menu > ul > li > ul > li > ul:after { content: ""; display: table; } .badoblog-css-mega-menu > ul > li > ul > li > ul:after { clear: both; } .badoblog-css-mega-menu > ul > li > ul > li > ul > li a { border: 0; text-transform: none; padding: 10px 0; } .badoblog-css-mega-menu > ul > li > ul > li > ul > li > ul { padding: 0; } .badoblog-css-mega-menu > ul > li > ul > li > ul > li > ul li { display: flex; align-items: center; list-style-type: none; } .badoblog-css-mega-menu > ul > li > ul > li > ul > li > ul li:before { content: ""; background: #4c65ad; width: 7px; height: 7px; border-radius: 15%; margin-right: 8px; } .badoblog-css-mega-menu > ul > li > ul.normal-sub { width: 20%; min-width: 200px; left: auto; padding: 15px 20px; box-shadow: 0 3px 3px rgba(0,0,0,0.3); margin-left: -15px; } .badoblog-css-mega-menu > ul > li > ul.normal-sub > li { width: 100%; } .badoblog-css-mega-menu > ul > li > ul.normal-sub > li a { border: 0; padding: 10px; width: 100%; color: #fffffb; font-size: 0.875em; } .badoblog-css-mega-menu > ul > li > ul.normal-sub > li a:hover { padding-left: 18px; } @media (max-width: 1100px) { .badoblog-css-mega-menu-container { padding: 0!important; /* important need for js script fixmenu */ } .badoblog-css-mega-menu > ul { padding: 30px; } } @media (min-width: 860px) { .badoblog-css-mega-menu-mobile { display: none; } .badoblog-css-mega-menu a.normal-sub-for-icon:after { font-family: 'icomoon'; content: "\e907"; margin-left: 5px; } .badoblog-css-mega-menu a.normal-sub-for-icon:only-child:after { content: ""; margin-left: 0; } } @media (max-width: 859px) { .badoblog-css-mega-menu-container { width: 100%; } .badoblog-css-mega-menu-mobile { display: block; padding: 30px 40px; text-transform: uppercase; } .badoblog-css-mega-menu-mobile:after { content: "\2630"; font-size: 2em; padding: 0; margin: 0; margin-bottom: -999px; float: right; position: relative; top: 50%; -webkit-transform: translateY(-25%); -ms-transform: translateY(-25%); transform: translateY(-25%); } .badoblog-css-mega-menu > ul { padding-top: 0; } .badoblog-css-mega-menu-dropdown-icon { position: relative; } .badoblog-css-mega-menu-dropdown-icon:before { display: block; font-family: 'icomoon'; content: "\e917"; font-size: 1.5em; cursor: pointer; padding: .5em 1em; transition: .5s; line-height: 1; } .badoblog-css-mega-menu-dropdown-icon:before, .badoblog-css-mega-menu-dropdown-icon:hover:before { color: #fffffb; } .badoblog-css-mega-menu-dropdown-icon.active:before { content: "\ea0f"; } .badoblog-css-mega-menu > ul { display: none; } .badoblog-css-mega-menu > ul > li { display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: 1fr 50px; align-items: center; width: 100%; float: none; margin-top: 15px; padding: 10px 0; border-radius: 25px; pointer-events: none; } .badoblog-css-mega-menu > ul > li > a { grid-row: 1; grid-column: 1; justify-self: start; line-height: 1; } nav.badoblog-css-mega-menu > ul > li > a { /* Strengthening the selector to prevent the settings from being applied */ padding-left: 25px; } .badoblog-css-mega-menu > ul > li:before { grid-row: 1; grid-column: 2; justify-self: end; pointer-events: all; } .badoblog-css-mega-menu > ul > li > ul { grid-row: 3; grid-column: 1 / span 2; position: relative; margin-top: 10px; } .badoblog-css-mega-menu > ul > li a { display: block; padding: 18px; pointer-events: all; } .badoblog-css-mega-menu > ul > li.active { padding-bottom: 0; } .badoblog-css-mega-menu > ul > li > ul.normal-sub { width: 100%; margin: 0; } .badoblog-css-mega-menu > ul > li > ul > li { float: none; width: 100%!important; } .badoblog-css-mega-menu > ul > li > ul > li:first-child { margin: 0; } .badoblog-css-mega-menu > ul > li > ul > li > ul { position: relative; } .badoblog-css-mega-menu > ul > li > ul > li > ul > li { float: none; } .badoblog-css-mega-menu .show-on-mobile { display: block; } .badoblog-css-mega-menu .show-on-mobile li:first-child { margin-top: 0; } } @media (max-width: 350px) { .badoblog-css-mega-menu > ul > li > ul { padding: 10px 15px; } .badoblog-css-mega-menu > ul > li > ul.normal-sub { padding: 10px 5px; } nav.badoblog-css-mega-menu > ul > li > a { /* Strengthening the selector to prevent the settings from being applied */ padding-left: 15px; } .badoblog-css-mega-menu-dropdown-icon:before { padding: 10px 15px; } } /*-------------------------------------------------------------- Theme - Category menu --------------------------------------------------------------*/ /*-------------------------------------------------------------- Theme - Breadcrumbs --------------------------------------------------------------*/ .badoblog-css-breadcrumbs { overflow-wrap: anywhere; padding: 20px 25px; margin-bottom: 30px; border-radius: 20px; color: #fffffb; } .badoblog-css-breadcrumbs a { color: #fffffb; } .badoblog-css-breadcrumbs a:hover { color: #dd9925; } /*-------------------------------------------------------------- Theme - Pagination --------------------------------------------------------------*/ /* Numbered pagination and buttons (Back and Forward) */ .nav-links { display: flex; flex-wrap: wrap; } .nav-links span, .nav-links a { display: flex; align-items: center; border-radius: 50px; margin: 0.2em; padding: 10px 20px; } .nav-links a { cursor: pointer; } /* Adding posts in categories (Show more) */ .badoblog-css-loadmore { display: flex; } .badoblog-css-loadmore-button { text-align: center; border-radius: 50px; cursor: pointer; padding: 14px 28px; font-size: 18px; } /* Standard WP (Back and Forward) */ .posts-navigation { clear: both; } /* Common style pagination */ .badoblog-css-loadmore-button, .posts-navigation .nav-links a, .badoblog-css-number-pagination .pagination { margin-bottom: 25px; line-height: 1.6; } /*-------------------------------------------------------------- Theme - Post navigation --------------------------------------------------------------*/ .badoblog-css-site-main .comment-navigation, .badoblog-css-site-main .post-navigation { margin: 0 0 1.5em; overflow: hidden; } .comment-navigation .nav-previous, .post-navigation .nav-previous { float: left; width: 50%; } .comment-navigation .nav-next, .post-navigation .nav-next { float: right; text-align: right; width: 50%; } /*-------------------------------------------------------------- Theme - Footer --------------------------------------------------------------*/ .badoblog-css-site-footer { padding: 40px 40px 0; border-radius: 25px; } .badoblog-css-site-footer-container { max-width: 1500px; margin: 0 auto; } .badoblog-css-site-footer, .badoblog-css-site-footer textarea, .badoblog-css-site-footer select, .badoblog-css-site-footer pre, .badoblog-css-site-footer input[type="text"], .badoblog-css-site-footer input[type="email"], .badoblog-css-site-footer input[type="url"], .badoblog-css-site-footer input[type="password"], .badoblog-css-site-footer input[type="search"], .badoblog-css-site-footer input[type="number"], .badoblog-css-site-footer input[type="tel"], .badoblog-css-site-footer input[type="range"], .badoblog-css-site-footer input[type="date"], .badoblog-css-site-footer input[type="month"], .badoblog-css-site-footer input[type="week"], .badoblog-css-site-footer input[type="time"], .badoblog-css-site-footer input[type="datetime"], .badoblog-css-site-footer input[type="datetime-local"], .badoblog-css-site-footer input[type="color"], .badoblog-css-site-footer .widget_search input[type="text"], .badoblog-css-site-footer .widget_block .wp-block-code, .badoblog-css-site-footer .widget_block .wp-block-verse, .badoblog-css-site-footer .chosen-container div.chosen-drop, .badoblog-css-site-footer .chosen-container-single a.chosen-single { background: #505050; } .badoblog-css-site-footer, .badoblog-css-site-footer li, .badoblog-css-site-footer h2, .badoblog-css-site-footer input[type="text"], .badoblog-css-site-footer input[type="email"], .badoblog-css-site-footer input[type="url"], .badoblog-css-site-footer input[type="password"], .badoblog-css-site-footer input[type="search"], .badoblog-css-site-footer input[type="number"], .badoblog-css-site-footer input[type="tel"], .badoblog-css-site-footer input[type="range"], .badoblog-css-site-footer input[type="date"], .badoblog-css-site-footer input[type="month"], .badoblog-css-site-footer input[type="week"], .badoblog-css-site-footer input[type="time"], .badoblog-css-site-footer input[type="datetime"], .badoblog-css-site-footer input[type="datetime-local"], .badoblog-css-site-footer input[type="color"], .badoblog-css-site-footer textarea, .site .badoblog-css-site-footer figcaption.wp-element-caption, .site .badoblog-css-site-footer .wp-block-calendar table caption, .site .badoblog-css-site-footer .wp-block-calendar table tbody, .site .badoblog-css-site-footer [class^="wp-block-"] figcaption, .site .badoblog-css-site-footer .blocks-gallery-caption, .badoblog-css-site-footer .chosen-container-single .chosen-single span { color: #fffffb; } .badoblog-css-site-footer a { color: #eecc91; } .badoblog-css-site-footer a:hover { color: #ffedba; } .badoblog-css-footer-menu { display: block; clear: both; float: left; width: auto; font-size: 14px; margin-bottom: 40px; } .badoblog-css-footer-menu ul { list-style: none; margin: 0; padding-left: 0; } .badoblog-css-footer-menu li { float: left; position: relative; } .badoblog-css-footer-menu a { display: block; padding: 0 10px; } .badoblog-css-footer-info { float: right; margin: 0 0 40px 10px; font-size: 14px; } /*-------------------------------------------------------------- Theme - Common Blocks (Gutenberg) --------------------------------------------------------------*/ /* Post separator */ hr.wp-block-separator { background: 0; } /* Tables */ .site .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: rgba(0,0,0,0.1); } .site .wp-block-table.is-style-stripes { border-bottom: 1px solid rgba(0,0,0,0.1); } /* Quote block */ .site blockquote cite { padding: 1em; } /* Pullquote block */ .site .wp-block-pullquote { padding: 0; } /* Label color in block widgets */ .site figcaption.wp-element-caption { color: #404040; } /* Block widgets - html code */ .site .wp-block-code { border: 0; border-radius: 0; } /* Block widgets - Audio */ .site .wp-block-audio audio { min-width: 200px; } /* Block widgets - Download file */ .site div.wp-block-file { font-size: 0.875em; } .site .wp-block-file__button { color: #1e73bb; } .site .wp-block-file__button:hover { color: #dd9925; } /* Block widgets - Calendar */ .site .wp-block-calendar { color: #404040; } .site .wp-block-calendar table caption, .site .wp-block-calendar table tbody { color: #404040; } /* Block widgets - Search */ .site input[type="search"] { border-radius: 20px 0 0 20px; border: 1px solid #4c65ad; } .site .wp-block-search__button { border: 0; border-radius: 0 20px 20px 0; padding: 0 15px; margin: 0; font-size: 16px; } .site .wp-block-search__button, .wp-block-search__input { line-height: 1.5; } /* Block widgets - Search - Support for disabling block styles */ .wp-block-search__inside-wrapper { display: flex; } /* Block widgets - Login */ .site .wp-block-loginout .login-remember label { display: flex; align-items: center; } /*-------------------------------------------------------------- Theme - Widgets (General) --------------------------------------------------------------*/ .badoblog-css-widget-area .widget:not(.widget_block), .badoblog-css-widget-area .widget_block.widget-block-box { margin-bottom: 30px; border-radius: 20px; } .widget .wp-block-heading, .widget .widget-title { display: block; font-size: 18px; font-weight: 400; line-height: 1.5; text-transform: uppercase; padding: 0; margin: 0 0 20px; border-radius: 20px; } .widget::after { content: ''; display: table; clear: both; } .widget:empty, .widget .widget-title:empty, .widget .wp-block-heading:empty { display: none; } .widget ul, .widget dl { padding-left: 25px; } /* Lists in Basic Widgets */ .ab-sup-widget-block .wp-block-page-list, .ab-sup-widget-block .wp-block-page-list ul, .ab-sup-widget-block ul.wp-block-latest-posts, .widget_recent_entries ul, .widget_pages ul, .widget_categories ul, .widget_archive ul, .widget_nav_menu ul { list-style: none; margin: 0; padding: 0; line-height: 2; } .widget_categories ul ul { padding-left: 20px; } /* Calendar Widget */ .widget .calendar_wrap, .widget .wp-block-calendar { max-width: 350px; } /* Authors widget */ .widget.widget_authors > ul > li > ul { padding-left: 15px; } /* Search Widget */ .widget .search-icon:before { padding: 20px 25px 18px 20px; } /* Tag cloud */ .widget_tag_cloud .tagcloud a { box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.05); border-radius: 15px; padding: 2px 10px 3px; } /*-------------------------------------------------------------- Theme - Block widgets (Gutenberg) --------------------------------------------------------------*/ /* Editing Lists in Block Widgets */ .widget_block.widget_recent_entries ul, .widget_block.widget_pages ul, .widget_block.widget_categories ul, .widget_block.widget_archive ul, .widget_block.widget_nav_menu ul, .widget_block.widget_recent_comments ol { padding: 0; margin: 0; } /* Initial background in block widgets */ .widget_block .wp-block-code, .widget_block .wp-block-verse { background: #ffffff; } /* Block widgets - Quote */ .widget_block .wp-block-quote { padding: 1px 15px; border-left: 0.25em solid #4c65ad; } /* Block widgets - recent posts */ .widget_block .wp-block-latest-posts__list { line-height: 1.5; } /* Current post comment */ .widget_block .wp-block-comments h2 { font-size: 1em; margin: 0; } /*-------------------------------------------------------------- Theme - Widgets (Footer) --------------------------------------------------------------*/ .badoblog-css-footer-widgets { display: flex; justify-content: space-between; margin-bottom: 40px; } .badoblog-css-footer-widgets:empty { display: none; } .badoblog-css-footer-widgets .widget { margin: 0 15px 25px; } [class^="badoblog-css-footer-widget-"] { max-width: 550px; } @media (max-width: 1150px) { .badoblog-css-footer-widgets { flex-wrap: wrap; justify-content: center; } .badoblog-css-footer-widgets .widget { margin: 0 50px 25px 50px; } } @media (max-width: 800px) { .badoblog-css-footer-widgets .widget { margin: 0 15px 25px 15px; } } @media (max-width: 400px) { .badoblog-css-footer-widgets .widget { margin: 0 0 25px 0; } } /*-------------------------------------------------------------- Theme - Widgets (DMCWZ) --------------------------------------------------------------*/ /* dmcwzaf_Post_Bulk_Widget */ div.dmcwzaf-css-widget-bulk-posts-1 { gap: 16px; } div.dmcwzaf-css-widget-bulk-posts-2 { gap: 18px; } div.dmcwzaf-css-widget-bulk-posts-3 { gap: 20px; } @container list-bulk (min-width: 320px) { div.dmcwzaf-css-widget-bulk-posts-1 { grid-template-columns: repeat(3, 1fr); } div.dmcwzaf-css-widget-bulk-posts-2 { grid-template-columns: repeat(2, 1fr); } div.dmcwzaf-css-widget-bulk-posts-3 { grid-template-columns: repeat(1, 1fr); } } @container list-bulk (min-width: 400px) { div.dmcwzaf-css-widget-bulk-posts-1 { grid-template-columns: repeat(auto-fill, minmax(0, 112px)); } div.dmcwzaf-css-widget-bulk-posts-2 { grid-template-columns: repeat(auto-fill, minmax(0, 182px)); } div.dmcwzaf-css-widget-bulk-posts-3 { grid-template-columns: repeat(auto-fill, minmax(0, 384px)); } } /* dmcwzaf_Post_List_Widget */ div.dmcwzaf-css-widget-list-post-right { padding-left: 15px; } /* dmcwzaf_Slide_Post_One_Widget */ div.dmcwzaf-css-widget-owl-slide-one-box a { max-width: 384px; } .dmcwzaf-css-widget-owl-slide-one-box img { border-radius: 22px; } /* dmcwzaf_Banner_Widget */ .dmcwzaf-css-widget-banner-box img, .dmcwzaf-css-widget-banner-box { border-radius: 22px; } div.dmcwzaf-css-widget-banner-box a { max-width: 400px; } div.dmcwzaf-css-widget-banner-content { padding: 30px; } div.dmcwzaf-css-widget-banner-box h2 { font-size: 28px; } div.dmcwzaf-css-widget-banner-button { border-radius: 30px; padding: 15px 40px; } @container banner (max-width: 340px) { div.dmcwzaf-css-widget-banner-content { padding: 25px; } div.dmcwzaf-css-widget-banner-box h2, div.dmcwzaf-css-widget-banner-button { margin: 15px auto; } div.dmcwzaf-css-widget-banner-box h2 { font-size: 22px; } div.dmcwzaf-css-widget-banner-button { padding: 12px 24px; } } @container banner (max-width: 290px) { div.dmcwzaf-css-widget-banner-content { padding: 20px; } div.dmcwzaf-css-widget-banner-box h2, div.dmcwzaf-css-widget-banner-button { margin: 10px auto; } div.dmcwzaf-css-widget-banner-box h2 { font-size: 16px; } div.dmcwzaf-css-widget-banner-button { padding: 8px 16px; } } /* dmcwzaf_Bio_Big_Widget */ div.dmcwzaf-css-widget-big-bio, div.dmcwzaf-css-widget-big-bio p, div.dmcwzaf-css-bio-design-3 .dmcwzaf-css-widget-big-bio-img, div.dmcwzaf-css-bio-design-3 .dmcwzaf-css-widget-big-bio-content { border-radius: 22px; } div.dmcwzaf-css-widget-big-bio-h { font-size: 30px; } div.dmcwzaf-css-widget-big-bio p { font-size: 18px; } @container big-bio (max-width: 290px) { div.dmcwzaf-css-widget-big-bio-h { font-size: 24px; } div.dmcwzaf-css-widget-big-bio p { font-size: 16px; } } /* dmcwzaf_Bio_Card_Widget */ div.dmcwzaf-css-widget-bio-card-vert, div.dmcwzaf-css-widget-bio-card-horiz { padding: 15px; border-radius: 22px; max-width: 400px; } div.dmcwzaf-css-widget-bio-card-left-img img { outline: 1px solid #eee; border-radius: 50%; } /*-------------------------------------------------------------- Theme - Content part --------------------------------------------------------------*/ #page { max-width: 1560px; margin: auto; padding: 0 30px 30px 30px; border-radius: 25px; } @media (max-width: 1577px) { #page { border-radius: 0; } } .badoblog-css-content-area, #secondary { background: #fdfcfc; border-radius: 25px; padding: 40px; } .badoblog-css-right-sidebar.badoblog-css-template #primary, #primary { width: 69.3%; float: left; } .badoblog-css-right-sidebar.badoblog-css-template #secondary, #secondary { width: 28.68%; float: right; } .badoblog-css-left-sidebar.badoblog-css-template #primary, .badoblog-css-left-sidebar #primary { float: right; } .badoblog-css-left-sidebar.badoblog-css-template #secondary, .badoblog-css-left-sidebar #secondary { float: left; } .badoblog-css-no-sidebar-center #primary, .badoblog-css-no-sidebar-full #primary { width: 100%; float: none; } .badoblog-css-left-sidebar.badoblog-css-template #primary { width: 69.3%; } .badoblog-css-left-sidebar.badoblog-css-template #secondary { width: 28.68%; } .badoblog-css-no-sidebar-center .badoblog-css-site-main, .badoblog-css-no-sidebar-center.badoblog-css-template .badoblog-css-site-main { width: 69.3%; margin: auto; } .badoblog-css-no-sidebar-full.badoblog-css-template .badoblog-css-site-main, .badoblog-css-right-sidebar.badoblog-css-template .badoblog-css-site-main, .badoblog-css-left-sidebar.badoblog-css-template .badoblog-css-site-main { width: 100%; } /* Full width website */ .badoblog-css-full-max-width #page, .badoblog-css-full-max-width .badoblog-css-mega-menu-container, .badoblog-css-full-max-width .badoblog-css-mega-menu, .badoblog-css-full-max-width .badoblog-css-site-footer-container { max-width: 100%; } @media (max-width: 1100px) { #secondary { margin-top: 30px; } #primary, #secondary, .badoblog-css-right-sidebar.badoblog-css-template #secondary, .badoblog-css-left-sidebar.badoblog-css-template #secondary, .badoblog-css-right-sidebar.badoblog-css-template #primary, .badoblog-css-left-sidebar.badoblog-css-template #primary, .badoblog-css-no-sidebar-center.badoblog-css-template #primary, .badoblog-css-no-sidebar-center .badoblog-css-site-main, .badoblog-css-no-sidebar-center.badoblog-css-template .badoblog-css-site-main { width: 100%; } } /*-------------------------------------------------------------- Theme - Blocks of posts in the category section --------------------------------------------------------------*/ /* Common */ .badoblog-css-cat-box { display: grid; align-items: start; justify-content: space-evenly; grid-template-columns: repeat(auto-fill, minmax(0, 464px)); grid-column-gap: 31.5px; } .badoblog-css-no-sidebar-full .badoblog-css-cat-box { grid-template-columns: repeat(auto-fill, minmax(0, 688px)); grid-column-gap: 44px; } .badoblog-css-cat-grid { overflow: hidden; margin-bottom: 30px; font-size: 16px; line-height: 1.5; border-radius: 25px; box-shadow: 0 0.1em 0.7em rgba(0,0,0,0.1); transition: all 0.5s; } .badoblog-css-entry-box > div:last-child:not(:first-child) { margin-bottom: 25px; } .badoblog-css-entry-header, .badoblog-css-entry-meta, .badoblog-css-entry-content, .badoblog-css-entry-more { margin: 15px 25px; } /* thumbnail */ .badoblog-css-cat-thumbnail, .badoblog-css-cat-thum-anime:before, .badoblog-css-cat-thumbnail img { transition: all .5s; border-radius: 20px; /* A smaller radius for the image so that the edges are smooth */ } .badoblog-css-cat-thum-anime img { width: auto; } /* title */ .badoblog-css-entry-title { font-size: 26px; font-weight: 400; margin: 0; } .badoblog-css-entry-title a { color: inherit; } .badoblog-css-entry-title a:hover { color: #dd9925; } /* content */ .badoblog-css-entry-content { padding: 0 1px; } .badoblog-css-entry-content:empty { display: none; } .badoblog-css-entry-content p { margin: 0; } /* Read more button */ .badoblog-css-entry-more { text-align: center; } /* media */ @media (max-width: 1580px) { .badoblog-css-cat-box, .badoblog-css-no-sidebar-full .badoblog-css-cat-box { grid-column-gap: 30px!important; } .badoblog-css-cat-box { grid-template-columns: repeat(auto-fill, minmax(0, 420px)); } .badoblog-css-no-sidebar-full .badoblog-css-cat-box { grid-template-columns: repeat(auto-fill, minmax(0, 630px)); } } @media (max-width: 1450px) { .badoblog-css-cat-box { grid-template-columns: repeat(auto-fill, minmax(0, 384px)); } .badoblog-css-no-sidebar-full .badoblog-css-cat-box { grid-template-columns: repeat(auto-fill, minmax(0, 574px)); } } @media (max-width: 1315px) { .badoblog-css-cat-box { grid-template-columns: repeat(auto-fill, minmax(0, 340px)); } .badoblog-css-no-sidebar-full .badoblog-css-cat-box { grid-template-columns: repeat(auto-fill, minmax(0, 510px)); } } @media (max-width: 1180px) { .badoblog-css-cat-box { grid-template-columns: repeat(auto-fill, minmax(0, 300px)); } .badoblog-css-no-sidebar-full .badoblog-css-cat-box { grid-template-columns: repeat(auto-fill, minmax(0, 464px)); } } @media (max-width: 1088px) { .badoblog-css-cat-box, .badoblog-css-no-sidebar-full .badoblog-css-cat-box { grid-template-columns: repeat(auto-fill, minmax(0, 420px)); } } @media (max-width: 1000px) { .badoblog-css-cat-box, .badoblog-css-no-sidebar-full .badoblog-css-cat-box { grid-template-columns: repeat(auto-fill, minmax(0, 380px)); } } @media (max-width: 878px) { .badoblog-css-cat-box, .badoblog-css-no-sidebar-full .badoblog-css-cat-box { grid-template-columns: repeat(auto-fill, minmax(0, 340px)); } } @media (max-width: 798px) { .badoblog-css-cat-box, .badoblog-css-no-sidebar-full .badoblog-css-cat-box { grid-template-columns: repeat(auto-fill, minmax(0, 300px)); } .badoblog-css-entry-title { font-size: 20px; } .badoblog-css-entry-content { font-size: 16px; } } @media (max-width: 718px) { .badoblog-css-cat-box, .badoblog-css-no-sidebar-full .badoblog-css-cat-box { grid-template-columns: repeat(auto-fill, minmax(0, 268px)); } } @media (max-width: 625px) { .badoblog-css-cat-box, .badoblog-css-no-sidebar-full .badoblog-css-cat-box { grid-template-columns: repeat(auto-fill, minmax(0, 560px)); } .badoblog-css-entry-title { font-size: 24px; } } @media (max-width: 700px) { .badoblog-css-cat-box, .badoblog-css-no-sidebar-full .badoblog-css-cat-box { grid-column-gap: 20px!important; } } @media (max-width: 350px) { .badoblog-css-entry-header, .badoblog-css-entry-meta, .badoblog-css-entry-content, .badoblog-css-entry-more { margin-left: 15px; margin-right: 15px; } .badoblog-css-entry-title { font-size: 16px!important; } .badoblog-css-entry-content { font-size: 12px!important; } } /*-------------------------------------------------------------- Theme - Meta tags (meta boxs) for post blocks in categories --------------------------------------------------------------*/ .badoblog-css-entry-meta:has(> .badoblog-css-cat-meta-boxs:empty) { display: none; } .badoblog-css-cat-meta-boxs { font-family: "Play"; display: flex; flex-wrap: wrap; gap: 7px; margin: 2px; } .badoblog-css-cat-meta-box { display: flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 10px; } .badoblog-css-cat-meta-label-data { text-align: center; line-height: 1.5; } .badoblog-css-cat-meta-label { text-transform: uppercase; font-size: 10px; } .badoblog-css-cat-meta-data, .badoblog-css-cat-meta-data a { font-size: 12px; line-height: 1.2; } /* Icons */ .icon-autor-cat-meta::before { content: "\e915"; } .icon-calendar-cat-meta::before { content: "\f073"; } .icon-spinner-cat-meta::before { content: "\e984"; } .icon-bubble-cat-meta::before { content: "\e96e"; } .icon-eye-cat-meta::before { content: "\e9ce"; } .icon-autor-cat-meta::before, .icon-calendar-cat-meta::before, .icon-spinner-cat-meta::before, .icon-bubble-cat-meta::before, .icon-eye-cat-meta::before { text-rendering: auto; } .icon-autor-cat-meta::before, .icon-eye-cat-meta::before { font-size: 18px; } .icon-calendar-cat-meta::before, .icon-spinner-cat-meta::before, .icon-bubble-cat-meta::before, .icon-clock-cat-meta::before { font-size: 16px; } @media (max-width: 700px) { .badoblog-css-cat-meta-box { padding: 10px 14px; } .icon-autor-cat-meta::before, .icon-eye-cat-meta::before { font-size: 18px; } .icon-calendar-cat-meta::before, .icon-spinner-cat-meta::before, .icon-bubble-cat-meta::before, .icon-clock-cat-meta::before { font-size: 16px; } .badoblog-css-cat-meta-data, .badoblog-css-cat-meta-data a { font-size: 12px; } .badoblog-css-cat-meta-label { font-size: 11px; } .badoblog-css-cat-footer-date-span { padding: 10px 20px; } } /*-------------------------------------------------------------- Theme - Meta tags (taxonomy cat) for post blocks in categories --------------------------------------------------------------*/ /* Common */ .badoblog-css-cat-meta-taxonomy-cat { display: flex; align-items: center; margin: 25px 25px 15px; } .badoblog-css-cat-meta-tax-cat-ul { display: flex; flex-wrap: wrap; gap: 10px; } .badoblog-css-cat-meta-tax-cat-ul a { font-family: "Open Sans", "Play", sans-serif; /* Fonts with stable height for buttons */ line-height: 1; /* Fixing the height for the buttons */ font-size: 16px; padding: 12px 24px; border-radius: 15px; } .badoblog-css-cat-meta-tax-cat a, .badoblog-css-cat-meta-tax-cat a:hover { color: #fffffe; } .badoblog-css-cat-meta-tax-cat a:hover { box-shadow: 0 0.1em 0.4em rgba(0, 0, 0, 0.3); } /* Taxonomy in header */ .badoblog-css-cat-meta-tax-cat a { display: flex; align-items: center; background: #4c65ad; } /* Taxonomy in thumb */ .badoblog-css-cat-thumbnail-box { overflow: hidden; /* for firefox */ } .badoblog-css-cat-thumbnail { position: relative; overflow: hidden; /* Overflow insurance in case the script doesnt work */ display: table; /* Necessary if the image is smaller than the block */ margin: 0 auto; } .badoblog-css-cat-thumbnail .badoblog-css-cat-meta-taxonomy-cat { position: absolute; bottom: 0; z-index: 9; margin: 0; } .badoblog-css-cat-thumbnail .badoblog-css-cat-meta-tax-cat { margin: 20px; } .badoblog-css-cat-thumbnail .badoblog-css-cat-meta-tax-cat a, .badoblog-css-cat-thumbnail .badoblog-css-cat-meta-tax-cat a:hover { background: rgba(0,0,0,0.8); color: #fffffe; } .badoblog-css-cat-thumbnail .badoblog-css-cat-meta-tax-cat-ul.tax-cat a:before { display: none; } @media (max-width: 700px) { .badoblog-css-cat-meta-taxonomy-cat { font-size: 16px; } .badoblog-css-cat-meta-tax-cat a { padding: 10px 20px; } .badoblog-css-cat-meta-tax-cat-ul { gap: 5px; } .badoblog-css-cat-meta-tax-cat .badoblog-css-cat-meta-tax-cat-ul a { padding: 8px 16px; font-size: 14px; } .badoblog-css-cat-thumbnail .badoblog-css-cat-meta-tax-cat { margin: 10px; } } @media (max-width: 350px) { .badoblog-css-cat-meta-taxonomy-cat { margin-left: 15px; margin-right: 15px; } } /*-------------------------------------------------------------- Theme - Meta tags (taxonomy tag) for post blocks in categories --------------------------------------------------------------*/ .badoblog-css-cat-meta-taxonomy-tag { display: flex; align-items: center; margin: 20px 25px 15px; } .badoblog-css-cat-meta-tax-tag-ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 2px; } .badoblog-css-cat-meta-tax-tag-ul a { font-family: "Open Sans", "Play", sans-serif; /* Fonts with stable height for buttons */ line-height: 1; /* Fixing the height for the buttons */ font-size: 16px; } .badoblog-css-cat-meta-tax-tag-ul a:before { font-family: 'icomoon'; text-rendering: auto; padding-right: 6px; content: "\e935"; font-size: 13px; } @media (max-width: 350px) { .badoblog-css-cat-meta-taxonomy-tag { margin-left: 15px; margin-right: 15px; } } /*-------------------------------------------------------------- Theme - Posts and pages --------------------------------------------------------------*/ .badoblog-css-page-header-default, .badoblog-css-page-header, .badoblog-css-post-header, .badoblog-css-mod-pp-header { padding: 0 15px; margin-bottom: 20px; } .badoblog-css-post-thumbnail, .badoblog-css-page-thumbnail { margin-bottom: 25px; margin-left: auto; margin-right: auto; } .badoblog-css-post-thumbnail img, .badoblog-css-page-thumbnail img { border-radius: 20px; } .badoblog-css-post-title, .badoblog-css-page-title { margin: .75em 0; } .badoblog-css-post-content, .badoblog-css-page-content, .badoblog-css-mod-pp-content { padding: 0 15px 15px; margin: 0; overflow: hidden; } .badoblog-css-post-content li, .badoblog-css-page-content li, .badoblog-css-mod-pp-content li { line-height: 2; } .badoblog-css-mod-pp-content > blockquote { border-radius: 18px; } .badoblog-css-mod-pp-content > blockquote p { margin: 1em; } .badoblog-css-mod-pp-content > h2, .badoblog-css-mod-pp-content > h2:before, .badoblog-css-mod-pp-content > h3, .badoblog-css-mod-pp-content > h3:before, .badoblog-css-mod-pp-content > h4, .badoblog-css-mod-pp-content > h4:before, .badoblog-css-mod-pp-content > h5, .badoblog-css-mod-pp-content > h5:before, .badoblog-css-mod-pp-content > h6, .badoblog-css-mod-pp-content > h6:before { border-radius: 15px; } .badoblog-css-post-content h2:before, .badoblog-css-post-content h3:before, .badoblog-css-post-content h4:before, .badoblog-css-post-content h5:before, .badoblog-css-post-content h6:before, .badoblog-css-page-content h2:before, .badoblog-css-page-content h3:before, .badoblog-css-page-content h4:before, .badoblog-css-page-content h5:before, .badoblog-css-page-content h6:before, .badoblog-css-mod-pp-content h2:before, .badoblog-css-mod-pp-content h3:before, .badoblog-css-mod-pp-content h4:before, .badoblog-css-mod-pp-content h5:before, .badoblog-css-mod-pp-content h6:before { white-space: pre; } .badoblog-css-post-footer, .badoblog-css-page-footer { padding: 0 15px; } .post-password-form input { margin-bottom: 10px; } .badoblog-css-post-edit-link { margin: 15px; } /*-------------------------------------------------------------- Theme - Meta tags for posts --------------------------------------------------------------*/ .badoblog-css-post-meta-boxs { display: flex; flex-wrap: wrap; } .badoblog-css-post-meta-box { display: flex; align-items: center; margin: 8px; padding: 14px 16px; box-shadow: 0 0.1em 0.5em rgba(0,0,0,0.1); border-radius: 18px; } .badoblog-css-post-meta-label-data { text-align: center; line-height: normal; } .badoblog-css-post-meta-label { text-transform: uppercase; font-size: 12px; } .badoblog-css-post-meta-data, .badoblog-css-post-meta-data a { font-size: 16px; } /* Icons for post meta tags */ .icon-autor-post-meta::before { content: "\e915"; font-size: 38px; } .icon-calendar-post-meta::before { content: "\f073"; } .icon-spinner-post-meta::before { content: "\e984"; } .icon-bubble-post-meta::before { content: "\e96e"; } .icon-clock-post-meta::before { content: "\e94e"; } .icon-eye-post-meta::before { content: "\e9ce"; font-size: 36px; } .icon-autor-post-meta::before, .icon-calendar-post-meta::before, .icon-spinner-post-meta::before, .icon-bubble-post-meta::before, .icon-clock-post-meta::before, .icon-eye-post-meta::before { text-rendering: auto; margin-right: 8px; } .icon-calendar-post-meta::before, .icon-spinner-post-meta::before, .icon-bubble-post-meta::before, .icon-clock-post-meta::before { font-size: 34px; } .icon-autor-post-meta::before, .icon-calendar-post-meta::before, .icon-spinner-post-meta::before, .icon-bubble-post-meta::before, .icon-clock-post-meta::before, .icon-eye-post-meta::before { color: #4c65ad; } /* Meta tags taxonomy */ /* Common */ .badoblog-css-post-meta-box-taxonomy { display: flex; align-items: center; margin: 15px; font-size: 18px; } .badoblog-css-post-meta-data-tax-ul { display: flex; flex-wrap: wrap; gap: 15px; } .badoblog-css-post-meta-data-tax-ul a { font-family: "Open Sans", "Play", sans-serif; /* Fonts with stable height for buttons */ line-height: 1; /* Fixing the height for the buttons */ padding: 12px 24px; border-radius: 15px; } .badoblog-css-post-tax-cat .badoblog-css-post-meta-data-tax-ul a:before { font-family: 'icomoon'; text-rendering: auto; content: "\f115"; font-size: 14px; padding-right: 8px; } .badoblog-css-post-tax-tag .badoblog-css-post-meta-data-tax-ul a:before { font-family: "Open Sans", "Play", sans-serif; content: "#"; font-size: 17px; padding-right: 5px; } .badoblog-css-post-meta-data-tax a, .badoblog-css-post-meta-data-tax a:hover { color: #fffffe; } .badoblog-css-post-meta-data-tax a:hover { box-shadow: 0 0.1em 0.4em rgba(0, 0, 0, 0.3); } /* if label on */ .label-taxonomy .badoblog-css-post-meta-data-tax { display: flex; flex-wrap: wrap; align-items: baseline; gap: 15px; } /* header and footer */ .badoblog-css-post-meta-data-tax a { background: #4c65ad; } /* thumb */ .badoblog-css-post-thumbnail { position: relative; overflow: hidden; /* Overflow insurance in case the script doesnt work */ display: table; /* Necessary if the image is smaller than the block */ } .badoblog-css-post-thumbnail .badoblog-css-post-meta-box-taxonomy { position: absolute; bottom: 0; z-index: 9; margin: 0; } .badoblog-css-post-thumbnail .badoblog-css-post-meta-data-tax { margin: 30px; } .badoblog-css-post-thumbnail .label-taxonomy .badoblog-css-post-meta-data-tax { padding: 15px 15px 15px 25px; border-radius: 20px; } .badoblog-css-post-thumbnail .badoblog-css-post-meta-data-tax a, .badoblog-css-post-thumbnail .label-taxonomy .badoblog-css-post-meta-data-tax { background: rgba(0,0,0,0.7); color: #fffffe; } .badoblog-css-post-thumbnail .label-taxonomy .badoblog-css-post-meta-data-tax a { background: rgba(0,0,0,0.5); padding: 12px 24px; } .badoblog-css-post-thumbnail .badoblog-css-post-meta-data-tax a:hover, .badoblog-css-post-thumbnail .label-taxonomy .badoblog-css-post-meta-data-tax a:hover { background: rgba(0,0,0,0.8); color: #fffffe; } .badoblog-css-post-thumbnail .badoblog-css-post-meta-data-tax-ul.tax-cat a:before { display: none; } @media (max-width: 700px) { .badoblog-css-post-meta-box { padding: 10px 14px; } .icon-autor-post-meta::before, .icon-eye-post-meta::before { font-size: 18px; } .badoblog-css-post-meta-box-taxonomy, .icon-calendar-post-meta::before, .icon-spinner-post-meta::before, .icon-bubble-post-meta::before, .icon-clock-post-meta::before { font-size: 16px; } .icon-cat-post-meta::before, .icon-tag-post-meta::before { font-size: 16px; line-height: 1.4; } .badoblog-css-post-meta-data-tax a { padding: 10px 20px; } .badoblog-css-post-thumbnail .label-taxonomy .badoblog-css-post-meta-data-tax { padding: 10px 10px 10px 20px; } .badoblog-css-post-meta-data, .badoblog-css-post-meta-data a { font-size: 12px; } .badoblog-css-post-meta-label { font-size: 11px; } .badoblog-css-post-footer-date-span { padding: 10px 20px; } .badoblog-css-post-meta-data-tax-ul { gap: 5px; } .badoblog-css-post-meta-data-tax .badoblog-css-post-meta-data-tax-ul a { padding: 8px 16px; } .badoblog-css-post-thumbnail .badoblog-css-post-meta-box-taxonomy { font-size: 14px; } .badoblog-css-post-thumbnail .badoblog-css-post-meta-data-tax { margin: 15px; } } @media (max-width: 500px) { .badoblog-css-post-meta-box-taxonomy { margin-left: 0; margin-right: 0; } .badoblog-css-post-thumbnail .badoblog-css-post-meta-box-taxonomy { font-size: 12px; } .badoblog-css-post-thumbnail .badoblog-css-post-meta-data-tax a { padding: 6px 12px; } } @media (max-width: 350px) { .badoblog-css-post-thumbnail .badoblog-css-post-meta-box-taxonomy { position: static; } } /* footer date */ .badoblog-css-post-footer-date-span { display: inline-block; margin: 15px; padding: 20px 30px; box-shadow: 0 0.1em 0.5em rgba(0, 0, 0, 0.1); border-radius: 15px; line-height: 1.5; } .badoblog-css-post-footer-date-box { display: flex; align-items: center; gap: 10px; } .badoblog-css-post-footer-date-label { font-size: 12px; text-transform: uppercase; } .badoblog-css-post-footer-date-out { font-size: 16px; } /*-------------------------------------------------------------- Theme - Author block in posts --------------------------------------------------------------*/ .badoblog-css-bio-post-box { margin: 20px 15px; padding: 30px; border-radius: 20px; box-shadow: 0 0.1em 0.5em rgba(0, 0, 0, 0.1); } .badoblog-css-bio-post-user { display: flex; justify-content: flex-start; align-items: center; gap: 5px; } .badoblog-css-bio-post-box-left { min-width: 120px; width: 15%; float: left; } .badoblog-css-bio-post-box-left-img { display: flex; justify-content: center; } .badoblog-css-bio-post-box-left-img img { border-radius: 100px; } .badoblog-css-bio-post-box-right { display: flex; flex-direction: column; flex-wrap: wrap; align-content: space-between; justify-content: center; gap: 10px; float: right; padding: 0 15px; width: 85%; } .badoblog-css-bio-post-author-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 15px; width: 100%; } .badoblog-css-bio-post-author-label { font-size: 10px; text-transform: uppercase; font-style: normal; } .badoblog-css-bio-post-author-name { font-family: Arial, sans-serif; font-size: 1.5em; line-height: 1.2; font-weight: 600; } .badoblog-css-bio-post-author-header .dmcwzsbadoall-css-bio-post-box-left-soc a { width: 36px; height: 36px; } .badoblog-css-bio-post-author-header .dmcwzsbadoall-css-bio-post-box-left-soc { margin: 0; } .badoblog-css-bio-post-author-des { font-size: 0.9em; } .badoblog-css-bio-post-box h2 { text-align: center; text-transform: uppercase; line-height: 1.5; font-size: 14px; font-weight: 500; background: linear-gradient(90deg, #000 -200%, #505062 85%, rgba(0, 0, 0, 0) 200%); color: #fff; padding: 10px; margin: 20px 15px 0; border-radius: 15px; } .badoblog-css-bio-post-autor-posts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 15px; gap: 16px; } .badoblog-css-bio-post-autor-posts-child { width: 112px; border-radius: 15px; text-align: center; } .badoblog-css-bio-post-autor-posts-child:hover { box-shadow: 0 0.1em 0.4em rgba(0, 0, 0, 0.5); } @media (max-width: 600px) { .badoblog-css-bio-post-box { padding-left: 5px; padding-right: 5px; } .badoblog-css-bio-post-user { flex-direction: column; } .badoblog-css-bio-post-box-left, .badoblog-css-bio-post-box-right { width: 100%; } .badoblog-css-bio-post-box-right { padding: 10px 30px 0 30px; } } /*-------------------------------------------------------------- Theme - Links to the next and previous post --------------------------------------------------------------*/ .badoblog-css-np-box { display: flex; justify-content: space-between; margin: 30px 0; gap: 30px; line-height: 1.5; } .badoblog-css-np-post-container { width: 50%; max-width: 500px; } .badoblog-css-np-post { background: #505062; color: #ffffff; border-radius: 20px; padding: 25px; } .badoblog-css-np-post:hover { box-shadow: 0 0.1em 0.4em rgba(0, 0, 0, 0.5); } .badoblog-css-previous-post-box, .badoblog-css-next-post-box { display: flex; margin-top: 20px; padding-top: 5px; } .badoblog-css-previous-post-box { justify-content: flex-start; } .badoblog-css-next-post-box { flex-direction: row-reverse; } .badoblog-css-np-post-img { min-width: 112px; width: 112px; margin-top: 5px; } .badoblog-css-next-post-box .badoblog-css-np-post-title { padding-right: 15px; text-align: right; } .badoblog-css-previous-post-box .badoblog-css-np-post-title { padding-left: 15px; } .badoblog-css-previous-post-label, .badoblog-css-next-post-label { font-size: 16px; line-height: 1.2; } .badoblog-css-previous-post-label span, .badoblog-css-next-post-label span { border-bottom: 1px solid; padding-bottom: 10px; } .badoblog-css-next-post-label { text-align: right; } @media (max-width: 800px) { .badoblog-css-previous-post-box, .badoblog-css-next-post-box { flex-direction: column; align-items: center; text-align: center; padding-top: 0; } .badoblog-css-np-post-img { margin-bottom: 15px; } .badoblog-css-previous-post-label, .badoblog-css-next-post-label, .badoblog-css-next-post-box .badoblog-css-np-post-title { text-align: center; } .badoblog-css-previous-post-label span, .badoblog-css-next-post-label span { border-bottom: 0; } .badoblog-css-previous-post-box .badoblog-css-np-post-title, .badoblog-css-next-post-box .badoblog-css-np-post-title { padding: 0; } .badoblog-css-np-box { gap: 20px; } } @media (max-width: 600px) { .badoblog-css-np-post-container { width: 100%; } .badoblog-css-np-box { flex-direction: column; align-items: center; } } /*-------------------------------------------------------------- Theme - Similar posts --------------------------------------------------------------*/ .badoblog-css-related-box { display: grid; align-items: start; justify-content: space-evenly; grid-template-columns: repeat(auto-fill, minmax(0, 208px)); grid-column-gap: 40px; } .badoblog-css-no-sidebar-full .badoblog-css-related-box { grid-template-columns: repeat(auto-fill, minmax(0, 320px)); grid-column-gap: 42px; } h2.badoblog-css-related-post-title, .badoblog-css-related-post-title a { font-size: 16px; } .badoblog-css-related-post-box { border-radius: 20px; margin-bottom: 25px; } .badoblog-css-related-thumbnail { overflow: hidden; border-radius: 20px; } .badoblog-css-related-thumbnail img { border-radius: 0; } .badoblog-css-related-post-header { padding: 15px; } .badoblog-css-related-post-title { margin: 0; } .badoblog-css-related-post-title a { color: inherit; } /* Title highlighting when hovering over a block */ .badoblog-css-related-post-box:hover .badoblog-css-related-post-title { color: #dd9925; } .badoblog-css-related-thumbnail img:hover, .badoblog-css-related-post-box:hover .badoblog-css-related-thumbnail img { -webkit-transform: scale(1.07); -ms-transform: scale(1.07); transform: scale(1.07); } .badoblog-css-related-thumbnail img { width: auto; } h2.badoblog-css-related-post-title { font-weight: 400; } @media (max-width: 1580px) { .badoblog-css-related-box, .badoblog-css-no-sidebar-full .badoblog-css-related-box { grid-column-gap: 30px!important; } } @media (max-width: 1528px) { .badoblog-css-related-box { grid-template-columns: repeat(auto-fill, minmax(0, 256px)); } .badoblog-css-no-sidebar-full .badoblog-css-related-box { grid-template-columns: repeat(auto-fill, minmax(0, 272px)); } } @media (max-width: 1360px) { .badoblog-css-related-box { grid-template-columns: repeat(auto-fill, minmax(0, 220px)); } } @media (max-width: 1315px) { .badoblog-css-no-sidebar-full .badoblog-css-related-box { grid-template-columns: repeat(auto-fill, minmax(0, 245px)); } } @media (max-width: 1200px) { .badoblog-css-related-box, .badoblog-css-no-sidebar-full .badoblog-css-related-box { grid-template-columns: repeat(auto-fill, minmax(0, 300px)); } } @media (max-width: 1088px) { .badoblog-css-related-box, .badoblog-css-no-sidebar-full .badoblog-css-related-box { grid-template-columns: repeat(auto-fill, minmax(0, 256px)); } } @media (max-width: 915px) { .badoblog-css-related-box, .badoblog-css-no-sidebar-full .badoblog-css-related-box { grid-template-columns: repeat(auto-fill, minmax(0, 220px)); } } @media (max-width: 808px) { .badoblog-css-related-box, .badoblog-css-no-sidebar-full .badoblog-css-related-box { grid-template-columns: repeat(auto-fill, minmax(0, 300px)); } } @media (max-width: 718px) { .badoblog-css-related-box, .badoblog-css-no-sidebar-full .badoblog-css-related-box { grid-template-columns: repeat(auto-fill, minmax(0, 256px)); } } @media (max-width: 600px) { .badoblog-css-related-box, .badoblog-css-no-sidebar-full .badoblog-css-related-box { grid-template-columns: repeat(auto-fill, minmax(0, 560px)); } } @media (max-width: 700px) { .badoblog-css-related-box, .badoblog-css-no-sidebar-full .badoblog-css-related-box { grid-column-gap: 20px!important; } } @media (max-width: 350px) { .badoblog-css-related-post-header { padding-left: 10px; padding-right: 10px; } } /*-------------------------------------------------------------- Theme - Pages 404 --------------------------------------------------------------*/ .widget_404_box { display: flex; flex-wrap: wrap; justify-content: space-evenly; } .widget_404_chield { width: 40%; } @media (max-width: 650px) { .widget_404_chield { width: 100%; } } /*-------------------------------------------------------------- Theme - Site map --------------------------------------------------------------*/ /* Site map - Categories */ .badoblog-css-sitemap-cat { margin: 25px; } .badoblog-css-sitemap-cat ul { padding-left: 22px; } .badoblog-css-sitemap-cat li { line-height: 2; min-width: 200px; width: 40%; float: left; margin-right: 10%; list-style: none; } .badoblog-css-sitemap-cat li:before { font-family: "icomoon"; text-rendering: auto; content: "\f114"; margin-right: 8px; color: #4c65ad; } /* Site map - Posts */ .badoblog-css-sitemap-post { margin: 25px; } .badoblog-css-sitemap-post li { list-style: disc; line-height: 2; } .badoblog-css-sitemap-pagi { display: flex; flex-wrap: wrap; margin-top: 15px; line-height: 1.6; } .badoblog-css-sitemap-pagi span, .badoblog-css-sitemap-pagi a { display: flex; align-items: center; border-radius: 50px; margin: 0.2em; padding: 10px 20px; } .badoblog-css-sitemap-pagi a { background: #4c65ad; color: #fffffc; cursor: pointer; } .badoblog-css-sitemap-pagi a:hover { box-shadow: 0 0.1em 0.4em rgba(0, 0, 0, 0.5); color: #fffffc; } .badoblog-css-sitemap-pagi span.current { border: 1px solid #4c65ad; } /* Site map - Pages */ .badoblog-css-sitemap-page { margin: 25px; } .badoblog-css-sitemap-page li { list-style: disc; line-height: 2; min-width: 200px; width: 40%; float: left; margin-right: 10%; } /*-------------------------------------------------------------- Theme - Block editor (Gutenberg) --------------------------------------------------------------*/ /* General */ .badoblog-css-mod-pp-content > div, .badoblog-css-mod-pp-content > nav, .badoblog-css-mod-pp-content > form { margin-bottom: 1.5em; } /* Quote block */ .badoblog-css-mod-pp-content .wp-block-quote { margin: 1.5em; } /* Widget - Reviews */ .badoblog-css-mod-pp-content .wc-block-review-list { padding-left: 25px; } .badoblog-css-mod-pp-content .wc-block-components-review-list-item__item { list-style: none; } /* Widget - Comments */ .badoblog-css-mod-pp-content ol.wp-block-comment-template li:before, .badoblog-css-mod-pp-content ol li.wp-block-latest-comments__comment:before { content: none; } .badoblog-css-mod-pp-content .wp-block-comment-template li { list-style: none; } /* Widget - Post lists */ .badoblog-css-mod-pp-content .wp-block-rss, .badoblog-css-mod-pp-content .wp-block-latest-posts.wp-block-latest-posts__list { padding-left: 25px; } .badoblog-css-mod-pp-content .wp-block-post-template { padding-left: 0; } .badoblog-css-mod-pp-content .wp-block-post-template li, .badoblog-css-mod-pp-content .wp-block-rss li, .badoblog-css-mod-pp-content .wp-block-latest-posts li { list-style-type: none; } /* Comment forms */ .badoblog-css-mod-pp-content .wp-block-post-comments-form input:not([type=submit]):not([type=checkbox]) { padding: 8px; border: 1px solid #4c65ad; } .badoblog-css-mod-pp-content .wp-block-post-comments-form textarea { border: 1px solid #4c65ad; } .badoblog-css-mod-pp-content .wp-block-post-comments-form label { margin-top: 0.35em; } /* Blocks - Insert */ .badoblog-css-mod-pp-content .wp-block-embed blockquote::before { content: none; } /*-------------------------------------------------------------- Theme - Main page --------------------------------------------------------------*/ /* General styles for sections on the main page */ .badoblog-css-home-section-label { font-size: 20px; margin: 0 15px 15px; } /*-------------------------------------------------------------- Sliders --------------------------------------------------------------*/ /* Sliders - Common styles */ /* Remove the slider navigation block with all padding */ .owl-dots { display: none; } /* Icon color in slider navigation buttons */ .owl-prev span, .owl-next span { color: #fffffe; } /*-------------------------------------------------------------- Scroll up --------------------------------------------------------------*/ .badoblog-css-scrollup { display: none; width: 64px; height: 64px; opacity: 0.4; position: fixed; bottom: 20px; right: 30px; text-indent: -9999px; background-image: url(img/scroll/circle/brace.png); background-repeat: no-repeat; background-size: 100%; } .badoblog-css-scrollup:hover { opacity: 1; transition-duration: 0.6s; } /*========================================================================================== Mobile css ==========================================================================================*/ /* Common Mobile Styles */ @media (max-width: 1400px) { .badoblog-css-top-bar { padding: 10px 30px; } .badoblog-css-site-branding { padding: 0 30px 30px 30px; } .badoblog-css-site-brand-top { padding-top: 30px; } .badoblog-css-site-brand-bottom { column-gap: 30px; } .badoblog-css-site-brand-bottom-box, .badoblog-css-site-brand-banner, .badoblog-css-site-brand-soc { margin-top: 30px; } .badoblog-css-mega-menu-container, .badoblog-css-mega-menu-mobile, .badoblog-css-content-area, #secondary { padding: 30px; } .badoblog-css-site-footer { padding: 30px 30px 0; } .badoblog-css-footer-widgets, .badoblog-css-footer-menu, .badoblog-css-footer-info { margin-bottom: 30px; } } @media (max-width: 1250px) { #page { padding: 0 25px 25px 25px; } .badoblog-css-top-bar, .badoblog-css-site-branding, .badoblog-css-mega-menu-box, #content, .badoblog-css-site-footer { margin-top: 25px; } } @media (max-width: 1100px) { #secondary { margin-top: 25px; } } @media (max-width: 960px) { #page { padding: 0 5px 20px 5px; } .badoblog-css-top-bar, .badoblog-css-site-branding, .badoblog-css-mega-menu-box, #content, #secondary, .badoblog-css-site-footer { margin-top: 20px; } } @media (max-width: 700px) { .badoblog-css-top-bar { padding: 10px 20px; } .badoblog-css-site-branding, .badoblog-css-mega-menu > ul { padding: 0 20px 20px 20px; } .badoblog-css-site-brand-top { padding-top: 20px; } .badoblog-css-site-brand-bottom-box, .badoblog-css-site-brand-banner, .badoblog-css-site-brand-soc { margin-top: 20px; } .badoblog-css-top-search-modal-inner, .badoblog-css-mega-menu-container, .badoblog-css-mega-menu-mobile, .badoblog-css-content-area, #secondary { padding: 20px; } .badoblog-css-site-footer { padding: 20px 20px 0; } .badoblog-css-footer-widgets, .badoblog-css-footer-menu, .badoblog-css-footer-info { margin-bottom: 20px; } } @media (max-width: 500px) { /* Post and page */ .badoblog-css-page-header-default, .badoblog-css-page-header, .badoblog-css-post-header, .badoblog-css-mod-pp-header, .badoblog-css-post-content, .badoblog-css-page-content, .badoblog-css-mod-pp-content, .badoblog-css-post-footer, .badoblog-css-page-footer, .badoblog-css-bio-post-box, .badoblog-css-post-content > blockquote, .badoblog-css-page-content > blockquote, .badoblog-css-mod-pp-content > blockquote, #respond { padding-left: 0; padding-right: 0; } .badoblog-css-bio-post-box, .badoblog-css-home-section-label { margin-left: 0; margin-right: 0; } } @media (max-width: 450px) { .badoblog-css-top-search-modal-inner, .badoblog-css-top-bar, .badoblog-css-mega-menu-container, .badoblog-css-content-area, #secondary { padding: 15px; } .badoblog-css-mega-menu-mobile { padding: 20px 15px; } .badoblog-css-site-branding, .badoblog-css-mega-menu > ul { padding: 0 15px 15px 15px; } .badoblog-css-site-footer { padding: 15px 15px 0; } #page { padding: 0 0 15px 0; } .badoblog-css-site-brand-top { padding-top: 15px; } .badoblog-css-site-brand-bottom-box, .badoblog-css-site-brand-banner, .badoblog-css-site-brand-soc, .badoblog-css-top-bar, .badoblog-css-site-branding, .badoblog-css-mega-menu-box, #content, #secondary, .badoblog-css-site-footer { margin-top: 15px; } .badoblog-css-footer-widgets, .badoblog-css-footer-menu, .badoblog-css-footer-info { margin-bottom: 15px; } } @media (max-width: 350px) { .badoblog-css-top-search-modal-inner, .badoblog-css-top-bar, .badoblog-css-mega-menu-container, #secondary { padding: 10px; } .badoblog-css-mega-menu-mobile { padding: 20px 10px; } .badoblog-css-site-branding, .badoblog-css-mega-menu > ul { padding: 0 10px 10px 10px; } .badoblog-css-content-area { padding: 15px 10px 10px; } .badoblog-css-site-footer { padding: 15px 10px 0; } #page { padding: 0 0 10px 0; } .badoblog-css-site-brand-top { padding-top: 10px; } .badoblog-css-site-brand-bottom-box, .badoblog-css-site-brand-banner, .badoblog-css-site-brand-soc, .badoblog-css-top-bar, .badoblog-css-site-branding, .badoblog-css-mega-menu-box, #content, #secondary, .badoblog-css-site-footer { margin-top: 10px; } .badoblog-css-footer-widgets, .badoblog-css-footer-menu, .badoblog-css-footer-info { margin-bottom: 10px; } } /*========================================================================================== Various changes ==========================================================================================*/ /*========================================================================================== * Attention! * Do not edit this file, after updating all changes will be lost * To add your own styles, use the special section in the customizer * Instructions: * 1. In your WordPress dashboard, go to - Appearance - Customize * 2. In the customizer panel, select - Additional CSS * 3. In the text editor that opens, add your styles ==========================================================================================*/