/* ===============================================
   Ultimate Modern CSS Reset
   Based on best practices from Eric Meyer,
   Josh W. Comeau, Andy Bell, and modern standards
   =============================================== */

/* 1. Az elem mérete ezzel fix marad, nem csúszik el, úgy mint a content-box esetében */
*, *::before, *::after {
  box-sizing: border-box;
}
/* 2. Alapértelmezett margin and padding eltávolítása*/
* {
  margin: 0;
  padding: 0;
}
/* 3. Az alap body beállításai */
body {
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* 4. Remove list styles on ul, ol elements with a list role */
ul[role='list'], ol[role='list'] {
  list-style: none;
}
/* 5. Rövidebb sormagasság a headings és az interaktív elemeknél */
h1, h2, h3, h4, button, input, label {
  line-height: 1.1;
}
/* 6.A szöveget úgy törje több sorba, hogy a sorok hossza (karakterszáma) a lehető legegyenletesebb legyen a headings-ben */
h1, h2, h3, h4 {
  text-wrap: balance;
}
/* 7. Hosszú, egybefüggő szavak tördelése, hogy ne logjon ki a szülő elemből*/
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
/*Esztétikusabb tördelés különösen a bekezdések végén*/
p {
  text-wrap: pretty;
}
/* 8. Olyan <a> elemeknek, amelynek nincs beállítva class tulajdonság*/
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}
/* 9. Képekkel és médiákkal történő könnyebb munkavégzés*/
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
/* 10. Inherit fonts for inputs and buttons */
input, button, textarea, select {
  font: inherit;
}
/* 11. Amelyeknél nincs beállítva a sorok száma textarea mezőknél */
textarea:not([rows]) {
  min-height: 10em;
}
/* 12. Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}
/* 13. Root stacking context, REACT és NEXT.js */
#root, #__next {
  isolation: isolate;
}
/* 14. Enable keyword animations for modern browsers, főleg a "details" tag esetében*/
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}
/* 15. Blokkszintű elemként viselkedjenek a régebbi böngészőben */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
/* 16. Az alapértelmezett idézőjelek eltávolítása a blockquotes és a q elemeknél */
blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

/* 17.  A szomszédos cellák szegélyei összeolvadnakígy vékonyabb, egységesebb kinézetet kapunk, elkerülve a dupla vonalakat. */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* 18. Focus management for accessibility, billentyűzet esetén */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* 19. Elmozgatja a  focus outline-t az egeret használóknak */
:focus:not(:focus-visible) {
  outline: none;
}
/* 01. Alapok: A teljes képernyő kihasználása */
html, body {
  height: 100%;
  margin: 0;
}
/* 02. Wrapper: Flex konténer létrehozása */
.wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh; /* Teljes viewport magasság */
}
#ikonokheader{
  padding-bottom: 0.5rem;
}
.ikonokheader{
  display: flex;
  justify-content: center; /* Vízszintesen középre igazítja az elemeket */
  list-style: none;
  gap: 3em; /* Térköz az elemek között */
}
.ikonokheader a{
  text-decoration: none;
}
ul.ikonokheader li{
  display: flex;
  justify-content: center; /* Vízszintes középre igazítás */
  align-items: center;     /* Függőleges középre igazítás (ha szükséges) */
}
.ikonhelyettesito_szoveg{
  color:rgb(6, 71, 91);
  font-size: 2.5rem;
  font-weight: 600;
}
#szechenyi_menu{
  border: 1px solid navy;
  box-shadow: 2px 2px 2px gray;
  border-radius: 0%; 
  /* 2. Az átmenet beállítása: tulajdonság, időtartam, időzítési függvény */
  transition: border-radius 0.4s ease-in-out;
}
#szechenyi_menu:hover{
  border: 1px solid goldenrod;
  box-shadow: 2px 2px 2px rgb(212, 244, 52);
  border-radius: 10%;
}
a img#tclogo_ikon_hover,a img#coop_logo_hover,a img#szechenyi_menu_hover{
  display: none;
}
.ikonokheader a #akcios_ujsag_hover,.ikonokheader a #uzletkereso_hover,.ikonokheader a #facebook_ikon_hover,.ikonokheader a img#youtube_ikon_hover {
    display: none;
}
/* Hover állapot: az első kép rejtve, a második látható */
.ikonokheader a:hover #akcios_ujsag, .ikonokheader a:hover #uzletkereso,.ikonokheader a:hover #facebook_ikon, .ikonokheader a:hover img#youtube_ikon {
    display: none;
}
.ikonokheader a:hover #akcios_ujsag_hover,.ikonokheader a:hover #uzletkereso_hover,.ikonokheader a:hover #facebook_ikon_hover,
.ikonokheader a:hover img#youtube_ikon_hover {
    display: flex; /* Vagy 'block', a képtől függően */
}
/* 03. Fejléc és Lábléc: Fix méretűek, nem zsugorodnak */
header, footer {
  background-color: #f4f4f4;
  color: rgb(6, 71, 91);
  padding: 0.5rem;
  z-index: 20;
  flex-shrink: 0; /* Megakadályozza, hogy a tartalom összenyomja */
}
/* 04. Content: Kitölti a maradék helyet, görgethető */
.content {
  flex-grow: 1; /* Kitölti a maradék helyet */
  overflow-y: auto; /* Görgetősáv, ha a tartalom hosszabb */
  padding: 0.5rem;
  background-color: #f4f4f4; /*törtfehér: #f4f4f4*/
  color: rgb(6, 71, 91);
}
.content h1{
  color: rgb(6, 71, 91);
}
.felso_menu {
  display: flex; /* A szülő elem flex konténer lesz */
  justify-content: center; /* Vízszintesen középre igazítja az elemeket */
  gap: 2.5rem; /* Térköz az elemek között */
  background-color:#DDEBF7;
  /* padding: 5px; */
  list-style: none;
  font-weight: 600;
  border-bottom: 1px solid rgb(6, 71, 91);
  border-top: 1px solid rgb(6, 71, 91);
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.felso_menu li {
  position: relative; /* Szükséges az almenü pozicionálásához */
}
.felso_menu a {
  display: block;
  text-decoration: none; /* Aláhúzás eltávolítása */
  color:rgb(6, 71, 91);
  padding: 10px 15px; /* Kattintási felület, térköz növelése */
  text-align: center;
}
.felso_menu a:hover{
  color:orange;
  -webkit-text-stroke: 0.20px rgb(6, 71, 91);
}
.almenu_szulo {
  list-style: none;
  display: block;
  position: absolute;
  padding: 0;
  margin: 0;
  text-align: center;
  background-color:#DDEBF7;
/* opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0.7s ease;
  Ez egy másik animálási lehetőség */
  max-height: 0;
  overflow: hidden; /* Fontos az animálás végett! */
  transition: max-height 0.7s ease-in-out;
  width:135%;
  border-bottom: 1px solid rgb(6, 71, 91);
  border-left: solid 1px rgb(6, 71, 91);
  border-right: 1px solid rgb(6, 71, 91);
  border-bottom-left-radius: 8px;  /* Bal alsó sarok */
  border-bottom-right-radius: 8px; /* Jobb alsó sarok */
}
.legordulo_almenu:hover .almenu_szulo {
  display:block;
  width:135%;
 /*  opacity: 1;
  visibility: visible; */
  max-height: 500px;
}
ul.almenu_szulo li a {
  padding:4px;
  line-height:1;
  width:100%;
}
.wrapper_footer {
  width: 100%;
  display: flex;          /* Bekapcsolja a rugalmas elrendezést */
  justify-content: space-around; /* Az elemek körül egyenlő térköz van, így a széleken kisebb a hely, mint az elemek között.*/
  align-items: center;    /* Függőlegesen középre igazítja őket */
  border-top: 1px solid rgb(6, 71, 91);
  padding: 0.3rem;
  position: relative;
}
.wrapper_footer ul{
  list-style: none;
}
em{
  display: block;
  padding-right: 0.5rem;
  text-align: right;
}
.footer_menu {
  line-height: 0.9;
}
.footer_menu a{
  text-decoration: none;
  font-size: 0.8rem;
}
.footer_menu a:hover{
  color: orange;
  -webkit-text-stroke: 0.20px rgb(6, 71, 91);
}
.footer_mid{
  position: absolute;
  line-height: 1.1;
  bottom: 0%;
}
.footer_icons {
    display: flex;
    justify-content: center; /* Középre rendezi a csoportot */
    gap: 20px;               /* Fix, egyenlő távolság az ikonok között */
    margin-bottom: 0.30rem;
}
.footer_icons img{
  height: 1.4rem;
}
.footer_icons a[href="mailto:titkarsag@tiszacoop.hu"] .hover,.footer_icons a[href="https://www.facebook.com/TiszaCoopZrt"] img.fb_hover
,.footer_icons a[href="https://www.youtube.com/channel/UC8g4f9i8PzOxz7PH7I2epxg"] img.yt_hover  {
  display: none;
}
/* Ha az egér a linken van: */
.footer_icons a[href="mailto:titkarsag@tiszacoop.hu"]:hover .eredeti,.footer_icons a[href="https://www.facebook.com/TiszaCoopZrt"]:hover .fb_eredeti
,.footer_icons a[href="https://www.youtube.com/channel/UC8g4f9i8PzOxz7PH7I2epxg"]:hover .yt_eredeti {
  display: none; /* Az első kép eltűnik */
}
/* Ha az egér a linken van: */
.footer_icons a[href="mailto:titkarsag@tiszacoop.hu"]:hover .hover,.footer_icons a[href="https://www.facebook.com/TiszaCoopZrt"]:hover .fb_hover
,.footer_icons a[href="https://www.youtube.com/channel/UC8g4f9i8PzOxz7PH7I2epxg"]:hover .yt_hover {
  display: flex; /* A második kép "előjön" */
}

.footer_mid p{
  text-align: center;
}
.foot_app,.footer_mid p span{
  font-weight: 800;
}
.foot_app img {
  display: inline-block;
  vertical-align: middle;
  width: 100px;  /* Fix szélesség pixelben */
  height: auto;   /* A magasság automatikusan igazodik a képarány megtartásához */
}
.foot_app img:first-of-type{
  height: 27px;
}
 /* A kép tárolója */
.image-container {
  position: relative;
    /* display: inline-block; */
  cursor: pointer;
}

   /* A buborék (alapból rejtve) */
.image-container .infobox {
  visibility: hidden;
  background-color:orange;
  color:rgb(6, 71, 91);
  text-align: center;
  padding: 10px;
  border-radius: 10px;
  border:solid 1px rgb(6, 71, 91);
  /* Pozicionálás a kép tetejéhez */
  position: absolute;
  bottom: 110%; /* 10%-kal a kép felett */
  left: 50%;
  transform: translateX(-50%); /* Pontos középre igazítás */
  width: 200px;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.95s, bottom 0.95s;
  }
   /* Megjelenítés kattintás (fókusz azaz :focus)helyett, a kép fölé vonszolt egér(:hover) esetén */
  .image-container:hover .infobox {
    visibility: visible;
    opacity: 1;
    bottom: 132%; /* Kicsit "felúszik" megjelenéskor */
    box-shadow: 4px 4px 8px black;
  }
  /* Kis nyíl a buborék aljára */
  .infobox::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -8px;
    border-width: 8px;
    border-style: solid;
    border-color:rgb(6, 71, 91) transparent transparent transparent;
  }
.felso_menu a.active_menu,.footer_menu a.active_menu{
  color: orange;
  font-weight: 900;
}
#energetika{
  display: flex;
  justify-content: center; /* Vízszintes középre igazítás */
  align-items: center;     /* Függőleges középre igazítás (ha szükséges) */
}
.energetikai_jelentes{
  text-align: center;
  margin-bottom: 0.5rem;
  font-size:1.05rem;
  font-weight: 600;
}
.energetikai_jelentes a{
  text-decoration: none;
}
.energetikai_jelentes a:hover{
  text-decoration:underline red;
}
.energetikai_jelentes span{
  color: red;
}
.dashboard,#akcios_form{
  color: rgb(6, 71, 91);
  font-family: 'Courier New', Courier, monospace;
}
.dashboard h1{
  text-align: center;
}
.dashboard .admin_menu{
  margin-top: 0.35rem;
}
.dashboard ul{
  display: flex;
  justify-content: center; /* Vízszintesen középre igazítja a li elemeket */
  list-style-type: none;
  flex-direction: column;/* Egymás alatt helyezkednek el a "dobozok"*/
  align-items: center; /*Az elemek középre igazítása*/
}
.dashboard ul li{
  text-align: center;
  margin-bottom: 0.5rem;
  width:15rem;
  font-size: 1.2rem;
}
.dashboard a,.gomb-stilus,.gomb-stilus-fix{
  display: block;
  text-decoration: none;
  padding:0.35rem;
  border: solid 2px orange;
  font-weight: 600;
  box-shadow: 3px 3px rgba(0, 0, 0, 0.3);
}
.dashboard a:hover,.gomb-stilus:hover,.gomb-stilus-fix:hover{
  color:orange;
  background-color: rgb(6, 71, 91);
  font-weight: 600;
}
.dashboard .span_adatok{
  font-weight: 600;
}
#dashboard_p{
  display: flex;
  justify-content: space-between;
  align-items: center; /* Opcionális: függőleges középre igazítás */
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.form-container input,#legordulo_statusz,#legordulo_aktualitas_statusz{
  border:solid 2px rgb(6, 71, 91);
  padding-left: 0.5rem;
  box-shadow: 3px 3px rgba(0, 0, 0, 0.3);
  margin-left: 0.5rem;
  text-align: center;
  color: rgb(6, 71, 91);
  font-weight: 700;
}
.form-container input::placeholder{
  font-style: italic;
  font-size: 0.9rem;
  color: rgb(199, 202, 202);
  font-weight: 500;
  text-align:left
}
.form-container input:focus{
  border:solid 2px orange;
  box-shadow: none;
  text-align: center;
}
.form-container input:focus-visible{
  outline: 2px solid orange;
  outline-offset: 2px;
}
.akcios_ujsag_h,.dbrd_promociok_h,.dbrd_aktualitasok_h{
  text-align: center;
  margin-top: 1.8rem ;
  margin-bottom: 1.2rem;
  text-decoration:underline;
}
.akcios_ujsag_h{
  color: rgb(6, 71, 91);
}
.dbrd_promociok_h{
  color:brown;
}
.dbrd_aktualitasok_h{
  color:seagreen;
}
.form-container {
  max-width: 600px;
  margin: 0 auto;
  font-family: sans-serif;
}
.form-group {
  display: flex;
  align-items: center; /* Függőleges igazítás középre */
  justify-content: space-between; /* Hozzárendeli a helyet a label és az input között */
  margin-bottom:0.7rem;
}
.form-group label {
  width: 50%; /* A label szélessége */
  text-align: left;
  padding-right: 15px;
  font-weight: bold;
  color:rgb(6, 71, 91);
}
.form-group input {
  width: 60%; /* Az input mezők szélessége */
  border-radius: 4px;
  box-sizing: border-box; /* Biztosítja, hogy a padding ne növelje a teljes szélességet */
}
.form-group #ujsag_submit{/*Középre igazított submit gomb*/
  display: block;
  margin: 0 auto;
}
#aktiv_chkbx_id{
  position: relative;
  left: -50%;
  width:5%;
}
#legordulo_statusz{
  position: relative;
  left: -31%;
}
#legordulo_aktualitas_statusz{
  position: relative;
  left: -25%;
}
#legordulo_statusz:hover,#legordulo_aktualitas_statusz:hover{
  color:orange;
}
#ujsag_submit:hover,#promocio_submit:hover,#aktualitas_submit:hover{
  background-color: rgb(6, 71, 91);
  color:orange;
  font-weight: 900;
}
.hibauzenetek{
  display: block;
  color: red;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  margin-top: -0.5rem;
  white-space: nowrap;/*Ne tördelje több sorba*/
  overflow: visible;/*A túlnyúló rész látható legyen*/
}
.db_success{
  color:rgb(2, 88, 2);
  background-color: greenyellow;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 600;
  padding: 0.5rem;
}
.gomb-stilus{
  position:relative;
  width: 20%;
  margin: 0.5rem;
  color: rgb(6, 71, 91);
  text-align: center;
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.15rem;
}
.gomb-stilus-fix{
  position:relative;
  margin: 0.5rem;
  color: rgb(6, 71, 91);
  text-align: center;
  font-family: 'Courier New', Courier, monospace;
}
#akcios_ujsagok_megjelenitese
{
  display: flex;
  justify-content: center; /* Vízszintesen középre igazítja a li elemeket */
  gap: 1rem;
  text-align: center;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  margin-top: 2%;
}
.content h3{
  margin-top: 1rem;
  font-weight: 400;
  text-align: center;
}
.kep_neve{
  font-size: 1.1rem;
  color: green;
  font-weight: 700;
}
.szorolap_szin{
  color:red;
  text-align: center;
  font-weight: 600;
}
hr{
  height: 2px;
}
.promociok_megjelenitese {
  display: flex;
  justify-content: center; /* Vízszintesen középre igazítja a kártyákat a soron belül */
  gap: 1rem;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  flex-wrap: wrap; /* Engedi, hogy maximum 3 elem után új sorba ugorjanak */
}

/* A kártyák (span elemek) formázása */
.promociok_megjelenitese .egy_akcios_ujsag {
  display: flex;
  flex-direction: column; /* Egymás alá rakja a szövegeket és a képet */
  align-items: center;    /* VÍZSZINTESEN KÖZÉPRE IGAZÍT MINDENT A KÁRTYÁN BELÜL */
  text-align: center;     /* A több soros szövegeket is középre zárja */
  /* Méretezés: maximum 3 elem fér el egy sorban */
  flex: 1 1 calc((100% - 2rem) / 3);
  max-width: calc((100% - 2rem) / 3);
  box-sizing: border-box;
}
.promo_kepek_megjelenites{
  max-width: 436px;
  max-height: 257px;
  object-fit: contain; /* Opcionális: torzulás ellen */
  transition: transform 1.2s ease, max-width 1.2s ease, max-height 1.2s ease;
  border:1px solid rgb(6, 71, 91);
}
/* Az egyes állásajánlat tömbök beállításai */
.egy_egyeb_hirdetes {
  display: block;             /* Blokkosítjuk a spant, hogy működjön rajta a középre igazítás */
  text-align: center;         /* Minden szöveges elemet középre igazít */
  margin-bottom: 30px;        /* Térköz a két hirdetés között (ha egymás alatt vannak) */
}

/* A képet tartalmazó link és maga a kép középre igazítása */
.egy_egyeb_hirdetes a {
  display: block;             /* Külön sorba kényszeríti a képet a feliratok alól */
  margin: 0 auto 0 auto;   /* Felső térköz + vízszintes automatikus középre igazítás */
  width: fit-content;         /* Csak akkora szélességet vesz fel, amekkora a kép */
}

.egyeb_kepek_megjelenites {
  display: block;             /* Megszünteti az inline elemek alatti felesleges whitespace-t */
  max-width: 436px;
  max-height: 257px;
  object-fit: contain; /* Opcionális: torzulás ellen */
  transition: transform 1.2s ease, max-width 1.2s ease, max-height 1.2s ease;
  border:1px solid rgb(6, 71, 91);
  
}

/* Hover effektus: 1.8-szeres nagyítás */
.egy_akcios_ujsag:hover .promo_kepek_megjelenites,.egy_egyeb_hirdetes:hover .egyeb_kepek_megjelenites {
  transform: scale(1.8);
}

/* --- NAGYÍTÁSI KÖZÉPPONTOK DINAMIKUS BEÁLLÍTÁSA MINDEN SORRA --- */

/* Minden sor 1. képe (1., 4., 7., stb.) -> Bal felső sarokból nagyítódik */
.egy_akcios_ujsag:nth-child(3n+1) .promo_kepek_megjelenites,.egy_egyeb_hirdetes:hover .egyeb_kepek_megjelenites  {
  transform-origin: left center;
}

/* Minden sor 2. képe (2., 5., 8., stb.) -> Középről nagyítódik */
.egy_akcios_ujsag:nth-child(3n+2) .promo_kepek_megjelenites,.egy_egyeb_hirdetes:hover .egyeb_kepek_megjelenites  {
  transform-origin: center center;
}

/* Minden sor 3. képe (3., 6., 9., stb.) -> Jobb felső sarokból nagyítódik */
.egy_akcios_ujsag:nth-child(3n+3) .promo_kepek_megjelenites,.egy_egyeb_hirdetes:hover .egyeb_kepek_megjelenites  {
  transform-origin: right center;
}
/* A képeket összefogó szülő konténer */
#aktualitasok_kepek_megjelenitese {
    display: flex;
    flex-wrap: wrap; /* Engedélyezi a sor törését, ha a képek nem férnek el */
    justify-content: space-around; /* Arányosan elosztja a helyet a képek között */
    gap: 1.1rem; /* Alapértelmezett távolság a képek között */
    padding: 10px;
    overflow: visible !important;
    width: 95%;
    margin: auto;
}

/* A képeket tartalmazó linkek (szélesség beállítása a max 4 képhez) */
#aktualitasok_kepek_megjelenitese a {
    position: relative;
    /* display: block; */
    overflow: visible;
    /* Alapértelmezetten (mobilon) töltsék ki a helyet, de asztali gépen korlátozzuk */
    flex: 1 1 calc(25% - 15px); 
    max-width: calc(25% - 12px); /* Szigorúan maximum 4 kép fér el egy sorban arányosan */
    box-sizing: border-box;
}

/* Kisebb kijelzőkön (pl. mobil), hogy ne legyen túl pici a 4 kép egymás mellett */
@media (max-width: 768px) {
    #aktualitasok_kepek_megjelenitese a {
        flex: 1 1 calc(50% - 15px); /* Mobilon max 2 kép lesz egymás mellett arányosan */
        max-width: calc(50% - 8px);
    }
}

/* Maguk a képek */
img.aktualitasok_kepek_megjelenitese {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    transition: transform 0.8s ease;
    transform-origin: top center;
    border:1px solid rgb(6, 71, 91);
}

/* Egér ráhúzás (hover) effektus */
#aktualitasok_kepek_megjelenitese a:hover {
    z-index: 10;
}

#aktualitasok_kepek_megjelenitese a:hover img.aktualitasok_kepek_megjelenitese {
    transform: scale(1.6);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   NAGYÍTÁSI KÖZÉPPONTOK A SZÉLSŐ KÉPEKHEZ (Asztali nézetben, ahol 4 kép van egy sorban)
   ========================================================================== */
@media (min-width: 769px) {
    /* Minden sor 1. eleme (bal szél): balról nagyít */
    #aktualitasok_kepek_megjelenitese a:nth-child(4n+1) img.aktualitasok_kepek_megjelenitese {
        transform-origin: left top;
    }

    /* Minden sor 4. eleme (jobb szél): jobbról nagyít */
    #aktualitasok_kepek_megjelenitese a:nth-child(4n+4) img.aktualitasok_kepek_megjelenitese {
        transform-origin: right top;
    }
}
.aktualitas_fejlec{
text-decoration:overline underline;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
font-size: 1.5rem;
}
.h1_cimke,.aktualitas_h1_cimke,.promocio_h1_cimke{
  text-align: center;
  color: navy;
  margin: 0.5rem;
}
.h1_cimke span{
  padding:0.1em;
  border: solid 1px navy;
  box-shadow: 2px 2px 4px navy;
}
.aktualitas_h1_cimke span{
  text-align: center;
  color:darkgreen;
  background-color:rgb(225, 255, 247);
  margin: 0.5rem;
  padding:0.1em;
  border: solid 1px darkgreen;
  box-shadow: 2px 2px 4px rgb(47, 197, 2);
}
.promocio_h1_cimke span{
  text-align: center;
  color:rgb(100, 0, 47);
  background-color:rgb(244, 199, 249);
  margin: 0.5rem;
  padding:0.2em;
  border: solid 1px rgb(62, 1, 28);
  box-shadow: 2px 2px 4px rgb(133, 135, 132);
}
#akcios_ujsag_lista_id,#aktualitasok_lista_id{
  padding-bottom: 1.5rem;
}
.akcios_ujsag_lista{
  position: relative;
  padding: 0.4rem;
  width:80%;
  margin: 0.8rem 0.6rem 0.8rem auto;
  background-color:	ghostwhite;
  color:	navy;
  border: 1px solid gray;
  box-shadow: 4px 4px 8px navy;
}
.promocio_lista{
  position: relative;
  padding: 0.4rem;
  width:80%;
  margin: 0.8rem 0.6rem 0.8rem auto;
  background-color:	rgb(248, 244, 246);
  color:	rgba(93, 2, 72, 0.877);
  border: 1px solid rgb(2, 10, 81);
  box-shadow: 4px 4px 8px rgb(85, 0, 78); 
}
.aktualitasok_lista{
  position: relative;
  padding: 0.4rem;
  width:80%;
  margin: 0.8rem 0.6rem 0.8rem auto;
  background-color:rgb(225, 255, 247);
  color:	rgb(8, 90, 2);
  border: 1px solid gray;
  box-shadow: 4px 4px 8px rgb(8, 90, 2);
}
.akcios_ujsag_id_szoveg,.aktualitasok_id_szoveg,.aktualitas_fajl_neve_szoveg,.aktualitas_link_szoveg{
  display: inline-block;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  width: 15%;
}
.promo_lista_id_szoveg{
  display: inline-block;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  width: 12%; 
}
.promocio_link_szoveg{
  display: inline-block;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  width: 10%;   
}
.akcios_ujsag_id,.aktualitasok_id{
  display: inline-block;
  width: 2%;
  text-align: right;
  font-weight: 700;
  font-size: 1.1rem;
}
.akcios_ujsag_id{
  color:chocolate;
}
.aktualitasok_id{
   color:orange;
}
.balra_kozepen_fixen{
  position: fixed;   /* Kiveszi az elemet a normál dokumentumfolyamatból, a képernyőhöz képest rögzíti */
  left: 0.4rem;          /* Teljesen a jobb szélre tolja */
  top: 50%;          /* A div tetejét a képernyő magasságának feléhez igazítja */
  transform: translateY(-50%); /* Felfelé tolja a div-et a saját magasságának felével, így lesz tökéletesen középen */
  font-size: 1.12rem;
}
.kep_neve_szoveg,.aktualitas_neve_szoveg{
  display: inline-block;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.kep_neve_szoveg{
  width: 8%;
}
.aktualitas_neve_szoveg,.aktualitas_statusz_szoveg{
  width:11%;
}
.akcios_ujsag_kep_neve{
  display: inline-block;
  width: 40%;
  font-weight: 600;
  padding: 0.1rem;
  color: olivedrab;
  font-family: 'Courier New', Courier, monospace;
  text-shadow: 1px 3px 0px yellow;
}
.aktualitas_kep_neve,.promocio_kep_neve{
  display: inline-block;
  width: 38%;
  font-weight: 600;
  padding: 0.1rem;
  color:brown;
  font-family: 'Courier New', Courier, monospace;
  text-shadow: 1px 3px 0px yellow;  
}
.kep_fajl_neve_szoveg,.szorolap_statusz_szoveg,.feltoltes_ideje_szoveg,.aktualitas_fajl_neve_szoveg,.aktualitas_statusz_szoveg,
.aktualitas_link_szoveg,.aktualitas_feltoltes_ideje_szoveg{
  display: inline-block;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;  
}
.akcios_kep_fajl_neve{
  font-weight: 600;
  color: olivedrab;
  font-family: 'Courier New', Courier, monospace; 
}
.aktualitas_fajl_neve{
  font-weight: 600;
  color:teal;
  font-family: 'Courier New', Courier, monospace;
  display: inline-block;
  width: 34%;
}
.aktualitas_statusza{
  font-weight: 600;
  color:orangered;
  font-family: 'Courier New', Courier, monospace;   
}
.lista_terkoz{
  display:inline-block;
  width: 1%;
}
.megjelenites_kezdete_szoveg,.megjelenites_vege_szoveg,.ervenyesseg_kezdete_szoveg,.ervenyesseg_vege_szoveg,.ujsag_link_szoveg{
  display: inline-block;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  width: 13%; 
}
.megjelenites_kezdete,.megjelenites_vege,.ervenyesseg_kezdete,.ervenyesseg_vege,.promo_megjelenites_kezdete,.promo_megjelenites_vege,
.promo_ervenyesseg_kezdete,.promo_ervenyesseg_vege{
  font-weight: 700;
  font-family: 'Courier New', Courier, monospace;
  width: 13%;
  padding: 0.1rem;
}
.megjelenites_kezdete,.megjelenites_vege,.ervenyesseg_kezdete,.ervenyesseg_vege,.promo_megjelenites_kezdete,.promo_megjelenites_vege{
  border: dashed 1px rgba(150, 3, 106, 0.926);
}
.promo_ervenyesseg_kezdete,.promo_ervenyesseg_vege{
  border: dashed 1px rgb(209, 246, 4); 
}
.megjelenites_kezdete,.megjelenites_vege{
  color:darkolivegreen;
  background-color: lime;
}
.promo_megjelenites_kezdete,.promo_megjelenites_vege{
  color: navy;
  background-color: #00cfff;
}
.ervenyesseg_kezdete,.ervenyesseg_vege{
  color:darkred;
  background-color: bisque;
}
.promo_ervenyesseg_kezdete,.promo_ervenyesseg_vege{
  color: #f8cece;
  background-color: #b30616;
  font-weight: 600;
}
.ujsag_link{
  display: inline-block;
  color:slateblue;
  font-style: italic;
  width: 38%;
  font-size: 1.1rem;
}
.promocio_link{
  display: inline-block;
  color:slateblue;
  font-style: italic;
  width: 45%;
  font-size: 1.1rem;
}
.ujsag_link a {
  text-decoration: none;
  color:slateblue;
}
.ujsag_link a:hover{
  text-decoration:underline;
  color:darkblue;
}
.aktualitas_link{
  display: inline-block;
  color:brown;
  font-style: italic;
  width: 48%;
  font-size: 1.1rem;
}
.aktualitas_link a {
  text-decoration: none;
  color:brown;
}
.aktualitas_link a:hover{
  text-decoration:underline;
  color:coral
}
.szorlolap_statusz_szoveg,.feltoltes_ideje_szoveg,.aktualitas_feltoltes_ideje_szoveg{
  width: 10%;
}
.aktualitas_feltoltes_ideje_szoveg{
  position: absolute;
  right: 15%;
}
.szorolap_statusz{
  display: inline-block;
  font-weight: 700;
  color:sienna;
  margin-left: 0.2rem;
  width: 7%;
}
.feltoltes_ideje{
  font-family: 'Courier New', Courier, monospace;
  color:orangered;
  font-weight: 700;
}
.aktualitas_feltoltes_ideje{
  position: absolute;
  right: 0;
  margin-right: 0.5rem;
  font-family: 'Courier New', Courier, monospace;
  color:crimson;
  font-weight: 700;
}
.modositas_gomb,.torles_gomb{
  display: inline-block;
  width: 9%;
}
.modositas_gomb a,.torles_gomb a{
  text-decoration: none;
  background-color: white;
  padding:0.3rem;
  border:solid 1px navy;
  font-weight: 600;
  font-family: 'Courier New', Courier, monospace;
}
.modositas_gomb a{
  color:darkgreen;
}
.modositas_gomb a:hover{
  background-color:darkgreen;
  color:white;
}
.torles_gomb a{
  color:chocolate;
}
.torles_gomb a:hover{
  background-color:chocolate;
  color: white;
}
p.aktualitas_also_sor{
  margin-top: 0.5rem;
}
.content #szechenyi2020{
  line-height: 1.3;
}
.content #szechenyi2020 .szechenyi2020_h3{
  font-weight: 700;
  margin: 0.8rem;
  text-align: left;
}
#szechenyi2020 img{
   display: block;
   margin-left: auto;
   margin-right: auto;
   width: 60%;
   border: 1px green solid;
}
#szechenyi2020 p{
   padding: 1%;
   font-size: 1.1rem;
}
#szechenyi2020 p a{
  color:blue;
  text-decoration: none;
}
#szechenyi2020 p a:hover{
  text-decoration:overline underline;
  color:navy;
}
#szechenyi2020 #szechenyi2020_plakat_szoveg{
   text-align: center;
   font-size: 11px;
}
#szechenyi2020 ul{
   margin-left: 21%;
}
#szechenyi2020 ul li{
   font-size: 18px;
   letter-spacing: 0.1em;
}
.szechenyi2020_p{
  text-align: justify;
}
#tortenetunk_id {
  width: 90%;
  margin: auto;
  text-align: justify;
  font-size: 1.1rem;
}
.tortenetunk_szovegkozi{
  font-weight: 600;
}
#tortenetunk_galeria {
  position: relative;
  display: flex;         /* Aktiválja a flexbox elrendezést */
  justify-content: space-between; /* Egyenlő távolságot tesz a képek közé */
  gap: 1rem;             /* Fix távolság a képek között */
  width: 90%;           /* A konténer szélesség */
  margin: 3% auto;
}
#tortenetunk_galeria img {
  width: calc(33.33% - 10px); /* Kiszámolja a 3 kép pontos szélességét a rés (gap) levonásával */
  height: auto;          /* Megtartja a képek arányait */
  object-fit: cover;     /* Ha fix magasságot adnál meg, ez megvédi a képet a torzulástól */
  border:1px solid navy;
  box-shadow: 4px 4px 4px gray;
  transition: transform 0.8s ease;
}
/* Hover effektus: 1.8-szeres nagyítás */
#tortenetunk_galeria img:hover {
    transform: scale(1.5);
}
#kapcsolatok{
  width: 70%;
  font-size: 1.4rem;
  margin: 1% auto;
  padding: 1.1rem;
}
#kapcsolatok p{
  text-align: center;
  font-size: 1.7rem;
  font-weight: 500;
  text-decoration:overline underline;
  text-decoration-thickness: 0.2rem;
  text-decoration-color:gray;
}
#kapcsolatok ul{
  padding: 0.5rem 1rem;
  list-style-type: none;
  margin-left: 24%;
}
#kapcsolatok ul li{
  font-weight: 700;
}
#kapcsolatok ul li span{
  font-weight: 200;
}
#kapcsolatok ul li span a{
  text-decoration: none;
}
#kapcsolatok ul li span a:hover{
  text-decoration:underline;
}
#kapcsolatok_terkep{
  display: grid;
  place-items: center;
}
#kapcsolatok_terkep div{
    border: solid 1px navy;
    box-shadow: 4px 4px 4px gray;
}