/*
 * TE v4 – örökölt tartalmi megjelenések (te_v3-ból 1:1 portolva)
 *
 * NE SZERKESZD KÉZZEL a tartalmát a v3-tól eltérő megjelenés érdekében:
 * ezek a cikkekben már használt egyedi mezők (com_fields layoutok), szerkesztői
 * osztályok, harmonika és TF100 fal stílusai. A szelektorlánc szándékosan
 * ugyanaz (#content .container article), hogy a specificitás se változzon.
 *
 * Forrás: te_v3/css/_content.scss (article blokk + tf100wall), _accordion.scss
 * Generálta: tools/port_legacy.py – natív CSS nesting, rétegen KÍVÜL
 * (a rétegen kívüli szabályok erősebbek, ahogy a v3-ban is voltak).
 */

/* ===== v3 alap: betűcsalád a tartalomban ===== */
#content .container article {
   font-family: "kanitregular", Arial, Helvetica, sans-serif;
}

/* ===== Linkek (_content.scss › #content .container a) – a v4-ben csak a cikkre szűkítve ===== */
#content .container article {
   a {
      color: hsla(var(--blue), 1.0);
      text-decoration: none;
      transition: color var(--transition-time);

      &:hover {
         color: hsla(var(--blue), 0.6);
      }
   }
}

/* ===== Cikk tartalom (_content.scss › article) ===== */
#content .container article {
   flex: 1;
   color: hsla(var(--midGray), 1.0);

   p {
      margin-bottom: 20px;

      img {
         width: 100%;
         height: auto;
         border-radius: var(--border-radius);

         &.inline {
            width: unset;
            max-width: 100%;
            margin: 15px
         }

         &.left {
            margin: 10px 10px 10px 0;
         }

         &.right {
            margin: 10px 0 10px 10px;
         }

         &.noborder,
         &.nincskeret {
            border: none;
         }

         &.obituary,
         &.gyasz {
            border-color: hsla(var(--black), 1.0);
         }

         &.nocaption + span.image-caption,
         &.nincscim + span.image-caption {
            display: none;
         }

         &.fullwidth,
         &.teljesszelesseg,
         &.threequaterwidth,
         &.haromnegyedhasab,
         &.halfwidth,
         &.felhasab,
         &.thirdwidth,
         &.harmadhasab,
         &.quaterwidth,
         &.negyedhasab,
         &.fifthwidth,
         &.otodhasab,
         &.sixthwidth,
         &.hatodhasab,
         &.tenthwidth,
         &.tizedhasab {
            width:100%;
         }

         &.inline.tizedhasab,
         &.inline.tenthwidth {
            width:10%;
         }

         &.inline.hatodhasab,
         &.inline.sixthwidth {
            width:16%;
         }

         &.inline.otodhasab,
         &.inline.fifthwidth {
            width:20%;
         }

         &.inline.negyedhasab,
         &.inline.quaterwidth {
            width:25%;
         }

         &.inline.harmadhasab,
         &.inline.thirdwidth {
            width:33%;
         }

         &.inline.felhasab,
         &.inline.halfwidth {
            width:50%;
         }

         &.inline.haromnegyedhasab,
         &.inline.threequaterwidth {
            width:75%;
         }

         &.inline.teljesszelesseg,
         &.inline.fullwidth {
            width:100%;
         }

         &.inline.nincsmargo,
         &.inline.nomargin {
            margin: 0 !important;
         }
      }
   }

   p:has(> img.nincsmargo),
   p:has(> img.nomargin) {
      margin-bottom: 5px;
   }

   p.nincsmargo,
   p.nomargin {
      margin-block: 0;
   }

   p.rsformVerticalClear {
      margin-bottom: 10px;
   }

   p.lead {
      font-size: 20px;
      font-weight: normal;
      color: hsla(var(--blue), 1.0);
   }

   & > p:empty {
      display: none;
   }

   ul {
      margin: 0 0 20px 20px;
      list-style: unset;

      li {
         margin-left: 10px;

         ul {
            margin: 0 0 0 10px;
         }
      }
   }

   /* GLightbox egyedi felülírások, amik a cikk tartalom beállításait bírálják felül a modulon belül */

   ul.glightbox-gallery {
      margin: 0 !important;
      list-style: none !important;

      li {
         margin-left: 0 !important;

         a {
            transition: transform var(--transition-time) ease, box-shadow var(--transition-time) ease !important;
            border-radius: var(--border-radius);
         }
      }
   }

   .mod-glightbox-single {

      .glightbox-thumbnail {
         width: 100%;
      }

      .glightbox-item {
         width: 100%;
         margin-bottom: 15px;
      }
   }

   ol {
      margin: 0 0 20px 20px;

      ul {
         margin: 0 0 0 10px;
      }
   }

   h1, h2, h3, h4 {
      margin-bottom: 15px;
   }

   h3[data-rlta-element=heading] {
      margin-bottom: 0;
   }

   hr {
      height: 1px;
      border: none;
      color: hsla(var(--black), 0.1);
      background-color: hsla(var(--black), 0.1);
      margin: 30px 0;

      &.thicker {
         height: 5px;
      }
   }

   img.elrejtesDesktopon {
      display: none;
   }

   @media (max-width: 768px) {
      img.elrejtesDesktopon {
         display: block;
      }
   }

   #articleTags {
      grid-area: tags;
      color: hsla(var(--midGray), 1.0);
      padding-bottom: 12px;
      border-bottom: 1px solid hsla(var(--black), 0.1);

      .tagsTitle {
         display: inline-block;
         margin-right: 12px;
      }

      a {
         display: inline-block;
         margin-right: 8px;
         color: hsla(var(--blue), 1.0);
         text-decoration: none;
         transition: color var(--transition-time);

         &:hover {
            color: hsla(var(--blue), 0.6);
         }
      }

      .comma {
         display: none;
      }
   }

   .blog-item {

      /* csak a hírek blognézetében alkalmazandó a bal margó, a hírek cikknézetében erre nincs szükség */
      #articleTags {
         margin-left: 10px;
      }
   }

   #articleIcons {
      padding-top: 12px;

      & > a, & > div {
         display: inline-block;
      }

      & > #lastModification {
         color: hsla(var(--midGray), 0.5);
      }

      & > div:first-child, & > a {
         margin-right: 20px;
      }

      a {
         color: hsla(var(--blue), 1.0);
         text-decoration: none;
         transition: color var(--transition-time);

         &:hover{
            color: hsla(var(--blue), 0.6);
         }
      }

      img {
         position: relative;
         top: 3px;
         margin-right: 9px;
         vertical-align: unset;
      }
   }

   #contactPage {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 30px;
      margin-bottom: 30px;

      .contactItem {
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         border: 1px solid hsla(var(--lightBlue), 0.3);
         border-radius: var(--border-radius);
         padding: 18px 18px 15px 18px;
         min-height: 127px;
         text-decoration: none;
         transition: background-color var(--transition-time);

         div:first-child {
            font-size: 18px;
            line-height: 24px;
            letter-spacing: 0.05em;
            color: hsla(var(--midGray), 1.0);
            transition: color var(--transition-time);
         }

         div:nth-child(2) {
            display: block;
            padding-top: 15px;
            padding-left: 24px;
            border-top: 1px solid hsla(var(--black), 0.1);
            font-size: 14px;
            color: hsla(var(--blue), 1.0);
            transition: color var(--transition-time);
            background: url("../images/linkArrow.svg") no-repeat left calc(100% - 5px);
         }

         &:hover {
            background-color: hsla(var(--blue), 1.0);

            div:first-child, div:nth-child(2) {
               color: hsla(var(--white), 1.0);
            }

            div:nth-child(2) {
               border-top: 1px solid hsla(var(--white), 0.3);

               a {
                  color: hsla(var(--white), 1.0);
               }
            }
         }
      }
   }

   #contactPageSimple {

      .contactItem {
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         border: 1px solid hsla(var(--lightBlue), 0.3);
         border-radius: var(--border-radius);
         padding: 18px 18px 15px 18px;
         margin-bottom: 24px;
         min-height: 127px;
         text-decoration: none;
         transition: background-color var(--transition-time);

         p {
            font-size: 18px;
            line-height: 24px;
            letter-spacing: 0.05em;
            padding-left: 20px;
            color: hsla(var(--midGray), 1.0);
            transition: color var(--transition-time);
         }

         ul {
            display: block;
            padding-top: 15px;
            margin-bottom: 0;
            border-top: 1px solid hsla(var(--black), 0.1);
            font-size: 14px;
            transition: color var(--transition-time);

            a {
               transition: color var(--transition-time);
            }
         }
      }
   }

   @media (max-width: 768px) {
      #contactPage {
         grid-template-columns: 1fr;
      }
   }

   #studyOfficePage {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 10px;
      margin-bottom: 24px;

      .studyOfficeMember {
         padding: 24px 24px 12px 24px;
         border: 1px solid hsla(var(--black), 0.1);
         border-radius: var(--border-radius);

         & > div:first-child {
            display: flex;

            .studyOfficePhoto {
               height: 96px;
               background-size: cover;
               border-radius: 50%;
               margin-right: 16px;
               aspect-ratio: 1 / 1;
               max-width: 96px;
               max-height: 96px;
            }

            div:nth-child(2) {
               display: flex;
               flex-direction: column;
               justify-content: center;

               .studyOfficeName {
                  font-size: 22px;
                  line-height: 26px;
                  margin-bottom: 8px;
               }

               .studyOfficePosition {
                  font-size: 16px;
                  line-height: 20px;
                  letter-spacing: 0.05em;
               }
            }
         }

         & > div:nth-child(2) {
            margin-top: 24px;
            margin-bottom: 12px;
            font-size: 16px;
            line-height: 24px;
            letter-spacing: 0.05em;
         }

         & > div:nth-child(3) {
            display: flex;

            .studyOfficePhone {
               color: hsla(var(--blue), 1.0);
               background: url("../images/phoneIcon.svg") no-repeat left center;
               padding-left: 24px;
               margin-right: 25px;

               overflow-wrap: break-word;
               word-wrap: break-word;

               -ms-word-break: break-all;
               word-break: break-all;
               word-break: break-word;

               -ms-hyphens: auto;
               -moz-hyphens: auto;
               -webkit-hyphens: auto;
               hyphens: auto;
            }

            .studyOfficeEmail a {
               display: block;
               background: url("../images/mailIcon.svg") no-repeat left center;
               padding-left: 24px;
               color: hsla(var(--blue), 1.0);
               text-decoration: none;
               transition: color var(--transition-time);

               overflow-wrap: break-word;
               word-wrap: break-word;

               -ms-word-break: break-all;
               word-break: break-all;
               word-break: break-word;

               -ms-hyphens: auto;
               -moz-hyphens: auto;
               -webkit-hyphens: auto;
               hyphens: auto;

               &:hover {
                  color: hsla(var(--blue), 0.6);
               }
            }
         }

         & > div:nth-child(4) {
            margin-top: 10px;

            p, ul {
               margin-bottom: 0;
            }
         }
      }
   }

   @media (max-width: 1024px) {
      #studyOfficePage {

         .studyOfficeMember {

            & > div:nth-child(3) {
               display: block;
            }
         }
      }
   }

   @media (max-width: 768px) {
      #studyOfficePage {
         grid-template-columns: 1fr;
      }
   }

   @media (max-width: 510px) {
      #studyOfficePage {

         .studyOfficeMember {
            display: flex;
            flex-direction: column;
            align-items: center;

            > div:first-child {
               display: block;

               .studyOfficePhoto {
                  margin: 0 auto 20px;
               }

               .studyOfficeName {
                  text-align: center;
               }

               .studyOfficePosition {
                  text-align: center;
               }
            }

            > div:nth-child(2) {
               text-align: center;
            }

            > div:nth-child(3) {
               display: inline-block;

               .studyOfficePhone {
                  margin-bottom: 12px;
               }
            }
         }
      }
   }

   #customerReception {
      display: flex;
      background-color: hsla(var(--lightBlue), 0.1);
      padding: 48px;

      & > div:first-child {
         flex: 1;
         font-size: 22px;
         line-height: 26px;
         color: hsla(var(--blue), 1.0);

         span:first-child {
            font-family: 'kanitmedium';
         }
      }

      & > div:nth-child(2) {
         flex: 1;
         display: flex;
         flex-direction: column;
         justify-content: center;

         span:first-child {
            font-size: 16px;
            line-height: 24px;
            color: hsla(var(--blue), 1.0);
            background: url("../images/clockIcon.svg") no-repeat left center;
            padding-left: 22px;
         }

         span:nth-child(2) {
            font-size: 16px;
            line-height: 24px;
            letter-spacing: 0.05em;
         }
      }
   }

   @media (max-width: 768px) {
      #customerReception {
         display: block;

         > div:first-child {
            margin-bottom: 24px;
         }
      }
   }

   #refereesPage {
      background-color: hsla(var(--lightBlue), 0.08);

      .referent {
         display: flex;
         background-color: hsla(var(--lightBlue), 0.08);

         .col-1 {
            padding: 24px 0 24px 24px;

            .photo {
               height: 96px;
               border-radius: 50%;
               background-size: cover;
               margin-right: 24px;
               aspect-ratio: 1 / 1;
               max-width: 96px;
               max-height: 96px;
            }
         }

         .col-2 {
            flex: 1;
            padding: 24px 24px 24px 0;

            > div:first-child {
               display: flex;
               justify-content: space-between;
               padding-bottom: 12px;
               border-bottom: 1px solid hsla(var(--black), 0.1);

               > div:first-child {
                  font-size: 22px;
                  line-height: 26px;
               }

               > div:nth-child(2) {
                  font-family: 'kanitmedium';
                  font-size: 16px;
                  line-height: 24px;
               }
            }

            > div:nth-child(2) {
               display: flex;
               justify-content: flex-start;
               color: hsla(var(--blue), 1.0);
               padding-top: 24px;

               > div:first-child {
                  background: url("../images/phoneIcon.svg") no-repeat left center;
                  padding-left: 24px;
                  margin-right: 25px;
               }

               > div:nth-child(2) a {
                  display: block;
                  background: url("../images/mailIcon.svg") no-repeat left center;
                  padding-left: 24px;
                  color: hsla(var(--blue), 1.0);
                  text-decoration: none;
                  transition: color var(--transition-time);

                  &:hover {
                     color: hsla(var(--blue), 0.6);
                  }
               }
            }
         }

         .col-3 {
            flex: 1;
            padding: 24px 24px 24px 0;
         }
      }

      .referent:nth-child(2n) {
         background-color: transparent;
      }
   }

   @media (max-width: 1024px) {
      #refereesPage {

         .referent {
            flex-wrap: wrap;

            .col-3 {
               flex: unset;
               width: 100%;
               padding: 0 0 24px 135px;
            }
         }
      }
   }

   @media (max-width: 768px) {
      #refereesPage {
         .referent {

            .col-2 {

               > div:first-child {
                  display: block;
                  padding-bottom: 0;
                  border-bottom: 0;
               }

               > div:nth-child(2) {
                  display: block;

                  > div:first-child {
                     margin-bottom: 12px;
                  }
               }
            }

            .col-3 {
               padding: 0 24px 24px 24px;

               .courses {
                  border-top: 1px solid hsla(var(--black), 0.1);
                  padding-top: 12px;
               }
            }
         }
      }
   }

   @media (max-width: 450px) {
      #refereesPage {
         .referent {
            display: block;

            .col-1 {
               padding: 24px 24px 0 24px;

               .photo {
                  margin: 0 auto;
               }
            }

            .col-2 {
               display: flex;
               flex-direction: column;
               align-items: center;
               padding: 24px 0;
            }

            .col-3 {
               padding: 0 24px 24px 24px;
            }
         }
      }
   }

   #categorySelector {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-auto-rows: 1fr;
      grid-gap: 20px;

      > a {
         position: relative;
         display: block;
         background-size: cover;
         padding: calc(56.25% - 18px) 18px 18px 18px;
         border-radius: var(--border-radius);
         font-size: 18px;
         line-height: 22px;
         text-decoration: none;
         color: hsla(var(--white), 1.0);

         &:hover::before {
            content: "";
            position: absolute;
            bottom: 18px;
            right: 18px;
            width: 33px;
            height: 18px;
            background-image: url(../images/linkArrow.svg);
            background-size: cover;
            background-repeat: no-repeat;
         }

         > div {
            display: flex;
            align-items: end;
            height: 100%;
         }
      }
   }

   @media (max-width: 1024px) {

      #categorySelector {
         grid-template-columns: 1fr 1fr;
      }
   }

   @media (max-width: 768px) {

      #categorySelector {
         grid-template-columns: 1fr;
      }
   }

   .sponsors {
      display: grid;
      gap: 20px;
      grid-template-columns: 1fr 1fr 1fr 1fr;

      div {
         img {
            width: 100%;
            height: auto;
         }
      }
   }

   /* Egyedi tartalmi mezők formázásai */

   .customFields.deadline {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 36px;
      border-radius: var(--border-radius);
      margin-bottom: 20px;
      background: url(../images/customFieldBg.svg) no-repeat hsla(var(--gold), 1.0) 40%;
      background-size: cover;

      .customField.hatarido-cim,
      .customField.hatarido-datuma {
         color: hsla(var(--white), 1.0);
      }

      .customField.hatarido-cim {
         font-family: 'kanitmedium';
         font-size: 18px;
         line-height: 18px;
         letter-spacing: 0.05em;
         text-transform: uppercase;
      }

      .customField.hatarido-datuma {
         font-size: 18px;
         line-height: 18px;
         letter-spacing: 0.05em;
         position: relative;

         &:before {
            position: absolute;
            content: '';
            display: block;
            width: 15px;
            height: 16px;
            background: url(../images/calendarIcon.svg) no-repeat;
            left: -26px;
         }
      }
   }

   @media (max-width: 768px) {
      .customFields.deadline {
         display: block;
         text-align: center;

         .customField.hatarido-datuma:before {
            display: none;
         }
      }
   }

   .customFields.featuredList {
      padding: 36px;
      border-radius: var(--border-radius);
      margin-bottom: 20px;
      background: url(../images/customFieldBg.svg) no-repeat hsla(var(--blue), 1.0) 40%;
      background-size: cover;

      .customField.kiemelt-lista-cim {
         font-family: 'kanitmedium';
         font-size: 18px;
         line-height: 18px;
         letter-spacing: 0.05em;
         text-transform: uppercase;
         color: hsla(var(--white), 1.0);
         margin-bottom: 24px;
      }

      .customField.kiemelt-lista-elemek {
         color: hsla(var(--white), 1.0);

         ul {
            margin: 0 0 0 20px;

            li {
               margin-bottom: 12px;
               list-style-type: none;
               position: relative;

               &:before {
                  content: '';
                  position: absolute;
                  display: block;
                  background: url('../images/listItemIcon.svg') no-repeat;
                  width: 18px;
                  height: 18px;
                  top: 1px;
                  left: -28px;
               }

               &:last-child {
                  margin-bottom: 0;
               }
            }
         }
      }
   }

   .customFields.boxedText {

      .freeText,
      .tabled {
         padding: 20px;
         border: 1px solid hsla(var(--black), 0.1);
         border-radius: var(--border-radius);
      }

      .freeText {

         p {
            margin-bottom: 10px;

            &:last-child {
               margin-bottom: 0;
            }
         }
      }

      .tabled {

         & > div {
            padding: 10px;
         }

         & > div:nth-child(odd) {
            background-color: hsla(var(--black), 0.1);
         }

         p {
            margin: 0;
         }
      }

      .left {
         float: left;
         margin-right: 20px;
      }

      .right {
         float: right;
         margin-left: 20px;
      }

      .w30 {
         width: 30%;
      }

      .w50 {
         width: 50%;
      }

      @media (max-width: 768px) {

         .w30 {
            width: 100%;
            float: unset;
         }

         .w50 {
            width: 100%;
            float: unset;
         }
      }
   }

   /* Cikken belüli képnagyító funkció */

   .zoom-wrapper.left {
      width: 50%;
      float: left;
      margin-right: 20px;
      /* border-bottom: 20px solid transparent; */
   }

   .zoom-wrapper.right {
      width: 50%;
      float: right;
      margin-left: 20px;
      /* border-bottom: 20px solid transparent; */
   }

   .zoom-wrapper.fullwidth,
   .zoom-wrapper.teljesszelesseg {
      width: 100%;
   }

   .zoom-wrapper.fullwidth > img,
   .zoom-wrapper.teljesszelesseg > img {
      width: 100% !important;
      height: auto;
   }

   .zoom-wrapper.threequaterwidth,
   .zoom-wrapper.haromnegyedhasab {
      width: 75%;
   }

   .zoom-wrapper.threequaterwidth > img,
   .zoom-wrapper.haromnegyedhasab > img {
      width: 100% !important;
      height: auto;
   }

   .zoom-wrapper.halfwidth,
   .zoom-wrapper.felhasab {
      width: 50%;
   }

   .zoom-wrapper.halfwidth > img,
   .zoom-wrapper.felhasab > img {
      width: 100% !important;
      height: auto;
   }

   .zoom-wrapper.thirdwidth,
   .zoom-wrapper.harmadhasab {
      width: 33%;
   }

   .zoom-wrapper.thirdwidth > img,
   .zoom-wrapper.harmadhasab > img {
      width: 100% !important;
      height: auto;
   }

   .zoom-wrapper.quaterwidth,
   .zoom-wrapper.negyedhasab {
      width: 25%;
   }

   .zoom-wrapper.quaterwidth > img,
   .zoom-wrapper.negyedhasab > img {
      width: 100% !important;
      height: auto;
   }

   .zoom-wrapper.fifthwidth,
   .zoom-wrapper.otodhasab {
      width: 20%;
   }

   .zoom-wrapper.fifthwidth > img,
   .zoom-wrapper.otodhasab > img {
      width: 100% !important;
      height: auto;
   }

   .zoom-wrapper.sixthwidth,
   .zoom-wrapper.hatodhasab {
      width: 16%;
   }

   .zoom-wrapper.sixthwidth > img,
   .zoom-wrapper.hatodhasab > img {
      width: 100% !important;
      height: auto;
   }

   .zoom-wrapper.tenthwidth,
   .zoom-wrapper.tizedhasab {
      width: 10%;
   }

   .zoom-wrapper.tenthwidth > img,
   .zoom-wrapper.tizedhasab > img {
      width: 100% !important;
      height: auto;
   }

   .zoom-wrapper {

      img.fullwidth,
      img.teljesszelesseg {
         width: 100%;
      }
      img[aria-expanded="true"].fullwidth,
      .img[aria-expanded="true"].teljesszelesseg {
         width: 100%;
      }

      img.threequaterwidth,
      img.haromnegyedhasab {
         width: 75%;
      }
      img[aria-expanded="true"].threequaterwidth,
      .img[aria-expanded="true"].haromnegyedhasab {
         width: 100%;
      }

      img.halfwidth,
      img.felhasab {
         width: 50%;
      }
      img[aria-expanded="true"].halfwidth,
      .img[aria-expanded="true"].felhasab {
         width: 100%;
      }

      img.thirdwidth,
      img.harmadhasab {
         width: 33%;
      }
      img[aria-expanded="true"].thirdwidth,
      .img[aria-expanded="true"].harmadhasab {
         width: 100%;
      }

      img.quaterwidth,
      img.negyedhasab {
         width: 25%;
      }
      img[aria-expanded="true"].quaterwidth,
      .img[aria-expanded="true"].negyedhasab {
         width: 100%;
      }

      img.fifthwidth,
      img.otodhasab {
         width: 20%;
      }
      img[aria-expanded="true"].fifthwidth,
      .img[aria-expanded="true"].otodhasab {
         width: 100%;
      }

      img.sixthwidth,
      img.hatodhasab {
         width: 16%;
      }
      img[aria-expanded="true"].sixthwidth,
      .img[aria-expanded="true"].hatodhasab {
         width: 100%;
      }

      img.tenthwidth,
      img.tizedhasab {
         width: 10%;
      }
      img[aria-expanded="true"].tenthwidth,
      .img[aria-expanded="true"].tizedhasab {
         width: 100%;
      }
   }

   /* .section { */
   /*   content: ""; */
   /*   display: block; */
   /*   clear: both; */
   /* } */

   .zoom {
      outline: 0;
   }

   #lightBox {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: rgba(0,0,0,.8);
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100vh;
      z-index: 1000;
   }

   #zoomImage {
      display: block;
      width: auto;
      height: auto;
      max-width: 90vw;
      max-height: 90vh;
      cursor: zoom-out;
   }

   #imageCaption {
      position: absolute;
      bottom: 10px;
      color: #fff;
   }

   #prevButton {
      position: absolute;
      left: 20px;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 25px 43.3px 25px 0;
      border-color: transparent rgba(255,255,255,.5) transparent transparent;
      z-index: 1001;
      cursor: pointer;
      transition: all 300ms;
   }

   #nextButton {
      position: absolute;
      right: 20px;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 25px 0 25px 43.3px;
      border-color: transparent transparent transparent rgba(255,255,255,.5);
      z-index: 1001;
      cursor: pointer;
      transition: all 300ms;
   }

   #prevButton:hover {
      border-color: transparent rgba(255,255,255,.8) transparent transparent;
   }

   #nextButton:hover {
      border-color: transparent transparent transparent rgba(255,255,255,.8);
   }

   select {
      padding: 7px 20px 7px 7px;
      border: 1px solid hsla(var(--blue), 0.4);
      border-radius: var(--border-radius);
      background: url(../images/arrowDown.svg) no-repeat calc(100% - 7px) center;
      font-size: 14px;
      font-family: 'kanitregular';
      color: hsla(var(--blue), 1.0);
      transition: all var(--transition-time);
      cursor: pointer;
      -webkit-appearance: none;
   }

   .btn.btn-sm.btn-primary {
      border: 1px solid hsla(var(--lightBlue), 0.3);
      border-radius: var(--border-radius);
      padding: 7px;
      color: hsla(var(--white), 1.0);
      background-color: hsla(var(--blue), 1.0);
      font-size: 14px;
      transition: all var(--transition-time);
      cursor: pointer;
      transition: all var(--transition-time);

      &:hover {
         background-color: hsla(var(--lightBlue), 1.0);
      }
   }

   #contactSearchForm {
      display: grid;
      gap: 10px;
      grid-template-columns: 1fr 1fr 1fr;
      margin-bottom: 20px;

      #contactSearchText, #contactSearchIn, #contactSearchBtn {
         appearance: none;
         -moz-appearance: none;
         -webkit-appearance: none;
         font-family: 'kanitregular';
      }

      #contactSearchText, #contactSearchIn {
         border: 1px solid hsla(var(--blue), 0.4);
         border-radius: var(--border-radius);
         padding: 7px;
         color: hsla(var(--blue), 1.0);
         font-size: 14px;
         transition: all var(--transition-time);
      }

      #contactSearchText:focus, #contactSearchIn:focus,
      #contactSearchText:hover, #contactSearchIn:hover {
         border: 1px solid hsla(var(--blue), 1.0);
         outline: 0;
      }

      #contactSearchIn {
         background: url(../images/arrowDown.svg) no-repeat calc(100% - 7px) center;
         cursor: pointer;
      }

      #contactSearchBtn {
         border: 1px solid hsla(var(--lightBlue), 0.3);
         border-radius: var(--border-radius);
         padding: 7px;
         color: hsla(var(--white), 1.0);
         background-color: hsla(var(--blue), 1.0);
         font-size: 14px;
         transition: all var(--transition-time);
         cursor: pointer;
         transition: all var(--transition-time);

         &:hover {
            background-color: hsla(var(--lightBlue), 1.0);
         }
      }
   }

   @media (max-width: 768px) {
      #contactSearchForm {
         grid-template-columns: 1fr;
      }
   }

   /* Kapcsolatkereső szkript táblázata */
   table#contactDetails {
      border: unset;
      border-spacing: 0;
      border-collapse: unset;
      width: 100%;
      color: hsla(var(--black), 0.7);

      td {
         padding: 5px;
         border-top: 1px solid hsla(var(--black), 0.05);

         &.start-tag {
            border-top:1px solid hsla(var(--blue), 1.0);
         }

         &.close-tag {
            border-top: none;
            padding: 0 0 20px 0;
         }
      }

      td#no-results, td#out-of-service {
         padding: 0;
         border-top: none;
         color: hsla(var(--strawberry), 1.0);
         font-weight: bold;
      }
   }

   #innerSidebar {
      display: none;
   }

   /* Hírblog formázása */

   div[itemprop="blogPost"] {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-rows: minmax(37px, auto) minmax(34px, auto) auto auto;
      grid-template-areas:
      "image meta meta meta"
      "image title title title"
      "image content content content"
      "image content content content"
      "image tags tags tags";
      border-bottom: 1px solid hsla(var(--black), 0.1);
      margin-bottom: 30px;

      &:has(.article_image.hide) {
         display: none;
      }
   }

   .article_image {
      grid-area: image;
      padding-right: 10px;
      margin-bottom: 30px;

      img {
         display: block;
         width: 100%;
         height: auto;
         border-radius: var(--border-radius);
      }
   }

   .article_meta {
      grid-area: meta;
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-bottom: 8px;
      padding-left: 10px;

      div {
         background-color: hsla(var(--midGray), 0.1);
         color: hsla(var(--midGray), 1.0);
         padding: 3px 8px;
         border-radius: 20px;
         margin-right: 8px;
         font-size: 14px;

         &:nth-child(2) {
            margin-right: 0;
         }
      }
   }

   .article_title {
      grid-area: title;
      padding-left: 10px;
      margin-bottom: 2px;

      h3 {
         line-height: 1.1;

         a {
            color: hsla(var(--blue), 1.0);
            transition: color var(--transition-time);

            &:hover {
               color: hsla(var(--blue), 0.6);
            }
         }
      }
   }

   .article_content {
      grid-area: content;
      padding-left: 10px;

      strong {
         font-weight: unset;
      }

      p.lead {
         font-size: 16px;
         color: hsla(var(--midGray), 1);
      }
   }

   @media (max-width: 768px) {
      div[itemprop="blogPost"] {
         grid-template-rows: auto;
         grid-template-areas:
         "image image image image"
         "title title title title"
         "meta meta meta meta"
         "content content content content"
         "tags tags tags tags";
      }

      .article_image {
         margin-bottom: 10px;
         padding-right: 0;
      }

      .article_meta {
         align-items: center;
         margin-bottom: 12px;
         padding-right: 0;
         padding-left: 0;
      }

      div[itemprop="author"] {
         display: none;
      }

      .article_title {
         margin-bottom: 10px;
         padding-left: 0;

         h3 {
            margin-bottom: 0;
         }
      }

      .article_content {
         padding-left: 0;

         p {
            letter-spacing: 1.05px;
         }
      }

      #articleTags {
         padding-left: 0;
      }
   }

   .pagination {
      margin-bottom: 30px;
      text-align: center;

      ul {
         display: flex;
         justify-content: center;
         margin: 0;
      }

      li {
         margin: 0;
         display: inline-block;
         border-top: 1px solid hsla(var(--black), 0.1);
         border-bottom: 1px solid hsla(var(--black), 0.1);
         border-left: 1px solid hsla(var(--black), 0.1);

         a {
            display: inline-block;
            padding: 4px 10px;

            &:hover {
               background-color: hsla(var(--blue), 0.6);
               color: hsla(var(--white), 1.0);
            }
         }

         span {
            display: inline-block;
            padding: 4px 10px;

            &:hover {
               background-color: hsla(var(--white), 1.0);
               color: hsla(var(--midGray), 1.0);
            }
         }

         &:last-child {
            border-right: 1px solid hsla(var(--black), 0.1);
         }

         &.pagination-start, &:first-child {
            border-top-left-radius: var(--border-radius);
            border-bottom-left-radius: var(--border-radius);

            &:hover a {
               border-top-left-radius: var(--border-radius);
               border-bottom-left-radius: var(--border-radius);
            }
         }

         &.pagination-end, &:last-child {
            border-top-right-radius: var(--border-radius);
            border-bottom-right-radius: var(--border-radius);

            &:hover a {
               border-top-right-radius: var(--border-radius);
               border-bottom-right-radius: var(--border-radius);
            }
         }
      }

      @media (max-width: 768px) {
         li:first-child, li:last-child {
            display: none;
         }

         li:nth-child(2) {
            border-top-left-radius: var(--border-radius);
            border-bottom-left-radius: var(--border-radius);

            &:hover a {
               border-top-left-radius: var(--border-radius);
               border-bottom-left-radius: var(--border-radius);
            }
         }

         li:nth-last-child(2) {
            border-right: 1px solid hsla(var(--black), 0.1);
            border-top-right-radius: var(--border-radius);
            border-bottom-right-radius: var(--border-radius);

            &:hover a {
               border-top-right-radius: var(--border-radius);
               border-bottom-right-radius: var(--border-radius);
            }
         }
      }
   }

   /* Finder styles */
   #search-form {
      margin-bottom: 30px;

      fieldset.word {
         width: 100%;
         border: 0;
         margin-bottom: 10px;

         input {
            -moz-appearance: none;
            -webkit-appearance: none;
            appearance: none;
            font-family: "kanitregular";
            font-size: 14px;
            padding: 7px;
            border: 1px solid hsla(var(--blue), 0.4);
            border-radius: var(--border-radius);
            color: hsla(var(--blue), 1);
            transition: all var(--transition-time);

            &:focus, &:hover {
               border: 1px solid hsla(var(--blue), 1);
               outline: 0;
            }
         }

         button {
            -moz-appearance: none;
            -webkit-appearance: none;
            appearance: none;
            font-family: "kanitregular";
            font-size: 14px;
            padding: 7px;
            background-color: hsla(var(--blue), 1.0);
            color: hsla(var(--white), 1.0);
            border: 0;
            border-radius: var(--border-radius);
            cursor: pointer;

            transition: all var(--transition-time);
            margin-right: 10px;

            &:hover {
               background-color: hsla(var(--lightBlue), 1.0);
            }
         }

         #detailed-search-button {
            cursor: pointer;
         }
      }

      @media (max-width: 768px) {
         fieldset.word {
            display: flex;
            flex-direction: column;

            button {
               margin-right: 0;
            }

            label, input, button {
               margin-bottom: 10px;
            }
         }
      }

      #advancedSearch {
         width: 100%;

         &.collapsed {
            display: none;
         }

         p {
            margin-bottom: 5px;
         }

         #finder-filter-window {
            overflow: unset;
            margin: 0 0 0 0;

            #finder-filter-select-dates {
               display: flex;
               flex-direction: column;
               flex-wrap: wrap;
               margin: 0 0 0 0;

               label {
                  min-width: 120px;
               }

               .filter-date {
                  display: flex;
                  flex-direction: row;
                  flex-wrap: wrap;
                  align-items: center;
                  float: none;
                  list-style: none;
                  padding: 0;
                  width: auto;
                  margin: 0 0 10px 0;

                  &:first-child {}

                  select {
                     -moz-appearance: none;
                     -webkit-appearance: none;
                     appearance: none;
                     margin-right: 0;
                     outline: 0;
                     font-family: "kanitregular";
                     font-size: 14px;
                     padding: 7px;
                     border: 1px solid hsla(var(--blue), 0.4);
                     border-radius: var(--border-radius);
                     color: hsla(var(--blue), 1);
                     transition: all var(--transition-time);
                     background: url(../images/arrowDown.svg) no-repeat calc(100% - 7px) center;
                     cursor: pointer;
                     margin-right: 5px;
                     min-width: 90px;

                     &:focus, &:hover {
                        border: 1px solid hsla(var(--blue), 1);
                     }
                  }

                  .input-append {
                     display: flex;
                     flex-direction: row;

                     input {
                        -moz-appearance: none;
                        -webkit-appearance: none;
                        appearance: none;
                        font-family: "kanitregular";
                        font-size: 14px;
                        padding: 7px;
                        border: 1px solid hsla(var(--blue), 0.4);
                        border-radius: var(--border-radius);
                        color: hsla(var(--blue), 1);
                        transition: all var(--transition-time);
                        margin-right: 5px;

                        &:focus, &:hover {
                           border: 1px solid hsla(var(--blue), 1);
                           outline: 0;
                        }
                     }

                     #filter_date1_btn, #filter_date2_btn {
                        -moz-appearance: none;
                        -webkit-appearance: none;
                        appearance: none;

                        width: 40px;
                        background: url(../images/cal.svg) no-repeat hsla(var(--blue), 1.0) center center;
                        transition: background var(--transition-time);
                        font-family: "kanitregular";
                        font-size: 14px;
                        padding: 7px;
                        background-color: hsla(var(--blue), 1.0);
                        color: hsla(var(--white), 1.0);
                        border: 0;
                        border-radius: var(--border-radius);
                        cursor: pointer;
                        transition: all var(--transition-time);

                        &:hover {
                           background: url(../images/cal.svg) no-repeat hsla(var(--lightBlue), 1.0) center center;
                        }
                     }
                  }
               }

               @media (max-width: 768px) {
                  .filter-date {
                     display: flex;
                     flex-direction: column;
                     align-items: flex-start;

                     br {
                        display: none;
                     }

                     select {
                        width: 100%;
                        margin-bottom: 10px;
                     }
                  }

                  .field-calendar {
                     width: 100%;

                     input {
                        width: 100%;
                     }
                  }
               }

               .finder-selects {

                  &:first-child {
                     margin: 0 20px 20px 0;
                  }
               }
            }

            .filter-branch {
               display: none;
               flex-direction: column;

               .finder-selects {
                  float: none;

                  #tax-author, #tax-category, #tax-type {
                     width: 100%;
                     max-width: 375px;
                     margin-right: 0;
                     -moz-appearance: none;
                     -webkit-appearance: none;
                     appearance: none;
                     margin-right: 0;
                     outline: 0;
                     font-family: "kanitregular";
                     font-size: 14px;
                     padding: 7px;
                     border: 1px solid hsla(var(--blue), 0.4);
                     border-radius: var(--border-radius);
                     color: hsla(var(--blue), 1);
                     transition: all var(--transition-time);
                     background: url(../images/arrowDown.svg) no-repeat calc(100% - 7px) center;
                     cursor: pointer;
                     margin-right: 5px;
                     min-width: 90px;

                     &:focus, &:hover {
                        border: 1px solid hsla(var(--blue), 1);
                     }
                  }

                  @media (max-width: 768px) {
                     #tax-author {
                        width: 100%;
                        max-width: unset;
                     }
                  }

                  &:not(:first-child) {
                     margin-top: 10px;
                     display: none;
                  }
               }
            }
         }
      }
   }

   #search-results {
      margin: 0;

      #search-query-explained {
         margin: 10px 0 30px;
         padding: 0;
         display: none;
      }

      ul.search-results {
         margin: 0;

         li {
            list-style: none;
            padding-bottom: 20px;
            border-bottom: 1px solid hsla(var(--black), 0.1);
            margin: 0 0 20px 0;

            h4 {
               line-height: 1;
               margin-bottom: 5px;
            }

            .source {
               line-height: 1;
               margin-bottom: 15px;
               color: hsla(var(--lightBlue), 1.0);
            }

            .result-text {
               margin-bottom: 10px;
            }

            .publish {
               line-height: 1;
               margin-bottom: 0;
            }

            &:last-child {
               border-bottom: 0;
            }
         }
      }

      .search-pages-counter {
         margin-top: 10px;
      }
   }

   /* Jevents component */
   #jevents_body {
      border: 0;
      background: none;
      border-radius: 0;
      padding: 0;

      h3 {
         margin-bottom: 20px;
      }

      .jev_evdt_summary,
      .jev_evdt_contact {
         margin-bottom: 15px;
      }

      .month_date {
         font-weight: normal;
         color: hsla(var(--blue), 1.0);
         padding: 0;

         .month_title_year {
            padding-left: 0;
         }

         .month_title, .month_title_year {
            font-size: 20px;
         }
      }

      .cal_today a.cal_daylink {
         padding: 0;
         border-radius: 0;
         margin: 0;
         background-color: hsla(var(--blue), 1.0);
         padding: 0 2px;

         &:hover {
            border: 0;
            color: hsla(var(--lightBlue), 1.0);
         }
      }

      .jev_header2 {
         display: flex;
         width: auto;
         border: 0;
         padding: 0;
         margin: 0;
         height: auto;

         div {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            float: none;
            min-height: 0;
            margin: 0;
            padding: 0;
            line-height: normal;
            font-weight: normal;
            width: 100%;
            color: hsla(var(--midGray), 1.0) !important;
            padding: 5px;

            a {
            }
         }

         div:first-child, div:last-child {
            background-color: hsla(var(--blue), 1.0);
            border: 1px solid hsla(var(--blue), 1.0);
            color: hsla(var(--white), 1.0);
            width: 25%;
            border-radius: 0;

            a {
               background: none !important;
               padding: 0;
            }
         }

         div:nth-child(2) {
            border-top: 1px solid hsla(var(--blue), 1.0);
            border-bottom: 1px solid hsla(var(--blue), 1.0);
            width: 50%;
         }
      }

      div.new-navigation {
         margin: 10px 0 20px 0;
         display: flex;
         flex-direction: row;

         & > div {
            display: flex;
            flex-direction: row;
            width: 100%;
            margin: 0;
            text-align: left;

            &#jumpto {
               display: none;
            }

            & > div {
               margin: 0;
               border-radius: 0;
               border: 1px solid hsla(var(--blue), 1.0);
               padding: 0;
               line-height: normal;

               &#nav-jumpto {
                  display: none;
               }

               &.active {

                  a {
                     background-color: hsla(var(--blue), 1.0);
                     color: hsla(var(--white), 1.0);
                  }
               }

               & > a {
                  transition: all 300ms;
                  padding: 5px 10px;
                  display: block;

                  &:hover {
                     margin: 0;
                     border: 0 !important;
                     background: hsla(var(--blue), 0.2);
                     color: hsla(var(--blue), 1.0);
                  }
               }

               &:first-child a:hover {
                  border-radius: 0;
               }

               &:last-child a:hover {
                  border-radius: 0;
               }

               &:not(:first-child) {
                  border-left: 0;
               }
            }
         }
      }

      .jev_toprow {
        margin-bottom: 20px;

         .previousmonth, .nextmonth {
            a {
               font-size: 14px;
            }
         }
      }

      #jev_maincal {
         margin: 0;
         background: none;
         border: none;
         display: flex;
         flex-direction: column;

         .ev_link_weekday {
            display: block;
            padding: 0;

            .jev_daysnames {
               background: hsla(var(--lightBlue), 1.0);
               color: hsla(var(--bluelue), 1.0);
               border: 0;
               height: auto;
               line-height: initial;
               float: none;
               width: auto;
               padding: 5px;
            }
         }

         .jev_listrow {
            float: none;
            border: 0;
            margin: 0;
            border: 0;
            margin-bottom: 0;
            float: none;

            ul.ev_ul {
               margin: 0;

               li.ev_td_li {
                  list-style: none;
                  padding: 0;
                  margin: 0;
                  border: none;

                  h2 {
                     margin: 10px 0;
                     border-bottom: 0;
                     padding: 0;

                     a {
                     }
                  }
               }
            }
         }
      }

      .event_legend_name {
        font-weight: normal;
      }

      .cal_table {
         border: none;
         width: 100.3%;
         background-color: hsla(var(--black), 0.2);
         padding: 0;

         a {
            font-weight: normal;
         }
      }

      .cal_today {
         padding: 5px;
      }

      .cal_daylink {
         padding: 2px 5px !important;
         border-radius: 3px !important;
      }

      .cal_daysnoevents {
         border: none;
         padding: 5px;
      }

      .cal_daysoutofmonth {
         font-weight: normal;
         color: hsla(var(--black), 0.1);
      }

      .location {
         display: none;
      }

      #gmap {
         width: 100% !important;
         z-index: 1;
      }
   }

   /* A főoldal aljára kerülő, eredetileg sidebar menü átalakító stíluslapja */
   .dropdown_list {
      margin: 15px auto;
      width: auto;
      position: relative;
      box-sizing: border-box;

      li {
         margin: 0;
         padding: 0;
         list-style: none;
      }

      span.dropdown {
         position: relative;
         display: block;
         margin: 0;
         padding: 0 10px;
         width: auto;
         height: 40px;
         line-height: 38px;
         background: hsla(var(--white), 1.0);
         border-radius: var(--border-radius);
         border: 1px solid hsla(var(--black), 0.1);
         cursor: pointer;
         overflow: hidden;
         transition: all var(--transition-time);

         &.is-active {
            border-radius: var(--border-radius) var(--border-radius) 0 0;

            &:after {
               position: absolute;
               width: 9px;
               height: 7px;
               content: "";
               background: url(../images/arrowUp.svg) no-repeat;
               top: 15px;
               right: 14px;
            }
         }

         &:hover, &:active {
            background: hsla(var(--lightBlue), 0.08);
            -webkit-tap-highlight-color: rgba(0,0,0,0);
         }

         &:after {
            position: absolute;
            width: 9px;
            height: 7px;
            content: "";
            background: url(../images/arrowDown.svg) no-repeat;
            top: 15px;
            right: 14px;
         }
      }

      a:hover {
         text-decoration: none;
         border-bottom: 0;
      }

      ul, ul.sidebar-menu {
         display: block;
         float: left;
         margin: 0;
         width: 100%;
         max-height: 0;
         position: absolute;
         background: hsla(var(--white), 1.0);
         top: 40px;
         border-radius: 0 0 var(--border-radius) var(--border-radius);
         z-index: 10;
         overflow-y: auto;
         opacity: 0;
         transition: max-height 0.3s cubic-bezier(0, 0.6, 0, 1), opacity 0.3s cubic-bezier(0, 0.6, 0, 1);

         li {
            float: none;
            display: block;
            margin: 0;
            padding: 0;
            border: 0;
            height: auto;
            border-top: 1px dotted #ccc;

            &:first-child {
               border-top: 0;
            }

            a {
               float: none;
               display: block;
               margin: 0;
               padding: 6px 10px 6px 25px;
               height: auto;
               width: auto;
               text-transform: none;
               color: inherit;
               background: hsla(var(--white), 1.0);
               text-align: left;
               border-radius: 0;
               border: 0;

               &:hover, &:active {
                  background: hsla(var(--lightBlue), 0.08);
               }

               &::before {
                  display: inline-block;
                  margin-left: -15px;
                  margin-right: 5px;
                  width: 10px;
                  height: inherit;
                  content: "\00BB";
                  color: inherit;
                  text-align: center;
                  font-size: inherit;
                  vertical-align: top;
               }
            }
         }
      }

      /* kompatibilitási okokból (J4-re való átállás miatt egy célzottabb és egy általánosabb megfogalmazást is meghagyok) */
      span.is-active + .sidebar-menu,
      span.is-active + ul {
         max-height: 350px;
         border: 1px solid hsla(var(--lightBlue), 0.3);
         border-top: 0;
         opacity: 1;
         transition: max-height 0.2s ease-in-out, opacity 0.2s ease-in-out;
      }
   }

   #alumniCards {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 20px;
      margin-bottom: 30px;

      .alumniCard {
         position: relative;
         aspect-ratio: 504/800;
         background-color: hsla(var(--white), 1.0);

         .alumniCardFrontSide {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            opacity: 100%;
            transition: var(--transition-time);
            cursor: pointer;

            &:after {
               position: absolute;
               content: "";
               display: block;
               width: 40px;
               height: 40px;
               right: 10px;
               bottom: 10px;
               background: url(../images/arrow_up.svg) no-repeat;
            }

            &.hide {
               display: none;
            }
         }

         .alumniCardBackSide {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: absolute;
            padding: 18px;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            border: 1px solid hsla(var(--black), 0.3);

            .upperPart {
               padding-bottom: 15px;
               /* border-bottom: 2px solid hsla(var(--black), 1.0); */

               .cardTitle > h3 {
                  font-size: 17px;
                  line-height: 1.0;
                  margin-bottom: 10px;
                  color: hsla(var(--black), 1.0);
                  word-wrap: normal;
                  word-break: keep-all;
               }

               p {
                  font-size: 14px;
               }
            }

            .lowerPart {
               p {
                  font-size: 13px;
                  margin-bottom: 10px;
                  width: 100%;
                  color: hsla(var(--black), 1.0);
               }
            }

            .pageCloser {
               background-color: hsla(var(--black), 0.05);
               position: absolute;
               display: block;
               width: 40px;
               height: 40px;
               right: 10px;
               bottom: 10px;
               cursor: pointer;
               background: url(../images/arrow_down.svg) no-repeat;
            }
         }
      }
   }

   @media (max-width: 1239px) {

      #alumniCards {
         display: grid;
         grid-template-columns: 1fr 1fr 1fr;
         gap: 20px;

         .upperPart {
            padding-bottom: 15px;
            /* border-bottom: 2px solid hsla(var(--black), 1.0); */

            .cardTitle > h3 {
               font-size: 22px;
               line-height: 1.0;
               margin-bottom: 10px;
               color: hsla(var(--black), 1.0);
               word-wrap: normal;
               word-break: keep-all;
            }

            p {
               font-size: 19px;
            }
         }

         .lowerPart {
            p {
               font-size: 19px;
               margin-bottom: 10px;
               width: 100%;
               color: hsla(var(--black), 1.0);
            }
         }

      }
   }

   @media (max-width: 768px) {

      #alumniCards {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 20px;

         .upperPart {
            padding-bottom: 15px;
            /* border-bottom: 2px solid hsla(var(--black), 1.0); */

            .cardTitle > h3 {
               font-size: 20px;
               line-height: 1.0;
               margin-bottom: 10px;
               color: hsla(var(--black), 1.0);
               word-wrap: normal;
               word-break: keep-all;
            }

            p {
               font-size: 17px;
            }
         }

         .lowerPart {
            p {
               font-size: 16px;
               margin-bottom: 10px;
               width: 100%;
               color: hsla(var(--black), 1.0);
            }
         }
      }
   }

   @media (max-width: 480px) {

      #alumniCards {
         display: grid;
         grid-template-columns: 1fr;
         gap: 20px;

         .upperPart {
            padding-bottom: 15px;
            /* border-bottom: 2px solid hsla(var(--black), 1.0); */

            .cardTitle > h3 {
               font-size: 22px;
               line-height: 1.0;
               margin-bottom: 10px;
               color: hsla(var(--black), 1.0);
               word-wrap: normal;
               word-break: keep-all;
            }

            p {
               font-size: 19px;
            }
         }

         .lowerPart {
            p {
               font-size: 18px;
               margin-bottom: 10px;
               width: 100%;
               color: hsla(var(--black), 1.0);
            }
         }
      }
   }

}

/* ===== TF100 fal (_content.scss › #content.tf100wall) ===== */
#content.tf100wall {
   background-image: url(../images/tf100_paralelogrammak.svg);
   background-repeat: repeat-y;

   #tf100members, #tf100membersMocsai {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 55px;
      margin-bottom: 30px;

      .tf100member {
         position: relative;
         aspect-ratio: 335/510;
         background-color: hsla(var(--white), 1.0);

         .tf100FrontSide {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            opacity: 100%;
            transition: var(--transition-time);
            cursor: pointer;

            .memberName {
               position: absolute;
               bottom: 10px;
               left: 10px;
               width: 65%;
               color: hsla(var(--white), 1.0);
               font-family: 'Unbounded-Regular';
               font-size: 22px;
               word-wrap: normal;
               word-break: keep-all;
            }

            &:after {
               position: absolute;
               content: "";
               display: block;
               width: 40px;
               height: 40px;
               right: 10px;
               bottom: 10px;
               background: url(../images/arrow_up.svg) no-repeat;
            }

            &.hide {
               display: none;
            }
         }

         .tf100BackSide {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: absolute;
            padding: 18px;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            border: 1px solid hsla(var(--black), 0.3);

            .upperPart {
               padding-bottom: 15px;
               border-bottom: 2px solid hsla(var(--black), 1.0);

               .memberName {
                  font-size: 24px;
                  line-height: 1.0;
                  margin-bottom: 10px;
                  font-family: 'Unbounded-Bold';
                  color: hsla(var(--black), 1.0);
                  word-wrap: normal;
                  word-break: keep-all;
               }

               .memberPosition {
                  p {
                     font-size: 10px;
                     margin-bottom: 5px;
                     font-family: 'Unbounded-Regular';
                     color: hsla(var(--black), 1.0);
                  }

                  p:nth-child(2) {
                     margin-bottom: 0;
                  }
               }
            }

            .memberQuote {
               p:first-child {
                  font-size: 12px;
                  margin-bottom: 15px;
                  width: 100%;
                  font-family: 'Unbounded-Bold';
                  color: hsla(var(--black), 1.0);
               }

               p:nth-child(2) {
                  font-size: 10px;
                  width: 80%;
                  margin-bottom: 0;
                  font-family: 'Unbounded-Regular';
                  color: hsla(var(--black), 1.0);
               }
            }

            .pageCloser {
               background-color: hsla(var(--black), 0.05);
               position: absolute;
               display: block;
               width: 40px;
               height: 40px;
               right: 10px;
               bottom: 10px;
               cursor: pointer;
               background: url(../images/arrow_down.svg) no-repeat;
            }
         }
      }
   }

   #tf100membersMocsai {
      grid-template-columns: 1fr 2fr;
      margin-bottom: 55px;
      grid-template-areas: "image quote quote" "image translate translate" "image logo logo";
      grid-template-rows: auto auto auto;

      .tf100member {
         grid-area: image;
      }

      .tf100TopQuote {
         grid-area: quote;

         p {
            font-family: 'Unbounded-Regular';
            color: hsla(var(--black), 1.0);
            font-size: 13px;
            max-width: 530px;
         }
      }

      .tf100TopLogo {
         grid-area: logo;

         img {
            display: block;
            max-width: 170px;
         }
      }

      .tf100TopTranslate {
         grid-area: translate;

         p {
            font-family: 'Unbounded-Regular';
            color: hsla(var(--black), 1.0);
            font-size: 11px;
            max-width: 530px;
         }
      }

   }

   @media (max-width: 1239px) {

      #tf100membersMocsai {
         grid-template-columns: 1fr 1fr;
         margin-bottom: 55px;
         grid-template-areas: "image quote" "image translate" "image logo";
         grid-template-rows: auto auto;
      }
   }

   @media (max-width: 768px) {

      #tf100membersMocsai {
         grid-template-columns: 1fr;
         margin-bottom: 55px;
         grid-template-areas: "quote quote" "logo logo" "translate translate" "image image";
         grid-template-rows: auto auto;
      }
   }
}

@media (max-width: 1239px) {

   #content.tf100wall {

      #tf100members {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 55px;
      }
   }
}

@media (max-width: 768px) {

   #content.tf100wall {

      #tf100members {
         display: grid;
         grid-template-columns: 1fr;
         gap: 55px;
      }
   }
}

@media (max-width: 410px) {

   #content.tf100wall {

      #tf100members, #tf100membersMocsai {
         display: grid;
         grid-template-columns: 1fr;
         gap: 55px;

         .tf100member {
            position: relative;
            aspect-ratio: 335/730;
            background-color: hsla(var(--white), 1.0);
         }
      }
   }
}

/* ===== Harmonika (_accordion.scss) ===== */
.ac {
   --color-white: #fff;
   --color-light-grey: #eee;
   --color-grey: #8a8a8a;
   --color-black: #111;

   margin-bottom: 8px;
   border: 1px solid hsla(var(--black), 0.1);
   border-radius: var(--border-radius);
   /* background-color: hsla(var(--lightBlue), 0.1); */
   box-sizing: border-box;
}

.ac .ac-header {
   padding: 0;
   margin: 0 !important;
}

.ac .ac-trigger {
   font-family: "kanitregular", Arial, Helvetica, sans-serif;
   font-weight: 400;
   font-size: 18px;
   line-height: 20px;
   text-align: left;
   width: 100%;
   padding: 8px 32px 8px 8px;
   display: block;
   cursor: pointer;
   background-color: transparent;
   transition: color 0.25s ease;
   position: relative;
   text-decoration: none;
   margin: 0;
   border: 0;
}

.ac .ac-trigger::after {
   content: "+";
   text-align: center;
   width: 15px;
   transform: translate(0, -50%);
   position: absolute;
   right: 10px;
   top: 50%;
}

.ac .ac-trigger:focus {
   /* color: var(--color-grey); */
}

.ac .ac-panel {
   overflow: hidden;
   transition-property: height, visibility;
   transition-timing-function: ease;
}

.ac .ac-panel p {
   padding: 8px !important;
}

.ac .ac-panel p,
.ac .ac-panel p:last-child {
   margin-bottom: 0 !important;
}

.ac.js-enabled .ac-panel {
   visibility: hidden;
}

.ac.is-active .ac-panel {
   visibility: visible;
}

.ac.is-active>.ac-header .ac-trigger::after {
   content: "\2013";
}

/* ===== _structure.scss › body.toggled (a képnagyító görgetés-tiltása) ===== */
body.toggled {
   overflow-y: hidden;
}