/* Match the fixed-width composition and supplied artwork of the live site. */
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/OpenSans-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/OpenSans-Bold.ttf') format('truetype'); }
:root { --accent: #f5863c; --font-body: 'Open Sans', Arial, Helvetica, sans-serif; }
*, *::before, *::after { box-sizing: border-box; }
html { min-width: 1360px; }
body { min-width: 1360px; margin: 0; background: #06779e; color: #fff; font: 13.333px/1.6 var(--font-body); }
.wrap { width: 1360px; max-width: none; margin: 0 auto; padding: 0; }
img { max-width: none; }
a { color: #fff; text-decoration: none; }
a:hover, a:focus { color: #f5863c; }
h1, h2, h3 { color: #fff; }
p { margin: 0 0 6px; }

.site-header, .site-header--plain {
  display: block;
  position: relative;
  width: 1360px;
  height: 488px;
  min-height: 488px;
  margin: 0 auto;
  background-color: #06779e;
  background-size: 1360px 1020px;
  background-position: center top;
  background-repeat: no-repeat;
}
.site-header--plain { background-image: none !important; }
.site-header::before, .site-header--plain::before {
  display: block;
  content: '';
  position: absolute;
  inset: 0;
  background: url('/assets/images/jd_web_kk_top_modern.png') no-repeat center top;
  pointer-events: none;
}
.site-header__bar { position: relative; z-index: 1; padding: 0; }
.site-header__inner { display: block; position: relative; width: 1360px; height: 488px; padding: 0; }
.logo { position: absolute; top: 20px; left: 20px; z-index: 2; width: 500px; height: 179px; display: flex; align-items: flex-start; gap: 10px; }
.logo img { width: 180px; height: 179px; border-radius: 0; }
.logo__text { margin-top: 10px; font: 26.667px/1.3 'Open Sans', Arial, sans-serif; color: #fff; }
.logo:hover .logo__text { color: #fff; }
.nav-toggle { display: none; }
.site-nav, .site-nav.is-open { display: block !important; width: 1360px; height: 488px; }
.site-nav ul, .site-nav > ul:first-child { border: 0; margin: 0; padding: 0; list-style: none; }
.site-nav > ul:first-child { position: absolute; top: 212px; right: 0; display: block; width: 389px; }
.site-nav > ul:first-child li { display: block; width: 389px; height: 44px; margin: 1px 0 0; background: url('/assets/images/menu_1.png') no-repeat center top; }
.site-nav > ul:first-child li:nth-child(2) { background-image: url('/assets/images/menu_2.png'); }
.site-nav > ul:first-child li:nth-child(3) { background-image: url('/assets/images/menu_3.png'); }
.site-nav > ul:first-child li:nth-child(4) { background-image: url('/assets/images/menu_4.png'); }
.site-nav > ul:first-child li:nth-child(5) { background-image: url('/assets/images/menu_5.png'); }
.site-nav > ul:first-child li:first-child:is(.is-current, :hover) { background-image: url('/assets/images/menu_1_a.png'); }
.site-nav > ul:first-child li:nth-child(2):is(.is-current, :hover) { background-image: url('/assets/images/menu_2_a.png'); }
.site-nav > ul:first-child li:nth-child(3):is(.is-current, :hover) { background-image: url('/assets/images/menu_3_a.png'); }
.site-nav > ul:first-child li:nth-child(4):is(.is-current, :hover) { background-image: url('/assets/images/menu_4_a.png'); }
.site-nav > ul:first-child li:nth-child(5):is(.is-current, :hover) { background-image: url('/assets/images/menu_5_a.png'); }
.site-nav > ul:first-child li a { display: block; width: 100%; height: 100%; padding: 8px 36px; color: #fff; font: 21.333px/27px 'Open Sans', Arial, sans-serif; letter-spacing: 0; }
.lang-switch { position: absolute; top: 331px; left: 175px; display: block !important; width: 170px; border: 0; margin: 0 !important; padding: 0; }
.lang-switch li { height: 30px; line-height: 30px; }
.lang-switch li a, .lang-switch li span { display: inline-flex; align-items: center; gap: 5px; padding: 0; color: #fff !important; font: 13.333px/30px 'Open Sans', Arial, sans-serif; }
.lang-switch li a { text-decoration: underline; }
.lang-switch img { width: 18px; height: 12px; border-radius: 0; }
.style-switch { position: absolute; top: 104px; left: 965px; display: flex !important; gap: 0; width: auto; border: 0; margin: 0 !important; padding: 0; transform: rotate(-8deg); }
.style-switch li { display: inline; }
.style-switch__btn { border: 0; background: transparent; padding: 0 5px; color: #fff; text-decoration: none; font: 13.333px/20px 'Open Sans', Arial, sans-serif; cursor: pointer; }
.style-switch__btn[data-style='retro'] { color: #005471; font: 17px/20px 'Quarzo', cursive; }
.style-switch__btn[data-style='modern'] { font-weight: 400; }
.page-title { display: none; }

main.wrap {
  display: block;
  position: relative;
  width: 1360px;
  min-height: 534px;
  height: 534px;
  border: 0;
  padding: 34px 60px 0;
  background: url('/assets/images/jd_web_kk_bottom_modern.png') no-repeat center bottom;
}
main.wrap::before { content: ''; position: absolute; top: 0; left: 50%; width: 100vw; min-width: 1360px; height: 11px; transform: translateX(-50%); background: #f5863c; }
main.wrap > .content-block { width: 900px; margin: 0; }
main.wrap > .content-block p { margin: 0 0 6px; font-size: 13.333px; line-height: 21px; }
main.wrap > .content-block .lede { font-size: 13.333px; }
.page-home main.wrap > .content-block p,
.page-software-law main.wrap > .content-block p { text-align: justify; }
.content-block a { color: #fff; text-decoration: underline; }
.content-block a:hover { color: #f5863c; }

.site-footer { min-width: 1360px; height: 32px; margin: 0; padding: 0; background: #f5863c; color: #fff; }
.site-footer__inner { position: relative; width: 1360px; height: 32px; padding: 0 6px; text-align: center; font: 13.333px/32px 'Open Sans', Arial, sans-serif; }
.footer-nav { position: absolute; top: 0; left: 6px; display: flex; align-items: center; height: 32px; margin: 0; }
.footer-nav li + li::before { height: 15px; margin: 0 9px; background: rgba(255,255,255,.6); }
.footer-nav a { font: 13.333px/32px 'Open Sans', Arial, sans-serif; letter-spacing: 0; }
.site-footer .copyright { position: absolute; top: 0; left: 555px; display: inline; margin: 0; font: inherit; }
.site-footer .dizajn { position: absolute; top: 0; right: 6px; margin: 0; font: inherit; }

.retro-mode body { background-color: #b39975; color: #005471; font: 16px/1.6 'Times New Roman', Times, serif; }
.retro-mode a { color: #005471; }
.retro-mode a:hover { color: #f5863c; }
.retro-mode h1, .retro-mode h2, .retro-mode h3 { color: #005471; }
.retro-mode .site-header { background-color: #b39975; }
.retro-mode .logo__text { color: #005471; font: 26.667px/1.5 'Quarzo', cursive; }
.retro-mode .logo:hover .logo__text { color: #005471; }
.retro-mode .site-header::before { background-image: url('/assets/images/jd_web_kk_top_retro.png'); }
.retro-mode .site-nav > ul:first-child li:first-child { background-image: url('/assets/images/menu_retro_1.png'); }
.retro-mode .site-nav > ul:first-child li:nth-child(2) { background-image: url('/assets/images/menu_retro_2.png'); }
.retro-mode .site-nav > ul:first-child li:nth-child(3) { background-image: url('/assets/images/menu_retro_3.png'); }
.retro-mode .site-nav > ul:first-child li:nth-child(4) { background-image: url('/assets/images/menu_retro_4.png'); }
.retro-mode .site-nav > ul:first-child li:nth-child(5) { background-image: url('/assets/images/menu_retro_5.png'); }
.retro-mode .site-nav > ul:first-child li:first-child:is(.is-current, :hover) { background-image: url('/assets/images/menu_1_a.png'); }
.retro-mode .site-nav > ul:first-child li:nth-child(2):is(.is-current, :hover) { background-image: url('/assets/images/menu_2_a.png'); }
.retro-mode .site-nav > ul:first-child li:nth-child(3):is(.is-current, :hover) { background-image: url('/assets/images/menu_3_a.png'); }
.retro-mode .site-nav > ul:first-child li:nth-child(4):is(.is-current, :hover) { background-image: url('/assets/images/menu_4_a.png'); }
.retro-mode .site-nav > ul:first-child li:nth-child(5):is(.is-current, :hover) { background-image: url('/assets/images/menu_5_a.png'); }
.retro-mode .site-nav > ul:first-child li a { color: #fff; font-family: 'Quarzo', cursive; }
.retro-mode .site-nav > ul:first-child li.is-current a,
.retro-mode .site-nav > ul:first-child li:hover a { color: #fff; }
.retro-mode .lang-switch li a { color: #fff !important; }
.retro-mode .lang-switch li span { color: #005471 !important; }
.retro-mode .style-switch { top: 89px; transform: rotate(-11deg); }
.retro-mode main.wrap { background-image: url('/assets/images/jd_web_kk_bottom_retro.png'); }
.retro-mode main.wrap::before { background: #614719; }
.retro-mode main.wrap > .content-block p { color: #005471; font: 16px/1.6 'Times New Roman', Times, serif; }
.retro-mode .content-block a { color: #005471; text-decoration: none; }
.retro-mode .site-footer { background: #614719; }
.retro-mode .footer-nav a { color: #fff; }
.retro-mode .footer-nav a:hover { color: #222; }
.retro-mode .style-switch__btn[data-style='retro'] { color: #005471; font-weight: 400; }
.retro-mode .style-switch__btn[data-style='modern'] { color: #fff; font-family: 'Open Sans', Arial, sans-serif; }
.retro-mode .practice-list summary { color: #005471; font: 600 16px/28px 'Times New Roman', Times, serif; }
.retro-mode .practice-list summary::before { background: #614719; }
.retro-mode .practice-list details[open] summary { color: #005471; }
.retro-mode .practice-list details[open] summary::before { background: #005471; }
.retro-mode .practice-list .practice-body { background: transparent; box-shadow: none; color: #005471; font: 13.333px/24px 'Times New Roman', Times, serif; }
.retro-mode main.wrap > .practice-list .practice-body p { color: #005471; font: 13.333px/24px 'Times New Roman', Times, serif; }
.retro-mode .practice-list details[open] { height: auto; }
.retro-mode .practice-list details[open] .practice-body { position: static; width: 450px; max-height: none; overflow: visible; padding: 8px 0 4px 20px; }
.retro-mode .contact-form label { color: #005471; font: 16px/18px 'Times New Roman', Times, serif; }
.retro-mode main.wrap .contact-form input[type='text'],
.retro-mode main.wrap .contact-form input[type='email'],
.retro-mode main.wrap .contact-form textarea { border: 2px inset #767676; }
.retro-mode .software-intro summary { color: #005471; font: 600 16px/28px 'Times New Roman', Times, serif; }
.retro-mode .software-intro summary::before { background: #614719; }
.retro-mode .software-intro[open] summary::before { background: #005471; }
.retro-mode .page-software-law .downloads li::before { color: #614719; }
.retro-mode .downloads a { color: #005471; font: 700 16px/1.5 'Times New Roman', Times, serif; }

/* Page content keeps its existing semantics while matching the live spacing. */
main.wrap > .practice-list { display: grid; grid-template-columns: 450px 450px; column-gap: 15px; width: 915px; border: 0; }
.practice-column { width: 450px; }
.practice-list details { position: relative; height: 44px; border: 0; }
.practice-list summary { position: relative; padding: 0 0 0 50px; color: #fff; font: 700 13.333px/28px 'Open Sans', Arial, sans-serif; }
.practice-list summary::before { content: ''; position: absolute; top: 6px; left: 20px; width: 12px; height: 12px; border-radius: 3px; background: #f5863c; }
.practice-list summary::after { display: none; }
.practice-list details[open] { z-index: 3; }
.practice-list details[open] summary { color: #fff; }
.practice-list .practice-body { position: absolute; top: 30px; left: 20px; width: 400px; max-height: 260px; overflow: auto; padding: 12px; background: #035b79; box-shadow: 0 3px 12px #003e55; color: #fff; }

.software-intro { border: 0; }
.software-intro summary { position: relative; padding: 0 0 0 50px; color: #fff; font: 700 13.333px/28px 'Open Sans', Arial, sans-serif; list-style: none; cursor: pointer; }
.software-intro summary::-webkit-details-marker { display: none; }
.software-intro summary::before { content: ''; position: absolute; top: 6px; left: 20px; width: 12px; height: 12px; border-radius: 3px; background: #f5863c; }
.software-intro__body { width: 900px; max-height: 300px; overflow: auto; padding: 12px 0 10px 20px; }
.page-software-law .downloads { margin: 48px 0 0 20px; }
.page-software-law .downloads li { min-height: 59px; padding: 9px 0 0 54px; }
.page-software-law .downloads li::before { content: 'PDF'; top: 0; width: 35px; height: 45px; border: 3px solid currentColor; border-radius: 2px; color: #f5863c; font: 700 10px/40px Arial, sans-serif; text-align: center; }
.page-software-law .downloads a { font-weight: 700; }

main.wrap > .two-col { display: flex; width: 920px; gap: 10px; align-items: flex-start; }
.two-col > .info-card { flex: 0 0 300px; width: 300px; padding: 0; border: 0; border-radius: 0; background: none; }
.info-card p, .info-card p:last-child { margin: 0 0 6px; }
.two-col > .form-col { flex: 0 0 610px; width: 610px; }
.contact-form #two-column { display: flex; gap: 10px; }
.contact-form #left, .contact-form #right { flex: 0 0 300px; width: 300px; }
.contact-form .field { margin: 0 0 8px; }
.contact-form label { color: #fff; font: 13.333px/18px 'Open Sans', Arial, sans-serif; margin: 0 0 3px; }
.contact-form input[type='text'], .contact-form input[type='email'] { height: 24px; padding: 1px 4px; border: 1px solid #ccc; border-radius: 0; font: 13.333px Arial, sans-serif; }
.contact-form textarea { height: 185px; min-height: 185px; padding: 2px 4px; border: 1px solid #ccc; border-radius: 0; font: 13.333px Arial, sans-serif; }
.contact-form .btn { padding: 2px 8px; border: 1px solid #aaa; border-radius: 2px; background: #eee; color: #111; font: 13.333px Arial, sans-serif; }
.contact-form .btn:hover { color: #111; background: #ddd; }
.map-frame { width: 590px; height: 400px; border-radius: 0; box-shadow: 6px 6px 6px #383838; }
.downloads li { border: 0; }