/* TvojaMajica strong CMYK subpage heroes v36 */
html[data-tm-subhero-tone] {
  --tmh-accent: #00c9e8;
  --tmh-accent-soft: #76effb;
  --tmh-highlight: #ff70c2;
  --tmh-glow-a: rgba(0, 201, 232, .38);
  --tmh-glow-b: rgba(214, 0, 127, .24);
  --tmh-bg-position: 35% 50%;
}

html[data-tm-subhero-tone="magenta"] {
  --tmh-accent: #ff70c2;
  --tmh-accent-soft: #ffafe0;
  --tmh-highlight: #75edfb;
  --tmh-glow-a: rgba(214, 0, 127, .42);
  --tmh-glow-b: rgba(0, 201, 232, .18);
  --tmh-bg-position: 72% 45%;
}

html[data-tm-subhero-tone="yellow"] {
  --tmh-accent: #ffd629;
  --tmh-accent-soft: #ffe981;
  --tmh-highlight: #74eafa;
  --tmh-glow-a: rgba(255, 214, 41, .38);
  --tmh-glow-b: rgba(214, 0, 127, .20);
  --tmh-bg-position: 84% 58%;
}

html[data-tm-subhero-tone="cyan-magenta"] {
  --tmh-accent: #64eafa;
  --tmh-accent-soft: #a5f4fc;
  --tmh-highlight: #ff75c5;
  --tmh-glow-a: rgba(0, 201, 232, .34);
  --tmh-glow-b: rgba(255, 0, 145, .28);
  --tmh-bg-position: 22% 64%;
}

html[data-tm-subhero-tone="magenta-yellow"] {
  --tmh-accent: #ff73c4;
  --tmh-accent-soft: #ffb2df;
  --tmh-highlight: #ffe34e;
  --tmh-glow-a: rgba(255, 0, 145, .34);
  --tmh-glow-b: rgba(255, 214, 41, .26);
  --tmh-bg-position: 64% 72%;
}

html[data-tm-subhero-tone="cmyk"] {
  --tmh-accent: #00c9e8;
  --tmh-accent-soft: #8cf0fb;
  --tmh-highlight: #ffe13e;
  --tmh-glow-a: rgba(0, 201, 232, .28);
  --tmh-glow-b: rgba(255, 0, 145, .30);
  --tmh-bg-position: center center;
}

html[data-tm-subhero-tone] :is(
  .tm-phero,
  .tm-page-hero,
  body.tmx-pro-page .tmx-pro-hero,
  body.tmx-express-page .tmx-hero,
  .tm-subhero-generic-v36
) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff !important;
  border-bottom-color: rgba(255, 255, 255, .16) !important;
  background-color: #0a0c14 !important;
  background-image:
    radial-gradient(circle at 82% 18%, var(--tmh-glow-a), transparent 32%),
    radial-gradient(circle at 16% 92%, var(--tmh-glow-b), transparent 34%),
    url("/assets/tvojamajica/v35/hero-cmyk-splashes-v35.webp") !important;
  background-position: center, center, var(--tmh-bg-position) !important;
  background-repeat: no-repeat !important;
  background-size: cover, cover, 118% auto !important;
}

html[data-tm-subhero-tone] :is(
  .tm-phero,
  .tm-page-hero,
  body.tmx-pro-page .tmx-pro-hero,
  body.tmx-express-page .tmx-hero,
  .tm-subhero-generic-v36
)::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none;
  opacity: 1 !important;
  background:
    linear-gradient(102deg, rgba(6, 8, 14, .92) 0%, rgba(6, 8, 14, .82) 42%, rgba(6, 8, 14, .48) 68%, rgba(6, 8, 14, .32) 100%),
    linear-gradient(180deg, rgba(6, 8, 14, .10), rgba(6, 8, 14, .36)) !important;
}

html[data-tm-subhero-tone] :is(
  .tm-phero,
  .tm-page-hero,
  body.tmx-pro-page .tmx-pro-hero,
  body.tmx-express-page .tmx-hero,
  .tm-subhero-generic-v36
)::after {
  content: "" !important;
  position: absolute !important;
  inset: auto -8% -52% auto !important;
  z-index: 0 !important;
  width: min(52vw, 680px) !important;
  height: min(52vw, 680px) !important;
  border-radius: 50% !important;
  pointer-events: none;
  background: radial-gradient(circle, var(--tmh-glow-a), transparent 68%) !important;
}

html[data-tm-subhero-tone] :is(
  .tm-phero .tm-c,
  .tm-page-hero .tm-c,
  body.tmx-pro-page .tmx-pro-hero > .tmx-wrap,
  body.tmx-express-page .tmx-hero > .tmx-wrap,
  .tm-subhero-generic-v36 > .tmx-wrap
) {
  position: relative;
  z-index: 2;
}

html[data-tm-subhero-tone] :is(
  .tm-phero,
  .tm-page-hero,
  body.tmx-pro-page .tmx-pro-hero,
  body.tmx-express-page .tmx-hero,
  .tm-subhero-generic-v36
) :is(h1, h2, .tmx-title) {
  color: #fff !important;
  text-shadow: 0 4px 28px rgba(0, 0, 0, .72);
}

html[data-tm-subhero-tone] :is(
  .tm-phero,
  .tm-page-hero,
  body.tmx-pro-page .tmx-pro-hero,
  body.tmx-express-page .tmx-hero,
  .tm-subhero-generic-v36
) :is(h1 em, h1 .mark, .tmx-title em) {
  color: var(--tmh-highlight) !important;
}

html[data-tm-subhero-tone] :is(
  .tm-phero,
  .tm-page-hero,
  body.tmx-pro-page .tmx-pro-hero,
  body.tmx-express-page .tmx-hero,
  .tm-subhero-generic-v36
) :is(.tm-lead, .tm-sub, .tmx-section-lead, .tmx-hero-lead, p) {
  color: #eaf3f7 !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .70);
}

html[data-tm-subhero-tone] :is(
  .tm-phero,
  .tm-page-hero,
  body.tmx-pro-page .tmx-pro-hero,
  body.tmx-express-page .tmx-hero,
  .tm-subhero-generic-v36
) :is(.tm-eyebrow, .tmx-kicker, .tmseo-kicker) {
  color: var(--tmh-accent-soft) !important;
  background: transparent !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .76);
}

html[data-tm-subhero-tone] :is(.tm-phero, .tm-page-hero) .tm-crumbs {
  border-color: rgba(255, 255, 255, .24) !important;
  background: rgba(8, 10, 16, .62) !important;
  color: #dcebef !important;
  backdrop-filter: blur(10px);
}

html[data-tm-subhero-tone] :is(.tm-phero, .tm-page-hero) .tm-crumbs a {
  color: #fff !important;
}

html[data-tm-subhero-tone] :is(
  .tm-phero,
  .tm-page-hero,
  body.tmx-pro-page .tmx-pro-hero,
  body.tmx-express-page .tmx-hero,
  .tm-subhero-generic-v36
) :is(.tm-btn-primary, .tmx-btn-primary, .tmx-btn:not(.tmx-btn-secondary), .tm-btn:not(.tm-btn-ghost)) {
  border-color: #00c9e8 !important;
  background: #00c9e8 !important;
  color: #091018 !important;
  box-shadow: 0 18px 38px -18px rgba(0, 201, 232, .92) !important;
}

html[data-tm-subhero-tone] :is(
  .tm-phero,
  .tm-page-hero,
  body.tmx-pro-page .tmx-pro-hero,
  body.tmx-express-page .tmx-hero,
  .tm-subhero-generic-v36
) :is(.tm-btn-ghost, .tmx-btn-secondary) {
  border-color: rgba(255, 255, 255, .66) !important;
  background: rgba(8, 10, 16, .58) !important;
  color: #fff !important;
  backdrop-filter: blur(8px);
}

html[data-tm-subhero-tone] :is(
  .tm-phero,
  .tm-page-hero,
  body.tmx-pro-page .tmx-pro-hero,
  body.tmx-express-page .tmx-hero,
  .tm-subhero-generic-v36
) :is(.tm-btn, .tmx-btn):hover,
html[data-tm-subhero-tone] :is(
  .tm-phero,
  .tm-page-hero,
  body.tmx-pro-page .tmx-pro-hero,
  body.tmx-express-page .tmx-hero,
  .tm-subhero-generic-v36
) :is(.tm-btn, .tmx-btn):focus-visible {
  border-color: #72edfb !important;
  background: #72edfb !important;
  color: #091018 !important;
}

html[data-tm-subhero-tone] :is(
  .tm-phero,
  .tm-page-hero,
  body.tmx-pro-page .tmx-pro-hero,
  body.tmx-express-page .tmx-hero
) :is(.tm-phero-img, .tmx-pro-media img, figure img, .tmx-hero-media img) {
  border-color: rgba(255, 255, 255, .48) !important;
  box-shadow: 0 34px 84px -34px rgba(0, 0, 0, .92) !important;
}

@media (max-width: 980px) {
  html[data-tm-subhero-tone] :is(
    .tm-phero,
    .tm-page-hero,
    body.tmx-pro-page .tmx-pro-hero,
    body.tmx-express-page .tmx-hero,
  .tm-subhero-generic-v36
  ) {
    background-position: center, center, center center !important;
    background-size: cover, cover, auto 100% !important;
  }

  html[data-tm-subhero-tone] :is(
    .tm-phero,
    .tm-page-hero,
    body.tmx-pro-page .tmx-pro-hero,
    body.tmx-express-page .tmx-hero,
  .tm-subhero-generic-v36
  )::before {
    background:
      linear-gradient(180deg, rgba(6, 8, 14, .88) 0%, rgba(6, 8, 14, .72) 56%, rgba(6, 8, 14, .48) 100%) !important;
  }
}

@media (prefers-reduced-data: reduce) {
  html[data-tm-subhero-tone] :is(
    .tm-phero,
    .tm-page-hero,
    body.tmx-pro-page .tmx-pro-hero,
    body.tmx-express-page .tmx-hero,
  .tm-subhero-generic-v36
  ) {
    background-image:
      radial-gradient(circle at 82% 18%, var(--tmh-glow-a), transparent 32%),
      radial-gradient(circle at 16% 92%, var(--tmh-glow-b), transparent 34%) !important;
  }
}