/* ==========================================================================
   Base / Reset
   ========================================================================== */

html, body {
	overflow-x: hidden;
}
body {
	background: #fff;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	font-family: 'Montserrat', sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
}
* {
	outline: none;
}
:root {
	scroll-behavior: smooth;
}
a:hover, a:focus {
	color: #000;
}
.clear {
	clear: both;
}
h1, h2, h3, h4, h5, h6 {
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
	line-height: 1em;
}
h2 {
	color: #517aa1;
	font-size: 3rem;
	margin: 0;
	padding: 0 0 1rem 0;
}
h3 {
	color: #517aa1;
	font-size: 3rem;
	margin: 0;
	padding: 0 0 1rem 0;
	text-align: center;
	font-weight: 600;
}
p, ul, ol {
	font-family: 'Montserrat', sans-serif;
	font-weight: normal;
	font-size: 1.2rem;
	line-height: 1.5em;
}
section {
	flex: 1;
	padding: 2rem 0;
}
video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 2rem;
}
.btn {
	display: inline-block;
	background-color: #2b374c;
	color: #fff;
	text-align: center;
	margin: 1rem 0;
	padding: 1rem 2rem;
	text-transform: uppercase;
	width: auto;
	border-radius: 1rem;
	font-weight: 600;
	font-size: 1.2rem;
	line-height: 1em;
	cursor: pointer;
}
.btn:focus, .btn:active, .btn:hover {
	color: #fff;
	background-color: #ed1d24;
}

/* ==========================================================================
   Header
   ========================================================================== */

header {
	background-color: #2b374c;
	width: 100%;
	position: relative;
}
h1 {
	text-indent: -99999px;
	margin: 0;
	padding: 1rem 0;
}
h1 a {
	background: url("/assets/img/hkzi_logo.svg") center center no-repeat;
	background-size: contain;
	width: 100%;
	max-width: 100px;
	display: block;
	aspect-ratio: 700 / 638;
}
ul#langs {
	list-style-type: none;
	margin: 0;
	padding: 0;
	float: right;
	z-index: 2;
	position: relative;
}
ul#langs li {
	display: inline-block;
}
ul#langs li a {
	display: block;
	padding: 0.5rem;
	font-family: 'Arial Rounded MT', sans-serif;
	color: #6f93b6;
	text-transform: uppercase;
}
ul#langs li a:hover {
	color: #ed1d24;
}
ul#langs li a:active, ul#langs li a:focus, ul#langs li a.active {
	color: #fff;
}

/* ==========================================================================
   Navigation
   ========================================================================== */

nav {
	width: 100%;
	padding: 0;
	text-align: center;
	z-index: 1;
	position: relative;
	background-color: #2b374c;
}
nav ul {
	margin: 0;
	padding: 2.75rem 0;
	list-style-type: none;
}
nav ul li {
	display: inline-block;
}
nav a {
	color: #6f93b6;
	font-family: 'Arial Rounded MT', sans-serif;
	font-size: 1rem;
	text-transform: uppercase;
	line-height: 1.2em;
	padding: 0.5rem;
	display: block;
}
nav a:hover {
	color: #ed1d24;
}
nav a:active, nav a:focus, nav a.active {
	color: #fff;
}

/* ==========================================================================
   Mobile hamburger menu
   ========================================================================== */

#spinner_master_container {
	display: none;
	z-index: 999999;
	position: absolute;
	top: 0;
	right: 0;
}
#spinner_master_container .columns {
	padding: 0;
}
.spinner-master {
	position: relative;
	margin: 10px;
	height: 30px;
	width: 40px;
	float: right;
}
.spinner-master * {
	transition: all 0.3s;
	box-sizing: border-box;
}
.spinner-master input[type="checkbox"] {
	display: none;
}
.spinner-master input[type="checkbox"] + label:before,
.spinner-master input[type="checkbox"]:checked + label:before {
	display: none;
}
.spinner-master input[type="checkbox"] + label {
	height: 30px;
}
.spinner-master label {
	cursor: pointer;
	position: absolute;
	z-index: 99;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	margin: 0;
	text-indent: -999999px;
}
.spinner-master .spinner {
	position: absolute;
	height: 5px;
	width: 100%;
	background-color: #fff;
	border-radius: 3px;
}
.spinner-master .diagonal.part-1 {
	position: relative;
	float: left;
}
.spinner-master .horizontal {
	position: relative;
	float: left;
	margin-top: 5px;
}
.spinner-master .diagonal.part-2 {
	position: relative;
	float: left;
	margin-top: 5px;
}
.spinner-master input[type="checkbox"]:checked ~ .spinner-spin > .horizontal {
	opacity: 0;
}
.spinner-master input[type="checkbox"]:checked ~ .spinner-spin > .diagonal.part-1 {
	transform: rotate(135deg);
	margin-top: 10px;
}
.spinner-master input[type="checkbox"]:checked ~ .spinner-spin > .diagonal.part-2 {
	transform: rotate(-135deg);
	margin-top: -15px;
}
input[type='checkbox'] + label.spinner-spin,
input[type='radio'] + label.spinner-spin {
	width: 100% !important;
}

/* ==========================================================================
   Home - Intro
   ========================================================================== */

.home_1 {
	background-color: #e5f4f7;
}
.home_1 .logo {
	max-width: 200px;
}
.home_1 p {
	font-weight: 600;
	color: #6f93b6;
}

/* ==========================================================================
   Home - Kalendar cijepljenja & Dodatna cjepiva
   ========================================================================== */

.table_container {
	overflow-x: auto;
	margin: 2rem 0;
}

/* Zajednički stilovi za obje tablice */
table#calendar,
table#timeline {
	background-color: #fef5f7;
	empty-cells: show;
	table-layout: auto;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 2rem;
	overflow: hidden;
	border: 1px solid #517aa1;
	line-height: 1em;
	font-weight: 600;
}
table#calendar tr,
table#timeline tr {
	background-color: #fef5f7;
}
table#calendar td, table#calendar th,
table#timeline td, table#timeline th {
	border-bottom: 1px solid #517aa1;
	border-right: 1px solid #517aa1;
	text-align: center;
	vertical-align: middle;
	width: 80px;
}
table#calendar th,
table#timeline th {
	padding: 0.5rem 0;
}
table#calendar tr td:first-child, table#calendar tr th:first-child,
table#timeline tr td:first-child, table#timeline tr th:first-child {
	text-align: left;
	padding: 0 0 0 1rem;
	width: auto;
}
table#calendar tr th:first-child,
table#timeline tr th:first-child {
	text-align: center;
	padding: 0;
}
table#calendar tr:last-child, table#calendar tr td:last-child, table#calendar tr th:last-child,
table#timeline tr:last-child, table#timeline tr td:last-child, table#timeline tr th:last-child {
	border-right: none;
}
table#calendar tr:last-child td,
table#timeline tr:last-child td {
	border-bottom: none;
}
tbody th, tbody td {
	padding: 0;
}

/* Kalendar - linkovi u ćelijama */
table#calendar tr td a {
	display: block;
	width: 100%;
	height: 100%;
	background-color: #e5f4f7;
	padding: 0.5rem 0.2rem;
}
table#calendar tr td a:hover {
	background-color: #2b374c;
	color: #fff;
}

/* Dodatna cjepiva - specifično */
table#timeline td, table#timeline th {
	width: 60px;
	height: 33px;
}
table#timeline tbody tr.group th {
	background: #517aa1;
	text-align: left;
	font-size: 1rem;
	color: #fff;
	padding: 0 0 0 1rem;
}

/* Legenda i stanja ćelija */
.legend {
	margin-bottom: 12px;
}
.legend span {
	display: inline-block;
	padding: 0.5rem 1rem;
	margin-right: 1rem;
	border-radius: 0.5rem;
	font-size: 0.8rem;
}
.legend .init  { background: #4da3ff; color: #000; }
.legend .boost { background: #8ad46f; color: #000; }
td.empty { background: #fff; }
td.init  { background: #4da3ff; }
td.boost { background: #8ad46f; }

/* Napomene ispod tablica */
p.table_caption, ol.table_caption {
	font-size: 0.8rem;
	padding: 0 0 0 40px;
}
ol.table_caption {
	list-style: none;
	counter-reset: item;
	padding: 0;
	margin-left: 0;
}

ol.table_caption li {
	counter-increment: item;
	position: relative;
	padding-left: 40px;
}

ol.table_caption li::before {
	content: counter(item) ".";
	position: absolute;
	left: 0;
	width: 20px;
	text-align: right;
	padding-right: 20px;
}
p.table_caption span {
	font-weight: 600;
	display: inline-block;
	width: 40px;
	margin-left: -40px;
}

/* ==========================================================================
   Home - Karta (Gdje se možete cijepiti?)
   ========================================================================== */

.home_map {
	background-color: #e5f4f7;
}
.home_map h3 {
	margin-bottom: 1rem;
}
#map_wrap {
	position: relative;
}
#croatia_map {
	width: 100%;
	height: auto;
}
#croatia_map #features path {
	fill: #6f93b6;
	stroke: #fff;
	stroke-width: 1.5;
	cursor: pointer;
	transition: fill 0.2s ease;
}
#croatia_map #features path:hover {
	fill: #2b374c;
}
#croatia_map #features path.active {
	fill: #ed1d24;
}
#croatia_map #points,
#croatia_map #label_points {
	display: none;
}

/* Hover tooltip */
#map_name_tooltip {
	display: none;
	position: absolute;
	z-index: 100;
	background: #2b374c;
	color: #fff;
	border-radius: 0.5rem;
	padding: 0.4rem 0.8rem;
	pointer-events: none;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.3em;
	white-space: nowrap;
}
#map_name_tooltip.visible {
	display: block;
}

/* Detail panel */
#map_detail {
	background: #fff;
	border-radius: 1rem;
	padding: 1.5rem;
	position: relative;
	height: auto;
}
#map_detail_placeholder {
	color: #6f93b6;
	font-size: 1.1rem;
	font-weight: 600;
	text-align: center;
	padding: 3rem 1rem;
}
#map_detail h4 {
	color: #2b374c;
	font-size: 1.3rem;
	font-weight: 700;
	margin: 0 0 0.8rem 0;
	padding: 0 0 0.5rem 0;
	border-bottom: 2px solid #e5f4f7;
}
.map_station {
	padding: 0.6rem 0;
	border-bottom: 1px solid #eee;
	font-size: 0.85rem;
	line-height: 1.5em;
}
.map_station:last-child {
	border-bottom: none;
}
.map_station strong {
	color: #517aa1;
	font-size: 0.95rem;
}
.map_station em {
	color: #666;
	font-size: 0.8rem;
}
.map_station a {
	color: #517aa1;
	word-break: break-all;
}
.map_station a:hover {
	color: #ed1d24;
}
.map_label {
	font-weight: 600;
	color: #333;
}
.map_vaccines {
	margin-top: 0.8rem;
	padding-top: 0.8rem;
	border-top: 2px solid #e5f4f7;
}
.map_vaccines strong {
	display: block;
	margin-bottom: 0.4rem;
	color: #2b374c;
	font-size: 0.95rem;
}
.map_vaccines ul {
	margin: 0;
	padding: 0 0 0 1.2rem;
	font-size: 0.8rem;
	line-height: 1.4em;
	columns: 2;
}
.map_vaccines ul li {
	margin-bottom: 0.15rem;
}

/* ==========================================================================
   Cijepljenje - Accordion
   ========================================================================== */

.accordion {
	margin: 2rem 0;
}
.accordion-title {
	background-color: #fef5f7;
	border: 1px solid #e6e6e6;
	margin-bottom: 2px;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.2rem;
	font-weight: 600;
}
.nested-accordion .accordion-title,
.nested-accordion-2 .accordion-title {
	background-color: #fef5f7;
	font-size: 1rem;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
}
.accordion-content {
	border: 1px solid #e6e6e6;
	border-top: none;
	padding: 1rem;
}
.accordion-content p,
.accordion-content ol,
.accordion-content ul {
	font-size: 1rem;
	margin-bottom: 1rem;
}

/* ==========================================================================
   Novosti
   ========================================================================== */

.novosti {
	background-color: #e5f4f7;
}
.news_container_container {
	display: flex;
	position: relative;
}
.news_container, .content_container {
	background: #fff;
	width: 100%;
}
.news_container {
	padding-bottom: 4rem;
	border-radius: 1rem;
}
.news_container h3, .content_container h3 {
	margin: 0;
	text-align: left;
	font-size: 2rem;
	line-height: 1.2em;
}
.news_container h3 {
	padding: 0.9375rem 1.875rem;
	font-size: 1.5rem;
}
.news_container p {
	font-size: 1rem;
	line-height: 1.5em;
	padding: 0.9375rem 1.875rem;
}
.news_container .btn {
	position: absolute;
	bottom: 0.9375rem;
	right: 1.875rem;
}
p.news_date {
	font-size: 0.8rem;
	color: #666;
}
.news_image, .content_image {
	padding-top: 56.25%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 1rem;
}
.news_image_big, .content_image_big {
	width: 100%;
	height: auto;
	border-radius: 1rem;
	margin: 2rem 0;
}
.news_text, .content_text {
	position: relative;
	z-index: 1;
	padding: 1.875rem 0;
}
.news_text {
	padding: 0;
}
.news_text h2, .content_text h2 {
	width: 100%;
}
.news_text h2::before {
	display: none;
}

/* ==========================================================================
   Dokumenti
   ========================================================================== */

.documents {
	width: 100%;
	padding: 0 0 1rem 0;
}
.documents ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.documents ul li {
	width: 100%;
	margin: 2px 0;
	border: 1px solid #ccc;
	position: relative;
}
.documents ul li:hover {
	border-color: #000;
}
.documents ul li a {
	display: block;
	width: 100%;
	padding: 1rem;
	font-size: 1rem;
	line-height: 1.2em;
	font-weight: normal;
}
.documents ul li a p {
	display: inline-block;
	width: calc(100% - 100px);
	margin: 0;
	padding: 0;
	line-height: 1em;
}
.documents ul li a p span.document_date {
	color: #666;
	font-size: 0.8em;
}
i.fa-sharp {
	margin: 0 1rem 0 0;
	color: #666;
	width: 2rem;
}
.documents ul li:hover a i.fa-sharp {
	color: #000;
}
i.fa-arrow-to-bottom {
	float: right;
	margin: 0 0 0 1rem;
}
div.ext {
	position: absolute;
	top: 0;
	right: 1rem;
	text-transform: uppercase;
	font-size: 10px;
	line-height: 10px;
	text-align: center;
	width: 40px;
}

/* ==========================================================================
   Galerija (lightGallery)
   ========================================================================== */

.imgs {
	margin: 0 -2px 30px -2px;
	width: calc(100% + 5px);
	padding: 1.875rem 0;
}
.small_img {
	display: block;
	width: 25%;
	max-width: 145px;
	aspect-ratio: 1 / 1;
	position: relative;
	overflow: hidden;
	float: left;
	margin: 0;
}
.small_img div {
	width: calc(100% - 6px);
	aspect-ratio: 1 / 1;
	position: absolute;
	top: 0;
	left: 0;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
	margin: 3px;
	border-radius: 0.5rem;
}
.hidden_img {
	visibility: hidden;
	width: 0;
	height: 0;
}
.lg-backdrop {
	background-color: rgba(0,0,0,0.9);
}
.lg-sub-html h4 {
	font-weight: 500;
	font-size: 1rem;
	line-height: 1.5em;
}

/* ==========================================================================
   O nama - Tim
   ========================================================================== */

.team {
	margin-top: 4rem;
	border-top: 1px solid #eee;
	padding-top: 2rem;
}
.team_member {
	margin-bottom: 3rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid #eee;
}
.team_member:last-child {
	border-bottom: none;
}
.team_member::after {
	content: "";
	display: table;
	clear: both;
}
.team_member h3 {
	color: #2b374c;
	font-size: 1.3rem;
	margin-bottom: 0.3rem;
	text-align: left;
}
.team_member h4 {
	color: #2b374c;
	font-size: 1.5rem;
	margin-bottom: 0.3rem;
}
.team_member .team_role {
	font-style: italic;
	color: #666;
	font-size: 1rem;
	margin-bottom: 1rem;
}
.team_photo {
	float: left;
	width: 250px;
	height: auto;
	margin: 0 1.5rem 0 0;
	border-radius: 50%;
	position: relative;
	z-index: 100;
}
.team_member p {
	text-align: justify;
}

/* Expand/collapse */
.team_hidden {
	display: none;
}
.team_fade {
	position: relative;
	height: 3rem;
	margin-top: -3rem;
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	pointer-events: none;
}
.team_expanded .team_fade {
	display: none;
}
.team_more {
	display: inline-block;
	background: #2b374c;
	color: #fff;
	border: none;
	border-radius: 0.5rem;
	padding: 0.5rem 1.5rem;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	margin-top: 0.3rem;
	float: right;
}
.team_more:hover {
	background: #ed1d24;
}

/* ==========================================================================
   Content (generičke stranice)
   ========================================================================== */

.content_text {
	font-size: 1.2rem;
	line-height: 1.5em;
}
.content_text p {
	margin-bottom: 1rem;
}
.content_text ul, .content_text ol {
	margin-left: 1.5rem;
	margin-bottom: 1rem;
}
p.references {
	font-size: 0.9rem;
	color: #666;
	border-top: 1px solid #eee;
	padding-top: 1rem;
	margin-top: 1rem;
}
p.references a {
	word-break: break-all;
}

/* ==========================================================================
   Footer
   ========================================================================== */

footer {
	background-color: #2b374c;
	width: 100%;
	position: relative;
	padding: 2rem 0;
}
.logo {
	width: 100%;
	max-width: 100px;
	height: auto;
}

/* Scroll to top */
.stt {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	width: 3rem;
	height: 3rem;
	border: 1px solid #fff;
	border-radius: 50%;
	background: #2b374c url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='white' d='M352 352c-8.188 0-16.38-3.125-22.62-9.375L192 205.3l-137.4 137.4c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25C368.4 348.9 360.2 352 352 352z'%3E%3C/path%3E%3C/svg%3E") center no-repeat;
	background-size: 60% auto;
	opacity: 0.7;
}
.stt:hover  { opacity: 0.8; }
.stt:focus  { opacity: 0.9; }
.stt:active { opacity: 1; }