/* pages/femto.php's dedicated CSS. Dead-code audit (2026-09-08): this template has
   exactly 2 live rows (SK id 2016, CZ id 2026). Like evo-icl-page.php, this page's own
   "krokovac" 5-step animation (.kroky/.oko/.puzdro/.pocket/.rana-element/.multi-element/
   .waves-element/.skalpel-element/.drop-element) IS live - left fully untouched. But
   .row-after has no matching <div> anywhere in this page's markup at all (confirmed via
   grep), and .lentikula/.smile-element/.laser-element are leftover copy-paste from a
   different page's krokovac image set - referenced only in this page's own JS (which
   matches zero elements, a harmless no-op), never as an actual class anywhere in the
   markup. Also removed: .img-responsive, .revolucna-novinka, and the whole
   .row-trash .anime/.trash/.close_top/.glasses/.open_top glasses-toggle animation (same
   "not used on this page" pattern as clear.php/psychologicka_pomoc.php/evo-icl-page.php).
   Kept .vyhody-vpravo li and .bezkapitalky h3 - confirmed live via DB query (var6/var7
   CMS content uses class="vyhody-vpravo", and .bezkapitalky is a static class on this
   page's own row-video columns). Cut this file from 1709 lines to well under 1500.

   Also fixed (pages/femto.php): class="btn akciovka" -> "btn akciova" (typo, same
   recurring bug already fixed on operation.php/clear.php/evo-icl-page.php this session) -
   confirmed via DB this one has a real visible effect: the SK row's active__ceny entry
   (id 46) has both akcia and url populated, so .row-akcia actually renders, and its CTA
   button was completely unstyled due to the typo. */
.akciova,
.akciova:hover {
  display: inline-block;
  text-align: center;
  height: 60px;
  line-height: 20px;
  padding: 5px 30px;
  margin-top: 15px;
  font-family: var(--font-primary);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-teal);
  background-image: url(../img/nbtn.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}

.posunto {
  padding-left: 60px;
}

.row-order .stara-cena {
  font-size: 18px !important;
  color: var(--color-text);
  text-decoration: line-through;
  font-weight: normal;
  position: relative;
  top: -40px;
  left: -15px;
}
@media (max-width: 768px) {
  .posunto {
    max-height: 180px;
  }
}

.row-trash {
  background-color: var(--color-white);
  padding: 60px 0px;
}

.row-video {
  background-color: #f3f1f0;
  padding: 40px 0px;
}

.row-video .obrazok-center {
  text-align: center;
  margin-top: 40px;
}

.vyhody-vpravo li {
  background-image: url(../img/textLi.jpg);
  background-repeat: no-repeat;
  background-position: left 50%;
  padding-left: 21px;
  margin-bottom: 10px;
}

.row-banner {
  background-position: center top;
  background-size: cover;
  padding: 50px 0;
  color: var(--color-white);
  height: 470px;
}

.row-akcia {
  background: url(/img/relex-smile/bg-akcia.png) repeat-x;
  color: var(--color-white);
  height: 90px;
  line-height: 90px;
}

.row-process {
  background-position: center top;
  background-size: cover;
  padding: 50px 0;
  color: var(--color-white);
  height: 370px;
}
.row-order {
  background-image: url(/img/magic-pocket/azure.jpg);
  background-position: center top;
  background-size: cover;
  padding: 80px 0;
  color: var(--color-white);
  height: 305px;
}

.row-laser {
  background-image: url(/img/magic-pocket/ziemer-femto-ldv-z8-back.png);
  background-color: #f3f1f0;
  background-position: center top;
  background-size: cover;
  padding: 50px 0;
  color: var(--color-white);
  height: 570px;
}

.row-anime {
  background-image: url(/img/magic-pocket/iclinic-magic-pocket-oko-priebeh.png);
  background-position: center top;
  background-size: cover;
  height: 456px;
}

.smile-list {
  margin-top: 20px;
}

.smile-list li {
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 32px 32px;
  padding-left: 38px;
  margin-bottom: 10px;
  min-height: 32px;
  line-height: 20px;
}

.smile-list li:nth-child(1) {
  background-image: url(/img/relex-smile/li/11.png) !important;
}

.smile-list li:nth-child(2) {
  background-image: url(/img/relex-smile/li/1.png) !important;
}

.smile-list li:nth-child(3) {
  background-image: url(/img/relex-smile/li/2.png) !important;
}

.smile-list li:nth-child(4) {
  background-image: url(/img/relex-smile/li/3.png) !important;
}

.smile-list li:nth-child(5) {
  background-image: url(/img/relex-smile/li/4.png) !important;
}

.smile-list li:nth-child(6) {
  background-image: url(/img/relex-smile/li/5.png) !important;
}

.smile-list li:nth-child(7) {
  background-image: url(/img/relex-smile/li/6.png) !important;
}

.smile-list li:nth-child(8) {
  background-image: url(/img/relex-smile/li/7.png) !important;
}

.smile-list li:nth-child(9) {
  background-image: url(/img/relex-smile/li/8.png) !important;
}
.smile-list li:nth-child(10) {
  background-image: url(/img/relex-smile/li/9.png) !important;
}

.row-banner h1 {
  font-family: var(--font-primary);
  font-weight: 700;
  color: var(--color-white);
  font-size: 56px;
}
.row-banner h2 {
  font-family: var(--font-primary);
  font-weight: 400;
  color: var(--color-white);
  font-size: 20px;
}
.row-banner p {
  font-family: var(--font-primary);
  font-weight: 400;
  color: var(--color-white);
  font-size: 18px;
  margin-top: 20px;
}
.row-banner .headline {
  max-width: 655px;
  padding: 60px 80px 70px 30px;
  background-color: rgba(29, 96, 113, 0.8);
  margin-top: 30px;
}

.row-trash h2 {
  font-family: var(--font-primary);
  font-weight: 700;
  color: var(--color-teal);
  font-size: 36px;
}
.row-trash h3 {
  font-family: var(--font-primary);
  font-weight: 700;
  color: var(--color-text);
  text-transform: uppercase;
  font-size: 20px;
  margin-top: 30px;
  margin-bottom: 20px;
}
.row-trash {
  color: var(--color-text);
}

.row-trash ul {
  margin-top: 20px;
}

.row-trash li {
  font-family: var(--font-primary);
  font-weight: 400;
  color: var(--color-text);
  font-size: 16px;
  margin-top: 5px;
}

.row-trash .vyhody li {
  padding-left: 40px;
  background: url("/img/magic-pocket/check-icon.svg") no-repeat;
  background-size: 30px 30px;
  min-height: 30px;
}
.row-trash .vyhody li span {
  position: relative;
  top: 5px;
}

/* Bootstrap's reboot sets p/ul{margin-bottom:1rem}, which leaks unwanted 16px gaps into
	   .navi-mobil and .vyhody/.vyhody-vpravo (production has margin-bottom:0 here). */
#pocket .row-trash p,
#pocket .row-trash .vyhody,
#pocket .row-trash .vyhody-vpravo {
  margin-bottom: 0;
}

.row-process h3 {
  font-family: var(--font-primary);
  font-weight: 700;
  color: var(--color-text);
  text-transform: uppercase;
  font-size: 20px;
  margin-top: 20px;
}

.row-process p {
  font-family: var(--font-primary);
  font-weight: 400;
  color: var(--color-text);
  font-size: 16px;
  margin-top: 15px;
  max-width: 540px;
  width: auto;
}

.row-video h3 {
  font-family: var(--font-primary);
  font-weight: 700;
  color: var(--color-text);
  text-transform: uppercase;
  font-size: 20px;
  margin-top: 20px;
}

.row-video p {
  font-family: var(--font-primary);
  font-weight: 400;
  color: var(--color-text);
  font-size: 16px;
  margin-top: 15px;
  width: auto;
}

.akciova {
  color: var(--color-white) !important;
}

.row-laser h3 {
  font-family: var(--font-primary);
  font-weight: 700;
  color: var(--color-text);
  text-transform: uppercase;
  font-size: 20px;
  margin-top: 20px;
}

.row-laser p {
  font-family: var(--font-primary);
  font-weight: 400;
  color: var(--color-text);
  font-size: 16px;
  margin-top: 5px;
  max-width: 480px;
  width: auto;
}

.row-laser table {
  margin-top: 60px;
  margin-bottom: 40px;
}

.row-laser table td.lave {
  text-align: left;
  height: 120px;
}
.row-laser table td.prave {
  text-align: right;
}

.row-order .first-cena {
  font-family: var(--font-primary);
  font-weight: 700;
  color: var(--color-text);
  text-transform: uppercase;
  font-size: 20px;
  margin-top: 10px;
}
.row-order .second-cena {
  font-family: var(--font-primary);
  font-weight: 700;
  color: var(--color-teal);
  text-transform: uppercase;
  font-size: 56px;
}

.row-order .second-cena .sup {
  color: var(--color-teal);
  text-transform: initial;
  font-size: 28px;
  position: relative;
  top: -17px;
}

.row-order .third-cena {
  font-family: var(--font-primary);
  font-weight: 400;
  color: var(--color-text);
  text-transform: uppercase;
  font-size: 18px;
}

.row-order .text-right img {
  margin-right: 10px;
  margin-top: 8px;
}
.row-order .posun {
  margin-top: 20px;
}
.row-order .btn-order {
  font-family: var(--font-primary);
  font-weight: 700;
  color: var(--color-white);
  text-transform: uppercase;
  font-size: 20px;
  background-color: var(--color-teal);
  padding: 15px 20px;
  display: -webkit-inline-box;
  cursor: pointer;
}

.row-order .btn-order i {
  margin-left: 20px;
}

.row-order .under-button {
  font-family: var(--font-primary);
  font-weight: 400;
  color: var(--color-text);
  font-size: 16px;
  width: 60%;
  margin-top: 5px;
  text-align: center;
  display: -webkit-inline-box;
}

.row-anime h3 {
  font-family: var(--font-primary);
  font-weight: 700;
  color: var(--color-teal);
  text-transform: uppercase;
  font-size: 36px;
}
.row-anime p {
  font-family: var(--font-primary);
  font-weight: 400;
  color: var(--color-text);
  font-size: 15px;
  margin-top: 5px;
  max-width: 580px;
  width: auto;
}

.row-anime .btn-order {
  font-family: var(--font-primary);
  font-weight: 700;
  color: var(--color-white);
  text-transform: uppercase;
  font-size: 16px;
  background-color: var(--color-teal);
  padding: 15px 20px;
  display: -webkit-inline-box;
  cursor: pointer;
  margin-top: 20px;
}

.row-anime .btn-order i {
  margin-left: 20px;
}

.row-anime .prava-strana {
  background-image: url("/img/magic-pocket/sh.png");
  min-height: 456px;
}

.row-anime .kroky {
  margin-top: 35px;
  background: url("/img/magic-pocket/kroky.jpg") repeat-y;
  background-position: 5px left;
}

.row-anime .kroky li {
  font-family: var(--font-primary);
  font-weight: 700;
  color: var(--color-text);
  text-transform: uppercase;
  font-size: 16px;
  margin-bottom: 20px;
  cursor: pointer;
  display: block;
  width: 100%;
  overflow: hidden;
}

.row-anime .kroky li .krok {
  font-family: var(--font-primary);
  font-weight: 700;
  color: #8e8e93;
  text-transform: uppercase;
  font-size: 36px;
  border: 2px solid #8e8e93;
  width: 60px;
  height: 60px;
  line-height: 60px;
  margin-right: 20px;
  background-color: var(--color-white);
}
.row-anime .kroky li .krok-title {
  height: 60px;
  display: table-cell;
}
.row-anime .kroky li:last-child {
  margin-bottom: 0px;
}
.row-anime .kroky li.active .krok,
.row-anime .kroky li:hover .krok {
  color: var(--color-white);
  border: 2px solid var(--color-teal);
  background-color: var(--color-teal);
}

.row-anime .kroky li.active .krok-title,
.row-anime .kroky li:hover .krok-title {
  color: var(--color-teal);
}
@media (min-width: 1030px) AND (max-width: 1366px) {
  .row-anime .kroky li .krok-title {
    width: 200px;
  }
}
@media (min-width: 569px) AND (max-width: 650px) {
  .row-anime .kroky li .krok-title {
    position: relative;
    top: 2px;
    display: -webkit-inline-box;
    width: 150px;
  }
}

.row-anime .oko {
  margin-top: 120px;
  position: relative;
  max-width: 413px;
}

.row-anime .oko img {
  max-width: 413px;
}

.row-anime .puzdro {
  position: absolute;
  top: 98px;
  right: 171px;
  height: 40px;
  display: none;
}
.row-anime .pocket {
  position: absolute;
  display: none;
  top: 101px;
  right: -433px;
}
.row-anime .pocket-full {
  position: absolute;
  display: none;
  top: 101px;
  right: 181px;
}
@media (max-width: 768px) {
  .row-anime {
    height: auto;
  }
  .row-anime .prava-strana {
    background-image: none;
  }
}
@media (max-width: 1024px) {
  .row-banner .headline {
    max-width: 475px;
    padding: 70px 35px 70px 30px;
    background-color: rgba(29, 96, 113, 0.8);
    margin-top: 30px;
  }

  .row-anime {
    height: auto;
  }
  .row-laser {
    height: auto;
  }
  .row-process {
    height: auto;
  }
  .row-anime .prava-strana {
    background-image: none;
    padding: 40px 20px;
    text-align: center;
  }

  .row-order .symbol-euro {
    display: none;
  }

  .row-order .ceny {
    text-align: center;
  }

  .row-order {
    height: auto;
  }

  .row-order .under-button {
    width: auto;
    margin-top: 15px;
    text-align: center;
    display: block;
  }

  .row-anime p {
    max-width: inherit;
  }

  .row-laser img {
    max-width: 100%;
  }

  .row-laser table {
    margin-top: 20px;
  }

  .row-process {
    background-position: 69% top;
  }
  .row-process p {
    max-width: 70%;
  }

  .row-anime .oko {
    text-align: center;
  }
  .row-anime .oko .oko-element {
    width: 100%;
  }

  .row-anime .anim-prava {
    width: 50%;
    float: right;
    margin-top: 40px;
  }

  .row-anime .anim-lava {
    width: 50%;
    float: left;
  }

  .row-anime .anim-celky {
    width: 100%;
  }

  .row-order .col-sm-6 {
    width: 100%;
  }

  .row-order .ceny {
    width: 50%;
    float: right;
    text-align: left;
  }

  .row-order .symbol-euro {
    width: 50%;
    float: left;
    display: inherit;
  }
}
@media (max-width: 960px) {
  .row-banner .headline {
    max-width: 585px;
    padding: 70px 35px 70px 30px;
    background-color: rgba(29, 96, 113, 0.8);
    margin-top: 30px;
  }

  .row-anime {
    height: auto;
  }
  .row-laser {
    height: auto;
  }
  .row-process {
    height: auto;
  }
  .row-anime .prava-strana {
    background-image: none;
    padding: 40px 20px;
    text-align: center;
  }

  .row-order .symbol-euro {
    display: none;
  }

  .row-order .ceny {
    text-align: center;
  }

  .row-order {
    height: auto;
  }

  .row-order .under-button {
    width: auto;
    margin-top: 15px;
    text-align: center;
  }

  .row-laser img {
    max-width: 100%;
  }

  .row-laser table {
    margin-top: 20px;
  }

  .row-process {
    background-position: left top;
  }

  .row-banner {
    background-position: 60% top;
  }
  .row-process p {
    max-width: 50%;
  }

  .row-anime .oko {
    text-align: center;
  }
  .row-anime .oko .oko-element {
    width: 100%;
  }

  .row-anime .anim-prava {
    width: 50%;
    float: right;
    margin-top: 40px;
  }

  .row-anime .anim-lava {
    width: 50%;
    float: left;
  }

  .row-anime .anim-celky {
    width: 100%;
  }

  .row-order .col-sm-6 {
    width: 100%;
  }

  .row-order .ceny {
    width: 50%;
    float: right;
    text-align: left;
  }

  .row-order .symbol-euro {
    width: 50%;
    float: left;
    display: inherit;
  }
}
@media (max-width: 800px) {
  .row-banner .headline {
    max-width: 475px;
    padding: 70px 35px 70px 30px;
    background-color: rgba(29, 96, 113, 0.8);
    margin-top: 30px;
  }

  .posunto {
    padding-left: 0px;
  }

  .row-anime {
    height: auto;
  }
  .row-laser {
    height: auto;
  }
  .row-process {
    height: auto;
  }
  .row-anime .prava-strana {
    background-image: none;
    padding: 40px 20px;
    text-align: center;
  }

  .row-order .symbol-euro {
    display: none;
  }

  .row-order .ceny {
    text-align: center;
  }

  .row-order {
    height: auto;
  }

  .row-order .under-button {
    width: auto;
    margin-top: 15px;
    text-align: center;
  }

  .row-laser img {
    max-width: 100%;
  }

  .row-laser table {
    margin-top: 20px;
  }

  .row-process {
    background-position: left top;
  }
  .row-process p {
    max-width: 70%;
  }

  .row-anime .oko {
    text-align: center;
    max-width: 274px;
  }
  .row-anime .oko .oko-element {
    width: 100%;
  }

  .row-anime .anim-prava {
    width: 50%;
    float: right;
    margin-top: 40px;
  }

  .row-anime .anim-lava {
    width: 50%;
    float: left;
  }

  .row-anime .anim-celky {
    width: 100%;
  }

  .row-order .col-sm-6 {
    width: 100%;
  }

  .row-order .ceny {
    width: 50%;
    float: right;
    text-align: left;
  }

  .row-order .symbol-euro {
    width: 50%;
    float: left;
    display: inherit;
  }
}
@media (max-width: 736px) {
  .row-banner .headline {
    padding: 70px 30px 70px 30px;
  }

  .row-anime .anim-celky {
    width: inherit;
  }

  .row-anime {
    height: auto;
  }
  .row-laser {
    height: auto;
  }
  .row-process {
    height: auto;
  }
  .row-anime .prava-strana {
    background-image: none;
    padding: 40px 20px;
    text-align: center;
  }

  .row-order .symbol-euro {
    display: none;
  }

  .row-order .ceny {
    text-align: center;
  }

  .row-order {
    height: auto;
  }

  .row-order .under-button {
    width: 80%;
    margin-top: 15px;
  }

  .row-laser img {
    max-width: 100%;
  }

  .row-laser table {
    margin-top: 20px;
  }

  .row-process {
    background-position: left top;
  }
  .row-process p {
    max-width: 70%;
  }

  .row-anime .oko {
    text-align: center;
    max-width: 274px;
  }
  .row-anime .oko .oko-element {
    width: 100%;
  }

  .row-anime .anim-prava {
    width: 50%;
    float: right;
    margin-top: 40px;
  }

  .row-anime .anim-lava {
    width: 50%;
    float: left;
  }

  .row-order .ceny {
    width: 50%;
    float: right;
    text-align: left;
  }

  .row-order .symbol-euro {
    width: 50%;
    float: left;
    display: inherit;
  }
}
@media (max-width: 667px) {
  .row-banner .headline {
    padding: 70px 30px 70px 30px;
  }

  .row-banner h1 {
    font-size: 36px;
  }

  .row-anime {
    height: auto;
  }
  .row-laser {
    height: auto;
  }
  .row-process {
    height: auto;
  }
  .row-anime .prava-strana {
    background-image: none;
    padding: 40px 20px;
    text-align: center;
  }

  .row-order .symbol-euro {
    display: none;
  }

  .row-order .ceny {
    text-align: center;
  }

  .row-order {
    height: auto;
  }

  .row-order .under-button {
    width: 80%;
    margin-top: 15px;
  }

  .row-laser img {
    max-width: 100%;
  }

  .row-laser table {
    margin-top: 20px;
  }

  .row-process {
    background-position: left top;
  }
  .row-process p {
    max-width: 70%;
  }

  .row-anime .oko {
    text-align: center;
    max-width: 274px;
  }
  .row-anime .oko .oko-element {
    width: 100%;
  }

  .row-anime .anim-prava {
    width: 50%;
    float: right;
    margin-top: 40px;
  }

  .row-anime .anim-lava {
    width: 50%;
    float: left;
  }

  .row-order .ceny {
    width: 50%;
    float: right;
    text-align: left;
  }

  .row-order .symbol-euro {
    width: 50%;
    float: left;
    display: inherit;
  }
}
@media (max-width: 568px) {
  .row-trash h2 {
    font-size: 26px;
  }

  .row-anime .anim-prava {
    width: initial;
    float: initial;
    margin-top: initial;
  }

  .row-anime .anim-lava {
    width: initial;
    float: initial;
  }

  .row-banner .headline {
    padding: 70px 30px 70px 30px;
  }

  .row-banner h1 {
    font-size: 36px;
  }

  .row-anime {
    height: auto;
  }
  .row-laser {
    height: auto;
  }
  .row-process {
    height: auto;
  }
  .row-anime .prava-strana {
    background-image: none;
    padding: 40px 20px;
    text-align: center;
  }

  .row-order .symbol-euro {
    display: none;
  }

  .row-order .ceny {
    text-align: center;
  }

  .row-order {
    height: auto;
  }

  .row-order .under-button {
    width: 80%;
    margin-top: 15px;
  }

  .row-laser img {
    max-width: 100%;
  }

  .row-laser table {
    margin-top: 20px;
  }

  .row-process {
    background-position: left top;
  }
  .row-process p {
    max-width: 80%;
  }

  .row-anime .oko {
    text-align: center;
    max-width: 274px;
    margin: 70px auto 30px auto;
  }
  .row-anime .oko .oko-element {
    width: 100%;
  }

  .row-order .ceny {
    width: 50%;
    float: right;
    text-align: left;
  }

  .row-order .symbol-euro {
    width: 50%;
    float: left;
    display: inherit;
  }
}
@media (max-width: 420px) {
  .row-banner .headline {
    padding: 70px 30px 70px 30px;
  }

  .row-banner h1 {
    font-size: 36px;
  }

  .row-anime {
    height: auto;
  }
  .row-laser {
    height: auto;
  }
  .row-process {
    height: auto;
  }
  .row-anime .prava-strana {
    background-image: none;
    padding: 40px 20px;
    text-align: center;
  }

  .row-order .symbol-euro {
    display: none;
  }

  .row-order .ceny {
    text-align: center;
  }

  .row-order {
    height: auto;
  }

  .row-order .under-button {
    width: 100%;
    margin-top: 15px;
  }

  .row-laser img {
    max-width: 100%;
  }

  .row-laser table td {
    width: 100%;
    clear: both;
    display: block;
    text-align: center;
    height: auto;
  }

  .row-laser table td.lave {
    text-align: center;
  }
  .row-laser table td.prave {
    text-align: center;
  }

  .row-anime .oko {
    text-align: center;
    max-width: 274px;
  }
  .row-anime .oko .oko-element {
    width: 100%;
  }

  .row-anime .anim-prava {
    width: initial;
    float: initial;
    margin-top: initial;
  }

  .row-anime .anim-lava {
    width: initial;
    float: initial;
  }
  .row-order .ceny {
    width: inherit;
    float: inherit;
    text-align: center;
  }

  .row-order .symbol-euro {
    width: inherit;
    float: inherit;
    display: none;
  }

  .row-process {
    background-position: left top;
  }
}
@media (max-width: 380px) {
  .row-banner .headline {
    padding: 20px 30px 20px 30px;
    margin-top: 30px;
  }

  .row-banner {
    height: 370px;
  }

  .row-banner {
    height: 370px;
  }

  .row-banner h1 {
    font-size: 36px;
  }

  .row-anime {
    height: auto;
  }
  .row-laser {
    height: auto;
  }
  .row-process {
    height: auto;
  }
  .row-anime .prava-strana {
    background-image: none;
    padding: 40px 20px;
    text-align: center;
  }

  .row-order .symbol-euro {
    display: none;
  }

  .row-order .ceny {
    text-align: center;
  }

  .row-order {
    height: auto;
  }
  .row-order .btn-order,
  .row-anime .btn-order {
    font-size: 14px;
  }
  .row-order .under-button {
    width: 100%;
    margin-top: 15px;
  }

  .row-laser img {
    max-width: 100%;
  }

  .row-laser table td {
    width: 100%;
    clear: both;
    display: block;
    text-align: center;
    height: auto;
  }

  .row-laser table td.lave {
    text-align: center;
  }
  .row-laser table td.prave {
    text-align: center;
  }

  .row-anime .kroky li {
    font-size: 16px;
  }

  .row-anime .anim-prava {
    width: initial;
    float: initial;
    margin-top: initial;
  }

  .row-anime .anim-lava {
    width: initial;
    float: initial;
  }

  .row-anime .oko {
    text-align: center;
    max-width: 274px;
  }
  .row-anime .oko .oko-element {
    width: 100%;
  }
}
@media (max-width: 320px) {
  .row-banner .headline {
    padding: 20px 30px 20px 30px;
    margin-top: 0px;
  }

  .row-banner {
    height: 370px;
  }

  .row-banner h1 {
    font-size: 30px;
  }

  .row-anime {
    height: auto;
  }
  .row-laser {
    height: auto;
  }
  .row-process {
    height: auto;
  }
  .row-anime .prava-strana {
    background-image: none;
    padding: 40px 20px;
    text-align: center;
  }

  .row-order .symbol-euro {
    display: none;
  }

  .row-order .ceny {
    text-align: center;
  }

  .row-order {
    height: auto;
  }
  .row-order .btn-order,
  .row-anime .btn-order {
    font-size: 14px;
  }
  .row-order .under-button {
    width: 100%;
    margin-top: 15px;
  }

  .row-laser img {
    max-width: 100%;
  }

  .row-laser table td {
    width: 100%;
    clear: both;
    display: block;
    text-align: center;
    height: auto;
  }

  .row-laser table td.lave {
    text-align: center;
  }
  .row-laser table td.prave {
    text-align: center;
  }

  .row-anime .kroky li {
    font-size: 16px;
  }

  .row-anime .anim-prava {
    width: initial;
    float: initial;
    margin-top: initial;
  }

  .row-anime .anim-lava {
    width: initial;
    float: initial;
  }

  .row-anime .oko {
    text-align: center;
    max-width: 274px;
  }
  .row-anime .oko .oko-element {
    width: 100%;
  }
}

.row-trash .cattegory {
  display: flex;
  border: 2px solid #c1c3c2;
  padding: 12px;
  margin-bottom: 40px;
}

.row-trash .cattegory a {
  padding: 0 15px;
  border-right: 1px solid #eee;
  line-height: 20px;
  font-family: var(--font-primary);
  text-transform: uppercase;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 700;
  display: inline-table;
}
.row-trash .cattegory a span {
  height: 60px;
}

.row-trash .cattegory a:last-child {
  border-right: none;
}

.row-trash .cattegory a.active {
  color: var(--color-teal);
  font-weight: 700;
}

.row-trash .cattegory a:hover {
  color: var(--color-teal);
}

.row-trash .select {
  height: 103px;
  padding: 0 18px;
  border: 2px solid #c1c3c2;
  background: var(--color-white);
  width: 100%;
  font-family: var(--font-primary);
  font-size: 20px;
  color: var(--color-text);
  background-image: url(../img/relex-smile/select2.png) !important;
  background-position: right !important;
  background-repeat: no-repeat !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 45px;
  padding-left: 20px;
}
.mobil-navi {
  margin-bottom: 30px;
  display: none;
}

.mobil-navi ul {
  border-left: 2px solid #c1c3c2;
  border-right: 2px solid #c1c3c2;
  border-bottom: 2px solid #c1c3c2;
  margin-top: 0px;
  position: absolute;
  top: 103px;
  width: calc(100% - 1px);
  background: var(--color-white);
  z-index: 100;
  display: none;
}
.mobil-navi ul li {
  padding: 10px 10px;
  margin: 0px;
}

.mobil-navi ul li:hover {
  background-color: #c1c3c2;
}

.navi-mobil {
  display: none;
}
.bok {
  border-right: 2px solid var(--color-teal);
}
@media (max-width: 1024px) {
  .row-trash .mobil-navi {
    display: block;
  }

  .row-trash .cattegory {
    display: none;
  }
  .navi-mobil {
    width: 100%;
    text-align: center;
    display: block;
    margin-bottom: 20px;
  }

  .bok {
    border: none;
  }
}

.bezkapitalky h3 {
  text-transform: initial;
}
.drop-element {
  position: absolute;
  display: none;
  top: 0px;
  right: 182px;
}
.skalpel-element {
  position: absolute;
  top: 120px;
  right: -480px;
  display: none;
}
.waves-element {
  position: absolute;
  top: 120px;
  right: -480px;
  display: none;
}
.rana-element {
  position: absolute;
  top: 130px;
  right: 190px;
  display: none;
}
.multi-element {
  position: absolute;
  top: 91px;
  right: -170px;
  display: none;
}

/* .pt-30px: no Bootstrap 4.6 padding-top utility matches this exact value. */
.pt-30px {
  padding-top: 30px;
}

/* .z-index-2: no Bootstrap 4.6 z-index utility exists for this exact value. Used on the
   krokovac step-animation's right-side text (h3/p/a inside .posunto), which needs to stay
   above other absolutely-positioned decorative elements in .row-anime. */
.z-index-2 {
  z-index: 2;
}