:root {
    --bg-light: #e6dea3;
    --bg-dark: rgb(65, 56, 128);
    --border-rad: 20px;
    --border: 1px solid black;
    --shadow: -2px -2px 24px -10px rgba(66, 68, 90, 1);
    --shadow-hover: -2px -2px 24px 3px rgba(66, 68, 90, 1);
    --margin-top-bottom: 100px 0;

}


/*===============body=================*/
body {
    position: relative;
}

.site-grid {
    grid-gap: 0 !important;
}

main {
    margin-top: -6em !important;
}

.thin,
.article-blog,
.akengage-outer-container {
    width: 75%;
    margin: 0 auto;
    text-align: justify;
}

.video {
    text-align: center;
    display: block;
}

.card-header {
    font-size: 2em;
    text-align: center;
    margin: var(--margin-top-bottom);
}

body.wrapper-fluid header>.grid-child,
body.wrapper-fluid footer>.grid-child {}

/*============CARD====================*/
.card {

    --card-spacer-y: 1rem;
    --card-spacer-x: 1rem;
    --card-title-spacer-y: .5rem;
    --card-title-color: ;
    --card-subtitle-color: ;
    --card-border-width: var(--border-width);
    --card-border-color: #dfe3e7;
    --card-border-radius: var(--border-radius);
    --card-box-shadow: ;
    --card-inner-border-radius: calc(var(--border-radius) - (var(--border-width)));
    --card-cap-padding-y: .5rem;
    --card-cap-padding-x: 1rem;
    --card-cap-bg: rgba(var(--body-color-rgb), .03);
    --card-cap-color: ;
    --card-height: ;
    --card-color: ;
    --card-bg: var(--body-bg);
    --card-img-overlay-padding: 1rem;
    --card-group-margin: .5em;
    min-width: 0;
    height: var(--card-height);
    color: var(--body-color);
    word-wrap: break-word;
    border: var(--card-border-width)solid var(--card-border-color);
    border-radius: var(--card-border-radius);
    background-clip: border-box;
    flex-direction: row;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    justify-content: center;
}


/*=============== paragraph =================*/
.paragraph {
    text-align: justify;
    margin: 0 auto;
}

.paragraph p {
    padding: 50px 0;
}

.blog .paragraph {
    margin: 60px auto
}



/*=================header=============*/
.container-header {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    /* Płynna animacja */

}

.container-header .mod-menu>li>a,
.container-search a,
.metismenu.mod-menu .mm-toggler {
    color: white;
}

.container-header.scrolled {
    background-color: white;
}

.container-header.scrolled .mod-menu>li>a,
.scrolled .container-search a,
.scrolled .metismenu.mod-menu .mm-toggler,
.scrolled .breadcrumb {
    color: black;
    transition: color 0.3s ease;

}

.container-topbar {
    order: 1;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.header .grid-child:nth-child(2) {
    width: 180px;
}

.container-header .container-nav {
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    order: 2;
    flex-basis: 220px;
    flex-shrink: 1;
}

/* Menu*/

.metismenu.mod-menu .metismenu-item>button:focus {
    outline: unset;
}

.metismenu.mod-menu .mm-collapse>li.parent>ul,
.metismenu.mod-menu .parent>ul {
    box-shadow: var(--shadow-hover);
}

.metismenu.mod-menu .level-2 .mm-toggler {
    color: black;
}

.container-search {
    align-self: center;
}

.metismenu.mod-menu .metismenu-item {
    flex-wrap: nowrap;
}

/*========== Main Page =================*/

.bckg-picture {
    height: 100vh;
    width: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;

}

/*==============headerbox===========*/

.headerbox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
}

#logo {
    margin: 30px 0;
}

.second-section {
    padding-top: 100vh;
}

.second-section p {
    margin-top: 50px;
    margin-bottom: 50px;
}

/*==============flash==================*/
.newsflash {
    position: relative;
    background-color: var(--bg-light);

}

.newsflash:before {
    content: '';
    position: absolute;
    top: -60px;
    left: 0;
    right: 0;
    height: 120px;
    background: white;
    /* Dziedziczy błękitne tło */
    transform: skewY(3deg);
    /* Kąt skosa */
    z-index: 1;
}

.newsflash:after {
    content: '';
    position: absolute;
    bottom: -60px;
    left: 0;
    right: 0;
    height: 120px;
    background: white;
    /* Dziedziczy błękitne tło */
    transform: skewY(-3deg);
    /* Ten sam kąt */
    z-index: 1;
}



.newsflash .card,
.newsflash.card {
    padding: 100px 0;
}

.mod-articlesnews-horizontal,
.list-group {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 60px;
    width: 100%;
}

.newsflash .card-body {
    padding: 0 30px 100px 30px;
}

.newsflash-horiz li,
.voivodship,
.com-content-category-blog__item,
.voivodship {
    padding: 20px 30px;
    background: white;
    border-radius: var(--border-radius);
    border: var(--border);
    box-shadow: var(--shadow);
    opacity: 0;
    transform: translateY(60px) scale(0.9);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity;
}

.mod-articlesnews-horizontal li.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.mod-articlesnews-horizontal li:nth-child(1) {
    transition-delay: 0.1s;
}

.mod-articlesnews-horizontal li:nth-child(2) {
    transition-delay: 0.2s;
}

.mod-articlesnews-horizontal li:nth-child(3) {
    transition-delay: 0.3s;
}

.mod-articlesnews-horizontal li:nth-child(4) {
    transition-delay: 0.4s;
}

.mod-articlesnews-horizontal li:nth-child(5) {
    transition-delay: 0.5s;
}

.mod-articlesnews-horizontal li figure {
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.4s ease 0.2s;
}

.mod-articlesnews-horizontal li.is-visible figure {
    opacity: 1;
    transform: scale(1);
}


.newsflash-horiz li:hover,
.voivodship:hover,
.com-content-category-blog__item:hover,
.list-group-item:hover {
    box-shadow: var(--shadow-hover);
}

.newsflash-title a {
    font-size: 0.7em;
    line-height: 0.8em;
    text-decoration: none;
}

.newsflash-title {
    order: 1;
}

.newsflash .article-blog {
    order: 2;
    width: 100%;
    margin: 20px auto;
}

.newsflash-horiz .readmore a,
.btn {
    background: var(--bg-dark);
    color: white;
    border-radius: var(--border-rad);
    border: var(--border);
    box-shadow: var(--shadow);
    margin-top: 10px;
}

/*==============buy coffe=============*/
.buycoffe .row {
    align-items: center;
    margin: var(--margin-top-bottom);
}

/*==============icons-container============*/
.icons-container {
    display: flex;
    justify-content: space-evenly;
    margin: var(--margin-top-bottom)
}

.marker-container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 30%;
    margin: 0 auto;
}

.marker-container h4 {
    font-size: 1.5em;
    text-align: center;
}

/*================MAP========================*/
.map {
    margin: var(--margin-top-bottom);
}

/*================najnowsze=================*/
.container-bottom-a {
    padding: var(--margin-top-bottom);
    flex-direction: column;
}

/*==========most popular tags =============*/
.bottom-b.card {
    background: none;
}

.tagsclodu {
    display: flex;
    flex-wrap: wrap;
}

.container-bottom-b {
    width: 75% !important;
    margin: auto;
}

.list-group {
    margin: 50px auto;
}

.list-group-item {
    padding: 20px 30px;
    background: white;
    border-radius: var(--border-radius);
    border: var(--border);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
}

.list-group-item h3 {
    order: 1;
}

.list-group-item .tag-body {
    order: 2;
}

.list-group-item .article-blog {
    width: 100%;
    margin: 20px auto;
}

.com-tags-tag h1 {
    display: none;
}

.com-tags-tag .thin {
    margin: 50px auto;
}

/*============footer==============*/
.socialIcons {}

.socialIcon {
    flex-basis: 50px;
}

.fa-brands {
    font-size: 2em !important;
}

.footer .no-card {
    background: none;
}

.offcanvas-title {
    display: none;
}

.offcanvas a {
    color: ;
}

.text-bg-dark {
    background-color: var(--bg-light) !important;
}

/*-----------------voivodships-------------*/
.voivodships {
    flex-wrap: wrap;
    justify-content: space-around;
}

.voivodship {
    flex-basis: 30%;
    opacity: 100;
}

/*-----------------category blog--------------*/
.com-content-category-blog__item,
.voivodship {
    opacity: 100;

}

.com-content-category-blog__item .item-content {
    padding: 15px;
}



/* flags*/
.gt_container-8ifjdd a.glink span {
    display: none;
}

body .gt_white_content .gt_languages {
    flex-wrap: wrap;
    flex-flow: wrap;
}

.marker-icon {
    text-align: center;
}

/*--------------Article blok-------------*/

.item-page .page-header {
    position: absolute;
    top: 300px;
    left: 50%;
    transform: translate(-50%, 0);
    color: white;
    text-align: center;
    z-index: 1;

}

body .item-page .article-info {

    display: flex;
    justify-content: space-evenly;
    position: absolute;
    top: 500px;
    left: 50%;
    transform: translate(-50%, 0);
    color: white;
    text-align: center;
    z-index: 10;
}

.item-page .tags {

    display: flex;
    justify-content: center;
    position: absolute;
    top: 600px;
    left: 50%;
    transform: translate(-50%, 0);
    text-align: center;
    z-index: 10;

}

.item-page .item-image {
    order: 1
}

.item-page .com-content-article__body {
    order: 5;
}

.item-page .akengage-outer-container {
    order: 6;
}

.item-page .article-info-term {
    display: none;
}

.content-list {
    columns: 3;
}

.section {
    justify-content: center;
    align-items: center;
    margin: 20px 0;
}

.section:nth-child(odd) {
    flex-direction: row-reverse;
}

.published,
.hits {
    margin: 0 10px;
}

/*------------------ADS------------------------*/
.ads {
    margin: 100px auto;
}

.alert {
    background-color: crimson;
    color: white;
    border: 1px solid black;
    border-radius: 20px;
    padding: 20px 10px;

}

.tip {
    background-color: #e6dea3;
    border: 1px solid black;
    border-radius: 20px;
    padding: 20px 10px;

}


@media (max-width: 1200px) {
    .mod-articlesnews-horizontal {
        gap: 30px;
    }
}

@media (max-width: 992px) {
    .mod-articlesnews-horizontal {
        gap: 15px;
    }

    .container-header .container-nav
}

@media (max-width: 768px) {
    .mod-articlesnews-horizontal. .list-group {
        gap: 10px;
        grid-template-columns: repeat(2, 1fr);
    }

    .card .card-body {
        padding: 0;
    }

    .article-blog h2,
    .article-blog h3 {
        margin: 20px 0;
    }




    .tag {
        font-size: 0.70em;
    }

    .newsflash-horiz li,
    .voivodship,
    .com-content-category-blog__item,
    .voivodship {
        padding: 20px 10px;
    }

    .slanted-section::before,
    .slanted-section::after {
        height: 80px;
        top: -40px;
        bottom: -40px;
    }

    .thin,
    .article-blog,
    .akengage-outer-container {
        width: 90%;
    }

    .newsflash-title a {
        font-size: 24px;
        font-weight: 900;
    }

    .newsflash-horiz li:nth-last-child(-n+6) {
        display: none;
    }



}


@media (max-width: 576px) {

    .mod-articlesnews-horizontal,
    .list-group {
        grid-template-columns: 1fr;
    }

    .container-header .grid-child:nth-child(2) {
        display: none;
    }

    .container-topbar {
        order: unset;
        flex-basis: 25%;
    }

    .container-header .container-nav {
        order: unset;
        flex-basis: 100%;
    }

    .marker-container h4 {
        font-size: 1em;
    }

    .container-bottom-b {
        width: 95% !important;
        margin: auto;
    }

    .voivodship {
        flex-basis: 100%;
    }

    body .item-page .page-header,
    body .item-page .article-info,
    body .item-page .tags {
        position: static;
        color: black;
        text-align: center;
        transform: unset;


    }

    .item-page .page-header {
        order: 2;
    }

    .item-page {
        display: flex;
        flex-direction: column;
    }

    .item-page .article-info {
        order: 3;
        flex-direction: column;
    }

    .item-page .tags {
        order: 4;
        flex-wrap: wrap;
    }

    .content-list {
        columns: 1;
    }
}