@charset "UTF-8";

#contentframe_container_x_lcr1 {
    grid-template-areas: "content";
    grid-template-columns: 1fr;
    position: relative;
    z-index: 1;
}

#right_div {
    display: none!important;
}

section.hero {
    display: grid;
    grid-template-areas: "slider cards celertek";
    grid-template-columns: 7fr 2.5fr 2.5fr;
    gap: 15px;
}

section.hero #slider {
    grid-area: slider;
}

section.hero .cards {
    grid-area: cards;
}

section.hero .celertek {
    grid-area: celertek;
}

.hero .cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: space-between;
}

.hero .card {
    border: 0;
    height: 100%;
    border-radius: var(--card-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 43px 13px;
    box-shadow: var(--shadow-blue);
}

.hero .card a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 30px;
}

.hero .card.iranyelv {
    background: #306191;
    --card-color: #fff;
}

.hero .card.folyoirat {
    background: #BFDBF0;
    --card-color: #306191;
}

.hero .card.referalo {
    background: #6EA5D3;
    --card-color: #fff;
}

.hero .card.celertek {
    background: #A71E22;
    padding: 20px 13px;
    --card-color: #fff;
    gap: 10px;
}

.hero .card.celertek .box {
    width: 100%;
    background: rgba(255, 255, 255, 0.10);
    padding: 10px 20px;
}

.hero .card.celertek ul {
    list-style: none;
    padding: 0 0 0 20px;
    margin-top: 10px;
}

.hero .card * {
    color: var(--card-color);
    font-size: 1rem;
    text-decoration: none;
}

#slider {
    box-shadow: var(--shadow-black);
    border-radius: var(--card-radius);
    overflow: hidden;
}

.carousel,
.carousel-inner,
.carousel-item {
    height: 100%;
}

.carousel-item {
    background: 
        linear-gradient(0deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.60) 100%), 
        var(--slider-bg) no-repeat center center;
    background-size: cover;
}

.carousel-item:not(:has(.slider-content *)) {
    background: var(--slider-bg) no-repeat top center;
    background-size: cover;
}

.carousel .carousel-indicators li {
    display: inline-block;
    height: 10px;
    width: 10px;
    border-radius: var(--card-radius);
    border: solid 2px #fff;
    background: transparent;
    opacity: 0.5;
}

.carousel .carousel-indicators li.active {
    background: #fff;
}

.carousel .carousel-indicators li:hover {
    opacity: 1;
}

.slider-content {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    width: 100%;
    height: 100%;
    padding: 50px 40px;
    justify-content: center;
    text-decoration: none;
}

.slider-content * {
    width: 100%;
    color: #fff;
    text-align: center;
}

.slider-content h4 {
    font-size: clamp(24px, -11.2px + 3.56vw, 40px);
    line-height: 160%;
}

.slider-content .slide-lead {
    font-size: clamp(18px, -4px + 2.22vw, 28px);
    line-height: 160%;
}

.carousel-control {
    --bs-btn-hover-bg: rgba(0, 0, 0, 0.2)!important;
}

#contentframe_container_x_lcr1 section {
    margin-bottom: 90px;
}

body:has(.portlets *) section.news {
    --portlet-width: 300px;
    /* max-width: var(--content-max-width); */
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-areas: 
                            "news portlet"
                            "hirdetesek portlet";
    grid-template-columns: auto var(--portlet-width);
    column-gap: 20px;
}

.portlets:has(*) {
    width: var(--portlet-width);
    grid-area: portlet;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.news.hirdetesek {
    grid-area: hirdetesek;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.hirdetesek .content-box + .content-box {
    margin-top: 0;
}

.portlets > table {
    width: var(--portlet-width);
}

section.news > .news {
    grid-area: news;

}

section.news .section-title h2 {
    display: inline-block;
    background: var(--color-dark-red);
    color: #fff;
    border-radius: 6px 6px 0 0;
    padding: 11px 30px;
    font-size: 18px;
    font-weight: normal;
    line-height: normal;
    margin: 0
}

section.news .section-title hr {
    border-top: solid 2px var(--color-dark-red);
    opacity: 1;
}

section.news .latest-news-list {
    margin-top: 20px;
    --bs-gutter-x: 50px;
    row-gap: 50px;
}

section.news .latest-news-list .news-col {
    display: flex;
    flex-wrap: wrap;
}

section.news .latest-news-list .news-col .row {
    row-gap: 50px;
}

section.news .newsItem .inner {
    display: flex;
    flex-wrap: nowrap;
    border-radius: var(--card-radius);
    background: rgba(48, 51, 145, 0.05);
    overflow: hidden;
}

section.news .newsItem .inner .news-img,
section.news .newsItem .inner .content {
    width: 100%;
    height: 100%;
}

section.news .newsItem .inner .news-img:has(img[sr='']) {
    display: none;
}
/*
section.news .newsItem .inner:has(.news-img:has(img:not([src='']))) .content {
    height: 100%;
    width: 50%;
}
*/

section.news .newsItem .inner .news-img img {
    object-fit: contain;
    width: 100%;
    align-self: center;
}

section.news .newsItem .inner .content {
    padding: 20px;
}

section.news .newsItem .inner .content * {
    color: var(--color-text);
}

section.news .newsItem .inner .content h3 {
    font-family: 'Lora';
    font-size: 22px;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 10px;
}

section.news .newsItem .inner .content .news-lead {
	-webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    display: -webkit-box;
}

section.news .more {
    text-align: center;
    margin-top: 50px;
}

section.news .more .btn {
    padding: 11px 30px;
}

section.hasznos {
    background: var(--color-dark);
}

section.hasznos .img {
    background: var(--hasznos-bg) center center no-repeat;
    background-size: cover;
}

section.hasznos h2 {
    font-size: 24px;
    color: var(--color-dark);
    font-weight: 700;
    margin-bottom: 30px;
}

section.hasznos .card {
    border-radius: var(--card-radius);
    background: #FFF;
    margin: 50px;
    padding : 40px;
    max-width: 550px;
}

section.hasznos ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    row-gap: 10px;
}

section.hasznos ul li {
    display: inline-flex;
    padding: 21px 30px;
    border-radius: 4px;
    border: var(--border-blue);
    box-shadow: var(--shadow-black);
}

section.hasznos .btn-link-arrow {
    width: 100%;
    color: var(--color-text);
}

section.events .head h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 40px;
}

section.events .event + .event {
    margin-top: 10px;
}

section.events .event .inner {
    border-radius: var(--card-radius);
    background: #FFF;
    box-shadow: var(--shadow-blue);
    padding: 40px 88px;
    display: flex;
    flex-wrap: nowrap;
    column-gap: 65px;
    justify-content: space-between;
}

section.events h3 {
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 700;
}

section.events .event .date:not(.content .date) {
    color: var(--color-primary);
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

section.events .event .date .month {
    font-size: 24px;
}

section.events .event .date .day {
    font-size: 44px;
}

section.events .event .content .date {
    margin: 20px 0;
    font-weight: bold;
    text-transform: capitalize;
}

section.events .event .content .date i {
    margin-right: 13px;
}

@media (max-width: 1399px) {
    section.hero {
        grid-template-areas:
            "slider celertek"
            "slider celertek"
            "cards cards";
        grid-template-columns: 6fr 4fr;
        gap: 15px;
    }

    section.hero .cards {
        flex-direction: row;
    }

    section.hero .cards .card {
        width: 100%;
    }
}

@media (max-width: 991px) {
    body:has(.portlets *) section.news {
        --portlet-width: 200px!important;
    }

    .portlets {
        width: 100%!important;
    }

    section.hero {
        grid-template-areas:
            "slider"
            "cards"
            "celertek";
        grid-template-columns: 1fr;
        gap: 15px;
    }

    section.hero #slider {
        aspect-ratio: 8 / 6;
    }

    section.hero .cards {
        flex-direction: row;
    }

    section.hero .cards .card {
        width: 100%;
    }

    section.hero .celertek {
        flex-direction: unset;
        flex-wrap: wrap;
    }

    section.hero .celertek *:has(h3) {
        width: 100%;
    }

    /*
    section.hero .card.celertek .box {
        width: calc(50% - 5px);
        height: calc(100% - 45px);
    }
    */

    .card.portlet {
        padding: 20px;
    }

    section.events .event .inner {
        padding: 20px 40px;
    }
}

@media (max-width: 767px) {
    body:has(.portlets *) section.news {
        grid-template-areas:
            "news"
            "portlet";
        grid-template-columns: auto;
        row-gap: 90px;
    }

    body:has(.portlets *) section.news {
        --portlet-width: 240px!important;
    }

    section.news .portlets {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: start;
        justify-content: center;
    }

    section.news .newsItem .inner {
        flex-direction: column;
    }

    section.news .newsItem .inner .news-img {
        aspect-ratio: 4 / 3;
        overflow: hidden;
    }

    section.news .newsItem .inner .news-img img {
        object-fit: contain;
        max-height: 100%;
    }

    section.news .newsItem .inner .content {
        height: unset;
    }

    .slider-content {
        padding: 1rem;
    }

    .slider-content h4 {
        font-size: 18px;
    }

    .slider-content .slide-lead {
        font-size: 16px;
    }
}

@media (max-width: 575px) {
    body:has(.portlets *) section.news {
        --portlet-width: 100%!important;
    }

    section.hero .cards {
        flex-direction: column;
    }

    section.hasznos .card {
        margin: 1rem;
        padding: 1rem;
    }

    .slider-content h4 {
        font-size: 16px;
    }

    .slider-content .slide-lead {
        font-size: 14px;
    }
}