: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);
}
}
body,
div,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul,
blockquote,
figure {
margin: 0;
padding: 0;
font-weight: normal;
}
body {
position: relative;
background-color: #f8f8f8;
font-weight: 400;
max-width: 2500px;
margin: 0 auto;
font-family: "Open Sans", sans-serif;
font-variation-settings: "width" 100;
font-weight: 400; padding-bottom: 90px;
transition: padding 0.3s;
padding-top: 128px;
}
body:has(> .main-header.fixed) { }
@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;
}
}
@media screen and (max-width: 480px) { }
img {
max-width: 100%;
height: auto;
display: block;
} a {
text-decoration: none;
color: inherit;
}
ul,
ol {
list-style: none;
}
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;
}
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
outline: none;
}
address {
font-style: normal;
}
html {
scroll-behavior: smooth;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*,
*:before,
*:after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
[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%;
}
} .flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.flex.col {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.flex.centered {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}  .stop-scrolling {
height: 100%;
overflow: hidden;
} .img-center {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
} .scrollbar-hide {
overflow-x: scroll;
-ms-scroll-snap-type: x mandatory;
scroll-snap-type: x mandatory;
-ms-overflow-style: none; 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;
}
} .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: -ms-grid;
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;
}
.grid.top > div:nth-of-type(1),
.grid.top > div:nth-of-type(2),
.grid.half-top > div:nth-of-type(1),
.grid.top > div:nth-of-type(1) {
grid-column: 1 / 2;
}
.grid {
--gridGap: 0.75rem;
}
.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: -webkit-box;
display: -ms-flexbox;
display: flex; padding-bottom: 2.5rem;
text-wrap: balance;
justify-content: space-between;
align-items: flex-end;
}
.section-header h2 {
font-size: 3rem;
letter-spacing: 0.5px;
font-weight: 100;
position: relative;
text-transform: uppercase; }
.section-header h2::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 {
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 {
font-size: 1.75rem;
}
}
@media screen and (max-width: 620px) {
.section-header.lg h2 {
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;
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;
}
.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-style: normal;
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: 120%;
padding: 1rem;
background-color: #f2f2f2;
display: flex;
z-index: 20;
transition: left 0.3s;
}
.card-share.on {
left: 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: rgb(0, 0, 0);
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;
font-style: normal;
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 {
display: none;
}
.news-feed.on .section-header {
display: block;
}
.news-feed.on .news-feed-close {
display: block;
}
.news-feed .all-news-btn {
display: none;
}
.news-feed.on .all-news-btn {
display: block;
}
}
@media screen and (max-width: 390px) {
.feed-title {
font-size: 14px;
text-wrap: pretty;
}
} .social ul {
-webkit-box-align: center;
-ms-flex-align: center;
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 {
-webkit-filter: invert(1);
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/assets/icons/pin.svg);
}
.social ul li.fb {
background-image: url(//paoktoday.gr/wp-content/themes/paoktoday/assets/icons/fb.svg); }
.social ul li.tw {
background-image: url(//paoktoday.gr/wp-content/themes/paoktoday/assets/icons/x.png); }
.social ul li.yt {
background-image: url(//paoktoday.gr/wp-content/themes/paoktoday/assets/icons/yt.svg);
}
.social ul li.ig {
background-image: url(//paoktoday.gr/wp-content/themes/paoktoday/assets/icons/ig.svg);
}
.social ul li.sk {
background-image: url(//paoktoday.gr/wp-content/themes/paoktoday/assets/icons/skype.svg);
}
.social ul li.ln {
background-image: url(//paoktoday.gr/wp-content/themes/paoktoday/assets/icons/ln.svg);
}
.social ul li.tk {
background-image: url(//paoktoday.gr/wp-content/themes/paoktoday/assets/icons/tk.svg);
}
.social ul li.sf {
background-image: url(//paoktoday.gr/wp-content/themes/paoktoday/assets/icons/sfy.svg);
}
.social ul li.ap {
background-image: url(//paoktoday.gr/wp-content/themes/paoktoday/assets/icons/ap.svg);
}
.social ul li.link {
background-image: url(//paoktoday.gr/wp-content/themes/paoktoday/assets/icons/link.svg);
}
.social ul li.viber {
background-image: url(//paoktoday.gr/wp-content/themes/paoktoday/assets/icons/viber.svg); }
.social ul li.rss {
background-image: url(//paoktoday.gr/wp-content/themes/paoktoday/assets/icons/rss.svg); }
.social ul li.fb.col {
background-image: url(//paoktoday.gr/wp-content/themes/paoktoday/assets/icons/fb_mn_col.svg); }
.social ul li.ig.col {
background-image: url(//paoktoday.gr/wp-content/themes/paoktoday/assets/icons/ig_mn_col.svg);
}
.social ul li.tk.col {
background-image: url(//paoktoday.gr/wp-content/themes/paoktoday/assets/icons/tk_mn_col.svg);
}
.social ul li.wup {
background-image: url(//paoktoday.gr/wp-content/themes/paoktoday/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/icons/fb.svg); }
.social.md ul li.tw {
background-image: url(//paoktoday.gr/wp-content/themes/paoktoday/icons/tw.svg);
background-size: 19px 15px;
}
.darkmode .social ul li {
-webkit-filter: invert(1);
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/assets/icons/search.svg);
background-size: 50%;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
cursor: pointer;
}
.search-icon.white {
-webkit-filter: invert(1);
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 {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
display: -webkit-box;
display: -ms-flexbox;
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;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
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 {
-webkit-transition:
opacity 0.3s,
-webkit-transform 0.3s;
transition:
opacity 0.3s,
-webkit-transform 0.3s;
-o-transition:
opacity 0.3s,
transform 0.3s;
transition:
opacity 0.3s,
transform 0.3s;
transition:
opacity 0.3s,
transform 0.3s,
-webkit-transform 0.3s;
}
.anim p {
-webkit-transition:
opacity 0.8s,
-webkit-transform 0.8s;
transition:
opacity 0.8s,
-webkit-transform 0.8s;
-o-transition:
opacity 0.8s,
transform 0.8s;
transition:
opacity 0.8s,
transform 0.8s;
transition:
opacity 0.8s,
transform 0.8s,
-webkit-transform 0.8s;
}
.fadeOp p,
.fadeIn {
opacity: 0;
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
}
.fadeOp.on p,
.fadeIn.on {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
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;
-webkit-transition: height 0.3s;
-o-transition: height 0.3s;
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: -webkit-fit-content;
width: -moz-fit-content;
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;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
opacity: 0;
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition:
padding 0.3s,
opacity 1.1s,
-webkit-transform 1.1s;
transition:
padding 0.3s,
opacity 1.1s,
-webkit-transform 1.1s;
-o-transition:
padding 0.3s,
opacity 1.1s,
transform 1.1s;
transition:
padding 0.3s,
opacity 1.1s,
transform 1.1s;
transition:
padding 0.3s,
opacity 1.1s,
transform 1.1s,
-webkit-transform 1.1s;
}
.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;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
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-style: normal;
font-size: 18px;
}  ::-webkit-scrollbar {
width: 5px;
border-radius: 10px;
} ::-webkit-scrollbar-track {
background: #f1f1f1;
} ::-webkit-scrollbar-thumb {
background: #888;
} ::-webkit-scrollbar-thumb:hover {
background: #555;
} .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: scroll;
}
.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;
}