:root {
--colorBg: #000;
--colorFt: #d5d5d5;
--colorMain: #fcdada;
--colorGold: #ab884a;
--colorDarkGold: #71521b;
--wrapperWidth: 1426px;
--wrapperWidthLg: 1780px;
--mobilePadding: 8px;
--tabPadding: 16px;
--padding: 3rem;
--filterGold: invert(51%) sepia(71%) saturate(316%) hue-rotate(360deg) brightness(95%) contrast(86%);
}
@media screen and (max-width: 1520px) { :root { --padding: 2rem; } }
@media screen and (max-width: 1020px) { :root { --padding: var(--tabPadding); } }
@media screen and (max-width: 620px) { :root { --padding: var(--mobilePadding); } }
html { box-sizing: border-box; scroll-behavior: smooth; }
*, *:before, *:after { box-sizing: inherit; }
body, div, h1, h2, h3, h4, h5, h6, p, ol, ul, blockquote, figure { margin: 0; padding: 0; font-weight: normal; }
ul, ol { list-style: none; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
address { font-style: normal; }
input {
-webkit-appearance: none;
appearance: none;
border: none;
outline: none;
}
body {
position: relative; background-color: #f8f8f8; font-weight: 400;
max-width: 2500px; margin: 0 auto;
font-family: "Open Sans", sans-serif;
padding-bottom: 90px; padding-top: 128px;
transition: padding 0.3s ease;
}
@media screen and (max-width: 760px) { body { padding-bottom: 60px; } }
@media screen and (max-width: 620px) { body { padding-top: 121px; } }
@media screen and (max-width: 520px) { body { padding-top: 114px; } }
@media screen and (max-width: 420px) { body { padding-top: 107px; } } .flex { display: flex; }
.flex.col { flex-direction: column; }
.flex.centered { justify-content: center; align-items: center; }
.clearfix::after { content: ""; clear: both; display: table; }
ul.flex > li:last-of-type { margin-right: 0 !important; }
ul.flex.col > li:last-of-type { margin-bottom: 0 !important; }
ul.flex.border > li:last-of-type { border-right: 0 !important; }
ul.flex.col.border > li:last-of-type { border-bottom: 0 !important; }
.stop-scrolling { height: 100%; overflow: hidden; }
.img-center { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.scrollbar-hide {
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.scrollbar-hide::-webkit-scrollbar { display: none; }
.pntr { cursor: pointer; }
.full-h { min-height: 100dvh; }
.full-h > div { min-height: 100dvh; }
.half { min-height: 400px; }
.mt-0 { margin-top: 0 !important; }
.pd-bl { padding-block: 4rem; }
@media screen and (max-width: 920px) { .pd-bl { padding-block: 2rem; } } [style*="--aspect-ratio"] > :first-child { width: 100%; }
[style*="--aspect-ratio"] > img { height: auto; }
@supports (--custom: property) {
[style*="--aspect-ratio"] { position: relative; }
[style*="--aspect-ratio"]::before { content: ""; display: block; padding-bottom: calc(100% / (var(--aspect-ratio))); }
[style*="--aspect-ratio"] > :first-child { position: absolute; top: 0; left: 0; height: 100%; }
} .wrapper { max-width: var(--wrapperWidth); padding-inline: var(--padding); margin-inline: auto; }
.wrapper.lg { max-width: var(--wrapperWidthLg); }
.wrapper.pr-0 { padding-right: 0; }
.grid {
--gridGap: 1.5rem;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: var(--gridGap);
}
.grid.equal { grid-template-columns: repeat(2, 1fr); }
.grid.feed { grid-auto-flow: column; }
.grid.top { grid-template-rows: 400px auto; }
.grid:has(> aside .box.rect), .grid:has(> .box.rect) { grid-template-columns: repeat(3, 1fr) 300px; }
.grid.equal:has(> aside .box.rect) { grid-template-columns: repeat(2, 1fr); }
.grid.equal > aside .box.rect { grid-column: 2 / 3; grid-row: -2/ -1; }
.grid.half-top > div:nth-of-type(1), .grid.top > div:nth-of-type(1) { grid-column: 1 / 3; }
.grid.top > div:nth-of-type(2) { grid-column: 3 / -1; }
.grid.half-top > div:nth-of-type(1) .card-title,
.grid.top > div:nth-of-type(1) .card-title,
.grid.top > div:nth-of-type(2) .card-title { font-size: 2rem; }
.grid > aside:has(> .box.rect), .grid > .box.rect { grid-column: -2 / -1; }
.grid.feed .card-wrapper:has(.card.row) { grid-column: span 2; }
.grid.equal > aside { grid-column: 1 / -1; }
.list-grid .list { grid-column: 1 / -2; }
@media screen and (max-width: 1120px) {
.grid { --gridGap: 1rem; }
.grid:has(> aside .box.rect) { grid-template-columns: repeat(2, 1fr); }
.grid > aside .box.rect { margin-inline: auto; }
.grid.top { grid-template-rows: auto; }
.grid.top:has(> aside .box.rect) > div:nth-of-type(1) { grid-column: 1 / 2; }
.grid.top:has(> aside .box.rect) > div:nth-of-type(2) { grid-column: 2 / 3; }
}
@media screen and (max-width: 1020px) {
.grid { grid-template-columns: repeat(2, 1fr); }
.grid.top > div:nth-of-type(1) { grid-column: 1 / 2; }
.grid.top > div:nth-of-type(2) { grid-column: 2 / 3; }
}
@media screen and (max-width: 920px) {
.grid.top > div:nth-of-type(1) .card-title,
.grid.top > div:nth-of-type(2) .card-title { font-size: 1.75rem; }
}
@media screen and (max-width: 650px) {
.grid:has(> .box.rect), .grid:has(> aside .box.rect) { grid-template-columns: 1fr; }
.grid.top:has(> aside .box.rect) > div:nth-of-type(1),
.grid.top:has(> aside .box.rect) > div:nth-of-type(2) { grid-column: 1 / 2; }
}
@media screen and (max-width: 620px) {
.grid, .grid.equal { grid-template-columns: 1fr; --gridGap: 0.75rem; }
.grid.top > div:nth-of-type(1), .grid.top > div:nth-of-type(2),
.grid.half-top > div:nth-of-type(1) { grid-column: 1 / 2; }
.grid.top .card { display: flex; }
.grid.top > div:nth-of-type(1) .card-title,
.grid.top > div:nth-of-type(2) .card-title { font-size: 1.5rem; }
} .f-title { font-family: "Fira Sans Extra Condensed", sans-serif; font-weight: 600; font-style: normal; }
.black { background-color: #000; color: var(--colorGold); }
.gold { background-color: #777; color: #fff; }
section { margin-bottom: 4rem; }
section:has(+ .gold, + .black) { margin-bottom: 0; }
.home-section { padding-block: 4rem; }
.section-header { display: flex; padding-bottom: 2.5rem; text-wrap: balance; justify-content: space-between; align-items: flex-end; }
.section-header h2, .section-header h1 { font-size: 3rem; letter-spacing: 0.5px; font-weight: 100; position: relative; text-transform: uppercase; }
.section-header h2::before, .section-header h1::before { content: ""; position: absolute; left: 0; top: -0.5rem; width: 80%; border-top: 4px solid var(--colorGold); }
.section-header.md h2 { font-size: 1.125rem; }
.section-header.lg h2, .section-header.lg h1 { font-size: 2rem; }
.header-link { font-size: 14px; letter-spacing: 0.14px; font-weight: 600; color: var(--colorGold); }
.gold .header-link { color: #fff; }
.section-header.center { text-align: center; justify-content: center; }
.section-header.center h2::before { left: 50%; transform: translateX(-50%); border-top: 4px solid; }
.service-section--header .section-header { padding-bottom: 0; }
.header-label { background-color: var(--colorAlt); color: #fff; padding: 1rem 2rem; border-radius: 10px; font-weight: 100; text-wrap: pretty; }
@media screen and (max-width: 1120px) { .section-header { padding-bottom: 2rem; } }
@media screen and (max-width: 820px) { .section-header { padding-bottom: 1.5rem; } .section-header h2, .section-header.lg h2, .section-header.lg h1 { font-size: 1.75rem; } }
@media screen and (max-width: 620px) { .section-header.lg h2, .section-header.lg h1 { font-size: 1.5rem; } }
@media screen and (max-width: 520px) { .section-header { padding-bottom: 1rem; } .header-link { font-size: 12px; letter-spacing: 0.1px; } .section-header h2 { font-size: 1.25rem; max-width: 220px; } }
@media screen and (max-width: 420px) { .header-label { padding: 0.5rem 1rem; border-radius: 5px; } } .card-wrapper { position: relative; }
.card-wrapper > a { height: 100%; width: 100%; position: absolute; left: 0; top: 0; z-index: 10; }
.card {
position: relative; border-radius: 15px; overflow: hidden; height: 100%;
background-color: #fff; border: 1px solid #f2f2f2;
transition: box-shadow 0.3s ease; display: flex; flex-direction: column;
}
.card:hover { box-shadow: 3px 3px 5px #ccc; }
.card-image { aspect-ratio: 1.2; overflow: hidden; } .card-image img { transition: transform 0.3s ease; will-change: transform; }
.card-wrapper:hover .card-image img, .card:hover .card-image img { transform: scale(1.1); }
.card-info { display: flex; flex-direction: column; padding: 1.25rem 1rem; position: relative; flex-grow: 1; }
.card-info::before { content: ""; width: 100px; border-top: 4px solid var(--colorGold); position: absolute; left: 1rem; top: -16px; }
.card-title {
margin-bottom: 2rem; font-family: "Fira Sans Extra Condensed", sans-serif; font-weight: 600;
font-size: 1.75rem; line-height: 0.88; text-wrap: pretty; padding: 1.25rem 1rem 0;
}
.card-title span { display: block; }
.card:has(.card-author) .card-title { margin-block: 1rem 0; order: 2; }
.card-author { font-size: 16px; }
.card-lead { margin-bottom: 2rem; display: none; }
@media screen and (max-width: 1080px) { .card-title { font-size: 1.25rem; line-height: 1; } }
@media screen and (max-width: 620px) {
.card-lead { display: none; }
.card-info { flex-grow: 1; padding-bottom: 1rem; }
.card-title { font-size: 1rem; }
.card-info::before { top: 10px; width: 50px; }
}
@media screen and (max-width: 560px) {
.card { display: grid; grid-template-columns: minmax(120px, 30%) 1fr; grid-template-rows: repeat(2, auto); }
.card-image { grid-column: 1 / 2; grid-row: 1 / 3; height: 100%; aspect-ratio: unset; }
.card-title { grid-column: 2 / 3; grid-row: 1 / 2; }
.card-details { grid-column: 2 / 3; grid-row: 2 / 3; }
}
@media screen and (max-width: 520px) { .card { border-radius: 10px; } }
.card-details { align-items: center; font-size: 12px; margin-top: auto; padding: 0.5rem 1rem 1.25rem; position: relative; z-index: 10; }
.card-details .details-time { margin-right: 0.5rem; padding-right: 0.5rem; border-right: 1px solid; }
.share-btn { width: 1.5rem; margin-left: auto; cursor: pointer; filter: var(--filterGold); } .card-share {
position: absolute; width: 100%; bottom: 0; left: 0; padding: 1rem;
background-color: #f2f2f2; display: flex; z-index: 20;
transform: translateX(120%);
transition: transform 0.3s ease;
will-change: transform;
}
.card-share.on { transform: translateX(0); }
.share-close { margin-left: auto; cursor: pointer; }
.share-close-wrapper { width: 2rem; height: 2rem; border-radius: 50%; background-color: var(--colorGold); position: relative; }
.share-close-wrapper .line { display: block; border-top: 2px solid #fff; position: absolute; left: 20%; width: 60%; top: calc(50% - 1px); border-radius: 5px; transform-origin: center; transform: rotate(45deg); }
.share-close-wrapper .line:last-of-type { transform: rotate(-45deg); }
.card-share .social li { background-size: 50%; }
@media screen and (max-width: 720px) { .card-share { padding-block: 0.75rem; } .card-share .social li { width: 2rem; height: 2rem; margin-right: 1rem; } }
@media screen and (max-width: 520px) { .card-share { padding-block: 0.5rem; } .card-share .social li { width: 1.5rem; height: 1.5rem; margin-right: 0.75rem; } .share-close-wrapper { width: 1.5rem; height: 1.5rem; } } .card.row { display: flex; flex-direction: row; }
.card.row > div { flex: 50%; }
.card.row .card-info { margin-top: 16px; padding-top: 16px; }
.card.row .card-info::before { top: 0; }
.card.row .card-image { aspect-ratio: unset; }
@media screen and (max-width: 620px) { .card.row > div { flex: unset; } .card.row .card-image { aspect-ratio: 1; } } .card.cover { color: #fff; height: 100%; min-height: 300px; display: flex; flex-direction: column; padding: 1.5rem 1rem; }
.card.cover::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0) 100%); z-index: 2; }
.card.cover .card-image { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 0; }
.card.cover .card-info { height: 100%; position: relative; z-index: 5; }
.card.cover .card-title { margin-block: auto 1rem; font-size: 1.5rem; z-index: 2; padding: 0; }
.card.cover .card-details { margin-top: 0; z-index: 15; padding: 0; }
.card.cover .card-lead { display: none; }
@media screen and (max-width: 520px) { .card.cover { padding: 1rem 0.75rem; } .card.cover .card-title { margin-bottom: 0; } } .card.blog { overflow: initial; min-height: 160px; display: flex; }
.card.blog .card-info::before { display: none; }
.card.blog .card-image { width: 120px; height: 120px; position: absolute; top: 50%; transform: translateY(-50%); border-radius: 10px; left: 1rem; }
.card.blog .card-info { padding-left: 160px; justify-content: center; height: 100%; }
.card.blog:hover .card-image img { transform: unset; }
.card.blog .card-date { order: 3; font-size: 12px; margin-top: auto; color: var(--colorGold); margin-left: auto; padding-top: 0.5rem; }
.card.blog .card-title { padding: 0; font-style: italic; font-weight: 300; font-family: "Advent Pro", sans-serif; }
.card.blog .card-author { font-weight: 300; font-size: 18px; }
.card.blog.guest { background-color: #000; color: #fff; }
.guest-title { color: var(--colorGold); font-size: 14px; }
@media screen and (max-width: 620px) { .card.blog .card-image { border-radius: 0; } } .card.newspaper { height: 500px; }
.card.related { display: grid; grid-template-columns: minmax(100px, 15%) 1fr; gap: 0.5rem; border: 1px solid var(--colorGold); background-color: var(--colorGold); }
.card.related .card-image { grid-row: 1 / 2; grid-column: 1 / 2; aspect-ratio: 1; }
.card.related .card-title { grid-row: 1 / 2; grid-column: 2 / 3; font-size: 1.25rem; margin-bottom: 0; padding: 1rem; align-self: center; }
.card.related .card-details { grid-row: 2 / 3; grid-column: 2 / 3; }
@media screen and (max-width: 560px) { .card.related { grid-template-rows: auto; } }
@media screen and (max-width: 420px) { .card.related .card-image { width: 100px; } .card.related .card-title { font-size: 1.125rem; padding: 0.5rem 0.25rem; } }
.vid-icon { width: 50px; height: 50px; padding: 1rem; background-color: #fff; border-radius: 5px; z-index: 2; }
.vid-icon img { filter: brightness(0); }
@media screen and (max-width: 1020px) { .vid-icon { width: 40px; height: 40px; padding: 12px; } }
@media screen and (max-width: 520px) { .vid-icon { width: 30px; height: 30px; padding: 8px; } } .news-feed { background-color: #fff; border-radius: 20px; padding: 2rem 1rem; }
.news-feed .section-header { padding-bottom: 1rem; width: fit-content; }
.feed-wrapper { max-height: 500px; overflow-x: hidden; overflow-y: auto; }
.feed-item { margin-bottom: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid; }
.feed-title { font-size: 16px; font-family: "Fira Sans Extra Condensed", sans-serif; font-weight: 500; text-wrap: balance; }
.feed-details { align-items: center; gap: 0.5rem; font-size: 12px; margin-top: 0.5rem; }
.feed-category { font-size: 12px; font-weight: 400; border-left: 1px solid; padding-left: 0.5rem; }
.feed-wrapper ins { max-width: 100%; margin-block: 1rem; }
.news-feed .all-news-btn { color: #fff; background-color: #000; padding: 0.5rem 1rem; text-align: center; max-width: 300px; margin: 0.5rem auto 1rem; border-radius: 6px; font-size: 12px; }
.news-feed-mob-open, .news-feed-close { display: none; }
@media screen and (max-width: 650px) {
.news-feed { border-radius: 0; padding-block: 1rem 0; height: auto; width: 100%; }
.news-feed.on { padding-block: 2rem; height: 100dvh; }
.news-feed-mob-open { width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: block; z-index: 3; pointer-events: all; }
.news-feed.on .news-feed-mob-open { display: none; pointer-events: none; }
.feed-wrapper ins { display: none !important; }
.news-feed.on .feed-wrapper ins { display: block !important; }
.news-feed-close { display: none; position: absolute; right: 1rem; top: 1rem; width: 2rem; height: 2rem; background-color: #000; border-radius: 50%; z-index: 5; }
.news-feed-close .line { width: 80%; position: absolute; display: block; border-top: 2px solid #fff; transform-origin: center; border-radius: 5px; transform: rotate(45deg); top: calc(50% - 1px); left: 10%; }
.news-feed-close .line:nth-of-type(odd) { transform: rotate(-45deg); }
.feed-wrapper { max-height: calc(100dvh - 6rem - 40px); overflow: auto; }
.feed-wrapper > div:not(:first-of-type) { display: none; }
.news-feed.on .feed-wrapper > div:not(:first-of-type) { display: block; }
.news-feed .section-header, .news-feed .all-news-btn { display: none; }
.news-feed.on .section-header, .news-feed.on .news-feed-close, .news-feed.on .all-news-btn { display: block; }
}
@media screen and (max-width: 390px) { .feed-title { font-size: 14px; text-wrap: pretty; } } .social ul { align-items: center; }
.social li { width: 2rem; height: 2rem; background-position: center; background-size: cover; background-repeat: no-repeat; margin-right: 1rem; border-radius: 5px; }
.social.sm li { width: 1rem; height: 1rem; }
.social.bg.lg li { width: 4rem; height: 4rem; background-size: 50%; background-color: #fff; }
.social.border li { border: 1px solid #000; }
.social.border.rnd li { border-radius: 50%; }
.social.white li { filter: invert(1); }
.social.round li { background-color: #fff; border-radius: 50%; }
.social ul li:last-of-type { margin-right: 0; }
.social ul li.pin { background-image: url(//paoktoday.gr/wp-content/themes/paoktoday-3/assets/icons/pin.svg); }
.social ul li.fb { background-image: url(//paoktoday.gr/wp-content/themes/paoktoday-3/assets/icons/fb.svg); }
.social ul li.tw { background-image: url(//paoktoday.gr/wp-content/themes/paoktoday-3/assets/icons/x.png); }
.social ul li.yt { background-image: url(//paoktoday.gr/wp-content/themes/paoktoday-3/assets/icons/yt.svg); }
.social ul li.ig { background-image: url(//paoktoday.gr/wp-content/themes/paoktoday-3/assets/icons/ig.svg); }
.social ul li.sk { background-image: url(//paoktoday.gr/wp-content/themes/paoktoday-3/assets/icons/skype.svg); }
.social ul li.ln { background-image: url(//paoktoday.gr/wp-content/themes/paoktoday-3/assets/icons/ln.svg); }
.social ul li.tk { background-image: url(//paoktoday.gr/wp-content/themes/paoktoday-3/assets/icons/tk.svg); }
.social ul li.sf { background-image: url(//paoktoday.gr/wp-content/themes/paoktoday-3/assets/icons/sfy.svg); }
.social ul li.ap { background-image: url(//paoktoday.gr/wp-content/themes/paoktoday-3/assets/icons/ap.svg); }
.social ul li.link { background-image: url(//paoktoday.gr/wp-content/themes/paoktoday-3/assets/icons/link.svg); }
.social ul li.viber { background-image: url(//paoktoday.gr/wp-content/themes/paoktoday-3/assets/icons/viber.svg); }
.social ul li.rss { background-image: url(//paoktoday.gr/wp-content/themes/paoktoday-3/assets/icons/rss.svg); }
.social ul li.fb.col { background-image: url(//paoktoday.gr/wp-content/themes/paoktoday-3/assets/icons/fb_mn_col.svg); }
.social ul li.ig.col { background-image: url(//paoktoday.gr/wp-content/themes/paoktoday-3/assets/icons/ig_mn_col.svg); }
.social ul li.tk.col { background-image: url(//paoktoday.gr/wp-content/themes/paoktoday-3/assets/icons/tk_mn_col.svg); }
.social ul li.wup { background-image: url(//paoktoday.gr/wp-content/themes/paoktoday-3/assets/icons/wup.svg); background-size: contain; background-color: transparent; border-radius: 0; }
.social ul li.lg { width: 2.25rem; height: 1.85rem; margin-right: 3rem; }
.social ul li > a { width: 100%; height: 100%; display: inline-block; }
.social.md ul li { width: 36px; height: 36px; margin-right: 32px; }
.social.md ul li.fb { background-image: url(//paoktoday.gr/wp-content/themes/paoktoday-3/icons/fb.svg); }
.social.md ul li.tw { background-image: url(//paoktoday.gr/wp-content/themes/paoktoday-3/icons/tw.svg); background-size: 19px 15px; }
.darkmode .social ul li { filter: invert(1); }
@media screen and (max-width: 880px) { .social.bg.lg li { width: 3rem; height: 3rem; } }
@media screen and (max-width: 680px) { .social ul li { margin-right: 2rem; } }
@media screen and (max-width: 620px) { .social ul li { width: 40px; height: 40px; } .social ul li.rss { background-size: 14px 14px; } }
@media screen and (max-width: 480px) { .social ul li { margin-right: 1rem; } .social.bg.lg li { width: 2.5rem; height: 2.5rem; } } .search-header-wrapper { position: relative; }
.search-icon { width: 1rem; height: 1rem; background-image: url(//paoktoday.gr/wp-content/themes/paoktoday-3/assets/icons/search.svg); background-position: center; background-size: contain; background-repeat: no-repeat; cursor: pointer; }
.search-icon.white { filter: invert(1); }
.fixed-header { position: fixed; left: var(--padding); top: 10px; width: calc(100dvw - (2 * var(--padding))); padding-block: 0; z-index: 100; }
@media screen and (max-width: 720px) { .mob-fixed-header .fixed-header { transform: translateY(0); display: flex; } }
.btn-container { width: 3rem; height: 2rem; padding: 0.5rem; }
.btn-container > div { height: 100%; width: 100%; position: relative; cursor: pointer; }
.btn-container .line { width: 100%; border-top: 1px solid #fff; position: absolute; left: 0; top: 50%; }
.btn-container .line:first-of-type { top: 0; }
.btn-container .line:last-of-type { top: 100%; }
.btn { border-radius: 5px; background-color: var(--colorBtn); padding: 0.5rem 1rem; color: #fff; text-align: center; cursor: pointer; }
.bg-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; } .panel {
position: fixed; width: 100%; height: 100%; left: 0; top: 0;
background-color: rgb(0, 0, 0, 0.6); backdrop-filter: blur(4px);
opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
z-index: 10000; display: flex; justify-content: center; align-items: center; flex-direction: column;
}
.panel.on { opacity: 1; pointer-events: all; }
.close-panel { position: absolute; top: 2rem; right: 2rem; width: 3rem; height: 3rem; background-color: var(--colorGold); cursor: pointer; border: 2px solid #fff; }
.close-panel .line { border-top: 1px solid #fff; width: 80%; left: 10%; top: 50%; position: absolute; transform-origin: center; transform: rotate(45deg); }
.close-panel .line:last-of-type { transform: rotate(-45deg); }
.panel > p { margin-top: 1rem; background-color: #000; padding: 0.5rem; color: #fff; font-size: 12px; border-radius: 3px; }
@media screen and (max-width: 520px) { .close-panel { right: 1rem; } }
.has-fixed-header { padding-top: 78px; }
@media screen and (max-width: 820px) { .has-fixed-header { padding-top: 75px; } }
@media screen and (max-width: 450px) { .has-fixed-header { padding-top: 65px; } }
.anim, .anim p { transition: opacity 0.3s ease, transform 0.3s ease; }
.fadeOp p, .fadeIn { opacity: 0; transform: translateY(100%); }
.fadeOp.on p, .fadeIn.on { opacity: 1; transform: translateY(0); }
.anim-img.col-image { position: relative; }
.anim-img.col-image::before { content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; transition: height 0.3s; background-color: var(--colorSec); }
.black .anim-img.col-image::before { background-color: var(--colorAlt); }
.anim-img.on.col-image::before { height: 0; }
.more-btn {
width: fit-content; padding: 1rem 2rem; position: relative; border: 1px solid; border-radius: 30px; margin: 3rem auto 0;
background-color: #fff; color: var(--colorMain); font-size: 14px; letter-spacing: 0.14px;
opacity: 0; transform: translateY(100%);
transition: padding 0.3s ease, background-color 0.3s ease, color 0.3s ease, opacity 1.1s ease, transform 1.1s ease;
}
.more-btn:hover { background-color: var(--colorMain); color: var(--colorSec); padding-inline: 3.5rem; }
.more-btn .arrow { right: 1rem; top: 0.5rem; width: 2rem; height: 2rem; opacity: 0; }
.more-btn:hover .arrow { opacity: 1; }
.more-btn .arrow::before, .more-btn .arrow::after { border-width: 1px; border-color: var(--colorSec); }
.more-btn .arrow::after { width: calc(100% - 0.25rem); height: calc(100% - 0.25rem); }
.contact-btn.more-btn { opacity: 1; transform: translateY(0); margin-top: 1rem; } .breadcrumbs { padding-block: 1rem; margin-bottom: 2rem; font-size: 14px; color: var(--colorSec); }
.breadcrumbs ul { gap: 1ch; }
.breadcrumbs ul li:not(:last-of-type)::after { content: ">"; margin-left: 1ch; }
@media screen and (max-width: 920px) { .breadcrumbs { margin-bottom: 1rem; } }
@media screen and (max-width: 520px) { .breadcrumbs { margin-bottom: 0; font-size: 12px; } }
.seperator { background-color: #fff; padding-block: 3rem; }
.seperator.dark { background-color: #000; }
.box { position: relative; }
.box::before { width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: flex; justify-content: center; align-items: center; font-size: 12px; z-index: -1; }
.box.sticky { position: sticky; top: 90px; }
.box.rect { margin-inline: auto; }
.box.wide { width: 728px; height: 90px; }
.box.wide .mob { display: none; }
.box ins[data-ad-status="unfilled"] { display: none !important; }
.box:has(ins) > a { display: none; }
.box:has(ins[data-ad-status="unfilled"]) > a { display: block; }
@media screen and (max-width: 920px) { .box.wide { width: 300px; height: 250px; overflow: hidden; } .box.wide .desk { display: none; } .box.wide .mob { display: block; } }
.sponsors { background-color: #fff; padding-block: 3rem; margin-top: 3rem; }
.sponsors-grid { margin-block: 3rem 1rem; }
.sponsors-grid .row { justify-content: center; margin-bottom: 2rem; flex-wrap: wrap; }
.sponsor { background-color: var(--colorGold); }
.row.lg { gap: 2rem; } .row.lg .sponsor { width: 250px; height: 80px; }
.row.md { gap: 1.5rem; } .row.md .sponsor { width: 200px; height: 60px; }
.row.sm { gap: 1rem; } .row.sm .sponsor { width: 150px; height: 55px; } .home-match-center-wrapper { gap: 1rem; overflow: auto; padding-inline: 2rem; }
.match-card { background-color: #fff; padding: 1rem; border-radius: 20px; width: 260px; flex-shrink: 0; }
.event-icon { width: 4rem; padding: 0.75rem; margin: 0 auto 1rem; background-color: #000; border-radius: 10px; }
.event-icon img { filter: invert(1); }
.event { text-align: center; color: #000; }
.event-competition { font-size: 12px; font-weight: 600; margin-bottom: 1rem; }
.event-info { font-size: 14px; }
.event-venue { margin-top: 1rem; }
.event .teams { background-color: #000; color: #fff; border-radius: 10px; margin-top: 2rem; padding: 1rem; }
.event .teams span { display: block; text-align: left; font-family: "Fira Sans Extra Condensed", sans-serif; font-weight: 700; font-size: 18px; }
.special { background-color: var(--colorGold); padding-block: 4rem; }
.special .card, .special .section-header h2::before { border-color: #000; }
.special .header-link { color: #000; }
.special-grid > div:first-of-type { grid-column: 1 / 3; grid-row: 1 / 3; }
.special-grid > div:nth-of-type(2) { grid-column: 3 / 5; }
@media screen and (max-width: 1020px) { .special-grid > div:first-of-type { grid-column: 1 / 2; grid-row: 1 / 2; } .special-grid > div:nth-of-type(2) { grid-column: 2 / 3; } }
@media screen and (max-width: 620px) { .special-grid > div:nth-of-type(2) { grid-column: 1 / 2; } } .mobile-version { display: none; }
@media screen and (max-width: 520px) {
.home-mobile-hide { display: none; }
.mobile-version { display: block; }
.mobile-version .card-wrapper { margin-bottom: 1rem; }
.mob-feed { position: fixed; width: 100%; height: 100dvh; left: 0; top: 0; background-color: #fff; z-index: 2000; overflow-y: auto; }
.mobile-version .covericon { margin-bottom: 1rem; }
.mobile-version .box { margin-bottom: 1rem; }
}
.mobile-news-feed { position: fixed; top: 0; left: 0; height: 100dvh; width: 100%; z-index: 1000; display: none; }
.mobile-news-feed:has(.news-feed.on) { display: block; }.top-news { margin-top: 2rem; }
.top-news:has(.next-games-football) .news-feed { grid-row: 2 / 3; }
.top-news .news-feed { grid-column: -2 / -1; grid-row: 2 / 3; }
.top-news .next-games-football, .top-news .covericon { grid-column: -2 / -1; grid-row: 1 / 2; }
.top-news-grid > div:nth-child(1) { grid-column: 1 / 4; grid-row: 1 / 3; }
.top-news-grid > div:nth-child(2) { grid-column: 1 / 2; grid-row: 3 / 4; }
.top-news-grid > div:nth-child(3) { grid-column: 2 / 3; grid-row: 3 / 4; }
.top-news-grid > div:nth-child(4) { grid-column: 3 / 4; grid-row: 3 / 4; }
.top-news-grid > div:nth-child(1),
.top-news-grid > div:nth-child(2),
.top-news-grid > div:nth-child(3) { min-height: 350px; }
.top-news-grid > div:nth-child(1) .card-title { font-size: 3rem; }
.top-news .next-games-football { background-color: #000; color: #fff; border-radius: 20px; padding: 1rem; text-align: center; position: relative; }
.covericon.mobile-feed, .top-news .covericon {
background-color: var(--colorDarkGold); color: #fff;
font-family: "Fira Sans Extra Condensed", sans-serif;
font-weight: 500; padding: 1rem 2rem; border-radius: 10px; text-align: center;
}
.top-news .next-games-btns { position: absolute; left: 5%; top: 60%; width: 90%; justify-content: space-between; align-items: center; }
.top-news .next-games-btns > * { width: 1rem; height: 1rem; border-bottom: 1px solid var(--colorGold); border-left: 1px solid var(--colorGold); transform-origin: center; cursor: pointer; }
.top-news .next-games-btns .prev { transform: rotate(45deg); }
.top-news .next-games-btns .next { transform: rotate(-135deg); }
.next-games-football h3 { color: var(--colorGold); font-size: 20px; padding-bottom: 0.5rem; }
.next-game-ft { width: 100%; flex-shrink: 0; scroll-snap-align: start; }
.next-game-ft .teams { justify-content: center; gap: 2px; font-size: 20px; }
.next-game-ft .event-competition { margin-bottom: 0.5rem; }
.next-game-ft .event-details { justify-content: center; gap: 8px; font-size: 14px; }
@media screen and (max-width: 920px) {
.top-news-grid > div:nth-child(1) { grid-column: 1 / -1; grid-row: 1 / 3; min-height: 600px; }
.top-news:has(.covericon) .news-feed, .top-news:has(.next-games-football) .news-feed { grid-row: 4 / 6; }
.top-news .covericon { grid-row: 3 / 4; }
.top-news .news-feed { grid-row: 3 / 6; }
.top-news-grid > div:nth-child(2), .top-news-grid > div:nth-child(3), .top-news-grid > div:nth-child(4) { grid-column: 1 / 4; min-height: 300px; }
.top-news-grid > div:nth-child(2) { grid-row: 3 / 5; }
.top-news-grid > div:nth-child(3) { grid-row: 5 / 6; }
.top-news-grid > div:nth-child(4) { grid-row: 6 / 7; }
.top-news .box.rect { grid-row: 6 / 7; }
.top-news-grid > div:nth-child(1) .card-title { font-size: 2.5rem; }
.top-news .next-games-football { grid-row: 3/4; padding-block: 0.5rem; }
.next-games-football h3 { font-size: 16px; }
}
@media screen and (max-width: 650px) {
.top-news-grid { grid-gap: var(--gridGap) 0; }
.top-news .next-games-football { grid-row: 1/2; margin-top: 0.5rem; border-radius: 10px; display: none; }
.top-news { margin-top: 1rem; }
.top-news-grid > div:nth-child(1) { grid-column: 1 / 4; grid-row: 1 / 3; min-height: unset; width: calc(100% + 2 * var(--padding)); margin-left: calc(-1 * var(--padding)); }
.top-news-grid > div:nth-child(1) .card { border-radius: 0; padding: 0 0 0.75rem; color: #000; }
.top-news-grid > div:nth-child(1) .card::before { display: none; }
.top-news-grid > div:nth-child(1) .card-image { margin-bottom: 1rem; position: relative; height: auto; }
.top-news-grid > div:nth-child(1) :is(.card-title, .card-details) { padding-inline: 12px; }
.top-news .news-feed { display: none; position: fixed; left: 0; bottom: 0; background-color: #fff; z-index: 100; }
.top-news .news-feed.on { display: block; z-index: 1010; }
.top-news-grid > div:nth-child(2), .top-news-grid > div:nth-child(3), .top-news-grid > div:nth-child(4) { grid-column: 1 / -1; min-height: 350px; }
.top-news-grid > div:nth-child(2) { grid-row: 3 / 4; }
.top-news-grid > div:nth-child(3) { grid-row: 5 / 6; }
.top-news-grid > div:nth-child(4) { grid-row: 6 / 7; }
.top-news .box.rect { grid-row: 4 / 5; grid-column: 1 / -1; margin-inline: auto; }
.top-news .covericon { grid-row: auto; }
}
@media screen and (max-width: 580px) { .top-news-grid > * { grid-column: 1 / 2; } }
@media screen and (max-width: 520px) { .top-news-grid > div:nth-child(1) .card-title { font-size: 1.75rem; } .top-news { margin-bottom: 0; } }
@media screen and (max-width: 360px) { .top-news-grid > div:nth-child(1) .card-title { font-size: 1.5rem; } } .latest-game { position: relative; padding-block: 4rem; }
.latest-game::before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); }
.latest-game .bg-img { filter: grayscale(1); transform: translateZ(0); will-change: filter; background-image: var(--bg); background-position: center; background-repeat: no-repeat; background-size: cover; }
.latest-game--wrapper { justify-content: center; align-items: center; gap: clamp(3rem, 7vw, 140px); height: 100%; }
.latest-game-info { color: #fff; position: relative; }
.latest-game-info h2 { font-size: 20px; margin-bottom: 0.5rem; padding-left: 1rem; }
.latest-game-info h3 { font-size: 14px; margin-bottom: 1rem; padding-left: 1rem; }
.latest-game-teams { background-color: rgba(255, 255, 255, 0.75); padding: 1rem; border-radius: 10px; font-size: 2rem; display: grid; grid-template-columns: 1fr 5ch; gap: 0 2rem; color: #000; text-transform: uppercase; }
.latest-game-teams :is(.home, .away) { grid-column: 1 / 2; font-family: "Fira Sans Extra Condensed", sans-serif; font-weight: 500; }
.latest-game-teams .score { padding: 0.5rem; border-radius: 5px; font-size: 42px; letter-spacing: 0.4px; grid-row: 1 / 3; grid-column: 2 / 3; align-self: center; height: 100%; display: flex; justify-content: center; align-items: center; font-family: "Fira Sans Extra Condensed", sans-serif; font-weight: 700; }
.latest-video { height: 300px; width: 500px; }
.latest-sponsor { position: absolute; bottom: 2rem; }
.latest-game:has(.latest-sponsor) { padding-bottom: calc(100px + 4rem); }
@media screen and (max-width: 1080px) { .latest-game--wrapper { gap: 2rem; } }
@media screen and (max-width: 920px) { .latest-game .half, .latest-game--wrapper { flex-direction: column; } .latest-game-info :is(h2, h3) { text-align: center; padding-left: 0; } .latest-game:has(.latest-sponsor) { padding-block: 2rem; } .latest-sponsor { position: relative; bottom: unset; margin-block: 2rem; } }
@media screen and (max-width: 620px) { .latest-game--wrapper { width: 100%; } .latest-video { max-width: 500px; width: 100%; flex-grow: 1; } .latest-game-info h2 { font-size: 18px; } .latest-game-teams { font-size: 1.5rem; } .latest-game-teams .score { font-size: 32px; } } .home-blogs { padding-top: 4rem; }
.home-bloggers-grid { margin-bottom: 4rem; }
.bloggers-container > div { container-name: blog-card; container-type: inline-size; min-height: 160px; height: fit-content; }
.home-blogs .card-wrapper.off { display: none; }
@container blog-card (width < 480px) { .card.blog { min-height: 120px; } .card.blog .card-title { font-size: 1.25rem; margin-block: 0.5rem; } .card.blog .card-image { width: 100px; height: 100px; } .card.blog .card-info { padding-left: 130px; } }
@container blog-card (width < 380px) { .card.blog { min-height: 80px; } .card.blog .card-author { font-size: 14px; } .card.blog .card-title { font-size: 1.125rem; } .card.blog .card-image { width: 80px; height: 80px; } .card.blog .card-info { padding-left: 110px; padding-block: 1rem; } }
@container blog-card (width < 350px) { .card.blog { flex-direction: column; align-items: center; } .card.blog .card-image { position: relative; top: unset; transform: none; left: unset; } .card.blog .card-info { padding-left: 1rem; text-align: center; width: 100%; } .card.blog .card-author { font-size: 12px; } .card.blog .card-title { font-size: 1rem; } }
@media screen and (max-width: 1120px) { .bloggers-container.grid { grid-gap: 2rem var(--gridGap); } }
@media screen and (max-width: 880px)  { .bloggers-container.grid { grid-gap: 1.5rem var(--gridGap); } }
@media screen and (max-width: 720px)  { .bloggers-container.grid { grid-gap: var(--gridGap); } }
@media screen and (max-width: 620px)  { .bloggers-container.grid { --gridGap: 1.5rem; } .bloggers-container > div { min-height: unset; } }
@media screen and (max-width: 520px)  { .bloggers-container.grid { --gridGap: 1rem; } } .home-mobVideos { color: #fff; padding-block: 4rem; margin-bottom: 0; }
.home-social-videos-wrapper { gap: 2rem; --leftSpace: calc((100vw - var(--wrapperWidth) + 2 * var(--padding)) / 2); padding-inline: var(--leftSpace) 2rem; }
.social-video { border-radius: 20px; width: 345px; flex-shrink: 0; overflow: hidden; aspect-ratio: 0.6; position: relative; cursor: pointer; }
.social-video .vid-icon { position: absolute; left: 1rem; bottom: 1rem; }
.social-video iframe { width: 100%; height: 100%; }
.social-follow { align-items: center; margin-top: 3rem; justify-content: flex-end; }
.social-follow h3 { font-size: 2rem; margin-right: 2rem; font-weight: 600; }
.social-follow li { background-color: #fff; width: 4rem; height: 4rem; background-size: 50%; }
@media screen and (max-width: 1430px) { .home-social-videos-wrapper { padding-inline: var(--padding); } }
@media screen and (max-width: 1020px) { .social-follow li { width: 3rem; height: 3rem; } }
@media screen and (max-width: 820px)  { .social-follow h3 { font-size: 1.75rem; margin-right: 1.5rem; } }
@media screen and (max-width: 620px)  { .social-follow h3 { font-size: 1.5rem; } .social-follow ul li { margin-right: 1rem; } }
@media screen and (max-width: 520px)  { .social-video { width: clamp(300px, 80vw, 350px); } }
@media screen and (max-width: 420px)  { .social-follow { margin-top: 2em; flex-direction: column; gap: 1rem; } .social-follow h3 { margin-right: 0; } } .quiz-banner { background-color: #000; color: #fff; border-radius: 30px; padding: 3rem 4rem; text-align: center; margin-top: 4rem; font-size: 22px; position: relative; }
.quiz-banner h2 { font-size: 4rem; color: var(--colorGold); margin-bottom: 1rem; }
@media screen and (max-width: 920px) { .quiz-banner { border-radius: 20px; padding: 2rem; margin-top: 3rem; font-size: 18px; } .quiz-banner h2 { font-size: 3rem; } }
@media screen and (max-width: 420px) { .quiz-banner { padding: 1rem; margin-top: 2rem; font-size: 16px; } .quiz-banner h2 { font-size: 2rem; margin-bottom: 0.5rem; } } .shorts-panel { position: fixed; top: 0; left: 0; width: 100%; height: 100dvh; background-color: rgba(0, 0, 0, 0.7); backdrop-filter: blur(5px); z-index: 50; opacity: 0; pointer-events: none; display: none; transition: opacity 0.3s ease; will-change: opacity; }
.shorts-panel.show { display: block; }
.shorts-panel.on { opacity: 1; pointer-events: all; }
.shorts-wrapper { width: 100%; height: 100%; justify-content: center; align-items: center; }
.short-outer { background-color: #fff; padding: 2rem; }
.close-shorts { background-color: #fff; border-radius: 50%; padding: 0.5rem; width: 2rem; height: 2rem; position: absolute; right: 2rem; top: 2rem; cursor: pointer; }
.close-shorts .line { width: 60%; border-top: 2px solid #000; position: absolute; left: 20%; top: calc(50% - 1px); transform-origin: center; transform: rotate(45deg); }
.close-shorts .line:last-of-type { transform: rotate(-45deg); } .openents-news { margin-top: 4rem; }
.home-videos { padding-top: 2rem; }
.home-video-grid .card { height: 350px; }
.home-videos .section-banner { position: relative; overflow: hidden; margin-top: 2rem; background-color: #000; }
.home-videos .box.wide { margin: 2rem auto 0; }
@media screen and (max-width: 1420px) { .home-videos .section-banner { height: 250px; } }
@media screen and (max-width: 1020px) { .home-videos .section-banner { height: 200px; } }
@media screen and (max-width: 760px)  { .home-videos .section-banner { height: 150px; } }
@media screen and (max-width: 620px)  { .home-video-grid .card { min-height: unset; height: calc((100vw - 2 * var(--padding)) * 9 / 16); } }
@media screen and (max-width: 580px)  { .home-videos .section-banner { height: 120px; } }
@media screen and (max-width: 460px)  { .home-videos .section-banner { height: 100px; } }
@media screen and (max-width: 380px)  { .home-videos .section-banner { height: 80px; } }
.home-highlights { padding-block: 4rem; margin-bottom: 0; }
.home-highlights aside { margin: 4rem auto 0; }
.home-highlights .box { margin-inline: auto; }
.home-retro { padding-block: 4rem; }
.home-retro .vid-icon { background-color: var(--colorGold); }
.home-retro .card { border-color: var(--colorGold); }
.travel .card { height: 300px; }
.home-transfers, .home-analysis { padding-block: 4rem; margin-bottom: 0; }
@media screen and (max-width: 620px) { .home-analysis .card { min-height: unset; height: calc((100vw - 2 * var(--padding)) * 9 / 16); } } .clicks { position: relative; margin-top: 4rem; }
.clicks .wrapper { padding-block: 4rem; }
.clicks h2 { text-align: center; }
.cover-wrapper { justify-content: space-between; align-items: center; gap: 3rem; }
.cover-wrapper .left-col { flex: 0 0 300px; }
.cover-wrapper .covers-btn { width: fit-content; border: 1px solid var(--colorGold); border-radius: 10px; padding: 1rem 2rem; margin-top: 3rem; display: block; }
.clicks-image { margin-left: auto; width: fit-content; flex-basis: 60%; max-width: 700px; }
.clicks-image img { width: inherit; height: inherit; object-position: center; object-fit: contain; }
@media screen and (max-width: 720px) {
.clicks .wrapper { padding-block: 2rem; }
.cover-wrapper { flex-direction: column-reverse; justify-content: space-between; align-items: center; gap: 2rem; }
.cover-wrapper .left-col a { margin: 2rem auto 0; }
} .next-match { position: relative; }
.next-match::before { content: ""; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); position: absolute; }
.next-match .bg-img { filter: grayscale(0.8); transform: translateZ(0); will-change: filter; background-image: var(--bg); background-position: center; background-repeat: no-repeat; background-size: cover; }
.next-match-info { color: #fff; position: relative; text-align: center; }
.next-match-info h3 { font-weight: 600; font-size: 20px; }
.next-match-info h4 { font-size: 18px; margin-top: 3rem; }
.next-match-info .date-info { margin-block: 2rem 1rem; font-size: 16px; }
.next-match-info .date-info span { display: block; }
.next-match-teams { font-size: 72px; line-height: 90%; font-family: "Fira Sans Extra Condensed", sans-serif; font-weight: 800; justify-content: center; gap: 1rem; display: grid; grid-template-columns: 1fr 2ch 1fr; }
.next-match-teams .vs { font-size: 60px; color: var(--colorGold); align-self: center; font-weight: 600; }
.next-match-teams .home { text-align: right; justify-content: end; }
.next-match-teams .away { text-align: left; }
.next-match-teams .home, .next-match-teams .away { align-items: center; gap: 1rem; font-weight: 600; letter-spacing: -0.25px; text-transform: uppercase; }
.next-match-teams .team-logo { width: 120px; height: 120px; object-fit: contain; }
.next-match-teams .away .team-logo { order: -1; }
.match-center-btn { background-color: #000; padding: 1rem 3rem; border-radius: 30px; width: fit-content; margin: 4rem auto 0; }
@media screen and (max-width: 1220px) { .next-match-teams { font-size: 60px; } .next-match-teams .vs { font-size: 45px; } .next-match-teams .team-logo { width: 100px; height: 100px; } }
@media screen and (max-width: 980px)  { .next-match-teams { font-size: 50px; } .next-match-teams .vs { font-size: 40px; } }
@media screen and (max-width: 880px)  { .next-match-teams .team-name { display: none; } .next-match-teams .vs { font-size: 30px; } }
@media screen and (max-width: 520px)  { .next-match-info .date-info { margin-bottom: 3rem; } .match-center-btn { padding: 0.5rem 2rem; font-size: 14px; } .next-match-teams .team-logo { width: 80px; height: 80px; } }
@media screen and (max-width: 440px)  { .next-match-info h3 { font-size: 18px; } .next-match-info h4 { font-size: 16px; } .next-match-info .date-info { font-size: 14px; } } .category-wrapper { margin-top: 3rem; }
.category-grid { margin-bottom: 3rem; }
.category-grid .card-wrapper { min-height: 300px; }
.list { max-width: 800px; margin-inline: auto; display: grid; grid-template-columns: subgrid; grid-auto-flow: dense; grid-column: 1 / 4; gap: 2rem; }
.list .card .card-lead { display: none; }
.list > .box.wide { grid-column: 1 / -1; margin-inline: auto; }
.pagination { margin-block: 2rem; display: flex; gap: 1rem; justify-content: center; }
@media screen and (max-width: 1120px) { .category-list.grid { grid-template-columns: repeat(2, 1fr) 300px !important; } .list { grid-column: 1 /3; } .category-wrapper { margin-top: 2rem; } }
@media screen and (max-width: 920px)  { .category-list.grid { grid-template-columns: repeat(2, 1fr) !important; } .list { grid-column: 1 / 3; } .category-list > aside:has(> .box.rect) { grid-column: 1 / -1; margin-inline: auto; } .category-grid { margin-bottom: 2rem; } }
@media screen and (max-width: 740px)  { .category-grid.grid > div:first-of-type { grid-column: 1 / -1 !important; } .category-grid.grid > div:nth-of-type(2) { grid-column: 1 / 2 !important; } .category-grid.grid > aside { grid-column: 1 / -1 !important; grid-row: 2 /3; margin-inline: auto; } .list { gap: 1rem; } }
@media screen and (max-width: 560px)  { .category-list.grid { display: block; } }
@media screen and (max-width: 520px)  { .list { gap: 1rem 0.5rem; margin-bottom: 1rem; } .category-wrapper { margin-top: 1.5rem; } }
.category-wrapper.bloggers-category { margin-bottom: 4rem; }
.category-bloggers { gap: 3rem 2rem; }
.category-bloggers .card-wrapper > a { position: relative; }
.category-bloggers > .box.wide { grid-column: 1 / -1; margin-inline: auto; }
@media screen and (max-width: 1060px) { .category-bloggers { gap: 2rem; } }
@media screen and (max-width: 920px)  { .category-bloggers { gap: 1rem; } }
@media screen and (max-width: 720px)  { .category-bloggers.grid { grid-template-columns: 1fr; gap: 2rem; } }
@media screen and (max-width: 520px)  { .category-bloggers.grid { gap: 1rem; } } .article article { margin-block: 2rem; --width: 1100px; }
.article-header { position: relative; margin-bottom: 8rem; }
.article-img { max-width: var(--width); margin-inline: auto; position: relative; border-radius: 20px; overflow: hidden; margin-top: 3rem; width: 100%; }
.article-img::before { content: ""; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0) 100%); position: absolute; left: 0; top: 0; pointer-events: none; }
.article-title { font-size: 42px; line-height: 110%; width: 100%; margin-block: 1rem; max-width: 900px; padding-inline: 2rem; bottom: 2rem; left: 50%; transform: translateX(-50%); color: #fff; z-index: 2; text-wrap: balance; text-align: center; }
.article-category { font-weight: 800; order: -1; left: 50%; transform: translateX(-50%); text-transform: uppercase; font-size: 2rem; }
.article-category::before { content: ""; position: absolute; left: 20%; top: -0.25rem; width: 60%; border-top: 4px solid; }
.article-header > *:not(.article-img) { position: absolute; }
.article-details { top: calc(100% + 1rem); width: 100%; max-width: var(--width); left: 50%; transform: translateX(-50%); justify-content: space-between; flex-wrap: wrap; padding: 1rem 2rem; background-color: #444; border-radius: 20px; color: #fff; }
.article-logo { position: absolute; bottom: 0.5rem; left: 50%; transform: translateX(-50%); width: 100px; filter: brightness(0) invert(1); }
.article-logo::before { content: ""; width: 4ch; position: absolute; left: 50%; transform: translateX(-50%); top: -5px; border-top: 2px solid #fff; }
.article-author, .article-date { font-size: 14px; }
.article-share { width: 100%; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--colorGold); }
.article-share ul { justify-content: end; filter: var(--filterGold); }
.article-top-banner { margin-bottom: 2rem; }
.article-body-wrapper { max-width: var(--width); margin-inline: auto; gap: 2rem; justify-content: space-between; flex-wrap: wrap; }
.article-body-wrapper[data-article="news"] .article-body { display: none; }
.article-body-wrapper[data-article="report"] .article-news { display: none; }
.article-body-wrapper .aside-top { width: 100%; }
.article-body-wrapper .aside-top > div { margin-inline: auto; }
.article-body-buttons { width: 100%; gap: 1rem; }
.article-btn { border-radius: 5px; padding: 1rem 2rem; border: 1px solid #000; cursor: pointer; }
.article-btn.active { background-color: #000; color: var(--colorGold); }
.article-body { padding: 2rem; background-color: #fff; border-radius: 20px; display: flex; flex-direction: column; }
.article-body > * { max-width: 650px; font-size: 18px; line-height: 150%; }
.article-body > *:not(:last-child) { margin-bottom: 1rem; }
.article-body-wrapper aside > * { position: sticky; top: 0; }
.article-col { width: calc(100% - 300px - 2rem); }
.article-news { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.article-news .match-article { height: 350px; }
.article-body > :is(h1, h2, h3, h4, h5, h6), .article-body :is(p, li, h1, h2, h3, h4, h5, h6) > a { color: var(--colorDarkGold); font-weight: 700; }
.article-body > p:empty { display: none; }
.wp-block-embed iframe { width: 100%; height: auto; aspect-ratio: 16/9; }
.article-body > ins { max-width: 100%; margin-inline: auto; width: 100%; }
.article-body > .game-center-link { color: var(--colorGold); font-weight: 600; }
.article-body .article-tags { gap: 1ch; }
.article-body .article-tags li { font-size: 12px; }
.article-footer { padding: 2rem; background-color: #f0f0f0; border-radius: 20px; margin: 2rem auto 0; max-width: var(--width); }
.article-footer-header { font-weight: 700; font-size: 20px; margin-bottom: 1rem; }
.tags { flex-wrap: wrap; gap: 1rem; }
.tag { padding: 0.5rem 1rem; border-radius: 5px; background-color: #000; color: #fff; font-size: 14px; }
.related-articles { padding-block: 3rem; }
.related-grid .card { height: 350px; }
.blogger-footer { max-width: var(--width); margin-inline: auto; background-color: #fff; border-radius: 20px; display: grid; grid-template-columns: 200px 1fr; padding: 1rem 2rem; gap: 0 2rem; margin-top: 2rem; place-items: center; }
.blogger-footer-img { grid-row: 1 / 3; grid-column: 1 / 2; aspect-ratio: 1; border-radius: 20px; overflow: hidden; }
.blogger-footer-name { font-size: 2rem; }
.blogger-footer--info { grid-column: 2 / -1; grid-row: 1 / 2; padding: 1rem 2rem; border-radius: 10px; background-color: #000; color: #fff; align-items: center; justify-content: space-between; width: 100%; }
.blogger-footer .social li { width: 1.5rem; height: 1.5rem; }
.blogger-footer-more { justify-content: space-between; align-items: center; font-size: 18px; width: 100%; }
.blogger-footer-more .blogger-more { margin-left: 2rem; color: var(--colorGold); font-weight: 600; }
.blogger-footer-more .blogger-all { background-color: var(--colorGold); padding: 1rem 2rem; border-radius: 5px; } .interview.article article { margin-top: 0; }
.interview .article-img { max-width: unset; border-radius: 0; height: 100dvh; margin-top: 0; }
.interview-category { position: absolute; top: 2rem; left: var(--padding); font-size: 2rem; color: #fff; text-shadow: 2px 2px 5px #000; border-bottom: 3px solid var(--colorGold); z-index: 2; }
.interview .article-body-wrapper { flex-direction: column; }
.interview .article-body figure { max-width: unset; margin-block: 2rem; }
.interview .article-body > * { margin-inline: auto; width: 100%; }
.interview figure.wp-block-video { max-width: 400px !important; }
.today-yt-banner { order: unset !important; width: fit-content; margin-inline: auto; }
@media screen and (max-width: 1164px) { .interview .article-details { width: calc(100% - 2 * var(--padding)); margin-inline: auto; } }
@media screen and (max-width: 1120px) { .article-news { gap: 1rem; } }
@media screen and (max-width: 1080px) { .article-title { font-size: 36px; } .blogger-footer-more .blogger-more { margin-left: 0; } .article-category { font-size: 26px; } }
@media screen and (max-width: 980px)  { .article-title { margin-block: 0; } .blogger-footer { gap: 1rem; } }
@media screen and (max-width: 940px)  { .blogger-footer-more { flex-direction: column; align-items: flex-end; gap: 2rem; } .article-top-banner { display: none; } }
@media screen and (max-width: 900px)  { .article-news { grid-template-columns: 1fr; grid-gap: 1rem; } .interview .article-body figure { width: calc(100% + 4rem); margin-left: -2rem; } }
@media screen and (max-width: 820px)  { 
.article article { margin-block: 1rem; } .article-title { font-size: 32px; } .article-body-wrapper { flex-direction: column; } 
.article-body-wrapper aside { margin-inline: auto; } .blogger-footer { padding-inline: 1rem; } .article-col { width: 100%; }
.article-news { grid-template-columns: 1fr 1fr; } .article-news .match-article { height: 300px; } .article-img { margin-top: 2rem; }
}
@media screen and (max-width: 760px)  { 
.blogger-footer-img { grid-row: 1 / 2; } .blogger-footer--info { grid-column: 1 / -1; grid-row: 2 / 3; } .blogger-footer-more { align-self: end; }
.article-header { gap: 1rem; } .match .article-header > *:not(.article-img) { position: relative; } .match .article-img { order: -1; }
.interview .article-img { height: 80dvh; } .interview-category { font-size: 1.75rem; }
}
@media screen and (max-width: 680px)  { 
.article-body > * { max-width: calc(100vw - 2 * var(--padding) - 4rem); } .article-title { font-size: 26px; padding-inline: 1.5rem; }
.article-img { height: 350px; } .blogger-footer { grid-template-columns: 150px 1fr; gap: 0.5rem; } .blogger-footer--info { padding: 1rem; }
.blogger-footer-name { font-size: 1.5rem; } .blogger-footer-more { gap: 1rem; font-size: 16px; } .blogger-footer-more .blogger-all { padding: 0.5rem 1rem; }
}
@media screen and (max-width: 620px)  { 
.article-body > * { font-size: 16px; } .article-footer { padding: 1rem; border-radius: 10px; } 
.article-body, .article-details, .article-img { border-radius: 10px; } .article-category { font-size: 20px; } 
.article-details { top: calc(100% + 0.5rem); } .article-title { bottom: 1.5rem; } .article-logo { width: 60px; } .article-logo::before { width: 3ch; top: -3px; border-top: 1px solid #fff; }
}
@media screen and (max-width: 580px)  { .article-news { grid-template-columns: 1fr; } .interview-category { font-size: 1.5rem; top: 1rem; } .interview .article-img { height: 65dvh; } }
@media screen and (max-width: 520px)  { 
.article-title { font-size: 22px; padding-inline: 1rem; } .tags { gap: 1rem 0.5rem; } .tag { padding: 0.5rem 0.75rem; font-size: 12px; }
.blogger-footer { gap: 0; padding-inline: 0.5rem; } .blogger-footer-img { grid-column: 1 / -1; width: 150px; margin-inline: auto; }
.blogger-footer-more { grid-column: 1 / -1; align-items: center; margin-top: 1rem; } .article-btn { padding: 0.5rem 1rem; font-size: 14px; }
.article-body { padding: 1rem 1rem 0; } .article-body > * { max-width: calc(100vw - 2 * var(--padding) - 2rem); } .article-details { padding: 0.5rem 1rem; }
.interview .article-body figure { width: calc(100% + 2rem); margin-left: -1rem; } .article-header { margin-bottom: 6rem; } .article-body > .card-wrapper { width: calc(100% + 2rem); margin-left: -1rem; max-width: unset; }
}
@media screen and (max-width: 420px)  { .blogger-footer-more { font-size: 14px; } .blogger-footer-name { font-size: 1.25rem; } .blogger-footer .social li { width: 1.25rem; height: 1.25rem; } .interview-category { font-size: 1.25rem; } } .match .article-img { margin-top: 0; }
.match-report { --space: 2rem; width: 100%; bottom: 0; background-color: rgba(0, 0, 0, 0.5); max-width: var(--width); transform: translateX(-50%); left: 50%; z-index: 5; border-radius: 20px; color: #fff; padding: 1rem var(--space); }
.match-score, .match-title { display: grid; grid-template-columns: 1fr 1rem 1fr; grid-gap: 1rem; font-size: 1.75rem; max-width: 550px; margin-inline: auto; text-align: center; }
.match-score .home, .match-title .home { text-align: right; } .match-score .away, .match-title .away { text-align: left; }
.match-score .home { padding-right: 1rem; } .match-score .away { padding-left: 1rem; }
.match-info { font-size: 12px; gap: 1ch; flex-wrap: wrap; justify-content: center; margin-bottom: 0.5rem; }
.match-venue { width: 100%; text-align: center; }
.match-report-options { gap: 0.5ch; margin: 1rem auto 0; width: fit-content; font-size: 14px; border-top: 1px solid var(--colorGold); padding-top: 0.5rem; position: relative; z-index: 2; }
.match-report-btn { cursor: pointer; padding: 0.25rem 0.5rem; border-radius: 5px; } .match-report-btn.on { background-color: rgba(255, 255, 255, 0.25); }
.match-report-lists { display: none; font-size: 12px; position: absolute; top: 1rem; left: var(--space); width: calc(100% - 2 * var(--space)); height: calc(100% - 2rem); justify-content: space-between; align-items: center; }
.away li { text-align: right; justify-content: end; }
.match-report.lineups .match-report-lineups, .match-report.goals .match-report-goals, .match-report.cards .match-report-cards, .match-report.subs .match-report-subs { display: flex; }
.match-report-lists li { display: flex; align-items: center; position: relative; } .match-report-lists li .min { color: var(--colorGold); margin-right: 5px; }
.match-report-subs .arrow { display: inline-block; width: 1rem; height: 1rem; background-image: url(//paoktoday.gr/wp-content/themes/paoktoday-3/assets/icons/arrow.svg); background-size: contain; }
.match-report-subs .arrow.in { filter: invert(97%) sepia(47%) saturate(4436%) hue-rotate(73deg) brightness(95%) contrast(83%); transform: rotate(180deg); }
.match-report-subs .arrow.out { filter: invert(18%) sepia(42%) saturate(6499%) hue-rotate(331deg) brightness(104%) contrast(86%); }
.away li .min { order: 5; margin-inline: 5px 0; }
.match-report-goals .home li { padding-left: 1rem; } .match-report-goals .away li { padding-right: 1rem; }
.match-report-goals li::after { content: ""; width: 0.75rem; height: 0.75rem; background-image: url(//paoktoday.gr/wp-content/themes/paoktoday-3/assets/icons/goal.svg); background-size: contain; filter: var(--filterGold); position: absolute; }
.match-report-goals .home li::after { left: 0; } .match-report-goals .away li::after { right: 0; }
.match-report-cards .refCard { width: 0.75rem; height: 0.75rem; background-size: contain; }
.match-report-cards .home .refCard { order: -1; margin-right: 5px; } .match-report-cards .away .refCard { order: 10; margin-left: 5px; }
.match-report-cards .refCard.yellow { background-image: url(//paoktoday.gr/wp-content/themes/paoktoday-3/assets/icons/yellow.svg); } .match-report-cards .refCard.red { background-image: url(//paoktoday.gr/wp-content/themes/paoktoday-3/assets/icons/red.svg); }
.match-report-cards .refCard.yelred { background-image: url(//paoktoday.gr/wp-content/themes/paoktoday-3/assets/icons/red.svg), url(//paoktoday.gr/wp-content/themes/paoktoday-3/assets/icons/yellow.svg); background-position: center, center; background-size: 0.5rem, contain; background-repeat: no-repeat, no-repeat; }
.article.match .article-header { margin-bottom: 120px; }
.article.match:has(.paoktoday-match) .article-header { margin-bottom: calc(260px + 4rem); }
.article.match .article-details { top: calc(100% + 1rem); }
.article.match:has(.paoktoday-match) .article-details { top: calc(100% + 170px + 2rem); }
.paoktoday-match { top: calc(100% + 1rem); left: 50%; transform: translateX(-50%); background-color: var(--colorFt); width: 100%; max-width: var(--width); padding: 1rem 2rem; border-radius: 20px; }
.paoktoday-match .logo { max-width: 225px; margin-inline: auto; }
.paoktoday-match h3 { text-align: center; font-size: 32px; text-shadow: 1px 1px 5px #fff; }
.paoktoday-matchvideos { gap: 2rem; justify-content: center; margin-top: 1rem; }
.paoktoday-match .link { padding: 0.75rem 1.5rem; border-radius: 10px; background-color: #000; color: #fff; font-size: 14px; }
.article.match .short { display: none; }
@media screen and (max-width: 1020px) { .match-report { --space: 1rem; } .match-score, .match-title { display: grid; grid-template-columns: 1fr 0.5rem 1fr; grid-gap: 0.25rem; font-size: 1.5rem; max-width: 500px; } }
@media screen and (max-width: 880px)  { .match-report { --space: 0.5rem; } .paoktoday-match { padding: 1rem; } .paoktoday-matchvideos { gap: 1rem; } }
@media screen and (max-width: 760px)  { 
.article.match .article-header { margin-bottom: 2rem !important; }
.match-report { background: rgb(0, 0, 0); background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 200%); display: flex; flex-direction: column; margin-top: -12.5rem; }
.match-info { order: 1; } .match-title { order: 2; } .match-score { order: 3; } .match-report-options { order: 4; } .match-report-lists { position: relative; order: 5; padding-bottom: 2rem; }
}
@media screen and (max-width: 680px)  { 
.match-report { margin-top: -11rem; } .match-score, .match-title { font-size: 1.25rem; } .match-report-options { font-size: 12px; margin-top: 0.5rem; padding-top: 0.25rem; }
.match-report-lists { padding-bottom: 1rem; } .article.match .short { display: block; } .article.match .full { display: none; } .paoktoday-match h3 { font-size: 24px; } .paoktoday-match .logo { max-width: 170px; }
}
@media screen and (max-width: 520px)  { 
.paoktoday-match .link { font-size: 12px; border-radius: 5px; padding: 0.5rem 1rem; } .paoktoday-matchvideos { gap: 0.5rem; margin-top: 0.5rem; }
.match-report-subs li { display: grid; grid-template-columns: max-content repeat(3, auto); gap: 3px; } .match-report-subs li:not(:last-of-type) { margin-bottom: 5px; }
.match-report-subs li .min { margin: 0; } .subs-home li .arrow { text-align: left; } .match-report-subs li .arrow { grid-column: 2/3; }
.subs-away li .min { grid-column: 3/4; grid-row: 1/2; } .subs-away li .player.sub-in { grid-column: 1/2; grid-row: 1/2; } .subs-away li .player.sub-out { grid-column: 1/2; grid-row: 2/3; }
} .article-header.blog-header > * { position: relative; }
.blogger-category { order: -2; font-size: 1.5rem; font-weight: 800; letter-spacing: 0.4px; text-align: center; margin-bottom: 2rem; color: var(--colorGold); }
.blogger { order: -1; align-items: center; gap: 2rem; max-width: var(--width); margin-inline: auto; margin-bottom: 1rem; }
.blogger-img { width: 150px; height: 150px; order: -1; border-radius: 20px; overflow: hidden; }
.blogger-name { font-size: 2.5rem; padding-right: 1ch; }
.blog-header { margin-bottom: 2rem; }
.blog-header .article-title { background-color: #000; text-align: center; max-width: var(--width); font-size: 3rem; padding: 2rem 3rem 4rem; bottom: unset; left: unset; transform: translateX(0); margin: 0 auto; border-radius: 20px 20px 0 0; }
.blog .article-img { margin-top: -2rem; z-index: 2; }
.blog .article-details { margin-top: 1rem; justify-content: space-between; }
.blog .article-share { width: fit-content; border: none; margin-top: 0; padding-top: 0; }
.article-share.cover-share { width: fit-content; margin: 2rem auto; padding: 1rem 2rem; border: 1px solid var(--colorGold); border-radius: 30px; }
@media screen and (max-width: 1080px) { .blog-header .article-title { font-size: 2.5rem; } .blogger-img { width: 180px; } .article-share.cover-share ul li { width: 2rem; height: 2rem; } }
@media screen and (max-width: 820px)  { .blogger-name { font-size: 2rem; } .blog-header .article-title { font-size: 2rem; padding-inline: 2rem; } }
@media screen and (max-width: 680px)  { .blogger-name { font-size: 1.75rem; } .blogger-img { width: 150px; } }
@media screen and (max-width: 620px)  { .blog-header .article-title { font-size: 1.75rem; padding-inline: 1.5rem; } }
@media screen and (max-width: 480px)  { 
.blog-header .article-title { font-size: 1.5rem; padding-inline: 1rem; } .blogger-img { width: 120px; } .blogger-name { font-size: 1.5rem; }
.article-share.cover-share { padding: 0.5rem 1rem; border-radius: 20px; } .article-share.cover-share ul li { width: 1.5rem; height: 1.5rem; }
} .home-match-center { padding-block: 5rem; }
@media screen and (max-width: 620px) { .home-match-center .section-header { margin-bottom: 2rem; } }
.match-center-header { padding-block: 3rem; }
.match-center-header h2 { font-size: 3rem; text-align: center; font-weight: 700; }
.match-categories { background-color: #333; color: #fff; padding-block: 2rem; }
.match-categories-list { gap: 1rem; justify-content: center; flex-wrap: wrap; }
.match-category { padding: 0.5rem 1rem; background-color: #777; border-radius: 5px; font-size: 14px; cursor: pointer; }
.match-category.on { background-color: #000; color: var(--colorGold); }
.match-list { container-name: match-list; container-type: inline-size; }
.match-list-type { margin-top: 2rem; gap: 1rem; }
.match-list-type-option { padding: 0.5rem 1rem; border: 1px solid #000; border-radius: 5px; font-size: 14px; cursor: pointer; }
.match-list-type-option.on { background-color: #000; color: var(--colorGold); }
.match-list-wrapper { margin-top: 2rem; gap: 3rem; }
.match-list-container { flex-grow: 1; }
.month-header { font-weight: 600; font-size: 22px; margin-bottom: 1rem; font-family: "Fira Sans Extra Condensed", sans-serif; text-transform: uppercase; }
.month-btns { font-family: "Fira Sans Extra Condensed", sans-serif; text-transform: uppercase; font-weight: 500; font-size: 18px; justify-content: space-between; margin-top: 2rem; }
.match-item { margin-bottom: 1rem; display: grid; grid-template-columns: 5rem 1fr; gap: 0 1rem; }
.match-icon { grid-row: 1 / 3; background-color: #000; padding: 1.25rem; border-radius: 10px; aspect-ratio: 1; }
.match-icon img { filter: brightness(0) invert(1); }
.match-item .top { background-color: #ddd; padding: 0.5rem; align-items: center; border-radius: 5px; }
.match-item .sport { font-size: 14px; font-weight: 600; text-transform: uppercase; }
.match-item .competition { font-size: 12px; }
.match-item .date { margin-left: auto; font-size: 12px; font-weight: 600; }
.match-item .time { margin-left: 1ch; padding-left: 1ch; border-left: 1px solid #000; font-size: 12px; }
.results .match-item .time { display: none; }
.match-item-info { font-family: "Fira Sans Extra Condensed", sans-serif; font-weight: 600; font-size: 26px; padding-block: 0.5rem; display: grid; grid-template-columns: 1fr 1ch 1fr; grid-gap: 1ch; padding-inline: 0.5rem; align-items: center; }
.match-item-info .dash { text-align: center; }
.match-center.results .match-item-info { grid-template-columns: 1fr auto 1fr; }
.match-item .score { font-family: "Fira Sans Extra Condensed", sans-serif; font-weight: 600; font-size: 22px; padding-block: 0.5rem; display: grid; grid-template-columns: auto 1ch auto; padding-inline: 1rem; margin: 0.5rem auto; grid-gap: 1ch; width: fit-content; background: #000; color: #fff; border-radius: 5px; position: relative; }
.match-item-info .home, .match-item-info .away { display: flex; align-items: center; gap: 0.5rem; text-transform: uppercase; }
.match-item .score a { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.match-item .score .home, .match-item-info .home { text-align: right; }
.match-item .home { justify-content: flex-end; }
.match-item .team-logo { width: 45px; height: 45px; object-fit: contain; mix-blend-mode: darken; }
.match-item .away .team-logo { order: -1; }
.match-item-info:has(+ .score) { padding-bottom: 0; }
.match-center.results .match-item-info > .dash { display: none; }
.match-item .bottom { font-size: 14px; padding: 0.25rem 0.5rem; background-color: var(--colorGold); width: fit-content; margin-inline: auto; border-radius: 5px; }
.match-item .bottom:empty { display: none; }
.match-list-container .tables-list > div:not(:last-child) { margin-bottom: 4rem; }
.match-list-container .tables-list h2 { margin-bottom: 1rem; font-weight: 500; font-size: 24px; }
@container match-list (width < 620px) { .match-item { grid-template-columns: 4rem 1fr; gap: 0 0.75rem; } .match-icon { padding: 1rem; } .match-item .team-logo { width: 40px; height: 40px; } }
@container match-list (width < 480px) { 
.match-item { gap: 0.5rem; grid-template-columns: 3rem 1fr; } .match-icon { grid-row: 2 / 3; padding: 0.75rem; } 
.match-item .top { grid-column: 1 / -1; } .match-item-info { padding-top: 0; } .match-item .team-logo { width: 40px; height: 40px; } .match-item .score { padding-inline: 0.5rem; grid-gap: 5px; } 
}
@container match-list (width < 450px) { .match-icon { padding: 0.625rem; border-radius: 5px; grid-row: 1 / 2; } .match-item-info { gap: 0 1ch; grid-column: 1 / -1; } .match-item .top { grid-column: 2 / 3; } }
@container match-list (width < 375px) {
.match-item .sport { font-size: 12px; } .match-item .competition, .match-item .time { margin-left: 0.5ch; padding-left: 0.5ch; } .match-item { grid-template-columns: 2.5rem 1fr; }
.match-icon { padding: 0.5rem; } .match-item .team-logo { width: 2rem; height: 2rem; } .match-center.results .match-item .team-logo { width: 25px; }
.match-center.results .match-item-info { font-size: 16px; } .match-center.results .match-item .score { font-size: 14px; }
.match-center.results :is(.match-item-info .home, .match-item-info .away) { gap: 0.25rem; } .match-center.results .match-item-info { gap: 0 5px; }
}
@container match-list (width < 350px) { .match-item .sport { font-size: 12px; } .match-item .competition { font-size: 10px; } }
@media screen and (max-width: 940px) { .match-list-wrapper { gap: 2rem; } .match-item-info { font-size: 24px; } .match-center-header h2 { font-size: 2.5rem; } }
@media screen and (max-width: 820px) { .match-list-wrapper { gap: 1rem; flex-direction: column; } .match-item-info { font-size: 22px; } .match-item .score { font-size: 20px; grid-gap: 0.5ch; } }
@media screen and (max-width: 770px) { .match-categories-list { max-width: 500px; margin-inline: auto; } .match-list-type { justify-content: center; } }
@media screen and (max-width: 520px) { .match-center-header { padding-block: 2.5rem; } .match-center-header h2 { font-size: 2rem; } .match-list-type { gap: 0.5rem; margin-top: 1rem; } .match-categories { padding-block: 1rem; } .match-item-info { font-size: 20px; } .match-item .score { font-size: 18px; grid-gap: 0.25ch; padding-block: 0.25rem; } }
@media screen and (max-width: 480px) { .match-categories-list { gap: 0.5rem; } .match-category { padding-inline: 0.75rem; font-size: 12px; } }
@media screen and (max-width: 420px) { .match-item-info { font-size: 18px; } .match-item .score { font-size: 16px; } } .latest-yt-video { background-color: var(--colorFt); padding-block: 2rem; color: #000; max-width: var(--width); margin: 2rem auto 0; border-radius: 20px; width: 100%; }
.latest-yt-header { font-size: 26px; letter-spacing: 0.28px; text-align: center; margin-bottom: 1rem; text-decoration: underline; }
.latest-yt-video .logo { max-width: 260px; margin-inline: auto; margin-top: 1rem; }
.yt-video { margin-inline: auto; justify-content: center; }
.yt-video iframe { max-width: 832px; width: 100%; padding-inline: 1rem; aspect-ratio: 16/9; height: auto; }
.not-found-text { text-align: center; font-size: 22px; padding-block: 4rem; }
.not-found-text p:has(> a) { width: fit-content; margin: 2rem auto 0; padding: 0.5rem 2rem; background-color: var(--colorGold); border-radius: 10px; }
@media screen and (max-width: 920px) { .not-found-text { font-size: 20px; } }
@media screen and (max-width: 520px) { .not-found-text { font-size: 18px; padding-block: 3rem; } } .coverpage article { background-color: #000; color: #fff; }
.coverpage-header { text-align: center; padding: 2rem var(--padding); }
.coverpage-title { font-size: 2.5rem; }
.coverpage-wrapper { padding-inline: var(--padding); }
.coverpage-img { max-width: 1200px; margin-inline: auto; }
.covers-all { background-color: var(--colorGold); color: #fff; font-size: 14px; font-weight: 600; padding: 1rem 2rem; width: fit-content; margin: 2rem auto 0; border-radius: 10px; }
.coverpage .latest-yt-video { max-width: 1200px; }
.coverpage > article > footer { padding: 2rem; }
@media screen and (max-width: 1020px) { .coverpage-title { font-size: 2rem; } }
@media screen and (max-width: 520px) { .coverpage-title { font-size: 1.75rem; } }
.all-news .pagination { grid-column: 1 / -1; }
figure.wp-block-embed.is-type-video.is-provider-glomex.wp-block-embed-glomex { --outerPadding: 2rem; width: calc(100% + 2 * var(--outerPadding)); max-width: unset; margin-left: calc(-1 * var(--outerPadding)); }
@media screen and (max-width: 520px) { figure.wp-block-embed.is-type-video.is-provider-glomex.wp-block-embed-glomex { --outerPadding: 1rem; } } .home-century { max-width: 100dvw; overflow: hidden; height: 100dvh; position: relative; background-color: var(--colorDarkGold); }
.home-century-wrapper { position: relative; padding-block: 4rem; color: #fff; height: 100%; }
.home-century-wrapper .wrapper { height: 100%; }
.century-header { z-index: 2; }
.century-header h2 { font-size: 45px; font-weight: 100; color: #000; }
.century-header h3 { font-size: 60px; letter-spacing: 5px; font-weight: 700; order: -1; width: fit-content; border-bottom: 1px solid rgba(255, 255, 255, 0.5); }
.century-articles { margin-top: auto; }
.century-articles .card { position: static; height: auto; background-color: transparent; border: none; }
.century-articles .card:hover { box-shadow: none; } .century-articles .card-image {
width: 55%; height: 100dvh; position: absolute; right: 0; top: 0;
opacity: 0; pointer-events: none;
transition: opacity 0.3s ease;
will-change: opacity;
}
.century-articles .card-image::after { content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: linear-gradient(90deg, rgba(113, 82, 27, 1), rgb(171, 136, 74, 0)); }
.century-articles .card.on .card-image { opacity: 1; }
.century-articles .card-title { font-weight: 300; max-width: 800px; text-wrap: pretty; font-size: 50px; color: #000; z-index: 2; }
.century-articles .card.on .card-title { color: #fff; }
.home-century-wrapper .box { margin-top: 50px; }
@media screen and (max-width: 1580px) { .century-articles .card-title { font-size: 45px; margin-bottom: 1.5rem; } .century-articles .card-image { width: 60%; } }
@media screen and (max-width: 1220px) { .century-articles .card-title { font-size: 40px; margin-bottom: 1rem; } .century-articles .card-image { width: 80%; } .century-header h2 { font-size: 35px; } .century-header h3 { font-size: 45px; letter-spacing: 5px; } }
@media screen and (max-width: 920px) { .home-century-wrapper { padding-block: 2rem; } .century-articles .card-title { font-size: 36px; margin-bottom: 0; } .century-articles > div:not(:first-of-type) { display: none; } }
.century-wrapper { width: calc(100% + 2 * var(--padding)); margin-left: calc(-1 * var(--padding)); padding: 1rem var(--padding); background-color: var(--colorDarkGold); border-radius: 20px; }
.century-wrapper > h2 { font-size: 24px; font-weight: 300; color: #fff; text-align: center; margin-block: 1rem; letter-spacing: 4px; }
.century-wrapper .card-category { display: none; }
.century-wrapper .card.cover { height: calc(100vw / 1.2); }
.century-wrapper .card.cover .card-image { aspect-ratio: 1.2; }
.century-wrapper .card-details .details-time { border-right: none; }
.century-wrapper > h2:last-of-type { z-index: 15; position: relative; }
.century-single { background-color: var(--colorDarkGold); }
.century-single .article-category { color: #fff; text-align: center; width: 300px; }
.century-single .article-category p:first-of-type { font-size: 40px; letter-spacing: 5px; font-weight: 600; border-bottom: 1px solid #fff; }
.century-single .article-category p:last-of-type { font-size: 25px; letter-spacing: 2px; margin-top: 5px; font-weight: 100; }
.century-single .article-category::before { display: none; }
.century-single .article-details { background-color: #000; }
.century-single .article-body { width: 100%; }
.century-single .article-body > * { max-width: unset; }
.century-single .article-body > iframe { max-width: 100%; }
.century-single .article-img { margin-top: 6.5rem; aspect-ratio: 1.2; }
.century-single .article-body figure.wp-block-embed.is-type-video.is-provider-glomex.wp-block-embed-glomex { max-width: 800px; margin-inline: auto; width: 100%; }
@media screen and (max-width: 680px) { .century-single .article-img { height: auto; } }
.centuryicon { border-radius: 10px; background-color: var(--colorDarkGold); color: #fff; font-family: "Fira Sans Extra Condensed", sans-serif; padding: 1rem 2rem; border-radius: 10px; text-align: center; margin-bottom: 10px; }
.centuryicon h2 { letter-spacing: 3px; font-weight: 600; font-size: 30px; }
.centuryicon h3 { letter-spacing: 1px; font-weight: 100; font-size: 22px; }
.centuryicon p { letter-spacing: 1px; font-weight: 300; font-size: 16px; margin-top: 4px; width: fit-content; margin-inline: auto; background-color: #000; padding: 4px 1rem; border-radius: 5px; } .live-single .article-body { width: 100%; }
.live-single .article-body > * { max-width: unset; } .author-page-header { margin-bottom: 30px; text-align: center; }
.author-page-image { margin: 0 auto 15px auto; }
.author-page-image img { max-width: 120px; height: auto; border-radius: 16px; box-shadow: 0 2px 8px -7px #000; }
.author-page-title { justify-content: center; margin-bottom: 15px; }
.author-page-bio { max-width: 800px; margin: 0 auto 20px auto; line-height: 1.6; color: var(--text-color, #333); }
.author-page-socials { justify-content: center; margin-top: 10px; }
.author .pagination { margin-top: 30px; } .quiz-header { font-size: 3rem; margin-top: 1rem; text-align: center; }
.question { font-size: 1.25em; text-align: center; background: #000; padding: 1rem; color: #fff; border-radius: 20px; margin-top: 1rem; }
.list-item { list-style-type: none; padding: 10px; margin: 5px 0; background-color: #f0f0f0; border: 1px solid #ddd; border-radius: 5px; text-align: center; cursor: default; transition: background-color 0.3s; }
.list-item.revealed { background-color: #000; color: white; }
.list-item.checked { background-color: #969696; color: white; }
.input-container { margin-bottom: 20px; margin-inline: auto; display: flex; justify-content: center; }
#user-input { font-size: 1rem; padding: .75rem 1rem; max-width: 360px; border-radius: 10px; text-align: center; width: 100%; border: 1px solid #000; }
.lives { margin-top: 20px; font-weight: bold; color: #000; text-align: center; justify-content: center; }
.lives h3 { margin-right: 1rem; }
#answers-list { padding: 1rem; }
#answers-list.error { background-color: #871919; transition: background-color 0.5s; }
.heart { width: 2rem; height: 2rem; filter: brightness(0); background-size: contain; background-image: url(//paoktoday.gr/wp-content/themes/paoktoday-3/assets/icons/heart_empty.svg); }
.heart.full { background-image: url(//paoktoday.gr/wp-content/themes/paoktoday-3/assets/icons/heart_full.svg); }
.quiz-wrapper { position: relative; }
.quiz-results, .quiz-info { background: #000; padding: 2rem; border-radius: 20px; color: #fff; position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-align: center; z-index: 2; opacity: 1; pointer-events: all; transition: all .3s; }
.quiz-results.off, .quiz-info.off { opacity: 0; pointer-events: none; }
.quiz-info h2 { background: #fff; color: #000; padding: 1rem; border-radius: 10px; margin-bottom: 2rem; }
.quiz-info h3 { padding-inline: 2rem; margin-bottom: 1rem; }
.quiz-start { background-color: var(--colorGold); padding: .5rem 2rem; color: #000; margin: 2rem auto; cursor: pointer; border-radius: 10px; width: fit-content; }
.quiz-results { font-size: 22px; }
.result-msg { margin-block: 2rem; }
.show-results { margin-top: 1rem; font-size: 16px; color: var(--colorGold); cursor: pointer; }
@media screen and (max-width: 920px) { .quiz-header { font-size: 2rem; } }
@media screen and (max-width: 620px) {
.question { font-size: 1rem; padding: 1rem; border-radius: 10px; }
.quiz-info { padding: 1rem .5rem; }
.quiz-info h2 { font-size: 1.25rem; padding: .25rem .5rem; }
.quiz-info h3 { font-size: 1rem; padding-inline: 1rem; }
}.main-header { position: absolute; left: 0; top: 0; width: 100%; }
.main-header.fixed { position: fixed; width: 100%; left: 0; top: 0; z-index: 50; }
.main-header.fixed .latest-row,
.main-header.fixed .top-row { display: none; } .main-header .top-row { background-color: #000; color: #fff; padding-block: 0.25rem; font-size: 16px; }
.main-header .top-row .wrapper { justify-content: space-between; }
.main-header .top-row .social li { filter: invert(1); margin-right: 1rem; }
.header-x { align-items: center; gap: 1rem; }
.x-header { font-family: "Fira Sans Extra Condensed", sans-serif; font-weight: 500; font-style: normal; flex-shrink: 0; }
.x-text { font-size: 14px; font-weight: 100; } .main-header .main-row { background-color: #fff; padding-block: 0.75rem; }
.main-header-wrapper { align-items: center; }
.main-header .logo { width: 200px; margin-right: 3rem; transform: translateX(-20px); } .main-header .main-nav ul { gap: 1rem; }
.main-header .nav-item { font-weight: 500; font-size: 14px; }
.main-header .search-btn { margin-left: auto; } .news-btn {
border: 1px solid #000; padding: 0.5rem 0.75rem; font-size: 14px;
border-radius: 10px; margin-left: auto; display: none; background-color: var(--colorGold);
}
.main-header .nav-btn {
display: none; position: relative; width: 2rem; height: 2rem;
--topline: 9px; margin-left: auto; cursor: pointer;
}
.main-header .nav-btn .line {
position: absolute; width: 80%; border-top: 2px solid #000;
left: 10%; border-radius: 5px; top: 50%; transition: top 0.3s;
}
.main-header .nav-btn .line:nth-of-type(1) { top: var(--topline); }
.main-header .nav-btn .line:nth-of-type(3) { top: calc(32px - var(--topline)); } .search-form-wrapper {
position: fixed; width: 100vw; height: 100px;
display: flex; justify-content: center; align-items: center;
left: 0; top: 0; z-index: 2000;
background-color: #000; padding-inline: 1rem;
transform: translateY(-100%); transition: transform 0.3s ease;
will-change: transform;
}
.search-form-wrapper.on { transform: translateY(0); }
form#searchform { max-width: 500px; width: 100%; position: relative; --submitWidth: 100px; }
input#s { width: 100%; padding: 1rem var(--submitWidth) 1rem 1rem; font-size: 20px; }
input#searchsubmit { position: absolute; right: 0; top: 0; width: var(--submitWidth); height: 100%; font-size: 16px; background-color: #cdcdcd; }
.search-close { width: 2rem; height: 2rem; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); cursor: pointer; }
.search-close .line { top: 50%; transform-origin: center; border-bottom: 1px solid #fff; transform: rotate(45deg); position: absolute; width: 100%; }
.search-close .line:last-of-type { transform: rotate(-45deg); } .main-header .bottom-row { padding-block: 0.5rem; font-size: 12px; font-style: italic; background-color: #ccc; }
.hashtag-list { align-items: center; gap: 2rem; }
.hashtag-header { font-family: "Fira Sans Extra Condensed", sans-serif; font-weight: 500; font-style: normal; flex-shrink: 0; font-size: 14px; }
.hashtags { gap: 1ch; overflow: auto; }
.hashtag { flex-shrink: 0; text-transform: uppercase; }
.hashtag:before { content: "#"; color: var(--colorGold); }
.main-header .latest-row { padding-block: 0.5rem; background-color: #ccc; max-height: 33px; overflow: hidden; }
.main-header .latest-list { align-items: center; }
.main-header .latest-header { font-size: 14px; font-weight: 500; flex-shrink: 0; margin-right: 1ch; }
.main-header .latest-header img { display: none; }
.main-header .latest-item { font-weight: 500; font-size: 12px; display: none; opacity: 0; transition: opacity 0.3s; white-space: nowrap; }
.main-header .latest-item.on { opacity: 1; }
.main-header .latest-item.active { display: block; } .mob-menu { display: none; will-change: max-height; }
.mob-nav { margin-bottom: 3rem; }
.mob-nav > ul { flex-direction: column; gap: 1rem; }
.mob-nav .nav-item { font-size: 20px; font-weight: 500; }
.mob-social ul { justify-content: flex-end; }
.mob-social ul li { margin-right: 1rem; } .top-banner > aside { margin-inline: auto; width: fit-content; max-width: 970px; }
.top-banner {
height: 0; transition: height 0.3s; overflow: hidden;
position: fixed; top: 0; left: 0; width: 100%;
z-index: 100; background-color: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(5px);
will-change: height;
}
.top-banner .close-banner { position: absolute; width: 2rem; height: 2rem; border: 1px solid #000; background-color: #fff; cursor: pointer; right: 0; }
.top-banner .close-banner .line { position: absolute; width: 80%; border-top: 1px solid #000; left: 10%; top: 50%; transform: rotate(45deg); }
.top-banner .close-banner .line:last-of-type { transform: rotate(-45deg); }
.top-sticky-on .top-banner { height: 100px; }
body.top-sticky-on { padding-top: 100px; }
body.top-sticky-on:has(.main-header.fixed) .top-banner { top: 68px; }
body.top-sticky-on:has(.main-header.fixed .search-form-wrapper.on) .top-banner { top: 100px; } @media screen and (max-width: 1450px) {
.main-header .logo { margin-right: 1rem; }
.main-header .main-nav ul { gap: 0.75rem; }
}
@media screen and (max-width: 1320px) {
.main-nav { display: none; }
.main-header .nav-btn { display: block; margin-left: 1rem; }
.mob-menu {
display: block; background-color: #fff; color: #000;
position: absolute; width: 350px; top: 100%; right: 0;
z-index: 100; max-height: 0; transition: max-height 0.3s; overflow: hidden;
}
.mob-menu.on { max-height: 2000px; }
.mob-menu-wrapper { padding: 2rem var(--padding); }
.main-header .nav-btn.on .line:nth-of-type(1),
.main-header .nav-btn.on .line:nth-of-type(3) { top: 50%; }
}
@media screen and (max-width: 980px) {
.main-header .top-row .social li { margin-right: 0.5rem; }
}
@media screen and (max-width: 940px) {
.top-sticky-on .top-banner { height: calc(100vw / 9.7); }
body.top-sticky-on { padding-top: calc(100vw / 9.7); }
}
@media screen and (max-width: 780px) {
.main-header .bottom-row .wrapper { padding-right: 0; }
.hashtags { padding-right: var(--padding); }
}
@media screen and (max-width: 680px) {
.main-header .top-row .social li { display: none; }
}
@media screen and (max-width: 650px) {
.single .news-btn, .home .news-btn { padding: 0.25rem 0.5rem; font-size: 12px; border-radius: 5px; display: block; margin-left: auto; color: #fff; font-weight: 600; }
.single .search-btn, .home .search-btn { margin-left: 1rem; }
.home .main-header .nav-btn { margin-left: 0.5rem; }
}
@media screen and (max-width: 620px) {
.main-header .main-row { padding-block: 0.5rem; }
.hashtag-list { gap: 1rem; }
.mob-nav .nav-item { font-size: 18px; }
.search-form-wrapper { padding-bottom: 1rem; align-items: flex-end; height: 125px; }
.search-close { top: 1rem; transform: none; }
body.top-sticky-on:has(.main-header.fixed) .top-banner { top: 60px; }
}
@media screen and (max-width: 520px) {
.main-header .logo { width: 180px; margin-right: 0.5rem; }
.hashtag-header { font-size: 12px; font-weight: 600; }
.mob-menu { width: 100%; }
.mob-menu-wrapper { padding-top: 1rem; }
.mob-nav .nav-item { font-size: 16px; }
.header-x { gap: 0.5rem; }
.x-header { font-size: 14px; }
.x-text { font-size: 12px; }
.main-header .latest-header img { display: block; width: 1rem; }
.main-header .latest-header span { display: none; }
body.top-sticky-on:has(.main-header.fixed) .top-banner { top: 55px; }
}
@media screen and (max-width: 420px) {
.main-header .logo { width: 150px; transform: translateX(-14px); }
}
@media screen and (max-width: 370px) {
.home .news-btn { font-size: 10px; }
.home .search-btn, .home .nav-btn { margin-left: 0.5rem; }
}
@media screen and (max-width: 335px) {
.home .news-btn { padding: 0.25rem 0.35rem; font-size: 10px; }
}.social-list { background-color: #444; padding-block: 3rem; color: #fff; }
.social-list .social ul { justify-content: center; margin-top: 1rem; } .social-list .social ul li { transition: filter .3s ease; }
.social-list .social ul li:hover { filter: invert(1); }
.footer-wrapper { padding-block: 2rem; background-color: var(--colorFt); color: #000; }
.footer-wrapper .logo { width: fit-content; max-width: 300px; margin-inline: auto; }
.main-footer .social-list .section-header { padding-bottom: 1rem; } .footer-nav { margin-block: 1rem; }
.footer-nav ul { justify-content: center; gap: 3rem; font-size: 20px; }
.copyright { justify-content: center; gap: 2rem; }
.developer { background-color: var(--colorGold); padding: 1rem var(--padding); text-align: center; } .bottom-banner {
position: fixed;
bottom: 0;
width: 100%;
height: 90px;
background-color: rgba(255, 255, 255, 0.5);
z-index: 1000;
backdrop-filter: blur(5px); transform: translateY(0); 
transition: transform .3s ease;
will-change: transform;
} .bottom-banner.hide { transform: translateY(100%); }
.bottom-banner aside { margin-inline: auto; width: fit-content; }
.bottom-banner .mob { display: none; }
.bottom-banner .close-banner {
position: absolute; width: 2rem; height: 2rem;
border: 1px solid #000; background-color: #fff;
cursor: pointer; right: 0;
}
.bottom-banner .close-banner .line {
position: absolute; width: 80%; border-top: 1px solid #000;
left: 10%; top: 50%;
transform-origin: center; transform: rotate(45deg);
}
.bottom-banner .close-banner .line:last-of-type { transform: rotate(-45deg); } @media screen and (max-width: 1120px) {
.footer-nav ul { gap: 2rem; font-size: 18px; }
}
@media screen and (max-width: 820px) {
.footer-nav ul { gap: 1rem; font-size: 16px; }
.bottom-banner .close-banner { width: 1.5rem; height: 1.5rem; }
}
@media screen and (max-width: 760px) {
.bottom-banner { height: 60px; }
.bottom-banner .desk { display: none; }
.bottom-banner .mob { display: block; }
}
@media screen and (max-width: 640px) {
.footer-wrapper .logo { width: 250px; }
.footer-nav ul { flex-wrap: wrap; max-width: 350px; margin-inline: auto; font-size: 14px; }
.footer-nav ul li { width: calc((100% - 2rem) / 3); text-align: center; }
.home .developer { padding-bottom: 100px; }
}
@media screen and (max-width: 520px) {
.copyright { font-size: 12px; gap: 1rem; }
}
@media screen and (max-width: 480px) {
.social-list { padding-bottom: 2rem; }
}
@media screen and (max-width: 380px) {
.footer-wrapper { padding-block: 2rem; }
.footer-nav ul li { width: calc((100% - 1rem) / 2); }
.developer span { display: block; }
} .paok-ad-wrapper {
display: none !important;
} body.gdpr-accepted .paok-ad-wrapper {
display: block !important;
}
body.gdpr-accepted .paok-ad-wrapper.flex {
display: flex !important;
}@media (prefers-color-scheme: dark) {
.seperator, body { background-color: #222; }
.top-news-grid > div:nth-child(1) .card,
.match-item-info,
.section-header h2 { color: #fff; }
.match-item .top,
.latest-yt-video,
.news-feed { background-color: #a1a1a1; }
.main-header .main-row { background-color: #dfdfdf; }
.home.news-btn,
.card.related,
.special .section-header h2,
.news-feed .section-header h2 { color: #000; }
.card { background-color: #000; color: #fff; }
.article-btn,
.paoktoday-match,
.match-list-type-option,
.main-header .latest-row,
.article-footer,
.blogger-footer,
.article-body { background-color: #444; color: #fff; }
.article-body > :is(h1, h2, h3, h4, h5, h6), 
.article-body :is(p, li, h1, h2, h3, h4, h5, h6) > a,
.article-category,
.blogger-name { color: var(--colorGold); }  
.match-item .team-logo { mix-blend-mode: unset; }
.paoktoday-match h3 { color: var(--colorGold); text-shadow: none; }
}