/* components.css — hand-written corrections after the generated rules (components.generated.css).
   Every rule cites the measurement it comes from (inventory/design/components.json). Written where the
   comparison with the live showed a part the generator cannot write. */

/* Wrappers of the template layout (not measured parts, so the generator does not write them).
   Live: .tm-page > .uk-container, [class*="tm-block"].uk-grid-divider > div { padding: 0 } overrides the UIkit
   .uk-grid-divider > * padding (25 / 35 px). Measured on / at 1366: section.tm-block-divider > .uk-width-1-1
   x=0 w=1366 padding 0 (tools/qa/_probe-ancestors.mjs, 2026-11-06). */
.tm-page > .uk-container,
[class*="tm-block"].uk-grid-divider > div {
  padding: 0;
}

/* Our Books: the container is wider than the UIkit 1200px. Live custom.css:
   .uk-container…bk-pg { max-width: 1550px } (measured: 1366 wide at 1366, 1550 + 185px side margins at 1920). */
.uk-container.uk-container-center.uk-margin-top.uk-margin-large-bottom.bk-pg {
  max-width: 1550px;
}

/* Our Books: «Download» / «View sample pages» and the newsletter form the «Download» button opens (JS, theme
   phase). Not parts of the our-books definition, so the generator does not write them. Values: live custom.css
   rules, confirmed by computed styles at 375 / 768 / 1366 / 1920 (tools/qa/_probe-styles.mjs, 2026-11-06). */
.sbutn,
.chsbutn {
  float: left;
  width: 180px;
  margin-top: 45px;
  margin-right: 10px;
  padding: 8px;
  border: 2px solid rgb(0, 129, 189);
  color: rgb(0, 129, 189);
  font-size: 18px;
  text-align: center;
  cursor: pointer;
  transition: all 0.5s ease;
}
/* hover (custom.css line 29302: .sbutn:hover, .chsbutn:hover, right after the base rule, so the later
   .our-books-pg / .last-btn margins still win, as on the live; found by tools/qa/hover-diff.mjs, 2026-11-11) */
.sbutn:hover,
.chsbutn:hover {
  background: rgb(0, 129, 189);
  text-align: center;
  color: #fff;
  padding: 8px;
  margin-top: 45px;
  border: 2px solid rgb(0, 129, 189);
  font-size: 18px;
}
button.sbutn {
  box-sizing: border-box;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
  line-height: 26px;
}
.our-books .sbutn { margin-bottom: 20px; }
.our-books-pg .sbutn,
.our-books-pg .chsbutn { margin-top: 15px; }
button#news0,
button#news1,
button#news2 {
  background: rgb(0, 129, 189);
  color: #fff;
}
/* custom.css line 29402: the «Download» buttons swap their colours on hover */
button#news0:hover,
button#news1:hover,
button#news2:hover {
  color: rgb(0, 129, 189);
  background: #fff;
}
.new-tab {
  position: absolute;
  top: 60px;
  left: 220px;
  color: rgb(0, 0, 0);
}
.hidden-n1 {
  display: none !important;
  visibility: hidden !important;
  margin: 20px 0;
  transition: all 0.2s linear;
}
@media (max-width: 1124px) {
  .sbutn,
  .chsbutn { width: 43%; padding: 6px; font-size: 16px; }
  /* custom.css line 29482 */
  .sbutn:hover,
  .chsbutn:hover { padding: 6px; font-size: 15px; }
}
@media (max-width: 874px) {
  .sbutn,
  .chsbutn { width: 42%; }
  .new-tab { top: 150px; left: 20px; width: 100%; }
}
@media (max-width: 767px) {
  .sbutn,
  .chsbutn { width: 98%; }
  .new-tab { top: 60px; }
}

/* Our Books: live custom.css .books-ly img { max-height: 340px } (the image part has different widths per pair,
   so the generator leaves its size to the declared values). */
.books-ly img {
  max-height: 340px;
}

/* Offers tabs: live custom.css .tabcontent { display: none }; the open tab is .tab-active (the tab JS of the theme
   phase switches it). The generator measured the open #pack only, so it wrote display: block for every panel. */
.product-uikit-offers-new .tabcontent:not(.tab-active) {
  display: none;
}

/* Our Books: the live's own row spacing (templates/look4website/css/custom.css: .uk-grid.our-books .uk-width-medium-1-1
   { padding-top: 27px }) and the base flow margin of a paragraph after another block (* + p { margin-top: 10px }),
   which the generator measured as 0 on the first paragraph only */
.uk-grid.our-books .uk-width-medium-1-1 { padding-top: 27px; }
.our-booksa .scontent * + p.firtsp { margin-top: 10px; }

/* Our Books: book titles take the colour of their series column (custom.css: .bl-books .bsbtitle { color: rgb(0,176,240) },
   .rd-books .bsbtitle { color: rgb(255,0,0) }); the generator measured the blue column only */
.our-booksa .bl-books .books-ly .bsbtitle { color: rgb(0, 176, 240); }
.our-booksa .rd-books .books-ly .bsbtitle { color: rgb(255, 0, 0); }

/* Offers: parts the generator did not measure (it measured the active tab only and no offer line), with the
   live's computed values (templates/look4website/css/custom.css: .tab button, .tablinks, .tablinks.active, .bsbtitle,
   .offers .bsbtitle, .offers .our-books .books-of .stud-book, .total, .total > span, .bsbtitle span, .redb h3) */
.product-uikit-offers-new button.tablinks { font-size: 20px; }
.product-uikit-offers-new button.tablinks:not(.active) {
  color: rgb(0, 0, 0);
  background-color: transparent;
  border-bottom: 1px solid rgb(204, 204, 204);
}
.product-uikit-offers-new .books-of .bsbtitle {
  padding-top: 15px;
  font-size: 18px;
  font-weight: 300;
  line-height: 18px;
  color: rgb(33, 33, 33);
}
.product-uikit-offers-new .books-of .stud-book.bsbtitle { line-height: 24px; }
.product-uikit-offers-new .books-of .bsbtitle span { float: right; font-weight: 600; }
.product-uikit-offers-new .books-of .total {
  position: relative;
  margin-top: 20px;
  padding: 6px 4px;
  border: 1px solid;
  font-size: 18px;
  font-weight: 300;
  line-height: 26px;
  color: rgb(118, 146, 60);
}
.product-uikit-offers-new .books-of .total > span { float: right; font-size: 18px; font-weight: 600; }
.product-uikit-offers-new .redb h3 { color: rgb(255, 0, 0); }
@media (max-width: 1024px) {
  .product-uikit-offers-new .books-of .bsbtitle { font-size: 16px; line-height: 17px; }
  .product-uikit-offers-new .books-of .total { font-size: 17px; }
}
@media (max-width: 767px) {
  .product-uikit-offers-new button.tablinks { font-size: 16px; }
  .product-uikit-offers-new .books-of .bsbtitle { font-size: 14px; }
}
/* (custom.css: .total-price { color: red }, .offers .sbutn { float: right }, .books-of h3 { border: 1px solid; padding: 5px }) */
.product-uikit-offers-new .total .total-price { color: rgb(255, 0, 0); }
.product-uikit-offers-new .offers .sbutn { float: right; }
.product-uikit-offers-new .books-of h3 { padding: 5px; border: 1px solid; }

/* Events: the UIkit row gap of the live (custom.css: .uk-grid + .uk-grid { margin-top: 25px }, 35px from 1220px).
   The generator measured the first row (margin-top 0) and wrote it on every row */
.product-uikit-events-2 > .uk-grid + .uk-grid { margin-top: 25px; }
@media (min-width: 1220px) {
  .product-uikit-events-2 > .uk-grid + .uk-grid { margin-top: 35px; }
}

/* Event social bookmarks: one sprite (images/socialbookmarks.png), each link at its own offset (custom.css and ZOO's
   socialbookmarks.css: .facebook 0 0, .twitter 0 -25px, .google 0 -50px, .live 0 -250px). The generator measured the
   first link (google) and wrote its offset on all four; no hover offsets on the live */
.yoo-zoo.socialbookmarks a.facebook, #bd_results .yoo-zoo.socialbookmarks a.facebook { background-position: 0 0; }
.yoo-zoo.socialbookmarks a.twitter, #bd_results .yoo-zoo.socialbookmarks a.twitter { background-position: 0 -25px; }
.yoo-zoo.socialbookmarks a.google, #bd_results .yoo-zoo.socialbookmarks a.google { background-position: 0 -50px; }
.yoo-zoo.socialbookmarks a.live, #bd_results .yoo-zoo.socialbookmarks a.live { background-position: 0 -250px; }

/* Forms (RSForm markup of the live, Contact / Unsubscribe / Order): a field's hidden validation message and its shown
   state (templates/look4website/css/custom.css: .formNoError { display: none }; .formResponsive .formError { color:
   #b94a48; padding-left: 5px; vertical-align: middle; font-size: 13px; font-weight: 400; margin: 3px 5px 3px 0;
   height: 18px; display: block }) */
.formNoError { display: none; }
.formResponsive .formError {
  display: block;
  height: 18px;
  margin: 3px 5px 3px 0;
  padding-left: 5px;
  color: #b94a48;
  font-size: 13px;
  font-weight: 400;
  vertical-align: middle;
}
/* the consent / newsletter checkbox rows (custom.css: .rsformVerticalClear { overflow: hidden; display: block },
   p.rsformVerticalClear { margin: 0 }, p.rsformVerticalClear label { margin: 0 0 0 3px; height: initial }):
   the paragraph contains its floated checkbox and label */
.rsformVerticalClear { display: block; overflow: hidden; }
p.rsformVerticalClear { margin: 0; }
p.rsformVerticalClear label { height: auto; margin: 0 0 0 3px; }

/* Order: the books list inside .tab is in the markup but never shown on the live (custom.css: .bookitems { display: none }) */
.bookitems { display: none; }
/* Order form (RSForm 24): the validation message sits above its field, out of the flow, and the books heading
   (custom.css: fieldset#rsform_24_page_0 span.formValidation { position: absolute; top: -25px; left: 0 },
   .formResponsive .formBody { position: relative }, .rsform-block.rsform-block-our-books { font-size: 19px;
   font-weight: 400 }) */
.formResponsive .formBody { position: relative; }
fieldset#rsform_24_page_0 span.formValidation { position: absolute; top: -25px; left: 0; }
.rsform-block.rsform-block-our-books { font-size: 19px; font-weight: 400; }
/* (custom.css: @media (max-width: 540px / 340px / 280px) #rsform_24_page_0 .uk-grid { width: 280px / 270px / 200px !important }) */
@media (max-width: 540px) { #rsform_24_page_0 .uk-grid { width: 280px !important; } }
@media (max-width: 340px) { #rsform_24_page_0 .uk-grid { width: 270px !important; } }
@media (max-width: 280px) { #rsform_24_page_0 .uk-grid { width: 200px !important; } }
/* Order form 24, the rest of the live's own rules (templates/look4website/css/custom.css, block after
   ".z-cats"): heading, hidden field descriptions, the total box with its grey patch, and the narrow-screen layout */
fieldset#rsform_24_page_0 h3.uk-margin-remove { font-size: 22px; text-transform: uppercase; }
fieldset#rsform_24_page_0 p.formDescription { display: none; }
#totalorder,
#totalorder .formControlLabel,
#totalorder .formControls { position: relative; z-index: 9999999; }
#totalorder { margin-left: 80px; }
#totalorder::before { content: ''; position: absolute; top: -7px; left: 44px; z-index: 1; width: 150px; height: 50px; background-color: #f5f5f5; }
@media (max-width: 996px) {
  /* form#userForm: the generated label rule carries the form's id, these must outrank it as on the live */
  .books-section .formControlLabel,
  .rsform-block.rsform-block-town .formControlLabel,
  form#userForm .books-section .formControlLabel,
  form#userForm .rsform-block.rsform-block-town .formControlLabel { display: none; }
}
@media (max-width: 767px) {
  #totalorder::before { left: -44px; }
  .formResponsive .formHorizontal #totalorder .formControlLabel { width: 60px !important; float: left !important; }
  #totalorder .formControls { width: 20px !important; float: left !important; }
  .f-book { clear: both; }
}
/* Order form 24, the live's "CUSTOM FORM" block (templates/look4website/css/custom.css): grey labels that turn black
   when their book is ticked, the quantity box shown only for a ticked book (.checked is set by the form script), the
   480px book rows beside it, the total and the price list text */
.orderform input[type=checkbox] + label { color: #828282 !important; }
.orderform input[type=checkbox]:checked + label { color: #000 !important; }
.number-of-books > div,
.numerofbooks { display: none; }
.checked .numerofbooks { display: block !important; }
.elbook { position: relative; float: left !important; width: 480px; }
.elbook.book1 { float: none; word-wrap: break-word; }
.books-items { position: relative; width: 100%; height: 44px; }
.numerofbooks input { width: 42px !important; height: 16px !important; border: 1px solid #e2e2e2; }
.tsum { font-size: 18px; font-weight: 400; line-height: 35px; }
.uk-grid.teach-list p { font-size: 18px; }
p.teach-list-title { font-weight: 600; }
/* (after the base .elbook / .books-items rules, as in custom.css, so the narrow values win) */
@media (max-width: 540px) {
  .elbook { width: 80%; }
  .books-items { height: auto; float: left; }
}

/* ZOO items (About us, Terms & Conditions, …): the last block of a list item keeps no bottom margin, as on the live
   (UIkit .uk-list > li > :last-child { margin-bottom: 0 }). The generated paragraph rule (#bd_results .yoo-zoo.<item>
   > ul.uk-list p, margin-bottom 10px) outranked it; this selector has the same weight and comes later */
/* paragraphs only: a form or block with its own bottom margin keeps it there (the live's .formResponsive 18px wins over
   the UIkit rule), and the id in this selector would wrongly outrank it */
#bd_results .yoo-zoo > ul.uk-list > li > p:last-child { margin-bottom: 0; }

/* Price list: the live's global .total, .total > span, .total-price and .redb h3 rules reach it too (same values as the
   Offers block above, custom.css) */
.product-uikit-price-list .books-of .total {
  position: relative;
  margin-top: 20px;
  padding: 6px 4px;
  border: 1px solid;
  font-size: 18px;
  font-weight: 300;
  line-height: 26px;
  color: rgb(118, 146, 60);
}
.product-uikit-price-list .books-of .total > span { float: right; font-size: 18px; font-weight: 600; }
.product-uikit-price-list .total .total-price { color: rgb(255, 0, 0); }
.product-uikit-price-list .redb h3 { color: rgb(255, 0, 0); }
@media (max-width: 1024px) {
  .product-uikit-price-list .books-of .total { font-size: 17px; }
}
/* (custom.css: .offers .sbutn { float: right }, global; @media (max-width: 996px)
   .uk-container-center.uk-margin-top.uk-margin-large-bottom.offers .uk-grid > * { padding-left: 0; padding-right: 0 }) */
.product-uikit-price-list .offers .sbutn { float: right; }
@media (max-width: 996px) {
  .uk-container-center.uk-margin-top.uk-margin-large-bottom.offers .uk-grid > * { padding-left: 0; padding-right: 0; }
}

/* Footer: the panel's side margins and the contact paragraphs (custom.css: .tm-margin-large, .tm-margin-xlarge
   { margin: 30px !important }, @media (min-width: 1220px) .tm-margin-xlarge { margin: 10px 130px !important };
   .footer-details p { color: #fff; margin: 0; font-size: 16px }) */
.tm-margin-large,
.tm-margin-xlarge { margin: 30px !important; }
@media (min-width: 1220px) {
  .tm-margin-xlarge { margin: 10px 130px !important; }
}
#tm-bottom-c .footer-details p { margin: 0; color: rgb(255, 255, 255); font-size: 16px; }

/* Mobile menu button: hidden on wide screens, shown up to 1024px (custom.css: .mobilemenu { display: none },
   @media (max-width: 1024px) .mobilemenu { display: block !important }) */
.mobilemenu { display: none; }
@media (max-width: 1024px) {
  .mobilemenu { display: block !important; }
}
/* Header right block on tablets and phones (custom.css: div#top-language-menu { margin-top: 5px }, #top-language-menu
   { height: 95px; display: flex; justify-content: center; align-items: center; text-align: center },
   @media (max-width: 996px) .mobilemenu { float: left }, @media (max-width: 767px) .top-lang-src, .mobilemenu
   { width: 100% }, @media (max-width: 478px) #top-language-menu { height: 60px }) */
div#top-language-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 95px;
  margin-top: 5px;
  text-align: center;
  vertical-align: middle;
}
@media (max-width: 996px) {
  .mobilemenu { float: left; }
}
@media (max-width: 767px) {
  .top-lang-src,
  .mobilemenu { width: 100%; }
}
@media (max-width: 478px) {
  div#top-language-menu { height: 60px; }
}

/* Cookie banner links (cookieconsent 3, MIT, cookieconsent.min.css: .cc-link { display: inline-block; opacity: .8;
   padding: .2em .2em .2em 0; margin: 0 4px 0 0; background: transparent; text-decoration: underline;
   cursor: pointer }): the live's two empty links take this room in the text line */
.cc-window .cc-link {
  display: inline-block;
  margin: 0 4px 0 0;
  padding: 0.2em 0.2em 0.2em 0;
  background-color: transparent;
  text-decoration: underline;
  opacity: 0.8;
  cursor: pointer;
}

/* NAVBAR — active item and its underline. The live sizes every item by its text (no width) and draws the underline
   as a share of the item (custom.css: .uk-navbar-nav>li>a:after { left: 30%; width: 0 }, li.uk-active>a:after and
   a:hover:after { width: 40% }; at ≤1024px content: none !important). The generator measured the active item on
   /our-books and wrote its px (item 86px, line 50px) to every active item: About Us, Offers… wrapped the menu. */
#tm-navbar ul.uk-navbar-nav > li.uk-active,
.our-books-pg #tm-navbar ul.uk-navbar-nav > li.uk-active,
#tm-navbar ul.uk-navbar-nav > li.uk-active > a,
.our-books-pg #tm-navbar ul.uk-navbar-nav > li.uk-active > a { width: auto; }
#tm-navbar ul.uk-navbar-nav > li > a::after,
#tm-bottom-c ul.uk-navbar-nav > li > a::after { left: 30%; right: auto; width: 0; }
#tm-navbar ul.uk-navbar-nav > li.uk-active > a::after,
.our-books-pg #tm-navbar ul.uk-navbar-nav > li.uk-active > a::after,
#tm-navbar ul.uk-navbar-nav > li > a:hover::after,
#tm-bottom-c ul.uk-navbar-nav > li.uk-active > a::after,
#tm-bottom-c ul.uk-navbar-nav > li > a:hover::after { left: 30%; right: auto; width: 40%; }
@media (max-width: 1024px) {
  .uk-navbar-nav > li > a::after { content: none !important; }
}

/* EVENTS — the day filter (.program-filter, events list and event pages; not a measured component). Values from the
   live (custom.css: .program-filter { padding: 15px 30px; border-bottom: 1px solid } — white, the text colour of its
   column; .program-filter ul { list-style: none; margin: 0; padding: 0 }; .program-filter ul li { display: inline-block;
   border-radius: 4px; padding: 1px 6px !important; margin: 0 !important; border: 2px solid !important; cursor: pointer;
   user-select: none }, ≤766px margin-bottom 5px !important) and its computed colours (#2f363b on white). The
   !important flags of the live beat UIkit's .uk-list-line > li + li separator, as on the live. */
.program-filter {
  padding: 15px 30px;
  border-bottom: 1px solid rgb(255, 255, 255);
}
.program-filter ul {
  list-style: none;
  margin: 0;
  padding: 0;
  color: rgb(47, 54, 59);
}
.program-filter ul li {
  display: inline-block;
  border-radius: 4px;
  padding: 1px 6px !important;
  margin: 0 !important;
  border: 2px solid rgb(47, 54, 59) !important;
  background-color: rgb(255, 255, 255);
  color: rgb(47, 54, 59);
  cursor: pointer;
  user-select: none;
}
.program-filter ul li a { color: inherit; }
@media (max-width: 766px) {
  .program-filter ul li { margin-bottom: 5px !important; }
}

/* HOME series boxes — the text parts take the alignment of their box (custom.css: .box-contr { text-align: right },
   .box-contl { text-align: left }, centred under 768px; .stitle, .ssbtitle, .scontent set none of their own). The
   generator measured them in the first box (.box-contr) and wrote "right" to the left-hand boxes too. */
.section1 .stitle,
.section1 .ssbtitle,
.section1 .scontent,
.section1 .new-tab-home,
.section1 .new-tab-homemob { text-align: inherit; }

/* HOME — no main content block on the home page (custom.css: .home #tm-content { display: none }; WordPress gives the
   front page the same body class) */
.home #tm-content { display: none; }

/* HOME — «Order Now» under the order section is underlined on hover (custom.css line 29325: .s3btnt:hover
   { text-decoration: underline }; colour and size stay as they are) */
.section3co .s3btnt:hover { text-decoration: underline; }

/* FOOTER — back-to-top arrow: its ::after spans the button from 767px (custom.css: @media (min-width: 767px)
   .tm-totop-scroller:after { width: 100% }; 16px below). The generator wrote 16px with the footer's id at every
   width, so the rule carries the same selector */
@media (min-width: 767px) {
  .tm-totop-scroller::after,
  footer#tm-footer a.tm-totop-scroller::after { width: 100%; }
  /* hover: the arrow rises 4px and a 16px black line grows under it (custom.css .tm-totop-scroller:after
     { transition: margin .2s }, :hover:after { margin-top: -12px }, :before { width 2px; height: 0; transition:
     height .25s, margin .25s }, :hover:before { height: 16px; margin-top: -8px; background: #000 }) */
  footer#tm-footer a.tm-totop-scroller::after { transition: margin 0.2s; }
  footer#tm-footer a.tm-totop-scroller:hover::after { margin-top: -12px; }
  footer#tm-footer a.tm-totop-scroller::before { height: 0; transition: height 0.25s, margin 0.25s; }
  footer#tm-footer a.tm-totop-scroller:hover::before { height: 16px; margin-top: -8px; background: #000; }
}
/* the arrow itself (custom.css .tm-totop-scroller:after { background: url(totop_scroller.svg) 50% 0 no-repeat;
   filter: invert(1) }): the generator wrote the background as repeat 0 0 and no filter, which shows a row of white
   arrows once the box is 100% wide (Gate 3, home at 1366) */
.tm-totop-scroller::after,
footer#tm-footer a.tm-totop-scroller::after {
  background-position: 50% 0;
  background-repeat: no-repeat;
  filter: invert(1);
}
/* FOOTER — the ESPA badge box (inline width 320px) fits the column under 768px (custom.css: @media (max-width: 767px)
   .tm-footer .uk-panel div { margin-right: auto; margin-left: auto; width: 100% !important }) */
@media (max-width: 767px) {
  .tm-footer .uk-panel div { margin-right: auto; margin-left: auto; width: 100% !important; }
}

/* FORMS (RSForm: contact 4, order 24, unsubscribe 25) — the live sets no width on the form, its fieldset, blocks,
   controls, bodies or descriptions (RSForm front.css: .rsform-block { width: auto } under 650px, nothing above) and
   no font on them: every one is as wide as its column and inherits its text. The generator measured the contact
   form and wrote its px widths and its 16px/300 to every form (order form 724px wide in a 708px column, two-column
   blocks 1310px instead of 638px, the books list at 16px instead of 19px). Same specificity as the generated
   rules, so these win by order; the live's own id rules (#totalorder) are restated with the form's id for the same
   reason. */
form#userForm,
form#userForm fieldset,
form#userForm .rsform-block,
form#userForm .formControls,
form#userForm .formBody,
form#userForm p.formDescription,
.product-uikit-order-form form#userForm fieldset.orderform { width: auto; }
form#userForm fieldset,
form#userForm .rsform-block,
form#userForm .formControls,
form#userForm .formBody,
.product-uikit-order-form form#userForm fieldset.orderform { font-size: inherit; font-weight: inherit; }
form#userForm .rsform-block.rsform-block-our-books,
.product-uikit-order-form form#userForm .rsform-block.rsform-block-our-books { font-size: 19px; font-weight: 400; }
form#userForm #totalorder,
form#userForm #totalorder .formControlLabel,
form#userForm #totalorder .formControls { position: relative; z-index: 9999999; }
form#userForm #totalorder { margin-left: 80px; }

/* UIkit 2 utility classes (MIT) in the live markup that the uikit.css extraction left out, with the live's values
   (Warp theme: .uk-margin-top 30px, .uk-margin-large-bottom 50px; found by matching every .uk-* rule of the live
   against the DOM of the representative pages) */
.uk-text-left { text-align: left !important; }
.uk-margin-top { margin-top: 30px !important; }
.uk-margin-large-bottom { margin-bottom: 50px !important; }
.uk-margin-remove { margin: 0 !important; }
.uk-position-relative { position: relative !important; }
.uk-h2 { font-size: 24px; line-height: 30px; }
.uk-text-muted { color: rgb(164, 166, 168) !important; }
/* the template's list colour (custom.css: .uk-list { color: #2f363b !important }) — price list, offers, contact… */
.uk-list { color: rgb(47, 54, 59) !important; }
/* OUR BOOKS — room above the book list (custom.css: .our-books-pg .uk-container.uk-container-center.uk-margin-top
   .uk-margin-large-bottom.bk-pg { padding-top: 100px }) */
.our-books-pg .uk-container.uk-container-center.uk-margin-top.uk-margin-large-bottom.bk-pg { padding-top: 100px; }
/* HEADER — the navbar wrapper lies over the page top from 768px (custom.css: .tm-dropdown-overlay.uk-position-relative
   { position: absolute !important; width: 100% }, relative !important under 768px); it must outrank .uk-position-relative */
.tm-dropdown-overlay.uk-position-relative { position: absolute !important; width: 100%; }
@media (max-width: 767px) {
  .tm-dropdown-overlay.uk-position-relative { position: relative !important; width: 100%; }
}
/* ZOO headings start flush (custom.css: .yoo-zoo h3 { margin-top: 0 }, over UIkit's * + h3 { margin-top: 40px }) */
.yoo-zoo h3 { margin-top: 0; }

/* OFFERS — the tabs the visitor opens (found with the tab contents shown, restyle-sweep "revealed" state). The
   generator measured the first tab only: the red offer's headings came out blue and the student's-book boxes of the
   writing offer got no rules. Live (computed, /offers "Group" tab): .our-books-blue headings #00b0f0, .our-books-red
   headings red, the offer headings inside .books-of.new-writing-offer-1 #2f363b; custom.css:
   .free-prst { color: #00b0f0 }, .free-ch { color: red }; .stud-book { font-size: 18px; line-height: 48px;
   float: left; width: 150px; height: 150px }, .books-of.new-writing-offer-1 .stud-book { width: 220px; height: 50px },
   …new-writing-offer-1 .last-new-offer .stud-book { height: 80px } */
.product-uikit-offers-new .our-books-red h3 { color: rgb(255, 0, 0); }
.product-uikit-offers-new .books-of.new-writing-offer-1 > h3 { color: rgb(47, 54, 59); }
.free-prst { color: rgb(0, 176, 240); }
.free-ch { color: rgb(255, 0, 0); }
.product-uikit-offers-new .books-of.new-writing-offer-1 .stud-book { font-size: 18px; line-height: 48px; float: left; width: 220px; height: 50px; }
.product-uikit-offers-new .books-of.new-writing-offer-1 .last-new-offer .stud-book { height: 80px; }

/* FORMS — fields of a horizontal RSForm sit inline with no bottom margin (RSForm front.css: .formResponsive
   .formHorizontal input { margin-bottom: 0; display: inline-block }), over the 13px of input[type=number]: the
   order form's quantity boxes */
.formResponsive .formHorizontal input { margin-bottom: 0; display: inline-block; }
/* OFFERS — the line above the last offer block (custom.css: .offers.last-item-co { border-top: 1px solid #c7c7c7;
   padding-top: 20px }); the generated rule had no border below 1025px */
.mob-menu-shops .offers.last-item-co { border-top: 1px solid rgb(199, 199, 199); padding-top: 20px; }

/* GRID — children of a UIkit grid float left (custom.css: ".pull-left, .uk-grid>* { float: left }", a rule shared with
   Bootstrap, so the UIkit extraction left it out). Zero specificity (:where), as early in the cascade as on the live:
   every measured or class rule still wins. Found in the Offers "Group" tab. */
:where(.uk-grid > *) { float: left; }
/* OFFERS — each line of a writing offer starts on its own row (custom.css: .books-of.new-writing-offer-1 > div { clear: both }) */
.books-of.new-writing-offer-1 > div { clear: both; }
/* OFFERS — the total box after the last tab sits in the container, not in a grid: no float, no grid padding (live
   computed: float none, padding 0). The generated .redb rule was measured on the grid columns of the first tab and
   floated this box, which pushed the next grid aside. */
.product-uikit-offers-new .uk-container-center > .redb { float: none; padding-top: 0; padding-left: 0; }
/* OFFERS — the "Contact Us" button of the last block (custom.css: .uk-width-medium-1-3.last-btn .sbutn { margin-top: 0;
   margin-right: 10px !important }; ≤1024px margin-right 0 !important and the column full width:
   .uk-container-center.uk-margin-top.uk-margin-large-bottom.offers.last-item-co .uk-width-medium-1-3.last-btn
   { max-width: 100%; width: 100% }) */
.uk-width-medium-1-3.last-btn .sbutn { margin-top: 0; margin-right: 10px !important; }
@media (max-width: 1024px) {
  .uk-width-medium-1-3.last-btn .sbutn { margin-right: 0 !important; }
  .uk-container-center.uk-margin-top.uk-margin-large-bottom.offers.last-item-co .uk-width-medium-1-3.last-btn { max-width: 100%; width: 100%; }
}

/* ===========================================================================================================
   GATE 3 — HOME PAGE AND SHELL (theme markup of our own; the live's LayerSlider and Offlajn CSS are commercial
   and not copied, Q36). Values measured on the live.
   =========================================================================================================== */

/* HERO (Q50): LayerSlider 4 «Mini Slider 3D parallax» in fullsize/hero mode: the stage is as tall as the window,
   the background covers it from the top left (bgposition: auto), and the 1920×720 design frame is scaled to fit
   (--el-s, set by assets/js/hero.js) and centred. */
.el-hero {
  --el-s: 0.71146;
  position: relative;
  overflow: hidden;
  height: 100vh;
}
.el-hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 0 0;
}
.el-hero__frame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--el-s) * var(--el-w) * 1px);
  height: calc(var(--el-s) * var(--el-h) * 1px);
  margin-left: calc(var(--el-s) * var(--el-w) * -0.5px);
  margin-top: calc(var(--el-s) * var(--el-h) * -0.5px);
}
.el-hero__layer {
  position: absolute;
  margin: 0;
  overflow: hidden;
  transition: translate 0.6s ease-out;
}
.el-hero__layer img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}
.el-hero__layer--text {
  overflow: visible;
  white-space: nowrap;
  /* the layers declare Montserrat, but the live draws them in Roboto (a template rule wins; checked with the
     rendered font of the live page) */
  font-family: Roboto, sans-serif;
  letter-spacing: -0.03em;
}
/* entrance (live: offsetxin -150, rotateyin -30, fadein, durationin 2000, easeOutExpo). The perspective lives in
   the keyframes and the animation is removed when it ends (assets/js/hero.js): a held 3D animation keeps the page
   on a GPU layer, where Chrome draws all text with grayscale anti-aliasing (thinner than on the live). */
@keyframes el-hero-in {
  from { opacity: 0; transform: perspective(1000px) translateX(calc(var(--el-s) * -150px)) rotateY(-30deg); }
  to { opacity: 1; transform: perspective(1000px); }
}
.el-hero--animate .el-hero__layer {
  animation: el-hero-in 2s cubic-bezier(0.19, 1, 0.22, 1) backwards;
}
/* LayerSlider 3 «Mobile Slider»: one 1200×1500 image, shown at 125% of the width, centred vertically */
.el-hero-mobile {
  position: relative;
  overflow: hidden;
  height: 0;
}
/* cover, centred (the live: the image at full width, moved up by half the overflow); object-fit instead of a
   transform, which would put the page on a GPU layer and draw its text without subpixel anti-aliasing */
.el-hero-mobile__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
}

/* BOOKS (Q61, Β3): one row per book. The live had separate phone rows (module 396, .mob-view): image first, the
   text box as in the text-right rows (.secboxl, floats left), «View more» before «View sample». The buttons are
   output for both layouts (el-desk / el-mob, see template-parts/sections/books.php). */
/* specificity above the generated .section1 .box-contr > a and .uk-grid.section1 { display: block } */
.uk-grid.section1.el-book .el-mob {
  display: none;
}
@media (max-width: 767px) {
  .uk-grid.section1.el-book .el-desk {
    display: none;
  }
  .uk-grid.section1.el-book a.el-mob {
    display: inline;
  }
  .uk-grid.section1.el-book .new-tab-homemob.el-mob {
    display: block;
  }
  .uk-grid.section1.el-book--left {
    display: flex;
    flex-direction: column;
  }
  .uk-grid.section1.el-book--left > .secimgbox {
    order: -1;
  }
  /* the phone rows were all text-right rows on the live: their buttons float left */
  .el-book--left .secboxr .sbutn,
  .el-book--left .secboxr .chsbutn {
    float: left;
  }
}

/* Live custom.css: .secboxr .sbutn, .secboxr .chsbutn { float: right } (the text-left rows align their buttons
   right), and at ≤767px { float: none }. Not written by the generator (the buttons are not a measured part). */
.secboxr .sbutn,
.secboxr .chsbutn {
  float: right;
}
@media (max-width: 767px) {
  .secboxr .sbutn,
  .secboxr .chsbutn {
    float: none;
  }
}

/* Live custom.css: #tm-navbar { border-bottom: 3px solid #0081bd } and .home #tm-navbar { border-bottom: none }:
   the home page has no line under the header (measured: navbar 95px on / at 1366, 98px with the line elsewhere). */
.home #tm-navbar {
  border-bottom: none;
}

/* Live custom.css: .facebook-id { text-align: center } (the Facebook frame is centred in its footer column). The
   generator wrote #tm-bottom-c .uk-grid > div { text-align: left } from the first column, which outranks its own
   #tm-bottom-c .facebook-id; same selector plus the class here. */
#tm-bottom-c .uk-grid > div.facebook-id {
  text-align: center;
}

/* MOBILE MENU (Q51) — the dark layer behind the open menu. Offlajn: .sm-pusher:after { position: fixed; top: 0;
   left: 0; width: 100%; height: 100%; visibility: hidden; opacity: 0; transition: opacity .5s } and, open,
   { visibility: visible; opacity: .2 } (measured on the live, 375: closed hidden/0, open visible/0.2). The generator
   wrote no visibility for pseudo-elements and the height as the viewport's px, so the invisible layer covered the
   page and took the clicks meant for the menu button. */
body > .sm-pusher::after {
  height: 100%;
  visibility: hidden;
  transition: opacity 0.5s ease 0s;
}
body.sm-open > .sm-pusher::after {
  visibility: visible;
  opacity: 0.2;
}

/* MOBILE MENU (Q51) — open state, measured on the live at 375 and 768 (Offlajn mod_vertical_menu, commercial, not
   copied): the page is fixed under the menu (html height 0 / overflow hidden, body fixed to the window), the overlay
   is as tall as the window and centres the menu, the close button sits top right (30px, inverted white bars turned
   into an X: ±45° around their left end, the middle bar hidden), the <dd> after each item is hidden. */
html.el-menu-open {
  height: 0;
  overflow-y: hidden;
}
html.el-menu-open body {
  position: fixed;
  left: 0;
  right: 0;
  height: 100%;
  overflow: hidden;
}
nav[id^="off-menu_"] dd {
  display: none;
}
body.sm-open .sm-overlay-win > .menu-icon-cont.sm-close {
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  width: 30px;
  height: 30px;
  opacity: 1;
  filter: invert(1);
}
.sm-overlay-win > .sm-close .menu-icon3 span {
  background-color: rgb(255, 255, 255);
  transform-origin: 0 50%;
}
.sm-overlay-win > .sm-close .menu-icon3 span:nth-child(1) {
  transform: rotate(45deg);
}
.sm-overlay-win > .sm-close .menu-icon3 span:nth-child(2) {
  opacity: 0;
}
.sm-overlay-win > .sm-close .menu-icon3 span:nth-child(3) {
  transform: rotate(-45deg);
}
/* the spacer module 241 under the items: phone only on the live (by device; here by width) */
nav[id^="off-menu_"] dt.sm-mod.sm-bottom-mob {
  display: none;
}
@media (max-width: 767px) {
  nav[id^="off-menu_"] dt.sm-mod.sm-bottom-mob {
    display: table;
    width: 100%;
    border-bottom: 1px solid transparent;
    font-weight: 700;
  }
  nav[id^="off-menu_"] dt.sm-mod.sm-bottom-mob p {
    margin: 0;
    line-height: normal;
  }
}
/* the full-height strut that centres the menu (live: .sm-overlay-win:before { vertical-align: middle }; the
   generator wrote no vertical-align for pseudo-elements) */
.sm-overlay-win::before {
  vertical-align: middle;
}
/* open: the page (header included) and its dark layer stay under the menu window (live, open: .sm-pusher
   { position: relative; z-index: 99 }, so its own layers stack inside it) */
html.el-menu-open .sm-pusher {
  position: relative;
  z-index: 99;
}

/* Live custom.css, @media (max-width: 1024px): ul.uk-navbar-nav > li:last-child { margin-bottom: 80px !important }
   (the footer menu column ends 80px lower; found by the breakpoint sweep at 1024) */
@media (max-width: 1024px) {
  ul.uk-navbar-nav > li:last-child {
    margin-bottom: 80px !important;
  }
}
/* … and @media (max-width: 768px) section#tm-bottom-c ul.uk-navbar-nav > li:last-child { margin-bottom: 0 !important }
   (the 80px applies only from 769 to 1024px; breakpoint sweep at 320) */
@media (max-width: 768px) {
  section#tm-bottom-c ul.uk-navbar-nav > li:last-child {
    margin-bottom: 0 !important;
  }
}

/* BORDER STYLES under 341px — the generator measured at 375 / 768 / 1366 / 1920 and wrote the border styles in its
   (min-width: 341px) block only, so from 320 to 340px these parts lost their solid / dashed borders (widths and
   colours are written from 281px). The live sets them at every width (custom.css shorthands). Same declarations,
   copied from components.generated.css (min-width: 341px), for 281–340px (Gate 3 breakpoint sweep at 320). */
@media (max-width: 340px) {
  #tm-navbar {
    border-bottom-style: solid;
  }
  nav[id^="off-menu_"] dl.level1 > dt.level1 {
    border-bottom-style: solid;
  }
  #tm-bottom-c h3.modtitle {
    border-bottom-style: dashed;
  }
  .cc-window a.cc-dismiss {
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
  }
  .section2co h3 {
    border-bottom-style: dashed;
  }
  .our-booksa .btsbtitle {
    border-bottom-style: dashed;
  }
  .product-uikit-offers-new button.tablinks {
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
  }
  .product-uikit-offers-new button.tablinks.active {
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
  }
  .product-uikit-order-form a.sbutn-off {
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
  }
  form#userForm input.rsform-input-box {
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
  }
  form#userForm textarea.rsform-text-box {
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
  }
  form#userForm select {
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
  }
  .product-uikit-events-2 .uk-panel-box {
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
  }
}

/* FORMS (CF7 with the RSForm markup, snippet fix-cf7-rsform) — the parts Contact Form 7 adds around the form. Its
   own stylesheet is not loaded (inc/assets.php), so they are hidden here as it hides them: the screen-reader status
   (visually hidden, still read), the fieldset of its hidden inputs, and its response box (the RSForm error line
   and the thank-you text replace it). */
.wpcf7 .screen-reader-response {
  position: absolute;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  word-wrap: normal !important;
}
.wpcf7 .hidden-fields-container,
.wpcf7 .wpcf7-response-output {
  display: none !important;
}

/* OUR BOOKS — AcyMailing 5.8.1 module stylesheet (media/com_acymailing/css/module_default.css, © ACYBA,
   GNU/GPLv3, copied as Q36 allows for open-source code), loaded before the template's rules as on the live */
div.acymailing_module, .acymailing_module div{
	padding: 0 !important;
	margin: 0 !important;
	border-style:none !important;
}

table.acymailing_form{
	margin:auto;
	border:0px !important;
}

a.acymailing_togglemodule{
	display : block;
	font-size:16px;
}

.acymailing_mootoolsbutton p{
	text-align:center;
}

.acysubbuttons{
	text-align:center;
}

img.captchaimagemodule{
	border:1px solid #dddddd;
	float: left;
}

.captchakeymodule .captchafield{
	margin-top:3px;
	margin-left:2px;
}

.acymailing_fulldiv tr, .acymailing_fulldiv td{
	border:0px;
}

.acymailing_module_form select {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.acymailing_module_form td {
	padding-bottom: 5px;
	vertical-align:top;
}

div.acymailing_module_error {
	color: #400;
	background-color: #fdd;
	padding: 1em !important;
	margin-bottom:10px;
}

div.acymailing_module_success {
	color: #130;
	background-color: #dfc;
	padding: 1em !important;
	z-index: 10;
	margin-bottom:10px;
}

.acymailing_module_form .acymailing_introtext{
	 padding-bottom:10px;
	 display:block;
}

.refreshCaptchaModule{
	background-image:url(../images/refresh.png);
	width:16px;
	height:16px;
	display:block;
	float:left;
	cursor:pointer;
}

.acymailing_module fieldset{
	border: solid 1px #ccc;
	padding: 5px;
}
.category_warning{
	color: red;
}

.hide {
	display: none;
}

.slide_open{
	animation: deployslide 0.5s forwards;
	overflow: hidden;
}

@keyframes deployslide{
	from{
		max-height: 0px;
	}
	to{
		max-height: 800px;
	}
}

@keyframes retractslide{
	from{
		max-height: 800px;
	}
	to{
		max-height: 0px;
		display: none;
	}
}

.slide_close{
	animation: retractslide 0.5s forwards;
	overflow: hidden;
	background-color: #fff;
	box-shadow: 0px 1px 5px #eee;
	padding: 5px;
	margin-bottom: 20px;
}

.slide_open{
	animation: deployslide 0.5s forwards;
	overflow: hidden;
	background-color: #fff;
	box-shadow: 0px 1px 5px #eee;
	padding: 5px;
	margin-bottom: 20px;
}

/* OUR BOOKS — the newsletter boxes (AcyMailing modules 368, 380, 398, hidden until «Download»; the generator saw
   them closed and wrote nothing). Live custom.css, same values: */
.acymailing_module { width: 100%; max-width: 1920px; }
.cnewsletter .acymailing_fulldiv { max-width: 500px; margin: 161px auto !important; }
.acymailing_module_form .acymailing_introtext { float: left; font-size: 22px; margin-top: 9px; color: #fff; font-weight: 400; }
@media (min-width: 986px) { .acymailing_form input.inputbox { width: 200px !important; } }
.cnewsletter input.button.subbutton { background: #0081bd !important; color: #ffffff; margin-left: 10px; border-radius: 0px; padding: 12px 25px; font-size: 15px; }
.cnewsletter input.button.subbutton:hover { background: #0081bdcc !important; }
table.acymailing_form { margin-left: 0px !important; }
.cnewsletter .acymailing_form input.inputbox { border: 2px solid #e4e4e2 !important; height: 30px !important; padding: 6px !important; margin-bottom: 15px !important; font-size: 16px !important; border-radius: 0px !important; font-weight: 300; color: #212121; }
@media (max-width: 985px) { .cnewsletter .acymailing_form input.inputbox { width: auto !important; } }
@media (max-width: 520px) {
  table.acymailing_form { margin: 0 auto !important; }
  .acymailing_module_form .acymailing_introtext { float: none; text-align: center; }
  .cnewsletter .acymailing_form input.inputbox { width: 100% !important; }
}
@media (max-width: 460px) { .cnewsletter input.button.subbutton { padding: 18px 25px; } }
.our-books-pg .cnewsletter .acymailing_fulldiv { margin: 0px !important; }
.disp-n1 { display: block; visibility: visible; margin: 0px; transition: all linear 0.2s; }
.our-books-pg div.acymailing_module_success { width: 100%; }

/* HEADER — sticky after 290px of scroll (template script; live custom.css:
   .tm-navbar.uk-navbar.uk-clearfix.desktop-view.stickytop { position: fixed; width: 100%; background: #fff !important;
   top: 0; box-shadow: 0 0 21px 0 #696969; margin-left: -30px }); state not measured by the generator, whose
   #tm-navbar values (position: static…) outrank the live's class selector: the id is added here */
#tm-navbar.tm-navbar.uk-navbar.uk-clearfix.desktop-view.stickytop {
  position: fixed;
  width: 100%;
  background: #fff !important;
  top: 0;
  box-shadow: 0px 0px 21px 0px #696969;
  margin-left: -30px;
}
/* the newsletter's checkbox and button take the template's Bootstrap rules (custom.css: .checkbox, .radio
   { min-height: 26px }; .btn { border: #8e9091 [= none]; line-height: 22px }; .btn-primary { text-shadow:
   0 -1px 0 rgba(0, 0, 0, .25) }), the computed values of the live here */
.acymailing_form input.checkbox {
  min-height: 26px;
}
.cnewsletter input.button.subbutton.btn {
  border: none;
  line-height: 22px;
  text-shadow: rgba(0, 0, 0, 0.25) 0px -1px 0px;
}

/* FORMS — a form on its own page (Unsubscribe) is centred from 1370px (live custom.css: @media (min-width: 1370px)
   { #tm-content #userForm { max-width: 1310px; width: 100%; margin: 0 auto } }); measured on the form inside a ZOO
   item, the generator wrote form#userForm { margin: 0 } instead */
@media (min-width: 1370px) {
  #tm-content #userForm {
    max-width: 1310px;
    width: 100%;
    margin: 0 auto;
  }
}