/* Dizajn tokeni (boje + fontovi) definirani su u css/style.css :root.
   Ovdje se NE redefiniraju - samo se koriste. */

@media only screen and (min-width: 0px) and (max-width: 1220px) {
  .wrapper > header {
    width: 100%;
  }
  .wrapper > header article {
    padding: 0 16px;
  }
  .wrapper > header img {
    max-width: 160px;
  }
  .lang_box a {
    font-size: 12px;
  }
  nav a {
    font-size: 11px;
    letter-spacing: 0.08em;
  }
  /* 1200-1220px: 9 stavki mora stati u jedan red (ispod 1200px je mobilni izbornik) */
  .wrapper > header nav ul {
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  .wrapper > header nav {
    min-width: 0;
  }
  nav li {
    margin: 0 5px;
  }
  .hpage_slider .bxslider {
    height: 450px !important;
  }
  .hpage_slider .bxslider li.bx-clone {
    height: 450px !important;
  }
  .hpage_slider .bxslider img {
    height: 450px !important;
    object-fit: cover;
  }
  .text_over_slide h1 {
    font-size: 56px;
  }
  .text_over_slide p {
    font-size: 40px;
  }
  .hpage_card {
    width: 100%;
    box-sizing: border-box;
  }
  .hpage_video iframe {
    height: 450px;
  }
  .hpage_news {
    width: 98%;
  }
  .references_featured_cnt {
    padding: 0 16px;
  }
  .about_us article {
    width: 98%;
  }
  .about_us .hist_and_social {
    width: 98%;
  }
  .map div {
    width: 98%;
  }
  .basic_site_inner_content_contact {
    width: 100%;
    padding: 0;
  }
  .basic_site_inner_content_contact article {
    margin: 0 auto;
    float: none;
    text-align: center;
  }
  .right_column_contact {
    float: none;
    margin: 50px auto 0 auto;
  }
  /* kontakt forma: "Poništi" i "Pošalji" uvijek jedan pored drugog, s razmakom.
     Razmak je margin, ne gap - reCAPTCHA izmedju gumba ubaci prazan <div>. */
  .right_column_contact .buttons_action {
    width: auto !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-wrap: nowrap;
    justify-content: center;
  }
  .right_column_contact .buttons_action input[type="reset"] {
    margin: 0 12px 0 0 !important;
  }
  .right_column_contact .buttons_action input[type="submit"] {
    margin: 0 !important;
  }
  /* reCAPTCHA omotac ne zauzima mjesto u redu (znacka u njemu je position: fixed) */
  .right_column_contact .buttons_action > div {
    display: contents;
  }
}
/* mobilni izbornik (slicknav) umjesto trake - ispod 1200px */
@media only screen and (min-width: 0px) and (max-width: 1199px) {
  .slicknav_menu {
    position: fixed;
    top: 0;
    right: 6px;
    height: 66px;
    display: flex !important;
    align-items: center;
    z-index: 1001;
    display: block;
    background-color: transparent;
    border-bottom: transparent;
    box-shadow: none;
  }
  .slicknav_btn {
    background-color: var(--surface);
  }
  .slicknav_menu .slicknav_menutxt {
    font-family: var(--mn);
    color: var(--brand);
    font-size: 14px;
    text-transform: uppercase;
  }
  .slicknav_menu .slicknav_icon {
    margin: 0em 0 0 1em;
  }
  .slicknav_menu .slicknav_icon-bar {
    background-color: var(--brand);
  }
  .slicknav_nav {
    text-transform: uppercase;
    background-color: var(--surface-2);
    border: 1px solid var(--line-d2);
    border-radius: var(--r);
  }
  .slicknav_nav a {
    font-family: var(--mn);
    color: var(--ink-soft);
    text-transform: uppercase;
    transition: 0.25s;
  }
  .slicknav_nav a:hover {
    font-family: var(--mn);
    background-color: var(--brand);
    color: #fff;
  }
  .wrapper > header {
    width: 100%;
  }
  .lang_box {
    order: 0;
    margin: 0 auto 0 0;
  }
  nav {
    display: none;
  }
}

@media only screen and (min-width: 600px) and (max-width: 800px) {
  .slicknav_menu {
    position: fixed;
    top: 0;
    right: 6px;
    height: 66px;
    display: flex !important;
    align-items: center;
    z-index: 1001;
    display: block;
    background-color: transparent;
    border-bottom: transparent;
    box-shadow: none;
  }
  .slicknav_btn {
    background-color: var(--surface);
  }
  .slicknav_menu .slicknav_menutxt {
    font-family: var(--mn);
    color: var(--brand);
    font-size: 14px;
    text-transform: uppercase;
  }
  .slicknav_menu .slicknav_icon {
    margin: 0em 0 0 1em;
  }
  .slicknav_menu .slicknav_icon-bar {
    background-color: var(--brand);
  }
  .slicknav_nav {
    text-transform: uppercase;
    background-color: var(--surface-2);
    border: 1px solid var(--line-d2);
    border-radius: var(--r);
  }
  .slicknav_nav a {
    font-family: var(--mn);
    color: var(--ink-soft);
    text-transform: uppercase;
    transition: 0.25s;
  }
  .slicknav_nav a:hover {
    font-family: var(--mn);
    background-color: var(--brand);
    color: #fff;
  }
  .wrapper > header {
    width: 100%;
  }
  .lang_box {
    order: 0;
    margin: 0 auto 0 0;
  }
  nav {
    display: none;
  }
  .hpage_slider .bxslider {
    height: 450px !important;
  }
  .hpage_slider .bxslider li.bx-clone {
    height: 450px !important;
  }
  .hpage_slider .bxslider img {
    height: 450px !important;
    object-fit: cover;
  }
  .text_over_slide h1 {
    font-size: 44px;
  }
  .text_over_slide p {
    font-size: 30px;
  }
  .hpage_card {
    width: 100%;
  }
  .hpage_video iframe {
    height: 400px;
  }
  .hpage_news {
    width: 100%;
  }
  .hpage_news > div h2 {
    padding: 20px 0 20px 30px;
  }
  .hpage_news article {
    padding: 10px 30px 20px 30px;
  }

  .references_featured_cnt {
    width: 97%;
  }
  .references_featured_cnt .bx-wrapper .bx-viewport {
    height: 70px !important;
  }
  .references_featured_cnt .bx-wrapper img {
    width: 100%;
    height: 100%;
    margin: 10px 20px;
    max-width: 90px;
  }
  .about_us article {
    width: 95%;
  }
  .about_us .hist_and_social {
    width: 95%;
  }
  .basic_site_inner_content_contact {
    display: flex;
    flex-flow: column;
    align-items: center;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }
  .basic_site_inner_content_contact .notRobot {
    display: block;
    padding-left: 35px;
  }
  .formInfoCapctha {
    padding-top: 10px;
  }
  .basic_site_inner_content_contact iframe {
    padding: 0 10px 10px 10px;
  }
  .basic_site_inner_content_contact article {
    display: flex;
    flex-flow: column;
    width: 95%;
    padding: 20px 0;
  }
  .basic_site_inner_content_contact div {
    display: flex;
    flex-flow: wrap;
    justify-content: space-evenly;
    width: 100%;
    margin: 0;
    padding: 30px 0;
  }
  .basic_site_inner_content_contact div dl div {
    padding: 10px 10px 0 10px;
    display: flex;
    flex-flow: wrap;
    width: 40%;
  }
  .right_column_contact .buttons_action {
    width: auto !important;
  }
  .contact_form dl {
    display: flex;
    flex-flow: wrap;
    justify-content: space-around;
    width: 100%;
  }
  .contact_form dt {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .contact_form dt label {
    font-size: 14px;
  }
  .contact_form dd {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .right_column_contact .consent_data {
    display: flex;
  }
  .right_column_contact .consent_data dt {
    align-self: flex-start;
    margin: 7px 0 0 0;
  }
  .right_column_contact .consent_data dd {
    display: table;
    width: 85% !important;
  }
  .map div {
    width: 90%;
  }
}

@media only screen and (min-width: 0px) and (max-width: 600px) {
  .slicknav_menu {
    position: fixed;
    top: 0;
    right: 6px;
    height: 66px;
    display: flex !important;
    align-items: center;
    z-index: 1001;
    display: block;
    background-color: transparent;
    border-bottom: transparent;
    box-shadow: none;
  }
  .slicknav_btn {
    background-color: var(--surface);
  }
  .slicknav_menu .slicknav_menutxt {
    font-family: var(--mn);
    color: var(--brand);
    font-size: 14px;
    text-transform: uppercase;
  }
  .slicknav_menu .slicknav_icon {
    margin: 0em 0 0 1em;
  }
  .slicknav_menu .slicknav_icon-bar {
    background-color: var(--brand);
  }
  .slicknav_nav {
    text-transform: uppercase;
    background-color: var(--surface-2);
    border: 1px solid var(--line-d2);
    border-radius: var(--r);
  }
  .slicknav_nav a {
    font-family: var(--mn);
    color: var(--ink-soft);
    text-transform: uppercase;
    transition: 0.25s;
  }
  .slicknav_nav a:hover {
    font-family: var(--mn);
    background-color: var(--brand);
    color: #fff;
  }
  .wrapper > header {
    width: 100%;
  }
  .wrapper > header article {
    height: 66px;
    padding: 0 14px;
  }
  .wrapper > header img {
    max-width: 130px;
  }
  .lang_box {
    order: 0;
    margin: 0 auto 0 0;
  }
  nav {
    display: none;
  }
  .hpage_slider .bxslider {
    height: 450px !important;
  }
  .hpage_slider .bxslider li.bx-clone {
    height: 450px !important;
  }
  .hpage_slider .bxslider img {
    height: 450px !important;
    object-fit: cover;
  }
  .text_over_slide p {
    font-size: 36px;
  }
  .hpage_card {
    width: 100%;
    padding: 0;
  }
  .hpage_text,
  .hpage_video {
    padding: 0 16px;
  }
  .hpage_text {
    margin-top: 48px;
  }
  .video_caption {
    font-size: 12px;
  }
  .hpage_video iframe {
    height: 200px;
  }
  .hpage_news {
    padding: 0;
  }
  .hpage_news > div h2 {
    padding: 20px 0 20px 20px;
    font-size: 20px;
  }
  .hpage_news article {
    padding: 10px 20px 26px 20px;
    flex-direction: column;
    gap: 16px;
  }
  .hpage_news .news_thumb {
    flex: 0 0 auto;
    width: 100%;
  }
  .hpage_news .news_thumb img {
    height: 190px;
  }
  .hpage_news article h3 {
    font-size: 21px;
  }
  .hpage_news article p {
    font-size: 14px;
  }
  .references_featured_cnt {
    padding: 0 16px;
    width: 100%;
  }
  .references_featured_cnt .bx-wrapper .bx-viewport {
    height: 55px !important;
  }
  .references_featured_cnt .bx-wrapper img {
    width: 100%;
    height: 100%;
    margin: 10px 20px;
    max-width: 55px;
  }

  .about_us article {
    width: 90%;
  }
  .about_us article figure {
    float: none;
    width: 100%;
    margin: 0;
  }
  .about_us .hist_and_social {
    width: 90%;
  }
  .map div {
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
  }
  .map iframe {
    width: 100%;
    height: 300px;
  }
  .basic_site_inner_content_contact {
    display: flex;
    flex-flow: column;
    align-items: center;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }
  .basic_site_inner_content_contact .notRobot {
    display: block;
    width: 230px;
    padding: 0;
  }
  .formInfoCapctha {
    padding: 0;
  }
  .basic_site_inner_content_contact iframe {
    padding: 0 10px 10px 10px;
  }
  .basic_site_inner_content_contact article {
    display: flex;
    flex-flow: column;
    width: 95%;
    text-align: center;
    padding-top: 15px;
  }
  .basic_site_inner_content_contact div {
    display: flex;
    flex-flow: wrap;
    justify-content: space-evenly;
    width: 100%;
    margin: 0;
  }
  .basic_site_inner_content_contact div.consent_data {
    display: table;
    padding: 0 10px;
    width: 100%;
  }
  .contact_form div.consent_data dd,
  .consent_data dd {
    width: 93% !important;
    display: table;
  }
  .contact_form dl {
    display: flex;
    flex-flow: wrap;
    justify-content: space-evenly;
    padding: 20px 0;
  }
  .contact_form dt label {
    font-size: 14px;
  }
  .contact_form dt {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 10px !important;
  }
  .contact_form dd {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .contact_form dd textarea {
    width: 100%;
  }
  .right_column_contact .buttons_action {
    width: auto !important;
  }
  #toTop {
    right: 35px;
  }
}
/* --- MOBILNI IZBORNIK ispod 1200px: sticky traka fiksne visine + izbornik
   preko cijelog ekrana koji uklizava odozgo (po Y osi).
   SlickNav (addons/js/jquery.slick.menu) pri otvaranju odmah makne klasu
   .slicknav_hidden s .slicknav_nav, a gumbu doda .slicknav_open - na tome
   se vrti animacija i zakljucavanje skrola. Njegov slideDown/slideUp se
   ponistava s !important (display/height/padding/overflow). --- */
@media only screen and (max-width: 1199px) {
  .wrapper > header article,
  body.scrolled .wrapper > header article {
    height: 66px;
  }
  .wrapper > header img,
  body.scrolled .wrapper > header img {
    max-height: 46px;
  }

  /* gumb iznad izbornika i svega ostalog (.slicknav_menu je z-index 1001, iznad headera) */
  .slicknav_btn {
    position: relative;
    z-index: 999;
  }

  /* izbornik preko cijelog ekrana */
  .slicknav_nav {
    position: fixed;
    inset: 0;
    z-index: 998;
    display: block !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 96px 24px 48px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    box-sizing: border-box;
    background-color: var(--paper);
    border: 0;
    border-radius: 0;
    text-transform: none;
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
      visibility 0s linear 0.45s;
  }
  .slicknav_nav:not(.slicknav_hidden) {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s;
  }

  /* dok je izbornik otvoren, stranica se ne skrola */
  html:has(.slicknav_btn.slicknav_open),
  html:has(.slicknav_btn.slicknav_open) body {
    overflow: hidden;
  }

  /* stavke */
  .slicknav_nav > li {
    border-bottom: 1px solid var(--line-d2);
  }
  .slicknav_nav > li > a,
  .slicknav_nav .slicknav_row,
  .slicknav_nav .slicknav_row > a {
    font-family: var(--ds);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--ink);
    background: none;
  }
  .slicknav_nav > li > a,
  .slicknav_nav .slicknav_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 16px 4px;
  }
  .slicknav_nav .slicknav_row > a {
    padding: 0;
  }
  .slicknav_nav a:hover,
  .slicknav_nav .slicknav_row:hover > a {
    background: none;
    color: var(--brand);
  }
  .slicknav_nav a.active {
    color: var(--brand);
  }
  .slicknav_nav .slicknav_arrow {
    font-size: 13px;
    color: var(--brand);
    margin: 0 0 0 12px;
  }

  /* podizbornik (Usluge) */
  .slicknav_nav .submenu {
    margin: 0;
    padding: 0 4px 14px 16px;
    background: none;
  }
  .slicknav_nav .submenu a {
    display: block;
    padding: 9px 0;
    font-family: var(--bd);
    font-size: 17px;
    font-weight: 400;
    text-transform: none;
    color: var(--ink-soft);
  }
  .slicknav_nav .submenu .sm-all a {
    font-family: var(--mn);
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--brand);
  }

  /* ikona gumba postaje X dok je izbornik otvoren */
  .slicknav_menu .slicknav_icon-bar {
    transition: transform 0.3s, opacity 0.2s;
  }
  .slicknav_btn.slicknav_open .slicknav_icon-bar:nth-child(1) {
    transform: translateY(0.309em) rotate(45deg);
  }
  .slicknav_btn.slicknav_open .slicknav_icon-bar:nth-child(2) {
    opacity: 0;
  }
  .slicknav_btn.slicknav_open .slicknav_icon-bar:nth-child(3) {
    transform: translateY(-0.309em) rotate(-45deg);
  }
}