@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900');

:root {
    --pcg-red: #db2f26;
    --pcg-clip: polygon(100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 0);
    --pcg-clip-2x: polygon(100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 0);
    --pcg-clip-small: polygon(100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 0);
}

* {
    box-sizing: border-box;
    /* gives padding and border from inside */
}

html {
    min-width: 480px;
}

body {
    font-family: 'Poppins', sans-serif;
    color: #0b151c;
    background-color: #001822;
    min-width: 480px;
    padding: 0;
    margin: 0;
}

h1,
h2,
h3 {
    color: #0b151c;
    font-weight: bold;
    padding: 0;
    margin: 0;
}

p {
    font-size: 10pt;
    line-height: 1.5;
    padding: 0;
    margin: 0;
}

.hidden {
    display: none;
}


.container {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 20px;
}

.main-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 1080px;
    background-color: #eff3f6;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}


.blockheader {
    background-color: var(--pcg-red);
    padding: 5px;
    padding-left: 10px;
    margin-bottom: 10px;
    clip-path: var(--pcg-clip);
    text-transform: uppercase;
}

.blockheader h1 , .blockheader h3 {
    color: #ffffff;
    font-size: 10pt;
}

.img-responsive {
    max-width: 100%;
    height: auto;
}

.yt {
    aspect-ratio: 16 / 9;
}

.w100 {
    width: 100%;
}

a,
a:hover {
    color: var(--pcg-red);
    text-decoration: none;
}

.default-btn {
    background-color: var(--pcg-red);
    color: #ffffff;
    padding: 5px 10px;
    border: none;
    cursor: pointer;
    clip-path: var(--pcg-clip-small);
    text-transform: uppercase;
}

/********** HEADER **********/

.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    background-color: #001822;
    height: 70px;
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    margin-right: auto;
}

.nav a {
    color: #ffffff;
    text-decoration: none;
    padding: 10px;
    transition: color 0.2s;
}

.nav a:hover {
    color: var(--pcg-red);
}

.nav ul {
    display: flex;
    list-style: none;
    text-transform: uppercase;
    padding: 0;
}

.mobile-menu-btn button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
    margin-right: 0px;
}

.mobile-menu-btn .line {
    width: 40px;
    height: 5px;
    background-color: #ffffff;
    margin: 5px;
    clip-path: polygon(10% 0%, 100% 0, 90% 100%, 0% 100%);
}

.logo-holder img {
    width: 200px;
    height: 38px;
    padding-left: 20px;
}

/*** Search ***/
.search-holder form {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    background-color: #fff;
    clip-path: var(--pcg-clip-small);
}

.search-holder form input {
    padding: 5px;
    height: 30px;
    width: 100%;
    border: none;
    background-color: transparent;
}

.search-holder button {
    background-color: var(--pcg-red);
    border: none;
    padding: 5px;
    width: 30px;
    height: 30px;
    cursor: pointer;

}

.search-holder button svg {
    width: 20px;
    height: 20px;
    stroke: #ffffff;
}

.more-results-holder {
    display: flex;
    justify-content: end;
    align-items: center;
    margin-bottom: 20px;
}

/*** Search nav ***/

.search-nav-holder {
    overflow: hidden;
}

.search-nav-holder .search-nav {
    background-color: #001822;
    padding: 8px 15px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 1.2;
    width: 100%;
}

.search-nav-holder .nav-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;

}

.search-nav-holder .nav-separator {
    color: #CC2929;
    font-weight: bold;
    padding: 0 5px;
}

.search-nav-holder .count-badge {
    background-color: #CC2929;
    color: #FFFFFF;
    padding: 4px 10px;
    font-weight: bold;
    display: inline-block;
    line-height: 1;
    vertical-align: baseline;
    border-radius: 0;
    font-size: 14px;
}

.mobile-nav {
    width: 100%;
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
}


.mobile-nav.active {
    max-height: 500px;
}

.mobile-nav ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #001822;
}

.mobile-nav ul li {
    padding: 10px 20px;
    border-bottom: 1px solid #ffffff1f;
}

.mobile-nav ul li a {
    color: #ffffff;
    text-decoration: none;
}


/*** Banner ***/

.bnr {
    position: relative;
    padding-bottom: 15px !important;
    margin-bottom: 10px;
    margin-top: 10px;
}

.bnr-holder-top {
    height: 330px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    text-align: center;
    padding: 15px;
}

.bnr-holder {
    padding: 5px 0;
    text-align: center;

}

.sidebar .bnr-holder {
    min-height: 350px;
}

/* .bnr::after {
    color: #686570;
    content: "hirdet\00e9s";
    display: block;
    font-size: 9px;
    line-height: 18px;
    text-transform: uppercase;
    position: absolute;
    bottom: 0;
    text-align: center;
    left: 0;
    right: 0;
} */

/*** Slider ***/

.slider {
    position: relative;
    /* max-width: 595px; */
    width: 100%;
    height: 260px;
    overflow: hidden;
}


.slider .slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slider-controls {
    display: block;
    height: 25px;
    background-color: #000;
    clip-path: var(--pcg-clip);
    margin-bottom: 10px;
}

.slider-controls .slider-btn {
    float: left;
    color: #ffffff;
    width: 20px;
    font-size: 12px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    cursor: pointer;
}

.slider-controls .slider-btn.active {
    background-color: var(--pcg-red);
}


/* 
.slider .slide {
    min-width: 100%;
    box-sizing: border-box;
}

.slider img {
    width: 100%;
    display: block;
} */

/* .slider .prev, .slider .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.8);
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
}

.slider .prev {
    left: 10px;
}

.slider .next {
    right: 10px;
}

.slider .prev:hover, .slider .next:hover {
    background-color: rgba(255, 255, 255, 1);
} */


.slider .slide {
    position: absolute;
    width: 100%;
    height: 260px;
    display: block;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}


.slider .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.slider .slide.active {
    opacity: 1;
    z-index: 2;
}

.slide .slider-text {
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: #ffffff;
    text-align: right;
    background-color: #0000008f;
    padding: 10px;
    clip-path: var(--pcg-clip);
}

.slide .slider-text h2 {
    font-size: 24px;
    text-transform: uppercase;
    color: #ffffff
}

.slide .slider-text p {
    font-size: 14px;
    color: #ffffff;
    padding: 0;
    margin: 0;
}



/*** Content ***/


.content-holder {
    display: flex;
    flex-direction: row;
    padding: 0 10px;
}

.content {
    /* display: flex;      */
    width: calc(100% - 345px);
    padding-right: 10px;
}

/*** Sidebar ***/
.sidebar {
    display: flex;
    flex-direction: column;
    /* background-color: #990000; */
    /* padding: 20px; */
    width: 345px;
}

.sidebar .bnr {
    /* padding: 10px; */
    text-align: center;
    /* background-color: #fff; */
}

.sidebar .bnr img {
    width: 100%;
}

.sidebar .block {
    /* padding: 10px; */
    /* background-color: #fff; */
    margin-bottom: 10px;
    /* clip-path: var(--pcg-clip); */
}

.sidebar ul.tags {
    list-style: none;
    padding: 0;
    margin-bottom: 0;
    font-size: 11pt;
}

.sidebar ul.tags li {
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
    padding-left: 15px;
    font-size: 10pt;
    position: relative;
    /* background-color:var(--pcg-red);     */
}

.sidebar ul.tags li a::before {
    content: "#";
    display: block;
    width: 10px;
    height: 10px;
    left: 0;
    font-weight: bold;
    /* margin-top: 4px; */
    position: absolute;
    color: var(--pcg-red);
    /* background-color: var(--pcg-red); */
    /* clip-path: polygon(0 0, 75% 0%, 100% 50%, 75% 100%, 0 100%, 28% 50%); */
}

.sidebar ul.tags li a {
    text-decoration: none;
    color: #0b151c;
}

.sidebar ul.tags li a:hover {
    color: var(--pcg-red);
}

.sidebar ul.last-news {
    list-style: none;
    padding: 0 10px;
    margin-bottom: 0;

}

.sidebar ul.last-news li {
    display: flex;
    margin-bottom: 10px;
}

.sidebar ul.last-news li a {
    text-decoration: none;
}

.sidebar ul.last-news li a:hover h2 {
    color: var(--pcg-red);
}

.sidebar ul.last-news h2 {
    position: relative;
    font-size: 10pt;
    padding: 0;
    margin: 0;
    line-height: 1.2;
    margin-bottom: 5px;
    padding-left: 15px;
}


.sidebar ul.last-news h2::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    left: 0;
    margin-top: 4px;
    position: absolute;
    background-color: var(--pcg-red);
    clip-path: polygon(0 0, 75% 0%, 100% 50%, 75% 100%, 0 100%, 28% 50%);
}

.youtube-widget {
    position: relative;
    display: inline-block;
}

.youtube-widget img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 16 / 9;
    clip-path: var(--pcg-clip);
    display: block;
}

.youtube-widget .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background: rgb(219 46 38 / 83%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="white"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6 4v16a1 1 0 0 0 1.524 .852l13 -8a1 1 0 0 0 0 -1.704l-13 -8a1 1 0 0 0 -1.524 .852z" /></svg>');
}

/**** Premiers ****/
.latest-premiers-block .premier_date {
    font-size: 9pt;
    color: #555;
    margin-bottom: 5px;
}

.latest-premiers-block .premier_date {
    display: flex;
    align-items: center;
    font-size: 9pt;
}

.latest-premiers-block .premier_date {
    display: flex;
    align-items: center;
    position: relative;
}

.latest-premiers-block .premier_date::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="%23db2f26"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M16 2c.183 0 .355 .05 .502 .135l.033 .02c.28 .177 .465 .49 .465 .845v1h1a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h1v-1a1 1 0 0 1 .514 -.874l.093 -.046l.066 -.025l.1 -.029l.107 -.019l.12 -.007q .083 0 .161 .013l.122 .029l.04 .012l.06 .023c.328 .135 .568 .44 .61 .806l.007 .117v1h6v-1a1 1 0 0 1 1 -1m3 7h-14v9.625c0 .705 .386 1.286 .883 1.366l.117 .009h12c.513 0 .936 -.53 .993 -1.215l.007 -.16z" /><path d="M9.015 13a1 1 0 0 1 -1 1a1.001 1.001 0 1 1 -.005 -2c.557 0 1.005 .448 1.005 1" /><path d="M13.015 13a1 1 0 0 1 -1 1a1.001 1.001 0 1 1 -.005 -2c.557 0 1.005 .448 1.005 1" /><path d="M17.02 13a1 1 0 0 1 -1 1a1.001 1.001 0 1 1 -.005 -2c.557 0 1.005 .448 1.005 1" /><path d="M12.02 15a1 1 0 0 1 0 2a1.001 1.001 0 1 1 -.005 -2z" /><path d="M9.015 16a1 1 0 0 1 -1 1a1.001 1.001 0 1 1 -.005 -2c.557 0 1.005 .448 1.005 1" /></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 3px;
    margin-left: -3px;
    vertical-align: middle;
}

/*** Footer ***/
.footer {
    margin-top: auto;
    background-color: var(--pcg-red);
    color: #ffffff;
    padding: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.footer .footer-nav {
    display: flex;
    justify-content: center;
    padding: 10px 0;
    background-color: #001822;
}

.footer-logo {
    padding: 10px;
    padding-top: 20px;
}

.footer-logo img {
    width: 200px;
    height: auto;
}

.footer-logo p {
    font-size: 10pt;
    margin: 0;
    padding: 0;
    margin-bottom: 10px;
}

.footer .footer-nav a {
    color: #ffffff;
    text-decoration: none;
    padding: 0 10px;
    font-size: 10pt;
}

.footer ul {
    display: flex;
    list-style: none;
    text-transform: uppercase;
    padding: 0;
}

/*** Gallery ***/
.gallery {
    text-align: center;
    background-color: #fff;
    padding: 20px;
    clip-path: var(--pcg-clip);
    margin-bottom: 20px;
}

.gallery .big-image {
    padding-top: 20px;
    padding-bottom: 10px;
}

.gallery .big-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    clip-path: var(--pcg-clip);
}

.gallery-images img {
    width: 100px;
    height: 75px;
    object-fit: cover;
    margin: 5px;
    cursor: pointer;
    clip-path: var(--pcg-clip);
    padding: 3px;
    background-color: var(--pcg-red);
}

/*** Articles ***/
.articles-grid {
    /* display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 10px;
    padding: 10px; */
    display: flex;
    flex-wrap: wrap;
}

.articles-grid article {
    padding-bottom: 10px;
    position: relative;
    width: 50%;
}


.articles-grid article h2 {
    font-size: 12pt;
    padding: 0;
    margin: 0;
    line-height: 1.2;
    margin-bottom: 5px;
    padding-left: 15px;
    position: relative;
}

.articles-grid article h2::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    left: 0;
    margin-top: 4px;
    position: absolute;
    background-color: var(--pcg-red);
    clip-path: polygon(0 0, 75% 0%, 100% 50%, 75% 100%, 0 100%, 28% 50%);
}




.articles-grid article p {
    padding: 0;
    margin: 0;
    font-size: 10pt;
    margin-left: 15px;
}

.articles-grid article.with-img {
    display: flex;
    /* align-items: start; */
    /* background-color: var(--pcg-red); */
    padding: 5px;
    /* clip-path: polygon(100% 0, 100% 90%, 95% 100%, 0 100%, 0 0); */
    clip-path: var(--pcg-clip);
    /* color: #fff; */
}

/* 
.articles-grid article.with-img h2 {
    color: #fff;
    padding-left: 0;
} */

.articles-grid article.with-img img {
    margin-right: 10px;
    min-height: 90px;
    width: 100px;
    object-fit: cover;
    clip-path: var(--pcg-clip);
}

.articles-grid article.with-img p {
    line-height: 1.2;
    padding-bottom: 10px;
    /* margin-left: 0; */
}


/*** Article ***/
.article {
    padding: 0 20px;
}



.article header h1 {
    font-size: 24pt;
    padding: 0;
    margin: 0;
    line-height: 1.2;
    border-left: 10px solid var(--pcg-red);
    padding-left: 10px;
    margin-bottom: 20px;
}
.article header h2.news_lead {
    font-size: 14pt;
    padding: 0;
    margin: 0;
    margin-bottom: 20px;
}

.article p {
    font-size: 12pt;
    line-height: 1.5;
    padding: 0;
    margin: 0;
    margin-bottom: 20px;
}

.article-img-holder img {
    clip-path: var(--pcg-clip-2x);
}

.article-content img {
    width: 100%;
    clip-path: var(--pcg-clip-2x);
}

.article-info-item {
    display: flex;
    align-items: center;
}

.article-info-item img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.article .table-article {
    width: 100%;
    overflow-x: auto;
}

.article iframe {
    max-width: 100% !important;
    /* center */
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}


.related-news {
    margin-bottom: 20px;
}

.related-news a h3 {
    /* text-decoration: none; */
    transition: color 0.2s;
}

.related-news a:hover h3 {
    color: var(--pcg-red);
}

.related-news h4 {
    padding: 0;
    margin: 0;
    color: #fff;
    /* font-size: 14pt; */
    /* padding: 0;
    margin: 0;
    margin-bottom: 10px;
    border-left: 10px solid var(--pcg-red);
    padding-left: 10px;   */
}

.related-news h3 {
    position: relative;
    font-size: 13pt;
    padding: 0;
    padding-left: 15px;
    padding-bottom: 5px;

}



.related-news h3::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    left: 0;
    margin-top: 8px;
    position: absolute;
    background-color: var(--pcg-red);
    clip-path: polygon(0 0, 75% 0%, 100% 50%, 75% 100%, 0 100%, 28% 50%);

}

/*** Article filter ***/
.filter input,
.filter select,
.filter button {
    padding: 8px;
    margin: 0;
    width: 100%;
    border: 0;
    margin-bottom: 5px;
    background-color: #ffffff;
}

.filter button {
    background-color: #001822;
    color: #ffffff;
    cursor: pointer;
    clip-path: var(--pcg-clip-small);
}

/*** Game ****/
.game-page .game-nav {
    display: flex;
    justify-content: left;
    align-items: center;
    padding: 10px;
    background-color: #001822;
    list-style: none;
    margin: 0;
    margin-bottom: 10px;
    clip-path: var(--pcg-clip);
    margin-top: -10px;
}

.game-page .game-nav a {
    color: #ffffff;
    text-decoration: none;
    padding: 10px;
}

.game-page .game-nav li {
    /** animation **/
    transition: background-color 0.5s;
    clip-path: var(--pcg-clip-small);
}

.game-page .game-nav li.current {
    background-color: var(--pcg-red);

}

.game-page .game-nav li:hover {
    background-color: var(--pcg-red);
}


.game-list-item {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 10px;
    padding: 0;
    width: 50%;
}

.game-list-item img {
    border: 5px solid #ffffff;
}

.game-list-item p {
    padding: 0;
    margin: 0;
    font-size: 10pt;
}

/*** Game Widget ***/

.game-block .blockheader {
    margin-bottom: 10px;
}


.game-block .game-details {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 10px;
    padding: 0;
}

.game-block .game-details img {
    border: 5px solid #ffffff;
}

.game-block .game-info {
    font-size: 10pt;
}


.game-block .game-info b {
    font-weight: bold;
    color: var(--pcg-red);
    padding-bottom: 10px;
    position: relative;
    padding-left: 15px;
}


.game-block .game-info p {
    padding: 5px;
}

.game-block .game-info b::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    left: 0;
    margin-top: 4px;
    position: absolute;
    background-color: var(--pcg-red);
    clip-path: polygon(0 0, 75% 0%, 100% 50%, 75% 100%, 0 100%, 28% 50%);
}



/*** E1 rss ***/
.e1-item {
    margin: 10px 0;
    overflow: hidden;
    width: 100%;
    border-bottom: 1px solid #CCC
}

#e1-rss-holder .e1-item:last-child {
    border-bottom: none
}

.e1-item .e1-image {
    width: 40%;
    display: block;
    float: left;
    position: relative
}

.e1-item .e1-image img {
    width: 100%
}

.e1-item .e1-title {
    width: 55%;
    display: block;
    float: left;
    position: relative
}

.e1-item .e1-title h2 {
    color: #000;
    font-weight: bold;
    font-size: 12px;
    padding: 0 0 0 15px;
    margin: 0 0 5px 0;
    position: relative
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    list-style: none;
}

.pagination a {
    padding: 5px;
    display: inline-block;
    min-width: 25px;
    margin: 0 5px;
    text-align: center;
    text-decoration: none;
    color: #000;
    background-color: #ffffff;
    clip-path: var(--pcg-clip-small);
    text-transform: uppercase;
    font-size: 10pt;
}

.pagination .page-item.active a {
    background-color: var(--pcg-red);
    color: #ffffff;
}

.pagination .first,
.pagination .last {
    padding-right: 10px;
    padding-left: 10px;
}

/*** game test ***/
/** Circle Progress Bar  **/
.test-block .circle-progress-holder {
    display: flex;
    vertical-align: middle;
    align-items: center;
}

.test-block .circle-progress {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    background: conic-gradient(lightgray 0% 100%);
    transition: background 1s ease-in-out;
}

.test-block .circle-progress::before {
    content: "";
    position: absolute;
    width: 70px;
    height: 70px;
    background: #eff3f6;
    border-radius: 50%;
}

.test-block .circle-progress-text {
    margin-left: 10px;
    text-transform: uppercase;
    font-weight: 800;
}

.test-block .circle-progress span {
    position: absolute;
}

/** Progress Bar  **/
.test-block .progress-container {
    width: 100%;
    border-radius: 5px;
    padding: 5px 0;
}

.test-block .progress-label {
    font-weight: bold;
    margin-bottom: 5px;
}

.test-block .progress-bar-holder {
    background: white;
    border-radius: 5px;
    overflow: hidden;
}

.test-block .progress-bar {
    position: relative;
    height: 25px;
    background: var(--pcg-red);
    width: 0;
    transition: width 1s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 25px;
    clip-path: polygon(0 0, calc(100% - 25px) 0, 100% 100%, 100% 100%, 0 100%);
}

.test-block .progress-text {
    font-weight: bold;
    color: white;
    z-index: 1;
}

.test-block .box {
    border: 3px solid;
    padding: 10px 15px 15px 15px;
    position: relative;
    margin-bottom: 15px;
    background-color: white;
}

.test-block .pro {
    border-color: #C0392B;
}

.test-block .contra {
    border-color: #2C3E50;
}

.test-block .label {
    position: absolute;
    bottom: -14px;
    left: -3px;
    font-size: 12px;
    font-weight: bold;
    padding: 5px 10px;
    color: white;
    text-transform: uppercase;
    clip-path: var(--pcg-clip-small);
}

.test-block .pro .label {
    background-color: #C0392B;
}

.test-block .contra .label {
    background-color: #2C3E50;
}


/*** cols ***/
.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}

.col-4 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
    padding: 0 10px;
}

.col-6 {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 10px;
}

.col-12 {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0 10px;
}
/*** Table ***/
.table {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 20px;
        border-collapse: collapse;
}
.table td, .table th {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

/*** New Gallery styles ***/
.gallery-block {
    margin-bottom: 20px;
    margin-top: 20px;
}

.gallery-block h3{
    background-color: var(--pcg-red);
    padding: 5px;
    padding-left: 10px;
    text-transform: uppercase;
    color: #ffffff;
    font-size: 10pt;
}

.gallery-block .gallery-helper{
    font-size: 9pt;
    margin-bottom: 10px;
    color: #555;
}

figcaption {
    font-size: 9pt;
    color: #555;
    margin-bottom: 10px;
}

/*** third-party ***/

.instagram-media {
    margin: 0 auto !important;
    margin-bottom: 20px !important;
}

.twitter-tweet {
    margin: 0 auto !important;
    margin-bottom: 20px !important;
}

iframe[src*="youtube.com"] {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
}

.skinbanner {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-position: top center;
    background-repeat: no-repeat;
}

.blockquote {
  margin: 20px 0;
  padding: 30px 40px 20px 40px;
  border-left: 4px solid var(--pcg-red);
  background-color: #f8f9fa;
  font-style: italic;
  position: relative;
 clip-path: var(--pcg-clip);
}


.blockquote p {
  margin-bottom: 0 !important;
}

.blockquote footer{
  display: block;
  font-size: 0.9em;
  color: #777;
  font-style: normal;
}

.blockquote:before,
.blockquote:after {
  content: '"';
  font-size: 4em;
  color: var(--pcg-red);
  position: absolute;
}

.blockquote:before {
    top: -10px;
    left: 15px;
}

.blockquote:after {
  bottom: -40px;
  right: 20px;
}


/*** Floating Box ***/
.floating-box {
    position: fixed;
    bottom: -300px;
    right: 10px;
    /* background-color: var(--pcg-red); */
    color: #ffffff;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
    z-index: 1000;
    max-width: 320px;
    gap:0;
    padding: 0;
    transition: bottom ease-in-out .45s;
    -moz-transition: bottom ease-in-out .45s;
    -webkit-transition: bottom ease-in-out .45s
}

.floating-box.open {
    bottom: 10px !important
}

.floating-box.closed {
    bottom: -300px !important
}

.floating-box .blockheader {
    padding: 5px;
    font-size: 10pt;
}

.floating-box #close-floating{
    position: absolute;
    right: 22px;
    font-weight: 800;
    cursor: pointer;
}

.floating-box .clipper {
    background-color: #eff3f6;
    clip-path: var(--pcg-clip-2x);
    padding: 10px;
}

.floating-box.articles-grid article h2 {
   font-size: 10pt !important;
}

.floating-box.articles-grid article.with-img img {
    width: 70px;    
    min-height: 70px;
    margin-right: 5px;
}

.floating-box article.with-img {
    width: 100% !important;
}

/*** Profile Card ***/
.profil-holder {
    display: flex;
    flex-direction: row;
    align-items: start;
    padding: 20px;
    margin-bottom: 20px;
    gap: 20px;
    border: 1px solid #ddd;
}

.profil-holder .avatar {
    width: 100px;
    height: 100px;
    overflow: hidden;
    margin-bottom: 0;
    flex-shrink: 0;
}

.profil-holder .user-info {
    flex: 1;
}

.profil-holder .avatar img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
}

.light-box {
    cursor: pointer;
}

.lightbox-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.lightbox-img {
  max-width: 90vw;
  max-height: 90vh;
  box-shadow: 0 0 20px #000;
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 2rem;
  background: transparent;
  color: #fff;
  border: none;
  cursor: pointer;
  z-index: 10000;
}


/*** Responsive ***/
@media (max-width: 768px) {
    .content-holder {
        flex-direction: column;
    }

    .content {
        width: 100%;
    }

    .sidebar {
        width: 100%;
    }

    .main-nav .nav {
        display: none;
    }

}


/*** 1024px ***/
@media (max-width: 1024px) {
    .articles-grid article {
        width: 100%;
    }

    .game-list-item {
        width: 100%;
    }
}