/** * Theme Name: Bansta * Theme URI: https://tsteki.com/bansta * Author: TS * Author URI: https://tsteki.com/author/tsteki * Description: Bansta is multipurpose WordPress theme mainly for blog/magazine category. The theme is elegante, well coded for speed performance and SEO ready. * Version: 1.0.0 * Requires PHP: 5.6 * Tested up to: 8.3 * License: GNU General Public License v3 or later * License URI: https://www.gnu.org/licenses/gpl-3.0.html * Text Domain: bansta * Tags: blog, grid-layout, one-column, two-columns, left-sidebar, right-sidebar */ /* Global Defaults --------------------------------------------------------------- */ :root { --red: #DF1417; --header-height-1: 54px; --header-height-2: 90px; --system-font: -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; } html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } * { box-sizing: border-box !important; margin: 0; padding: 0; } article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } li { list-style: none; } a { text-decoration: none; color: var(--red); } a:active, a:hover { outline: 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } dfn { font-style: italic; } mark { background-color: transparent; border-bottom: 1px solid #ffcc00 ; } mark:hover { border-bottom: none; } 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; } img { border: 0; } svg:not(:root) { overflow: hidden; } hr { box-sizing: content-box; height: 0; } pre { overflow: auto; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } .active, .current { background-color: var(--link-color); } .active a, .current span { color: white !important; } h6 { font-size: 14px; padding: 2px 0; } h5 { font-size: 16px; padding: 2.6px 0; } h4 { font-size: 18px; word-spacing: 0.15em; padding: 3px 0; } h4, h5, h6 { line-height: 1.1; } h3 { font-size: 21px; word-spacing: 0.15em; padding: 4px 0; line-height: 1.4; color: #252525; } h2{ text-transform: capitalize; word-spacing: 0.15em; font-weight: var(--font-weight); font-size: 25px; padding: 6px 0; color: #252525; } h1 { font-size: 35px; padding: 8px 0; } h1, h2, h3, h4, h5, h6 { display: block; } p { word-wrap: break-word; color: var(--content-color); font-family: var(--primary-font); word-spacing: -0.003em; margin-bottom: 1.3em; line-height: 1.7; } b { overflow-wrap: break-word; } .clear::after { display: table; content: ""; clear: both; } /* Site Grids --------------------------------------------- */ .col-ts-1 { width: 8.33%; } .col-ts-2 { width: 16.66%; } .col-ts-3 { width: 25%; } .col-ts-4 { width: 33.33%; } .col-ts-5 { width: 41.66%; } .col-ts-6 { width: 50%; } .col-ts-7 { width: 58.33%; } .col-ts-8 { width: 66.66%; } .col-ts-9 { width: 75%; } .col-ts-10 { width: 83.33%; } .col-ts-11 { width: 91.66%; } .col-ts-12 { width: 100%; } .big-grid-default, .big-grid-2, .big-grid-3, .big-grid-4 { max-width: var(--site-grid-size); margin: 20px auto; display: flex; gap: 4px; height: auto; padding: 0 10px; max-height: 520px; } .big-grid-default a, .big-grid-default .entry-date, .big-grid-2 a, .big-grid-2 .entry-date, .big-grid-3 a, .big-grid-3 .entry-date, .big-grid-4 a, .big-grid-4 .entry-date { color: #FFFFFF !important; } [class*="big-grid-"] .entry-post-title a { font-weight: 700; } .big-grid-2 .tr-grid-big2 .entry-post-title a, .big-grid-2 .tr-grid-big3 .entry-post-title a, .big-grid-2 .tr-grid-big2 .grid-metas a, .big-grid-2 .tr-grid-big3 .grid-metas a, .big-grid-2 .tr-grid-big2 .entry-date, .big-grid-2 .tr-grid-big3 .entry-date, .big-grid-4 .tr-grid-big2 .entry-post-title a, .big-grid-4 .tr-grid-big2 .grid-metas a, .big-grid-4 .entry-date { font-size: 0.9em; } .tr-grid-big1 { display: block; flex-basis: 70%; } .tr-grid-big2, .tr-grid-big3 { display: flex; flex-direction: column; flex-basis: 34.6%; gap: 4px; } .item-grid-row1, .item-grid-row2, .item-grid-big, .slider-default { position: relative; } .item-grid-row1 .featured-image img, .item-grid-row2 .featured-image img { max-height: 258px; } .item-grid-row1 .featured-image img:hover, .item-grid-row2 .featured-image img:hover { transform: var(--img-transform-scale); } .item-grid-big img { max-height: 520px; } .item-grid-big img:hover { transform: var(--img-transform-scale); } .tr-grid-big3 { position: relative; } .big-grid-3 img { min-height: 400px; } .big-grid-default img { aspect-ratio: 3 / 2; } [class*="item-grid-"] img, .tr-grid-big3 img { filter: brightness(.5); } [class*="item-grid-"] img:not(.big-grid-default img), .tr-grid-big3 img:not(.big-grid-default img) { aspect-ratio: 4 / 3; } [class*="item-grid-"] .ts-post-header, .big-grid-3 .ts-post-header { position: absolute; padding: 10px 15px; z-index: 1; bottom: 4%; } [class*="item-grid-"]:not(.item-grid-big) .entry-post-title a:hover, .item-grid-big .entry-post-title a:hover, .tr-grid-big3 .entry-post-title a:hover { color: var(--link-color) !important; } [class*="item-grid-"]:not(.item-grid-big) .grid-metas { font-size: 0.8em; } [class*="item-grid-"]:not(.item-grid-big) .entry-post-title { font-size: 94%; } .item-grid-big .entry-post-title { font-size: 1.3em; } .big-grid-default .meta-separator, .big-grid-2 .meta-separator, .big-grid-3 .meta-separator, .big-grid-4 .meta-separator { color: #FFFFFF; } @media (max-width:599px) { .tr-grid-big2 .entry-post-title a, .tr-grid-big3 .entry-post-title a { font-size: .8em !important; } .tr-grid-big2 .ts-meta-info, .tr-grid-big3 .ts-meta-info { display: none; } .tr-grid-big2 .grid-metas, .tr-grid-big3 .grid-metas { display: none; } [class*="item-grid-"]:not(.item-grid-big) .entry-post-title { bottom: 5px; } [class*="item-grid-row"] .ts-category a { display: none; } } @media (min-width:600px) and (max-width:767px) { [class*="item-grid-"]:not(.item-grid-big) .entry-post-title a, [class*="item-grid-"]:not(.item-grid-big) .elem-post-title-2 a { line-height: 1.3; } } @media (max-width:767px) { .big-grid-default, .big-grid-2, .big-grid-3, .big-grid-4 { flex-direction: column; max-height: inherit; } .tr-grid-big2, .tr-grid-big3 { flex-direction: row; } .item-grid-row1, .item-grid-row2 { width: 100%; } .tr-grid-big1 { flex-basis: auto; } .item-grid-big img, .tr-grid-big3 img { max-height: 400px; min-height: auto; } .item-grid-big .entry-post-title { font-size: 1.2em; } } @media (max-width:1024px) { #menu-toga:checked ~ [class*="big-grid-"], #off-canvas-2 ~ [class*="big-grid-"] { flex-direction: column; max-height: inherit; } #menu-toga:checked ~ [class*="big-grid-"] > .tr-grid-big2, #menu-toga:checked ~ [class*="big-grid-"] > .tr-grid-big3, #off-canvas-2 ~ [class*="big-grid-"] > .tr-grid-big2, #off-canvas-2 ~ [class*="big-grid-"] > .tr-grid-big3 { flex-direction: row; } #menu-toga:checked ~ [class*="big-grid-"] .item-grid-row1, #menu-toga:checked ~ [class*="big-grid-"] .item-grid-row2, #off-canvas-2 ~ [class*="big-grid-"] .item-grid-row1, #off-canvas-2 ~ [class*="big-grid-"] .item-grid-row2 { width: 100%; } #menu-toga:checked ~ [class*="big-grid-"] img, #off-canvas-2 ~ [class*="big-grid-"] img { max-height: 400px; min-height: auto; } } /* HTML Forms -------------------------------------------------------------- */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0 10px; width: unset; } textarea { overflow: auto; } optgroup { font-weight: bold; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 10px; border-top-width: 1px; border-top-style: solid; border-left-width: 1px; border-left-style: solid; } tr:last-child th , tr:last-child td { border-bottom-width: 1px; border-bottom-style: solid; } td:last-child, th:last-child { border-right-width: 1px; border-right-style: solid; } 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"] { cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input { line-height: normal; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; display: inline-block; vertical-align: middle; margin: 0; } 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 { -webkit-appearance: none; } input[type=file] { padding: 10px; height: unset; max-width: 100%; } .ts-search-form { position: relative; } .ts-search-form::before { content: "\f107"; position: absolute; font-family: FontAwesome; font-size: 33px; right: 0; top: 19px; } .ts-search-wrap .ts-search-form::before { display: none; } .ts-search-wrap .ts-search-form input[type=submit] { height: 39px; border: 1px solid; } .ts-search-wrap .ts-search-form input[type=text] { width: 94%; border: 2px solid #FFFFFF; } .ts-search-form input[type=text] { padding: 10px; width: 100%; position: absolute; top: 50px; right: 10px; } .ts-search-form input[type=submit] { width: 70px; position: absolute; top: 50px; right: 10px; background-color: var(--primary-color); color: white; border: none; height: 36px; padding: 0 5px 0 0; } .ts-page-content p { padding: 10px; } .ts-page-content input[type=text] { margin: -20px -20px 0px 0px; } .ts-page-content input[type=submit] { right: -9px; top: 19px; height: 43px; } .ts-page-content .ts-search-form { margin-bottom: 150px; } .search-icon .ts-search-form { position: relative; display: none; } .search-icon .ts-search-form input[type=text], .search-icon .ts-search-form input[type=submit] { position: absolute; top: 43px; right: 0; } .search-icon .ts-search-form input[type=text] { padding: 10px; width: 200px; -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out; border: 1px solid #212121; height: 40.8px; } .search-icon .ts-search-form input[type=text]:focus { width: 400px; } .search-icon .ts-search-form input[type=submit] { width: 70px; background-color: var(--primary-color); color: white; height: 40.8px; padding: 2px; } .fn a, .comment-content a, .reply a { color: #0c0c0c; font-weight: var(--font-weight); } .comment-form .widget-title { padding: 10px 0 10px 10px; } form { display: flex; flex-direction: column; } form input[type=text], form input[type=email], form input[type=submit], #comment { padding: 6px; width: 100%; margin: 12px 0; } form input[type=submit] { font-size: 16px; font-weight: 700; background-color: var(--primary-color); color: white; } .comment-content p { font-size: 16px; margin-left: 40px; margin-top: 10px; } .comment-metadata time { margin-left: 40px; color: #0c0c0c; } .comment-edit-link { color: var(--link-color); } .comment-metadata a { font-size: 13px; } .reply { margin: 10px 0; } .reply a { text-decoration: underline; } .comment-reply-title a { color: #212121; margin-left: 8px; } #modal-container { display: none; z-index: 99; width: 100%; position: fixed; height: 100%; background-color: rgba(0,0,0,0.6); overflow: auto; left: 0; top: 0; padding-top: 60px; } .modal-form { background-color: #fefefe; margin: 5px auto; /* 15% from the top and centered */ border: 1px solid #888; width: 30%; } .form-container em { float: right; } .imgcontainer img.avatar { width: 40%; } .author-box-wrap img.avatar { width: 60px; } .imgcontainer img.avatar, .author-box-wrap img.avatar { height: auto; border-radius: 50%; } .form-container { padding: 16px; } span .psw { float: right; padding-top: 16px; } span .psw, .psw a { color: var(--link-color); } .imgcontainer { text-align: center; margin: 24px 0 12px 0; } .cancelbtn { width: auto!important; padding: 10px 18px!important; background-color: var(--primary-color)!important; } .modal-form input[type=text], .modal-form input[type=password] { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; } .modal-form button { background-color: #222; color: white; padding: 14px 20px; margin: 8px 0; border: none; cursor: pointer; width: 100%; } .modal-form button:hover { opacity: 0.8; } #modal-container .close { color: #000; font-size: 35px; font-weight: bold; margin: -4% 0 0 90%; } /* Close button on hover */ #modal-container .close:hover, #modal-container .close:focus { color: var(--link-color); cursor: pointer; } /* Add Zoom Animation */ .animate { -webkit-animation: animatezoom 0.6s; animation: animatezoom 0.6s } @-webkit-keyframes animatezoom { from {-webkit-transform: scale(0)} to {-webkit-transform: scale(1)} } @keyframes animatezoom { from {transform: scale(0)} to {transform: scale(1)} } @media (max-width:420px) { .search-icon .ts-search-form input[type=text]:focus { width: 300px; } } @media (max-width:767px) { .modal-form { width: 80%; } #modal-container .close { right: 22%; } } /* Arrow Top -------------------------------------------------- */ #go-to-top { display: none; position: fixed; bottom: 20px; right: 10px; z-index: 99; background-color: var(--link-color); cursor: pointer; padding: 4px; border-radius: 4px; } #go-to-top:hover { background-color: #535353; } #go-to-top .fa { font-size: 30px; } /* Captions -------------------------------------------------------------- */ .wp-caption { margin-bottom: 1.5em; max-width: 100%; } .wp-caption img[class*="wp-image-"] { display: block; margin-left: auto; margin-right: auto; } .wp-caption .wp-caption-text { margin: 0.8075em 0; } .wp-caption-text { text-align: center; } /* Galleries -------------------------------------------------------------- */ .gallery { margin: -5px; } .gallery-item { display: inline-block; text-align: center; vertical-align: top; width: 100%; padding: 5px; margin: 0; } .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; } /* Global Containers -------------------------------------------------- */ .main-wrapper, .top-bar, .top-container, .container, .main-area { max-width: 100%; display: block; } body { line-height: var(--line-height); font-family: var(--system-font); background-color: var(--background-color); } .main-wrapper { overflow-x: clip; } .container { position: relative; width: var(--site-header-size); display: flex; margin: 0 auto; align-items: center; padding: 0 10px; } .mobile-container { display: none !important; } /* Accesibility ------------------------------------------------------------------ */ /* Text meant only for screen readers. */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; -webkit-clip-path: none; clip-path: none; color: #21759b; display: block; font-size: 0.875em; font-weight: 700; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; } /* Do not show the outline on the skip link target. */ #main-content[tabindex="-1"]:focus { outline: 0; } /* top bar ---------------------------------------------------------------------- */ .top-bar, .top-bar-2, .top-bar-3 { height: 35px; position: relative; } [class*="top-bar"] { background-color: var(--top-bar-back-color); } [class*="top-bar"] .fa { color: var(--top-bar-icon-color); } [class*="top-bar"] svg { fill: var(--top-bar-icon-color); } .top-bar-3 .fa { color: #0c0c0c; } .top-bar-3 svg { fill: #0c0c0c; } .top-social { display: flex; justify-content: flex-end; } .top-social a { display: inline-block; padding: 5px 8px; } /* Site Header ------------------------------------------------------------------ */ header { padding: 0 10px; } .header-wrapper, .header-wrapper-2 { border-bottom: 1px solid #ccc; } .header-wrapper { display: flex; } .header-wrapper-2 { display: block; } .header, .header-2, .header-4 { background-color: var(--header-back-color); } .header, .header-2, .header-4, .header-5 { padding: unset; } .header, .header-4, .header-5 { height: var(--header-height-1); max-width: 100%; position: relative; } .header-2 { border-bottom: none; height: var(--header-height-2); display: flex; align-items: center; } .sticky-header { position: fixed; z-index: 999; top: 0; background-color: #fff; max-width: 100%; } .ts-site-title a { color: var(--site-title-color); } #off-canvas-2 { width: 22%; z-index: 2; } #menu-toga, .menu-icon { display: none; } .menu-icon-canva { display: inline-flex; } .menu-icon-canva label { cursor: pointer; display: inline-block; height: 35px; width: 35px; } .menu-icon-canva label span { display: block; border: 2px solid; width: 30px; background-color: var(--menu-link-color); margin: 6px 0; transition: .6s; } .off-canvas-toga span:first-child { -webkit-transform: rotate(-45deg) translate(-8px, 6px); -ms-transform: rotate(-45deg) translate(-8px, 6px); -moz-transform: rotate(-45deg) translate(-8px, 6px); transform: rotate(-45deg) translate(-8px, 6px); } .off-canvas-toga span:nth-child(2) { opacity: 0; } .off-canvas-toga span:last-child { -webkit-transform: rotate(45deg) translate(-9px, -6px); -ms-transform: rotate(45deg) translate(-8px, -6px); -moz-transform: rotate(45deg) translate(-9px, -6px); transform: rotate(45deg) translate(-8px, -6px); } #menu-toga:checked ~ .off-canvas-menu { width: 22%; } #menu-toga:checked ~ #site-header, #menu-toga:checked ~ [class*="big-grid-"], #menu-toga:checked ~ .content-wrapper, #menu-toga:checked ~ .single-content-wrapper, #menu-toga:not(:checked) ~ #site-header, #menu-toga:not(:checked) .big-grid-4, #menu-toga:not(:checked) ~ .content-wrapper, #menu-toga:not(:checked) ~ .single-content-wrapper { transition: .5s all ease-in-out; } #menu-toga:checked ~ #site-header, #menu-toga:checked ~ [class*="big-grid-"], #menu-toga:checked ~ .breadcrumbs-container, #menu-toga:checked ~ .content-wrapper, #menu-toga:checked ~ .single-content-wrapper, .off-canvas-wrapper [class*="big-grid-"], .off-canvas-wrapper .content-wrapper, .off-canvas-wrapper .single-content-wrapper, .off-canvas-wrapper .footer-widgets { margin-left: 22%; } .off-canvas-menu { height: 100%; width: 0; position: fixed; z-index: 2; top: 0; left: 0; background-color: var(--primary-color); padding-top: 15px; overflow-x: hidden; transition: 0.5s; } .off-canvas-menu .site-branding { margin: 5px; justify-content: center; width: 100%; } .off-canvas-menu .ts-site-title a { color: #fff; } .off-canvas-menu ul { flex-direction: column; } .off-canvas-menu #main-nav ul ul { position: static; width: 100%; height: auto; } [class*="main-nav"] { background-color: var(--mainnav-back-color); } .off-canvas-menu .profile-icon { padding: 10px; } .off-canvas-menu .navigation { margin: 20px 0; } .off-canvas-menu p { font-size: 1em; color: var(--link-color); } .off-canvas-menu .top-social { justify-content: flex-start; border-top: 1px solid #ccc; padding: 10px } .off-canvas-menu .ts-search-wrap .ts-search-form input[type=submit] { height: 45px; } .off-canvas-top { display: flex; } .site-branding, .site-branding a, .site-branding img, .primary-navigation, .dark-mode-switch, .search-icon { max-height: var(--header-height-1); } .primary-navigation { display: flex; align-self: normal; } .primary-navigation button, .menu-icon-canva { border: none; background-color: transparent; } .site-branding { display: inline-flex; } .select-menu a { color: var(--secondary-color); font-weight: 500; } .off-canvas-menu .select-menu a { color: var(--link-color); font-weight: 500; } .ts-site-title { display: inline-flex; align-items: center; padding: 0; } .header .ts-image-logo img, .header-4 .ts-image-logo img, .header-5 .ts-image-logo img { max-height: 53px; } .ts-image-logo img { margin: 0; width: var(--logo-size); display: inline-flex; vertical-align: middle; } .ts-site-title a { font-size: var(--site-identity-font-size); font-family: var(--site-identity-font); font-weight: var(--font-weight); } .navigation { display: flex; } .main-nav-2 { height: 48px; display: flex; } .navigation li a { display: block; padding: 14px 12px; font-size: 1.03em; font-weight: var(--font-weight); font-family: var(--secondary-font); color: var(--secondary-color); text-wrap: nowrap; } .off-canvas-menu .navigation li a { padding: 12px 9px; font-size: 1em; color: #fff; transition: 0.3s; } .main-nav-2 .navigation li a { padding: 11px; } .navigation li a, .search-icon .fa-search { color: var(--menu-link-color); } .off-canvas-menu .navigation li a:hover { background-color: inherit; } ul .sub-menu { display: none; border-top: 2px solid black; position: absolute; background-color: var(--secondary-color); z-index: 999; width: 170px; top: 100%; } .off-canvas-menu ul .sub-menu { background-color: transparent; height: 0; } ul .sub-menu li a { padding: 12px 24px; color: #fff; } ul .sub-menu .sub-menu { position: absolute; left: 100%; top: -2px; } .dropdown-toggle { padding: 0 6px; } .sub-menu .dropdown-toggle { float: right; } .fa-chevron-down { font-size: 13px !important; } .menu-item-has-children { position: relative; width: 100%; } .menu-item-has-children .fa { color: #0c0c0c; } .off-canvas-menu .menu-item-has-children .fa { color: #FFFFFF; transform: rotate(-90deg); } .main-nav-2 .menu-item-has-children::after { top: 23px; } .off-canvas-menu .menu-item-has-children:hover { background-color: var(--secondary-color); } #menu-toggle { display: none; } .dark-mode-switch, .search-icon { display: inline-flex; justify-content: flex-end; } .dark-mode-switch { margin: auto; } #switch { display: none; } label .slider { width: 33px; height: 18px; background-color: #484848; display: inline-block; cursor: pointer; position: relative; border-radius: 15px; margin: 6px 0; } .fa-moon-o::before { color: #FFFFFF; font-size: 15px; position: absolute; top: 1px; transform: rotate(210deg); left: 16px; } label .slider::before { width: 16px; height: 16px; position: absolute; display: block; background-color: #FFFFFF; content: ""; bottom: 1px; border-radius: 25px; transition: .3s all ease-in-out; } #switch:checked + .slider { background-color: #484848; } .search-icon { position: relative; z-index: 99; } .search-icon span { cursor: pointer; } #close { position: absolute; right: 10px; top: 33px; font-size: 35px; font-weight: 600; cursor: pointer; display: none; } @media (max-width:767px) { .mobile-container, .menu-icon { display: inline-block; } .container { align-items: inherit; } .header-2 .site-branding { justify-content: inherit; } .site-branding { width: 100%; position: absolute; display: flex; justify-content: center; top: 0; } .search-icon, .dark-mode-switch { position: absolute; } .search-icon { top: 14px; right: 10px; } .dark-mode-switch { left: 78%; top: 11px; } .navigation { position: absolute; display: block; width: 100%; background-color: #454545; height: auto; transition: all 0.2s ease-in-out; left: 0; z-index: 2; top: 47px; overflow: hidden; } .header-4 .navigation, .header-5 .navigation { top: 55px; } .header-4 ul .sub-menu, .header-5 ul .sub-menu { background-color: inherit; } #off-canvas-2, .select-menu { display: none; } .stick-navi { top: 50px; } #main-nav li a { color: white; } #main-nav ul ul { position: static; } ul .sub-menu { width: 100%; } .menu-item-has-children .fa { color: #eeeeee; transform: rotate(-90deg); } .toggled-on .menu-item-has-children > .fa { transform: rotate(0deg); } .dropdown-toggle { position: absolute; right: 8px; } .header-2 .site-branding { position: unset; } .menu-icon-canva { position: absolute; z-index: 1; } .menu-icon { position: absolute; left: 10px; display: inline-block; margin: 5px 0; z-index: 1; } #menu-toga:checked ~ .off-canvas-menu { width: 0; } #menu-toga:checked ~ #site-header, #menu-toga:checked ~ .big-grid-4, #menu-toga:checked ~ .content-wrapper, #menu-toga:checked ~ .single-content-wrapper, .off-canvas-wrapper [class*="big-grid-"], .off-canvas-wrapper .content-wrapper, .off-canvas-wrapper .single-content-wrapper, .off-canvas-wrapper .breadcrumbs { margin-left: auto; } .menu-icon-canva { display: none; } .menu-icon label { cursor: pointer; display: inline-block; height: 35px; width: 35px; } .header .menu-icon label, .header-4 .menu-icon label, .header-5 .menu-icon label { margin: 3px 0; } .menu-icon label span { display: block; border: 2px solid; width: 30px; background-color: var(--menu-link-color); margin: 6px 0; transition: .6s; } #menu-toggle:checked ~ .menu-icon label span:first-child { -webkit-transform: rotate(-45deg) translate(-8px, 6px); -ms-transform: rotate(-45deg) translate(-8px, 6px); -moz-transform: rotate(-45deg) translate(-8px, 6px); transform: rotate(-45deg) translate(-8px, 6px);} #menu-toggle:checked ~ .menu-icon label span:nth-child(2) { opacity: 0; } #menu-toggle:checked ~ .menu-icon label span:last-child { -webkit-transform: rotate(45deg) translate(-9px, -6px); -ms-transform: rotate(45deg) translate(-8px, -6px); -moz-transform: rotate(45deg) translate(-9px, -6px); transform: rotate(45deg) translate(-8px, -6px); } #menu-toggle:not(:checked) ~ #main-nav ul { height: 0; visibility: hidden; } #menu-toggle:checked ~ #main-nav > ul { height: calc(100vh - 50px); } } @media (min-width: 768px) { .header-5 { display: none; } .header .menu-item-has-children:hover > .sub-menu, .main-nav-2 .menu-item-has-children:hover > .sub-menu, .header-4 .menu-item-has-children:hover > .sub-menu, .navigation-menu ul > .focus > .sub-menu { display: block; } .header .menu-item-has-children > a::after, .main-nav-2 .menu-item-has-children > a::after, .header-4 .menu-item-has-children > a::after { content: "\f078"; font-family: FontAwesome; padding-left: .25em; font-size: .8em; font-weight: lighter; } .header ul.sub-menu .menu-item-has-children > a::after, .main-nav-2 ul.sub-menu .menu-item-has-children > a::after, .header-4 ul.sub-menu .menu-item-has-children > a::after { content: "\f054"; position: absolute; right: 5%; bottom: 22%; } .header .dropdown-toggle, .main-nav-2 .dropdown-toggle, .header-4 .dropdown-toggle { display: none; } .off-canvas-menu .ts-dropdown-btn ~ .sub-menu { display: block !important; } .off-canvas-menu .dropdown-toggle { float: right; } .menu-icon { visibility: hidden; } } @media (min-width:768px) and (max-width:1024px) { .navigation li a { text-wrap: nowrap; font-size: 90%; padding: 15px 9px; } .main-nav-2 .navigation li a { padding: 13px; } #menu-toga:checked ~ .off-canvas-menu { width: 200px; } #menu-toga:checked ~ #site-header, #menu-toga:checked ~ .big-grid-4, #menu-toga:checked ~ .content-wrapper, #menu-toga:checked ~ .single-content-wrapper { margin-left: 200px; } .off-canvas-menu p { display: none; } } @media (max-width:1024px) { #menu-toga:checked ~ .content-wrapper > .main-area, #off-canvas-2 ~ .content-wrapper > .main-area { flex-direction: column; } #menu-toga:checked ~ .content-wrapper > .main-area > [class*="col-ts-"], #off-canvas-2 ~ .content-wrapper > .main-area > [class*="col-ts-"] { width: 100%; } } @media (min-width:1025px) and (max-width:1240px) { #menu-toga:checked ~ .off-canvas-menu { width: 280px; } #menu-toga:checked ~ #site-header, #menu-toga:checked ~ .big-grid-4, #menu-toga:checked ~ .content-wrapper, #menu-toga:checked ~ .single-content-wrapper { margin-left: 280px; } } /* Main Content ------------------------------------------------------------------------ */ .breadcrumbs-container { width: var(--site-content-size); margin: auto; max-width: 100%; padding: 10px; } .breadcrumbs { display: flex; align-items: center; } .breadcrumbs .separator { padding: 0 4px; } .breadcrumbs .item-cat a, .breadcrumbs .item-home a { color: #454545; } #breadcrumbs .item-home, #breadcrumbs .item-cat, #breadcrumbs .bread-current { font-family: var(--primary-font); font-size: 0.88em; } #breadcrumbs .fa-chevron-right { font-size: 13px; color: #3B3B3B; } .content-wrapper, .single-content-wrapper { margin: 20px 0; } .content-wrapper { background-color: transparent; } .content-wrapper { display: flex; } .main-area { display: flex; width: var(--site-content-size); margin: auto; max-width: 100%; padding: 0 10px; column-gap: 20px; } #main-content { display: flex; flex-direction: column; max-width: 100%; } #main-content .default-container, #main-content .grid2-container, #main-content .card1-container { display: grid; } #main-content .default-container, #main-content .card1-container { grid-gap: 20px; } .card1-container .type-post { position: relative; background-color: #fff; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .card1-container header { padding-top: 8px; } #main-content .grid2-container { max-width: 100%; grid-gap: 25px 15px; } #main-content .grid2-container { grid-template-columns: repeat(2,minmax(0,2fr)); } .default-container .ts-content-wrap, .card1-container .ts-content-wrap { float: right; width: 55%; } .ts-post-excerpt { padding: 10px 0; line-height: 1.2; font-size: 0.9em; color: #454545; font-family: var(--primary-font); } .default-container .ts-post-content-entry { padding: 0 10px; } .grid2-container .content-entry { height: 380px; } .no-sidebar .entry-post-title a { font-size: 1.1em; } .no-post-thumb .ts-content-wrap { width: 100%; } [class*="-container"] .featured-image img { aspect-ratio: var(--ts-aspect-ratio); } [class*="-container"] .featured-image img:hover { transform: var(--img-transform-scale); } .default-container .entry-post-title, .card1-container .entry-post-title { font-size: 1.05em; line-height: 1.4; } .default-container .featured-image, .card1-container .featured-image { float: left; width: 45%; } .card1-container .featured-image { width: 50%; } .card1-container .ts-post-header { width: 50%; float: right; } .entry-post-title { padding: 0; } .bypostauthor { display: block; line-height: 1; } .read-more a { border: 1px solid var(--secondary-color); color: var(--secondary-color); font-weight: 600; font-size: 13px; } .default-container .read-more a{ padding: 4px 2px; font-size: 12px; } .read-more a:hover { border-color: #E91E21; } .pagination { margin: 10px 0; } .pagination ul { display: flex; justify-content: center; } .pagination li a, .pagination li span { padding: 4px 12px; font-size: 0.9em; font-weight: bold; display: block; font-family: var(--secondary-font); color: #222222; text-wrap: nowrap; } .pagination a:active, .pagination span:active { color: white; background-color: red; } #sidebar { max-width: 100%; height: auto; } .sidebar-container { -webkit-position: sticky; position: sticky; top: 50px; margin-bottom: 10px; } .no-sidebar .sidebars { display: none; } .no-sidebar #main-content { width: 100%; } .left-sidebar .main-area { flex-direction: row-reverse; } .content-entry { background-color: #fff; width: 100%; height: auto; float: left; max-width: 100%; overflow: hidden; } .content-entry-grid_2 header { padding: 6px 0; } .content-entry-grid_2 .ts-post-excerpt { font-size: 14px; } .content-entry-grid_2 .read-more a { border: none; } .content-entry-grid_2 .read-more::after { content: "..."; font-size: 12px; } .featured-image { width: 100%; height: auto; overflow: hidden; position: relative; } img { width: 100%; height: auto; display: block; margin: 0 auto; object-fit: cover; transition: .6s all; } .single-container .featured-image img { aspect-ratio: 16 / 9; } .single-container .ts-post-header { padding: 0 0 6px 0; position: relative; } .single-container .entry-post-title { font-size: 1.2em; } .single-post-wrap .ts-small-box { position: static; padding: 10px 0; } .related-articles-container .featured-image img { aspect-ratio: 3 / 2; } .related-articles-container .featured-image { width: 100%; height: auto; margin: 0 auto; } .related-articles-container header { padding: 6px 0 !important; } .related-articles-container .entry-post-title { font-size: 15px; } .inner-card-container, .card-wrap .comments { padding: 12px; background-color: #fff; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .entry-post-title a { color: var(--secondary-color); font-family: var(--primary-font); } .entry-post-title { font-size: 1em; line-height: 1.4; } .default-container .entry-post-title, .card1-container .entry-post-title { padding: 0; } .grid2-container .entry-post-title { line-height: 1.4; font-size: 1em; } .ts-category, .ts-category-2 { display: flex; margin-left: -6px; flex-wrap: wrap; z-index: 1; padding-bottom: 4px; } .ts-category a, .ts-category-2 a { font-size: 0.8em; line-height: 2.2; font-weight: 500; color: aliceblue; background-color: var(--primary-color); padding: 4px 8px; margin-left: 6px; } .ts-category a:hover, .ts-category-2 a:hover { background-color: var(--link-hover-color); } .inner-card-container .ts-post-author-name::before { content: "By"; margin-right: 3px; } .ts-meta-info { display: inline-flex; width: 100%; margin-bottom: 5px; font-family: var(--secondary-font); } .ts-post-author-name a { color: #464646; font-weight: 500; } .wp-block-latest-comments__comment-meta a { color: #212121; } .ts-post-comments .fa { color: #000; font-size: 17px; padding-left: 20px; } .logged-in-as a { color: var(--link-color); } .ts-post-comments a { position: relative; } .ts-post-comments a span { position: absolute; left: 40px; } .metas { padding: 4px 8px 4px 0; display: inline-flex; font-size: 0.9em; color: #535353; position: relative; } .ts-post-author { color: #3B3B3B; } .heading-default { border-bottom: 4px solid var(--link-color); display: inline; padding-bottom: 8px; } .heading-default::after { border-bottom: 1px solid #3B3B3B; } .heading-default::after { width: 100%; display: block; content: ""; padding-bottom: 8px; } .widget { background-color: transparent; } .card1 .widget { padding: 12px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); margin-bottom: 10px; background-color: #fff; } .widget li img { width: 120px; max-height: 100px; object-fit: cover; display: block; } .widget ul { flex-direction: column; } .widget li { margin: 13px 0; display: flex; } .widget ul li a { line-height: 1.6; word-spacing: 0.2em; font-size: 1.08em; font-weight: 600; font-style: normal; color: var(--secondary-color); font-family: var(--primary-font); } .widget .entry-header { margin: -6px 0 0 6px; } .widget .metas { font-size: 12px; } .inner-card-wrap { padding: 12px; background-color: #fff; margin: 10px 0; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .ts-prev-next-post { display: flex; position: relative; } .inner-container-default .ts-prev-next-post { margin-bottom: 10px; } .ts-prev-next-content { display: flex; flex-direction: column; } .ts-prev-post, .ts-next-post { width: 40%; } .ts-next-post { position: absolute; } .ts-prev-next-separator { width: 20%; } .ts-prev-next-content span { font-weight: 600; color: #282828; margin-bottom: 8px; } .ts-prev-next-content a { color: var(--secondary-color); font-weight: 600; font-size: 0.93em; line-height: 1.5; } .ts-prev-next-content a:hover { color: var(--link-hover-color); } .author-box-wrap { display: flex; border: 1px solid #ccc; padding: 20px 10px; } .ts-author-url { display: none; } .desc { margin-left: 5px; } .desc > div { padding: 3px 6px; } .inner-wrap-default { margin: 20px 0; } .inner-card-content { padding: 0 10px; } .comment-author.vcard { display: inline-flex; padding: 8px; } .comment-author.vcard img { width: 18px; } .fn a { padding: 0 5px; } .second-inner { display: flex; } .ts-related-article-title { background-color: transparent; color: #282828; margin-bottom: 10px; } .related-post-container { display: flex; width: 100%; gap: 10px; padding-top: 10px; } .related-articles-wrap { width: var(--site-header-size); margin: auto; max-width: 100%; } .single-page-wrap h2 { margin-left: -15px; } @media (max-width:599px) { .main-area, #site-footer .container { flex-direction: column; } #main-content .grid2-container { grid-template-columns: none; } .left-sidebar .main-area { flex-direction: column; } .ts-post-header { padding-bottom: 8px!important; } .default-container .ts-post-excerpt, .default-container .read-more { display: none; } article .post-thumbnail img { height: auto; } .default-container .entry-post-title a, .entry-post-title, .entry-post-title a { line-height: 1.3!important; font-size: 94%; } .default-container .entry-post-title, .card1-container .entry-post-title a { font-size: .98em; } .default-container .ts-category { display: none; } .card1-container .featured-image img { min-height: 130px; } .default-container .metas, .card1-container .metas { font-size: .78em; padding-right: 4px; } .card1-container header { padding: 6px; } .card1-container .entry-post-title, .widget ul li a { font-size: 100%; } .main-pagination { margin-left: 25%; } .default-container .ts-post-comments .fa { display: none; } } @media (min-width:600px) and (max-width:767px) { article .post-thumbnail img { height: auto; } .ts-meta-info { height: auto; } .default-container .ts-post-excerpt { font-size: 90%; } .card1-container .entry-post-title { font-size: 92%; } .widget-title { color: #282828; } .widget li img { max-width: 400px; } .widget .entry-header { margin: 4px; width: 150%; } .default-container .metas { font-size: .8em; } } @media (max-width:767px) { .main-area, .related-post-container { flex-direction: column; } .related-articles-container, #sidebar, #main-content { width: 100%; height: auto; } #main-content .default-container { border: none; } .featured-image-2 img { width: 100%; height: auto; } .ts-category a { font-size: .7em; } .entry-post-title { line-height: 1.3; font-size: 90%; } } @media (min-width:600px) and (max-width:1024px) { .read-more a { font-size: 70%; } .widget ul li a { font-size: 99%; } .featured-image-2 img { height: 120px; } .default-container .entry-post-title, .card1-container .entry-post-title { line-height: 1.3; } .no-sidebar .entry-post-title a { font-size: 1em; } } @media (min-width: 768px) and (max-width: 1024px) { .main-area { column-gap: 10px; } .card1-container .entry-post-title { font-size: 94%; } .related-post-container { gap: 6px; } .related-articles-container .entry-post-title { font-size: .85em; } } @media (min-width: 1024px) and (max-width: 1140px) { .entry-post-title { font-size: 98%; } .widget ul li a { font-size: 96%; } .read-more a { font-size: 11px; } } .ts-post-tags { width: 100%; } .ts-tags { width: 100%; display: inline-flex; flex-wrap: wrap; } .ts-tags li:not(:first-child) { padding-right: 2px; } .ts-tags a { color: #121212; } .ts-tags a:hover { color: #E91E21; } .ts-post-tags li a::before { content: "#"; } .ts-post-tags ul { padding: 4px 0; display: inline-flex; } .ts-post-tags li { margin-left: 0!important; list-style: none!important; padding: 4px 0 !important; font-size: 16px; font-weight: 500; } /* Social Links -------------------------------------------------------------- */ .profile-icon .fa { font-size: 25px; padding: 5px 0; } #user-login { cursor: pointer; } /* Site Footer ---------------------------------------------------------------------------- */ #site-footer { clear: both; margin-top: 20px; width: 100%; background-color: var(--footer-back-color); } .footer-widgets { display: flex; max-width: 100%; width: var(--site-header-size); margin: 10px auto 0 auto; padding: 20px 10px; } .footer-widgets .widget-title { color: var(--red); } .footer-widgets a { color: #fff !important; } .footer-widget:not(:last-child) { padding-right: 15px; } .copyright { padding: 5px 0; background-color: var(--primary-color); color: white; display: flex; justify-content: center; height: 40px; } .copyright h3, .copyright p { font-size: 15px; padding: 0; color: var(--copy-content-color); } .copyright h3 { margin: 2px 0; } .copyright a { color: var(--link-color); } @media (max-width:599px) { .footer-widgets { flex-direction: column; } .footer-widgets > .footer-widget { width: 100%; } } /* Less Gutenberg Blocks ---------------------------------------------------------------------------- */ .ts-post-content { padding: 6px 0; } .ts-post-content button { padding: 4px 15px; } .wp-caption-text { text-align: center; } .ts-post-content ul, .ts-post-content ol { margin-bottom: 4px; } .ts-post-content ul li, .ts-post-content ol li { list-style: inherit; padding: 2px 15px 2px 0; margin-left: 30px; line-height: 1.6; color: #252525; } .ts-post-content a, .comment-content a { text-decoration: underline; } .ts-post-content ul li, .ts-post-content ol li { font-size: 1.06em; font-family: var(--primary-font); } .footer-widget .wp-block-heading { color: var(--link-color); } /* Dark Mode ------------------------------------------------------------------------------ */ .dark-mode, .dark-mode #site-header:not(.header-2) { background-color: black; } .dark-mode a { color: var(--red); } .dark-mode, .dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5, .dark-mode h6, .dark-mode input[type=submit], .dark-mode button, .dark-mode #modal-container .close, .dark-mode .top-bar-3 .fa, .dark-mode .ts-site-title a, .dark-mode .entry-post-title a, .dark-mode #main-nav a, .dark-mode .wp-block-latest-posts:not(.is-grid) li a, .dark-mode .wp-block-latest-comments .wp-block-latest-comments__comment a, .dark-mode .widget ul li a, .dark-mode .pagination li a, .dark-mode p, .dark-mode #site-header .fa, .dark-mode .ts-site-title, .dark-mode .ts-post-content li, .dark-mode .read-more a, .dark-mode .share-nodes .fa, .dark-mode .search-icon .fa-search, .dark-mode #breadcrumbs .fa-chevron-right, .dark-mode .entry-post-title, .dark-mode .ts-post-comments .fa, .dark-mode .metas, .dark-mode .ts-prev-next-content span, .dark-mode .ts-related-article-title { color: white; } .dark-mode [class*="main-nav"], .dark-mode .content-wrapper, .dark-mode .single-content-wrapper { background-color: transparent; } .dark-mode .ts-search-form input[type=submit], .dark-mode input[type=submit], .dark-mode button, .dark-mode .top-bar, .dark-mode .navigation-menu li.current-menu-item > a, .dark-mode .navigation-menu .navigation > li:hover > a, .dark-mode .navigation-menu .navigation > li.focus > a, .dark-mode .navigation-menu .navigation > li > a:hover, .dark-mode .navigation-menu .navigation > li > a:focus, .dark-mode .menu-item-has-children:hover { background-color: var(--link-color); } .dark-mode input[type=text], .dark-mode input[type=email], .dark-mode input[type=search], .dark-mode input[type=password], .dark-mode textarea { background-color: #ccc; } .dark-mode input[type=submit], .dark-mode button { border: 1px solid #ccc; font-weight: bolder; } .dark-mode .dropdown-toggle, .dark-mode .menu-icon, .dark-mode .menu-icon-canva { border: none; background-color: transparent; } .dark-mode .comment-metadata time, .dark-mode .ts-post-excerpt, .dark-mode .comment-ajaxified-placeholder .fa { color: #ccc !important; } .dark-mode .comment-reply-title a { color: orangered; } .dark-mode .modal-form { background-color: #121212; } .dark-mode .main-wrapper { background-color: #222; } .dark-mode .top-bar-2, .dark-mode .header-2 { background-color: var(--primary-color); } .dark-mode .top-bar-3 svg { fill: #fff; } .dark-mode .top-bar-3 { background-color: var(--red); } .dark-mode .sticky-header { background-color: var(--secondary-color); } .dark-mode .menu-icon-canva label span, .dark-mode #menu-icon label span { background-color: #fff; } .dark-mode #site-header:not(.header-2) { box-shadow: 0 4px 8px 0 rgba(250, 250, 250, 0.2); border: none; } .dark-mode .ts-site-title a, .dark-mode .entry-post-title a, .dark-mode #main-nav a, .dark-mode .wp-block-latest-posts:not(.is-grid) li a, .dark-mode .wp-block-latest-comments .wp-block-latest-comments__comment a, .dark-mode .widget ul li a, .dark-mode .pagination li a, .dark-mode p, .dark-mode #site-header .fa, .dark-mode .ts-site-title, .dark-mode .ts-post-content li, .dark-mode .read-more a { border-color: white } .dark-mode .entry-post-title a:hover, .dark-mode .ts-post-author-name a, .dark-mode .widget ul li a:hover, .dark-mode .ts-tags a, .dark-mode .ts-prev-next-content a .dark-mode .fn a, .dark-mode .comment-metadata a, .dark-mode .comment-content a, .dark-mode .reply a, .dark-mode .comment-metadata a, .dark-mode .breadcrumbs .item-cat a, .dark-mode .breadcrumbs .item-home a { color: var(--link-color) !important; } .dark-mode .fa-moon-o::before { display: none; } .dark-mode .slider::after { content: "\263C"; font-size: 15px; position: absolute; top: -4px; left: 0; } .dark-mode .slider, .dark-mode .ajaxified-comments-container { background-color: #484848; } .dark-mode .ts-category a, .dark-mode .ts-category-2 a { background-color: var(--link-color); color: white; } .dark-mode .slider::before { -webkit-transform: translateX(15px); -ms-transform:translateX(15px); transform: translateX(15px); box-shadow: 0 2px 8px 0; } .dark-mode .breadcrumbs-container { background-color: inherit; } .dark-mode .card1-container .type-post, .dark-mode .card2-container header, .dark-mode .card3-container header, .dark-mode .content-entry, .dark-mode .inner-card-container, .dark-mode .card1 .widget, .dark-mode .inner-card-wrap, .dark-mode .card-wrap .comments { background-color: #0c0c0c; box-shadow: 0 4px 8px 0 rgba(250, 250, 250, 0.2), 0 6px 20px 0 rgba(250, 250, 250, 0.19); } .dark-mode .comment-ajaxified-placeholder, .dark-mode .fn a { color: var(--link-color); } .dark-mode .ts-prev-next-content a { color: #eeeeee; }