/* Custom fixes: header always solid/readable, desktop/mobile nav toggle at 768px,
   proper side-by-side layout below the framework's native 1200px "lg" tier,
   vertical alignment of the toggler, and top promo bar overflow fix. */

/* Header: always the same solid, clean look, sticky or not */
#sp-header {
  background-color: #ffffff !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
}
#sp-header .logo h1 {
  color: #1a1a1a;
}
#sp-header .sp-megamenu-parent > li > a {
  color: #4f5362;
}
#offcanvas-toggler > i {
  color: #4f5362;
}

/* Menu items: no background box on hover/focus/active/current, only the underline accent */
.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > a:hover,
.sp-megamenu-parent > li > a:focus,
.sp-megamenu-parent > li > a:active,
.sp-megamenu-parent > li.current > a,
.sp-megamenu-parent > li.active > a,
.offcanvas-menu .nav.menu > li > a {
  background: transparent !important;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

/* Show the full horizontal menu from tablet width up (768px); hamburger+offcanvas only below that */
@media (min-width: 768px) {
  #offcanvas-toggler {
    display: none;
  }
}
@media (max-width: 767px) {
  .sp-megamenu-parent {
    display: none;
  }
}

/* Below the framework's native 1200px "lg" tier, #sp-logo/#sp-menu have no float or width at all
   (they're plain stacked blocks) - the side-by-side layout only ever existed from 1200px up.
   Rebuild it explicitly for 768-1199px so the full menu can sit next to the logo. */
@media (min-width: 768px) and (max-width: 1199px) {
  #sp-logo {
    float: left;
    width: auto;
    max-width: none;
  }
  #sp-menu {
    overflow: hidden;
    width: auto;
    float: none;
  }
  .sp-megamenu-parent > li {
    margin-right: 14px;
  }
  .sp-megamenu-parent > li > a {
    font-size: 14px;
  }
}

/* Vertically center the toggler with the logo when the full menu is hidden (mobile) */
@media (max-width: 767px) {
  #sp-logo {
    float: left;
    width: auto;
    max-width: none;
  }
  #sp-menu,
  #sp-menu > .sp-column,
  .sp-megamenu-wrapper {
    height: 80px;
    float: left;
  }
  #sp-header.menu-fixed #sp-menu,
  #sp-header.menu-fixed #sp-menu > .sp-column,
  #sp-header.menu-fixed .sp-megamenu-wrapper {
    height: 70px;
  }
  .sp-megamenu-wrapper {
    display: table;
    width: 100%;
  }
  .sp-megamenu-wrapper > #offcanvas-toggler {
    display: table-cell;
    vertical-align: middle;
    float: none;
    text-align: right;
  }
}

/* The КРУГЛОСУТОЧНО / phone promo bar is absolutely positioned; when its text wraps onto two
   lines on narrow screens it grows tall enough to overlap the hero title below it. Some pages
   have longer phone numbers than others, so keep this comfortably compact and non-wrapping
   across the whole range where the bar's own layout goes to two stacked columns. */
@media only screen and (max-width: 1199px) {
  .applanding-top-bar .sppb-feature-box-title {
    font-size: 15px !important;
    line-height: 1.3 !important;
    white-space: nowrap;
  }
}
@media only screen and (max-width: 480px) {
  .applanding-top-bar .sppb-feature-box-title {
    font-size: 12px !important;
  }
}

/* Top contact bar: preset1.css paints every link #f5f5f5, which is exactly this bar's own
   background colour, so the phone was invisible (and #FFFF99 on hover). Force the brand teal. */
#sp-top-bar .sp-contact-info li,
#sp-top-bar .sp-contact-info li i,
#sp-top-bar .sp-contact-info li a {
  color: #007c83;
}
#sp-top-bar .sp-contact-info li a:hover,
#sp-top-bar .sp-contact-info li a:focus {
  color: #004c50;
}

/* --- Header on narrow screens -------------------------------------------------
   template.css:5072 has a stock `@media (max-width: 992px) { h1 { font-size: 38px
   !important } }` aimed at page titles, but it also hits the logo's h1 - which is
   why the wordmark rendered huge on tablets and phones and outgrew the header.
   Its !important beats plain specificity, so the override below needs one too.

   Two related problems fixed here as well: #sp-logo/#sp-menu were both
   shrink-to-fit (float + width:auto), so the wordmark could never break onto a
   second line and #sp-menu was exactly as wide as the burger, leaving the
   text-align:right on the toggler nothing to push against; and #sp-header paints
   its white background on a fixed 80px box (70px when .menu-fixed), so anything
   taller spills out below the strip onto the hero.

   Menu item sizing is deliberately left alone. */

@media (max-width: 1199px) {
  /* Never let content spill past the white background. */
  #sp-header,
  #sp-header .logo {
    height: auto;
    min-height: 80px;
  }
  #sp-header.menu-fixed,
  #sp-header.menu-fixed .logo {
    min-height: 80px;
  }
  /* .logo is display:table, so it needs an explicit max-width to hand the
     constraint down to the h1 cell and allow a line break at all. */
  #sp-header .logo {
    max-width: 100%;
  }
  #sp-header .logo h1 {
    font-size: 18px !important;
    line-height: 1.2 !important;
    white-space: normal;
  }
  #sp-logo {
    max-width: 36%;
  }
}

/* Below 992px the stock 38px !important rule is in force, so keep ours there too. */
@media (max-width: 991px) {
  #sp-header .logo h1 {
    font-size: 16px !important;
    line-height: 1.2 !important;
  }
  #sp-logo {
    max-width: 34%;
  }
}

/* Phones: only the burger is left, so the wordmark may take more room. */
@media (max-width: 767px) {
  #sp-logo {
    max-width: 62%;
  }
  /* Fill the space beside the floated logo so the burger has somewhere to go. */
  #sp-menu {
    float: none;
    width: auto;
    overflow: hidden;
  }
  #sp-menu > .sp-column,
  .sp-megamenu-wrapper {
    float: none;
    width: auto;
  }
}

/* --- Page Builder grid blocks -------------------------------------------------
   The row tracks themselves are now stored as `auto` in the page data (they used
   to be authored as 0% with a large row-gap doing all the spacing, which collided
   as soon as a label wrapped). Only the gaps need tightening as the screen
   narrows, plus a single column on phones. Item order and column counts are left
   exactly as authored - no flow overrides here. */

@media (max-width: 1199px) {
  .sppb-div-addon {
    row-gap: 18px !important;
  }
}

@media (max-width: 767px) {
  .sppb-div-addon {
    row-gap: 4px !important;
  }
}

/* Phones: two columns of wrapped labels get too cramped, so stack them. */
@media (max-width: 575px) {
  .sppb-div-addon {
    grid-template-columns: 1fr !important;
  }
}

/* --- Feature icons ------------------------------------------------------------
   Icon size is a separate flat setting (icon_size), not part of *_typography, so
   it did not scale down with the labels: 20-36px circles next to 14-16px text.
   They crowded each other once the rows tightened up. */
@media (max-width: 991px) {
  .sppb-addon-feature .sppb-icon .sppb-icon-container > i {
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
    line-height: 16px !important;
  }
}
@media (max-width: 767px) {
  .sppb-addon-feature .sppb-icon .sppb-icon-container > i {
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
    line-height: 14px !important;
  }
  /* Breathing room between the icon and its label. */
  .sppb-addon-feature .sppb-media-body {
    padding-left: 6px;
  }
}

/* --- Widgetkit slideshow thumbnails -------------------------------------------
   The real cause of the voids was `.uk-scope .uk-thumbnav > * > * {display:inline-
   block}` in media/com_widgetkit/css/site.css: the <a> inside each cell stayed
   shrink-to-fit at the image's natural width, so however correctly the cell was
   sized the picture inside never filled it. That file also loads AFTER custom.css
   and prefixes everything with .uk-scope, so unprefixed rules here lost twice over
   - on specificity and on order. Hence the .uk-scope prefix and !important below.

   With the link forced to block, each cell's width is computed from the actual
   number of thumbnails (quantity queries), rows split as evenly as possible and
   UIkit's 15px gutter is replaced by a 6px gap folded into the width calculation.
   The galleries here hold 7, 8 and 12 thumbnails: 7, 8 and 6+6 on desktop. */

.uk-scope .uk-thumbnav {
  margin-left: 0 !important;
  gap: 6px;
}
.uk-scope .uk-thumbnav > * {
  padding-left: 0 !important;
  margin-top: 0 !important;
  min-width: 0;
}
.uk-scope .uk-thumbnav > * > a {
  display: block !important;
  width: 100% !important;
}
.uk-scope .uk-thumbnav > * > a > img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* Desktop: up to 8 per row. */
.uk-scope .uk-thumbnav > *:first-child:nth-last-child(1),
.uk-scope .uk-thumbnav > *:first-child:nth-last-child(1) ~ * {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}
.uk-scope .uk-thumbnav > *:first-child:nth-last-child(2),
.uk-scope .uk-thumbnav > *:first-child:nth-last-child(2) ~ * {
  flex: 0 0 calc((100% - 6px) / 2) !important;
  max-width: calc((100% - 6px) / 2) !important;
}
.uk-scope .uk-thumbnav > *:first-child:nth-last-child(3),
.uk-scope .uk-thumbnav > *:first-child:nth-last-child(3) ~ * {
  flex: 0 0 calc((100% - 12px) / 3) !important;
  max-width: calc((100% - 12px) / 3) !important;
}
.uk-scope .uk-thumbnav > *:first-child:nth-last-child(4),
.uk-scope .uk-thumbnav > *:first-child:nth-last-child(4) ~ * {
  flex: 0 0 calc((100% - 18px) / 4) !important;
  max-width: calc((100% - 18px) / 4) !important;
}
.uk-scope .uk-thumbnav > *:first-child:nth-last-child(5),
.uk-scope .uk-thumbnav > *:first-child:nth-last-child(5) ~ * {
  flex: 0 0 calc((100% - 24px) / 5) !important;
  max-width: calc((100% - 24px) / 5) !important;
}
.uk-scope .uk-thumbnav > *:first-child:nth-last-child(6),
.uk-scope .uk-thumbnav > *:first-child:nth-last-child(6) ~ * {
  flex: 0 0 calc((100% - 30px) / 6) !important;
  max-width: calc((100% - 30px) / 6) !important;
}
.uk-scope .uk-thumbnav > *:first-child:nth-last-child(7),
.uk-scope .uk-thumbnav > *:first-child:nth-last-child(7) ~ * {
  flex: 0 0 calc((100% - 36px) / 7) !important;
  max-width: calc((100% - 36px) / 7) !important;
}
.uk-scope .uk-thumbnav > *:first-child:nth-last-child(8),
.uk-scope .uk-thumbnav > *:first-child:nth-last-child(8) ~ * {
  flex: 0 0 calc((100% - 42px) / 8) !important;
  max-width: calc((100% - 42px) / 8) !important;
}
.uk-scope .uk-thumbnav > *:first-child:nth-last-child(9),
.uk-scope .uk-thumbnav > *:first-child:nth-last-child(9) ~ * {
  flex: 0 0 calc((100% - 24px) / 5) !important;
  max-width: calc((100% - 24px) / 5) !important;
}
.uk-scope .uk-thumbnav > *:first-child:nth-last-child(10),
.uk-scope .uk-thumbnav > *:first-child:nth-last-child(10) ~ * {
  flex: 0 0 calc((100% - 24px) / 5) !important;
  max-width: calc((100% - 24px) / 5) !important;
}
.uk-scope .uk-thumbnav > *:first-child:nth-last-child(11),
.uk-scope .uk-thumbnav > *:first-child:nth-last-child(11) ~ * {
  flex: 0 0 calc((100% - 30px) / 6) !important;
  max-width: calc((100% - 30px) / 6) !important;
}
.uk-scope .uk-thumbnav > *:first-child:nth-last-child(12),
.uk-scope .uk-thumbnav > *:first-child:nth-last-child(12) ~ * {
  flex: 0 0 calc((100% - 30px) / 6) !important;
  max-width: calc((100% - 30px) / 6) !important;
}
.uk-scope .uk-thumbnav > *:first-child:nth-last-child(13),
.uk-scope .uk-thumbnav > *:first-child:nth-last-child(13) ~ * {
  flex: 0 0 calc((100% - 36px) / 7) !important;
  max-width: calc((100% - 36px) / 7) !important;
}
.uk-scope .uk-thumbnav > *:first-child:nth-last-child(14),
.uk-scope .uk-thumbnav > *:first-child:nth-last-child(14) ~ * {
  flex: 0 0 calc((100% - 36px) / 7) !important;
  max-width: calc((100% - 36px) / 7) !important;
}
.uk-scope .uk-thumbnav > *:first-child:nth-last-child(15),
.uk-scope .uk-thumbnav > *:first-child:nth-last-child(15) ~ * {
  flex: 0 0 calc((100% - 42px) / 8) !important;
  max-width: calc((100% - 42px) / 8) !important;
}
.uk-scope .uk-thumbnav > *:first-child:nth-last-child(16),
.uk-scope .uk-thumbnav > *:first-child:nth-last-child(16) ~ * {
  flex: 0 0 calc((100% - 42px) / 8) !important;
  max-width: calc((100% - 42px) / 8) !important;
}

@media (max-width: 1199px) {
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(1),
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(1) ~ * {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(2),
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(2) ~ * {
    flex: 0 0 calc((100% - 6px) / 2) !important;
    max-width: calc((100% - 6px) / 2) !important;
  }
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(3),
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(3) ~ * {
    flex: 0 0 calc((100% - 12px) / 3) !important;
    max-width: calc((100% - 12px) / 3) !important;
  }
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(4),
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(4) ~ * {
    flex: 0 0 calc((100% - 18px) / 4) !important;
    max-width: calc((100% - 18px) / 4) !important;
  }
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(5),
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(5) ~ * {
    flex: 0 0 calc((100% - 24px) / 5) !important;
    max-width: calc((100% - 24px) / 5) !important;
  }
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(6),
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(6) ~ * {
    flex: 0 0 calc((100% - 30px) / 6) !important;
    max-width: calc((100% - 30px) / 6) !important;
  }
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(7),
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(7) ~ * {
    flex: 0 0 calc((100% - 18px) / 4) !important;
    max-width: calc((100% - 18px) / 4) !important;
  }
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(8),
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(8) ~ * {
    flex: 0 0 calc((100% - 18px) / 4) !important;
    max-width: calc((100% - 18px) / 4) !important;
  }
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(9),
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(9) ~ * {
    flex: 0 0 calc((100% - 24px) / 5) !important;
    max-width: calc((100% - 24px) / 5) !important;
  }
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(10),
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(10) ~ * {
    flex: 0 0 calc((100% - 24px) / 5) !important;
    max-width: calc((100% - 24px) / 5) !important;
  }
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(11),
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(11) ~ * {
    flex: 0 0 calc((100% - 30px) / 6) !important;
    max-width: calc((100% - 30px) / 6) !important;
  }
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(12),
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(12) ~ * {
    flex: 0 0 calc((100% - 30px) / 6) !important;
    max-width: calc((100% - 30px) / 6) !important;
  }
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(13),
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(13) ~ * {
    flex: 0 0 calc((100% - 24px) / 5) !important;
    max-width: calc((100% - 24px) / 5) !important;
  }
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(14),
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(14) ~ * {
    flex: 0 0 calc((100% - 24px) / 5) !important;
    max-width: calc((100% - 24px) / 5) !important;
  }
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(15),
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(15) ~ * {
    flex: 0 0 calc((100% - 24px) / 5) !important;
    max-width: calc((100% - 24px) / 5) !important;
  }
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(16),
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(16) ~ * {
    flex: 0 0 calc((100% - 30px) / 6) !important;
    max-width: calc((100% - 30px) / 6) !important;
  }
}

@media (max-width: 767px) {
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(1),
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(1) ~ * {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(2),
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(2) ~ * {
    flex: 0 0 calc((100% - 6px) / 2) !important;
    max-width: calc((100% - 6px) / 2) !important;
  }
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(3),
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(3) ~ * {
    flex: 0 0 calc((100% - 12px) / 3) !important;
    max-width: calc((100% - 12px) / 3) !important;
  }
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(4),
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(4) ~ * {
    flex: 0 0 calc((100% - 18px) / 4) !important;
    max-width: calc((100% - 18px) / 4) !important;
  }
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(5),
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(5) ~ * {
    flex: 0 0 calc((100% - 12px) / 3) !important;
    max-width: calc((100% - 12px) / 3) !important;
  }
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(6),
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(6) ~ * {
    flex: 0 0 calc((100% - 12px) / 3) !important;
    max-width: calc((100% - 12px) / 3) !important;
  }
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(7),
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(7) ~ * {
    flex: 0 0 calc((100% - 18px) / 4) !important;
    max-width: calc((100% - 18px) / 4) !important;
  }
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(8),
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(8) ~ * {
    flex: 0 0 calc((100% - 18px) / 4) !important;
    max-width: calc((100% - 18px) / 4) !important;
  }
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(9),
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(9) ~ * {
    flex: 0 0 calc((100% - 12px) / 3) !important;
    max-width: calc((100% - 12px) / 3) !important;
  }
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(10),
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(10) ~ * {
    flex: 0 0 calc((100% - 18px) / 4) !important;
    max-width: calc((100% - 18px) / 4) !important;
  }
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(11),
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(11) ~ * {
    flex: 0 0 calc((100% - 18px) / 4) !important;
    max-width: calc((100% - 18px) / 4) !important;
  }
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(12),
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(12) ~ * {
    flex: 0 0 calc((100% - 18px) / 4) !important;
    max-width: calc((100% - 18px) / 4) !important;
  }
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(13),
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(13) ~ * {
    flex: 0 0 calc((100% - 18px) / 4) !important;
    max-width: calc((100% - 18px) / 4) !important;
  }
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(14),
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(14) ~ * {
    flex: 0 0 calc((100% - 18px) / 4) !important;
    max-width: calc((100% - 18px) / 4) !important;
  }
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(15),
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(15) ~ * {
    flex: 0 0 calc((100% - 18px) / 4) !important;
    max-width: calc((100% - 18px) / 4) !important;
  }
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(16),
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(16) ~ * {
    flex: 0 0 calc((100% - 18px) / 4) !important;
    max-width: calc((100% - 18px) / 4) !important;
  }
}

@media (max-width: 480px) {
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(1),
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(1) ~ * {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(2),
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(2) ~ * {
    flex: 0 0 calc((100% - 6px) / 2) !important;
    max-width: calc((100% - 6px) / 2) !important;
  }
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(3),
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(3) ~ * {
    flex: 0 0 calc((100% - 12px) / 3) !important;
    max-width: calc((100% - 12px) / 3) !important;
  }
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(4),
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(4) ~ * {
    flex: 0 0 calc((100% - 6px) / 2) !important;
    max-width: calc((100% - 6px) / 2) !important;
  }
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(5),
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(5) ~ * {
    flex: 0 0 calc((100% - 12px) / 3) !important;
    max-width: calc((100% - 12px) / 3) !important;
  }
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(6),
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(6) ~ * {
    flex: 0 0 calc((100% - 12px) / 3) !important;
    max-width: calc((100% - 12px) / 3) !important;
  }
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(7),
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(7) ~ * {
    flex: 0 0 calc((100% - 12px) / 3) !important;
    max-width: calc((100% - 12px) / 3) !important;
  }
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(8),
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(8) ~ * {
    flex: 0 0 calc((100% - 12px) / 3) !important;
    max-width: calc((100% - 12px) / 3) !important;
  }
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(9),
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(9) ~ * {
    flex: 0 0 calc((100% - 12px) / 3) !important;
    max-width: calc((100% - 12px) / 3) !important;
  }
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(10),
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(10) ~ * {
    flex: 0 0 calc((100% - 12px) / 3) !important;
    max-width: calc((100% - 12px) / 3) !important;
  }
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(11),
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(11) ~ * {
    flex: 0 0 calc((100% - 12px) / 3) !important;
    max-width: calc((100% - 12px) / 3) !important;
  }
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(12),
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(12) ~ * {
    flex: 0 0 calc((100% - 12px) / 3) !important;
    max-width: calc((100% - 12px) / 3) !important;
  }
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(13),
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(13) ~ * {
    flex: 0 0 calc((100% - 12px) / 3) !important;
    max-width: calc((100% - 12px) / 3) !important;
  }
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(14),
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(14) ~ * {
    flex: 0 0 calc((100% - 12px) / 3) !important;
    max-width: calc((100% - 12px) / 3) !important;
  }
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(15),
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(15) ~ * {
    flex: 0 0 calc((100% - 12px) / 3) !important;
    max-width: calc((100% - 12px) / 3) !important;
  }
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(16),
  .uk-scope .uk-thumbnav > *:first-child:nth-last-child(16) ~ * {
    flex: 0 0 calc((100% - 12px) / 3) !important;
    max-width: calc((100% - 12px) / 3) !important;
  }
}

/* --- Sticky header without the fly-in -----------------------------------------
   The template animated the switch to the stuck state twice over: a 400ms
   transition on #sp-header (which animated both `top` and the 80px -> 70px height
   change) and `animation: fadeInDown .5s` on .menu-fixed, so the bar visibly flew
   in from above every single time. Since the header sits exactly at the top of the
   viewport at the moment the class is applied, dropping both makes it simply catch
   in place and stay - and detach again just as quietly on the way back up.
   The stuck height is matched to the normal one so nothing resizes either. */
#sp-header {
  -webkit-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}
#sp-header.menu-fixed {
  -webkit-animation: none !important;
  animation: none !important;
  height: 80px;
}
#sp-header.menu-fixed .logo {
  height: 80px;
}