.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1170px;
}

/* Helix Ultimate's own template.css opens with
   `body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}`.
   J3 sets that on `.lnr` only (the Linearicons glyphs), so its body copy renders
   with macOS's default subpixel antialiasing. Same family, same size, same
   weight - but grayscale smoothing thins every stroke, and measured on the top
   bar the J6 text carried 25% less ink than J3 and never reached full white
   (163 saturated pixels vs 15 in "ELŐFIZETÉS"). It shows up worst in light text
   on a dark background, which is why the top bar gave it away first. Restoring
   the default here is a rendering fix only, and only on WebKit/Blink - metrics,
   line breaks and layout are untouched. */
body {
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

/* Bebas: J3 self-hosts the 2010 BebasNeue family (Regular + Bold) from
   shaper_helix3/fonts/. J6 was pulling Google's 'Bebas Neue' instead, which is a
   different 2018 redraw and ships Regular only - Google silently answers every
   requested weight with the 400 cut, so the J3 bold headings came back light and
   the letterforms did not match. The .woff/.ttf files below are byte-identical
   copies of J3's, so the two sites now render the same face.

   The h2 and navigation rules further down are Helix Ultimate's own, reproduced
   here verbatim (same selectors, same sizes) because the template's font picker
   was switched off for those two. Helix only skips its Google Fonts <link> for a
   hardcoded list of 7 system families, so leaving the picker on would have kept
   requesting a 'BebasNeue' family Google does not have - a failed request on
   every page load, and one more third-party call than an EU site needs. Change
   these rules here, not in the template style. */
@font-face {
  font-family: 'BebasNeue';
  src: url('../fonts/BebasNeueRegular.woff') format('woff'),
       url('../fonts/BebasNeueRegular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'BebasNeue';
  src: url('../fonts/BebasNeueBold.woff') format('woff'),
       url('../fonts/BebasNeueBold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
h2 {
  font-family: 'BebasNeue', sans-serif;
  font-size: 24px;
  font-weight: 400;
  text-decoration: none;
}
/* The navigation half of the pair sits at the very end of this file - Helix
   emitted it from an inline <style> that came after custom.css, so it has to
   stay last to keep winning over the menu block below. */

/* The .entry-image.intro-image sizing lives in the template style's custom_css
   param (aspect-ratio 3/2 + object-fit), not here - it used to be duplicated in
   both places with two different ratios, and the inline param CSS always won. */

/* Menu styling ported from J3's (shaper_helix3) template.css - vertical
   border separators between top-menu items + black-bg/white-text hover,
   matching the site's original header look. Deliberately left out the old
   float/font-size:0 inline-block-gap-reset hack (J6's menu is flex-based
   already, doesn't need it and could conflict with the Bebas Neue nav font
   sizing). */
.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {
  border-left: 1px solid #111;
  text-transform: uppercase;
  transition: all 0.3s ease-out 0s;
  font-size: 18.7px;
  font-weight: 300;
  letter-spacing: 1px;
  line-height: 30px;
}
.sp-megamenu-parent > li:last-child > a,
.sp-megamenu-parent > li:last-child > span {
  border-right: 1px solid #111;
}
.sp-megamenu-parent > li:hover > a,
.sp-megamenu-parent > li:hover > span,
.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li.active > span {
  color: #fff;
  background-color: #111;
}

/* Hide the "Kezdőlap" (Home) menu item - on J3 the logo itself links home
   (confirmed: clicking the wordmark goes to "/"), so a separate Home text
   link is redundant and just eats space. The Home menu item is always the
   first <li> in the main nav, so this targets it reliably site-wide. */
.sp-megamenu-parent > li:first-child {
  display: none;
}

/* Menu positioned hard right of its flex row by default (Helix Ultimate's
   own #sp-menu > .sp-column uses `justify-content: end`) - J3 has the menu
   sitting immediately next to the logo on the left instead. */
#sp-menu .sp-column {
  justify-content: flex-start !important;
}
/* A fenti flex-start a menut huzza a logo melle, viszont a kereso ugyanannak a
   flex-sornak a kovetkezo eleme, ezert az is odatapadt kozvetlenul a menu utan
   (x=950). A J3-on a kereso a sor jobb szelen ul. Az auto bal margo a maradek
   helyet a kereso ele teszi, tehat a menu marad balra zartan, a kereso pedig
   kimegy a jobb szelre - a justify-content bolygatasa nelkul. */
#sp-menu .sp-column > .header-modules {
  margin-left: auto;
}

/* Mobil fejlec (lg alatt). Figyelem: ez NEM a J3 visszaallitasa - a J3 mobilon
   ugyanigy ket sorba torte a felso savot, a hamburgere pedig meg csak meg sem
   jelenik 390px-en, tehat ott nincs mit masolni. Ezek tudatos javitasok. */
@media (max-width: 991.98px) {
  /* A #sp-top1 (menu) es #sp-top2 (ikonok) col-lg-6, tehat lg alatt mindketto
     teljes szelesseget kap es egymas ala csuszik. Egy sorban tartjuk oket. */
  #sp-top-bar .row {
    flex-wrap: nowrap;
    align-items: center;
  }
  #sp-top1 {
    flex: 1 1 auto;
    width: auto;
  }
  #sp-top2 {
    flex: 0 0 auto;
    width: auto;
  }
  #sp-top2 .sp-column {
    text-align: right;
  }
  /* A kereso lg alatt d-none-nal ki van kapcsolva. A modul ikon-szelessegure van
     huzva (lasd a sablonstilus custom_css-eben), tehat elfer a hamburger mellett. */
  #sp-menu .sp-column > .header-modules {
    display: flex !important;
  }
  /* A hamburger a logo utan tapadt, mert a sort a flex-start rendezi. Az auto
     margo a kereso ele teszi a maradek helyet, igy a ketto egyutt jobbra kerul. */
  #sp-menu .sp-column > #offcanvas-toggler {
    margin-left: 20px;
  }
}

/* Top utility bar ("Előfizetés / Expedíciós kutatás" + social icons),
   ported from J3's template.css. Same #sp-top-bar/#topmenu ID structure on
   both templates (shared JoomShaper convention), so no markup translation
   needed - just the site-specific override block (J3's own generic/stock
   #sp-top-bar rule earlier in the same file just has plain padding, this is
   the actual customization). */
#sp-top-bar {
  padding: 0;
}
#sp-top1 .sp-column > .sp-module {
  margin: 0;
}
#topmenu {
  margin: 8px 0 1px;
}
#topmenu li:first-child a {
  padding-left: 0;
}
#topmenu li:last-child a {
  border-right: none;
}
.sp-module ul#topmenu > li::before {
  display: none;
}
.sp-module ul#topmenu > li {
  display: inline-block;
  border: none;
  font-family: "Source Sans Pro", sans-serif;
  padding: 0;
  position: relative;
}
ul#topmenu > li > a {
  border: none;
  border-right: 1px solid #fff;
  color: #fff;
  float: left;
  font-size: 12.8px; /* J3's 0.8em is relative to a 16px base; J6's #sp-top-bar inherits 14px (.875rem) instead, so a relative unit here would give the wrong 11.2px - hardcoded to match J3's real 12.8px */
  font-weight: 400;
  letter-spacing: 0;
  padding: 0 1em 0;
  text-transform: uppercase;
  transition: all 0.3s ease-out 0s;
}
#sp-top1 ul.social-icons,
#sp-top2 ul.social-icons {
  float: right;
  margin: 0;
}
#sp-top1 ul.social-icons li,
#sp-top2 ul.social-icons li {
  margin: 0 7px;
  line-height: 33px;
}
/* J3 draws the Facebook mark with Font Awesome 4, where fa-facebook (\f09a) is
   the bare "f". Font Awesome 6 kept the class name but reassigned that codepoint
   to the circled logo, and Helix Ultimate hardcodes `fa-facebook` in its
   social-icon markup - hence the filled circle on J6 where J3 has a plain "f".
   \f39e is FA6's bare mark (fa-facebook-f); swapping the glyph here matches J3
   without touching the template's PHP, so it survives a template update.
   Instagram needs no such fix: \f16d means the same outline in both versions. */
#sp-top1 .social-icon-facebook .fa-facebook::before,
#sp-top2 .social-icon-facebook .fa-facebook::before {
  content: "\f39e";
}

/* Main header box, ported from J3's template.css. #sp-header.menu-fixed
   (already in J6's own template.css, more specific than plain #sp-header)
   still takes over when the sticky-header JS adds that class on scroll, so
   this doesn't fight the sticky_header template-style option. */
#sp-header {
  background: #fff;
  box-shadow: none;
  max-height: 73px;
  left: 0;
  position: relative;
  top: 0;
  width: 100%;
  z-index: 99;
  border-bottom: 1px solid #000;
}

div#sp-logo {
    padding-right: 0;
}

#sp-logo img.logo-image,
#sp-logo img.logo-image-phone {
  background-color: #c44900;
}
/* A logo 15px-el beljebb kezdodott mint a J3-on, es ez NEM konteneres eltolodas:
   a .sp-column mindket oldalon pontosan x=70-nel kezdodik. A kulonbseg magaban a
   logo-elemben van. A J3 egy <a class="header-logo">-t hasznal hatterkeppel, 194px
   szeles dobozzal es margin-left: -14px-szel - az a negativ margo huzza vissza a
   logo.png sajat atlatszo bal szelet. A Helix Ultimate ehelyett egy <img>-et tesz
   ki, negativ margo nelkul es a kep sajat aranya szerint 206.8px szelesen, ezert
   latszott a jel kesobb es nagyobbnak. Itt allitjuk vissza a J3 geometriajat. */
#sp-logo img.logo-image {
  width: 194px;
  margin-left: -14px;
}

blockquote {
    padding: 10px 20px;
    margin: 15px 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #c44900;
}

blockquote h4 {
  margin-top: 0;
}

a {
    color: #c44900;
}
.entry-header h2 a {
    color: #0e0e0e;
}

.article-date, .author-type, .content-source .source-label {
	font-family: Open Sans, Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-size: 12px;
	text-align: left;
	color: #9B9B9B;
	font-weight: bold;
	line-height: 17px;
}

/* J3 sizes these two apart: 60px on the category blog header, 40px on the tag
   one (which also gets the shorter 52px bar below) - porting only the 40px made
   category headers a third too small. */
.page-header.category-blog-layout h1 {
  margin: 0;
  font-size: 60px;
  font-family: 'BebasNeue';
  line-height: 1.5;
  font-weight: 400;
}
.tag-category .page-header.category-blog-layout h1 {
  font-size: 40px;
}
.tag-category h1, .blog > h1, .contact-category h1 {
  margin: 0 0 30px;
  background-color: rgba(0,0,0,0.1);
  text-align: center;
}
.page-header.category-blog-layout {
  font-family: 'BebasNeue';
  margin: 0 0 22px;
  border: none;
  padding: 0 10px;
  height: 72px;
  overflow: hidden;
  background-color: #13100d;
  color: white;
}
.tag-category .page-header.category-blog-layout {
  height: 52px;
  padding: 2px 10px 0;
}

#sp-main-body {
  padding: 30px 0;
}

/* Preset accent color was #ec430f (Helix Ultimate's built-in "preset2"),
   J3's real brand color is #c44900 - overriding every rule from
   css/presets/preset2.css (+ 2 from template.css) that uses the old color,
   rather than editing those vendor files directly. Skipped the preloader's
   @keyframes-nested #ec430f rules in template.css (spinner animation
   background-size steps) - harmless, the preloader template option is
   disabled site-wide so they never render. */
.sp-preloader > div {
  background: #c44900;
}
#sp-menu ul.social-icons a:hover,
#sp-menu ul.social-icons a:focus {
  color: #c44900;
}
.tags > li a {
  background: rgba(196, 73, 0, .1);
  color: #c44900;
}
.article-social-share .social-share-icon ul li a:hover,
.article-social-share .social-share-icon ul li a:focus {
  background: #c44900;
}
.sp-reading-progress-bar {
  background-color: #c44900;
}
.offcanvas-menu .offcanvas-inner a:hover,
.offcanvas-menu .offcanvas-inner a:focus,
.offcanvas-menu .offcanvas-inner a:active {
  color: #c44900;
}
.btn-primary,
.sppb-btn-primary {
  border-color: #c44900;
  background-color: #c44900;
}
ul.social-icons > li a:hover {
  color: #c44900;
}
.sp-page-title {
  background: #c44900;
}
.sp-module ul > li > a:hover {
  color: #c44900;
}
.sp-module .latestnews > div > a:hover {
  color: #c44900;
}
.sp-module .tagscloud .tag-name:hover {
  background: #c44900;
}
.search .btn-toolbar button {
  background: #c44900;
}
.pagination > .active > a,
.pagination > .active > span {
  border-color: #c44900;
  background-color: #c44900;
}
.pagination > .active > a:hover,
.pagination > .active > a:focus,
.pagination > .active > span:hover,
.pagination > .active > span:focus {
  border-color: #c44900;
  background-color: #c44900;
}
.error-code,
.coming-soon-number {
  color: #c44900;
}
#sp-header-topbar a:hover {
  color: #c44900;
}
#modal-menu .sp-megamenu-parent > li:hover > a,
#modal-menu .sp-megamenu-parent > li:hover > span,
#modal-menu .sp-megamenu-parent > li.active > a,
#modal-menu .sp-megamenu-parent > li.active > span {
  color: #c44900;
}
.fg-logo .header-logo {
  background: #c44900 no-repeat scroll 0 0;
  background-image: url("/images/design/logo.png");
  background-size: 200px 54px;
  background-position: 0 50%;
  text-indent: -9999px;
  width: 194px;
  display: block;
  float: left;
  height: 54px;
  margin: 7px 0 4px -14px;
}


/* Helix Ultimate navigation font, reproduced verbatim (see the Bebas note at
   the top of this file). Must remain the last rule for these selectors. */
.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a,
.menu.nav-pills > li > a,
.menu.nav-pills > li > span,
.menu.nav-pills .sp-dropdown li.sp-menu-item > a {
  font-family: 'BebasNeue', sans-serif;
  font-weight: 400;
  text-decoration: none;
}