body {
	background: #f6f6f6;
	min-height: 100vh;
  	display: flex;
  	flex-direction: column;
	font-family: 'Barlow', sans-serif;
	overflow-x: hidden;
}
* {
	outline: none;
}
a:hover, a:focus {
	color: #000;
}
.clear {
	clear: both;
}
h1, h2, h3, h4, h5, h6 {
	font-family: 'Barlow', sans-serif;
	font-weight: 700;
	line-height: 1.2em;
}
h2, .h2 {
	font-size: 2rem;
}
h3, .h3 {
	font-size: 1.5rem;
}
p, ul, ol {
	font-family: 'Barlow', sans-serif;
	font-weight: 400;
	line-height: 1.5em;
}

/*********************************************************** HEADER ***************************************************************/

header {
	width: 100%;
	height: auto;
	background-color: #fff;
	font-family: 'Barlow', sans-serif;
	color: #333;
	padding: 0.5rem 0;
}
header a {
	color: #333;
	font-weight: 800;
}
header a:hover, header a:active {
	color: #000;
}

h1 {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	font-size: 1.5rem;
	line-height: 1em;
	text-transform: uppercase;
}
h1 a {
	width: 100%;
	height: 100%;
	display: block;
}
h1 a span {
	display: inline-block;
	width: 100%;
	font-weight: 500;
	font-size: 0.8em;
}

header address {
	height: auto;
	box-sizing: border-box;
	font-style: normal;
	float: right;
	font-size: 1.5em;
	width: 100%;
	max-width: 270px;
	position: relative;
}
header address p {
	font-weight: 500;
	line-height: 1em;
	margin: 0;
	padding: 0 0 0 2rem;
	position: relative;
}
header address p a.mail {
	font-size: 0.8em;
	font-weight: 500;
	font-family: 'Barlow Condensed', sans-serif;
}
.icon {
	width: 1.5rem;
	height: 1.5rem;
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
}
.icon.phone {
	top: 1.5rem;
}
#phone {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 2rem;
	height: 2rem;
	background: url(/assets/img/phone.svg) center center no-repeat;
	background-size: 1.2rem 1.2rem;
	
    -webkit-animation-name: spin2;
    -webkit-animation-duration: 5000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin2;
    -moz-animation-duration: 5000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin2;
    -ms-animation-duration: 5000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    
    animation-name: spin2;
    animation-duration: 5000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes spin2 {
    0% { transform: rotate(0deg); }
	5% { transform: rotate(10deg); }
    10% { transform: rotate(-10deg); }
    15% { transform: rotate(10deg); }
    20% { transform: rotate(-10deg); }
	25% { transform: rotate(10deg); }
    30% { transform: rotate(-10deg); }
    35% { transform: rotate(10deg); }
    40% { transform: rotate(-10deg); }
    45% { transform: rotate(10deg); }
    50% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}

#mail {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 2rem;
	height: 2rem;
	background: url(/assets/img/mail.svg) center center no-repeat;
	background-size: 1.2rem 1.2rem;
}


/*********************************************************** NAV ***************************************************************/

nav {
	width: 100%;
	height: auto;
	min-height: 2rem;
	background-color: #fff;
	color: #333;
	padding: 0;
	position: relative;
	z-index: 100;
}
nav ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
nav ul li {
	margin: 0 10px 0 0;
	width: calc(10% - 9px);
	text-align: left;
}
nav ul li:last-child {
	margin: 0;
}
nav ul li ul li {
	margin: 0;
	text-align: left;
}
nav a {
	color: #222;
	font-family: 'Barlow Semi Condensed', sans-serif;
	font-size: 1em;
	line-height: 1em;
	font-weight: 700;
	text-transform: uppercase;
}
nav ul li ul li a {
	text-transform: none;
	font-weight: 500;
}
nav a:hover, nav a:active, nav a:focus, .dropdown.menu.large-horizontal > li.is-active > a {
	color: #fff;
}
nav a.active, .dropdown.menu.large-horizontal > li.is-dropdown-submenu-parent > a.active:hover, .dropdown.menu.large-horizontal > li.is-active > a.active, .drilldown .is-drilldown-submenu a.active {
	color: #8dc63f;
	background-color: #222;
}
.dropdown.menu.large-horizontal > li > a {
	padding: 0.5rem 0 0.5rem 1rem;
}
.dropdown.menu.large-horizontal > li.is-dropdown-submenu-parent > a {
	padding-right: 0;
	padding-left: 0.5rem;
}
.dropdown.menu.large-horizontal > li.is-dropdown-submenu-parent > a::after, .dropdown.menu.medium-horizontal > li.is-dropdown-submenu-parent > a::after {
	border: inset 4px;
	border-color: #333333 transparent transparent;
	display: inline-block;
	left: auto;
	right: auto;
	position: relative;
	margin-left: 4px;
}
.dropdown.menu.large-horizontal > li.is-dropdown-submenu-parent.active > a::after, .dropdown.menu.medium-horizontal > li.is-dropdown-submenu-parent.active > a::after, .dropdown.menu.large-horizontal > li.is-dropdown-submenu-parent.is-active > a::after, .dropdown.menu.medium-horizontal > li.is-dropdown-submenu-parent.is-active > a::after {
	border-color: #ffffff transparent transparent;
	border-style: outset;
}


.is-dropdown-submenu, .dropdown.menu.medium-horizontal > li.opens-right > .is-dropdown-submenu {
	background: #fff;
	border: none;
	border-left: 1px solid #222;
	border-bottom: 1px solid #222;
	border-right: 1px solid #222;
	min-width: 250px;
}
.dropdown .is-dropdown-submenu a, .dropdown.menu.medium-horizontal > li.opens-right > .is-dropdown-submenu a {
	padding: 0.5rem;
}
.drilldown a, .drilldown a:hover, .drilldown .is-drilldown-submenu a:hover, .drilldown .active .is-drilldown-submenu a:hover {
	color: #333;
}
.drilldown .active a:hover  {
	color: #fff;
}
.drilldown .is-drilldown-submenu.active a:hover, .drilldown .active .is-drilldown-submenu .is-drilldown-submenu-item.active a:hover   {
	color: #fff;	
}
.drilldown .color_1_light.active .is-drilldown-submenu .is-drilldown-submenu-item.active a:hover   {
	color: #333;	
}

.is-drilldown {
	margin: 0 -0.625rem;
	overflow: visible !important;
	min-height: 0 !important;
}
.is-drilldown li {
	margin: 2px 0;
}
.drilldown a, .drilldown .is-drilldown-submenu a {
	padding: 0.5rem 1rem 0.5rem 2rem;
}
.drilldown .is-drilldown-submenu {
	
}
.drilldown .js-drilldown-back > a {
	padding: 0.5rem 1rem 0.5rem 0.5rem;
	font-weight: 700;
	text-transform: uppercase;
}
.drilldown .js-drilldown-back > a::before {
	border: inset 6px;
	border-color: transparent #000 transparent transparent;
	position: relative;
	z-index: 1;
	background-color: transparent;
	margin: -4px 0.5625rem 0 0;
	width: 0px;
	height: 0px;
	top: 0;
}
.drilldown .is-drilldown-submenu-parent > a::after, .drilldown .is-drilldown-submenu-parent.color_1_light.active > a::after {
	border-color: transparent transparent transparent #000;
}
.drilldown .is-drilldown-submenu-parent.active > a::after {
	border-color: transparent transparent transparent #fff;
}
.dropdown.menu.large-horizontal > li.opens-right > .is-dropdown-submenu, .dropdown.menu.medium-horizontal > li.opens-right > .is-dropdown-submenu {
	left: 0;
}
.menu a, .menu .button {
	line-height: 1.5em;
}

nav ul li a {
	color: #333;
	position: relative;
	display: block;
	-webkit-transition: all .2s linear;
	-moz-transition: all .2s linear;
	transition: all .2s linear;
}
nav ul li a:hover {
	color: #fff;
	-webkit-transition: all .2s linear;
	-moz-transition: all .2s linear;
	transition: all .2s linear;
}
nav ul li.color_1_light ul li a:hover, nav ul li.color_1_light ul li.active a, .dropdown.menu.large-horizontal > li.color_1_light.is-active > a {
	color: #333;
}
nav ul li.color_1_light ul li a:hover::after, nav ul li.color_1_light ul li.active a::after, .dropdown.menu.large-horizontal > li.color_1_light.is-active > a::after, .dropdown.menu.large-horizontal > li.color_1_light.is-dropdown-submenu-parent.active > a::after {
	border-color: #000 transparent transparent;
}
nav ul li a::before {
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
	width: 100%;
	background-color: #f06521;
	content: "";
	-webkit-transition: all .2s;
	-moz-transition: all .2s;
	transition: all .2s;
	white-space: nowrap;
	display: block;
	height: 4px;
	z-index: -1;
}
nav ul li.is-active ul li a::before {
	height: 100%;
	opacity: 0;
}
.menu .active > a {
	
}
nav ul li a:hover::before, nav ul li.is-active a::before, .menu .active > a::before {	
	height: 100%;
}
nav ul li.is-active ul li a:hover::before, nav ul li.is-active ul li.active a::before {
	opacity: 100%;
}
nav ul li a::before {	
	background-color: #f06521;
}
nav ul li.color_1_light a::before {	
	background-color: #f9d948;
}
.menu .color_1_light.active > a, .menu .color_1_light.active > a:hover {
	color: #333;
}
nav ul li.color_2_light a::before {	
	background-color: #82b17b;
}
nav ul li.color_3_light a::before {	
	background-color: #60a0bb;
}
nav ul li.color_4_light a::before {	
	background-color: #fe492b;
}
nav ul li.color_5_light a::before {	
	background-color: #f6a226;
}
nav ul li.color_1_dark a::before {	
	background-color: #8b8922;
}
nav ul li.color_2_dark a::before {	
	background-color: #287e72;
}
nav ul li.color_3_dark a::before {	
	background-color: #105dad;
}
nav ul li.color_4_dark a::before {	
	background-color: #a61f26;
}
nav ul li.color_5_dark a::before {	
	background-color: #ab6619;
}

nav ul li.color_1_light ul {	
	border-color: #f9d948;
}
nav ul li.color_2_light ul {	
	border-color: #82b17b;
}
nav ul li.color_3_light ul {	
	border-color: #60a0bb;
}
nav ul li.color_4_light ul {	
	border-color: #fe492b;
}
nav ul li.color_5_light ul {	
	border-color: #f6a226;
}

nav ul li.color_1_light.active a, nav ul li.color_1_light.active ul li a:hover, nav ul li.color_1_light.active ul li.active a {	
	background-color: #f9d948;
}
nav ul li.color_2_light.active a, nav ul li.color_2_light.active ul li a:hover, nav ul li.color_2_light.active ul li.active a {	
	background-color: #82b17b;
}
nav ul li.color_3_light.active a, nav ul li.color_3_light.active ul li a:hover, nav ul li.color_3_light.active ul li.active a {	
	background-color: #60a0bb;
}
nav ul li.color_4_light.active a, nav ul li.color_4_light.active ul li a:hover, nav ul li.color_4_light.active ul li.active a {	
	background-color: #fe492b;
}
nav ul li.color_5_light.active a, nav ul li.color_5_light.active ul li a:hover, nav ul li.color_5_light.active ul li.active a {	
	background-color: #f6a226;
}
nav ul li.color_1_light.active ul li a, nav ul li.color_2_light.active ul li a, nav ul li.color_3_light.active ul li a, nav ul li.color_4_light.active ul li a, nav ul li.color_5_light.active ul li a {	
	background-color: #fff;
}

.is-dropdown-submenu {
	margin-top: -100%;
	-webkit-transition: all .2s;
	-moz-transition: all .2s;
	transition: all .2s;
}
.is-dropdown-submenu.js-dropdown-active {
	margin-top: 0;
	-webkit-transition: all .2s;
	-moz-transition: all .2s;
	transition: all .2s;
}

#spinner_master_container															{ display: none; z-index: 999999; position: absolute; top: 0; right: 0; }
#spinner_master_container .columns 													{ padding: 0; }
.spinner-master input[type="checkbox"] + label:before               				{ display: none; }
.spinner-master input[type="checkbox"]:checked + label:before  						{ display: none; }
.spinner-master input[type="checkbox"] + label  									{ height: 30px; }
.spinner-master * 																	{ transition: all 0.3s; -webkit-transition: all 0.3s; box-sizing: border-box; }
.spinner-master 																	{ position: relative; margin: 10px; height: 30px; width: 40px; float: right; }
.spinner-master input[type="checkbox"] 												{ display: none; }
.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: #000; 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 	{ -webkit-transform: rotate(135deg); transform: rotate(135deg); margin-top: 10px; }
.spinner-master input[type="checkbox"]:checked ~ .spinner-spin > .diagonal.part-2 	{ -webkit-transform: rotate(-135deg); transform: rotate(-135deg); margin-top: -15px; }
input[type='checkbox'] + label.spinner-spin, input[type='radio'] + label.spinner-spin {
	width: 100% !important;
}

/*********************************************************** HOME ***************************************************************/

.home h2 {
	margin: 0 0 0.9375rem 0;
	padding: 0 0 0.46875rem 0;
}
.home_content {
	height: auto;
	width: 100%;
	min-height: 200px;
}
.home_info_container {
	background: url("/assets/img/bg_info.jpg") center center no-repeat;
	background-size: cover;
	text-align: center;
}
.home_info_container .cell {
	text-align: center;
	aspect-ratio: 1 / 1;	
}
.info_box {
	border-radius: 50%;
	background-color: rgba(255,255,255,0.9);
	text-align: center;
	vertical-align: middle;
	width: 60%;
	aspect-ratio: 1 / 1;	
	margin: 20% auto;
	position: relative;
	display: block;
}
.middle {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: auto;
	display: block;
	transform: translate(0, -45%);
}
.info_box h4 {
	font-size: 4rem;
	margin: 0;
	padding: 0;
	color: #82b17b;
	display: block;
	line-height: 1em;
}
.info_box p {
	margin-top: -0.5rem;
	padding: 0 1rem;
	text-align: center;
	font-weight: 500;
	display: block;
	line-height: 1em;
}
.odometer.odometer-auto-theme, .odometer.odometer-theme-default {
	font-family: 'Barlow', sans-serif;
}

#jelovnik h2::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 122px;
	height: 89px;
	background: url("/assets/img/zivjeti_zdravo.png") right top no-repeat;
	background-size: contain;	
	margin: 0 -1.875rem 0 0;
}
.jelovnik_container {
	width: 100%;
	height: auto;
	background: url("/assets/img/bg_jelovnik.jpg") right center no-repeat;
	background-size: cover;
	position: relative;
	padding: 5%;
}
.jelovnik_slider_container {
	background-color: #cccccc;
	background-image: url("/assets/img/menu_top_left.svg"), url("/assets/img/menu_top_right.svg"), url("/assets/img/menu_bottom_left.svg"), url("/assets/img/menu_bottom_right.svg"), url("/assets/img/bg_jelovnik_3.jpg");
	background-position: 1rem 1rem, calc(100% - 1rem) 1rem, 1rem calc(100% - 1rem), calc(100% - 1rem) calc(100% - 1rem), center center;
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
	background-size: 80px auto, 80px auto, 80px auto, 80px auto, cover;
	padding: 0 2rem;
	position: relative;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
}
.jelovnik_slide {
	color: #333;
	text-align: center;
}
.jelovnik_slide_datum h3 {
	font-family: "Cormorant", serif;
	font-size: 2rem;
	text-transform: capitalize;
	font-weight: 400;
	margin: 0;
	padding: 3rem 0 0 0;
}
.jelovnik_slide_text h4 {
	font-family: "Cormorant", serif;
	font-size: 2rem;
	font-weight: 400;
	text-transform: uppercase;
	margin: 0 0 0.5rem 0;
	padding: 2rem 0 1.5rem 0;
	position: relative;
}
.jelovnik_slide_text h4::after {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 20px;
	background: url("/assets/img/menu_divider.svg") center center no-repeat;
	background-size: 80% auto;
}
.jelovnik_slide_text p {
	font-family: "Style Script", serif;
	font-size: 2rem;
	flex-grow: 1; /* tekst će zauzeti dostupan prostor */
}

.jelovnik_slide_text {
	display: flex;
	flex-direction: column;
	height: 100%; /* ili definiraj fiksnu visinu */
}

.alergeni {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-top: auto; /* gura alergene na dno */
}

.alergen {
	width: 50px;
	height: 50px;
	flex: 0 0 50px;
	border-radius: 50%;
	border-width: 3px;
	border-style: solid;
	background-size: 80%;
	background-repeat: no-repeat;
	background-position: center center;
}

.alergeni_opis {
	display: flex;
	justify-content: center;
	align-items: stretch;
	flex-wrap: wrap;
	gap: 20px;
	padding: 20px 0;
	max-width: 1200px;
	margin: 0 auto;
}

.alergen_opis {
	width: calc((1200px - (13 * 20px)) / 14);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.alergen_ikona {
	width: 80%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	border-width: 3px;
	border-style: solid;
	background-size: 80%;
	background-repeat: no-repeat;
	background-position: center center;
	margin-bottom: 10px;
}

.alergen_opis p {
	margin: 0;
	font-size: 0.8rem;
	line-height: 1.2em;
	word-break: break-word;
}

.alergen_opis p strong {
	width: 100%;
	display: inline-block;
}

/* Tablet verzija - 7 po redu */
@media (max-width: 1024px) {
	.alergen_opis {
		width: calc((100% - (6 * 20px)) / 7);
	}
}

/* Mobilna verzija - 4 po redu */
@media (max-width: 640px) {
	.alergeni_opis {
		gap: 15px;
	}
	
	.alergen_opis {
		width: calc((100% - (3 * 15px)) / 4);
	}
	
	.alergen_opis p {
		font-size: 1rem;
	}
}

/* Mala mobilna verzija - 3 po redu */
@media (max-width: 480px) {
	.alergen_opis {
		width: calc((100% - (2 * 15px)) / 3);
	}
}

/* Vrlo mala mobilna verzija - 2 po redu */
@media (max-width: 360px) {
	.alergen_opis {
		width: calc((100% - (1 * 15px)) / 2);
	}
}



.bx-prev {
	display: block;
	width: 42px;
	height: 42px;
	position: absolute;
	top: 3rem;
	left: 6rem;
}
.bx-next {
	display: block;
	width: 42px;
	height: 42px;
	position: absolute;
	top: 3rem;
	right: 6rem;
}
.bx-prev i.fa-sharp, .bx-next i.fa-sharp {
	color: #333;
	font-size: 2.5rem;
}
.bx-prev.disabled, .bx-next.disabled {
	pointer-events: none; 
  	cursor: default;
}
.bx-prev.disabled i.fa-sharp, .bx-next.disabled i.fa-sharp {
	color: rgba(51,51,51,0.2);
	pointer-events: none; 
  	cursor: default;
}

.events_container {
	width: 100%;
	height: auto;
	position: relative;
}
.events_slider_container {
	position: relative;
	text-align: center;
}
.events_slider_container h2, .naslovnica h2 {
	padding: 0;
	margin-bottom: 0.9375rem;
	text-align: center;
	width: 100%;
}
.events_slider {
	
}
.events_slide {
	position: relative;
}
.events_slide_container {
	background: #fff;
	padding: 0.9375rem;
	box-sizing: border-box;
	text-align: center;
}
.events_slider_container .bx-prev {
	top: 0;
	left: 0;
}
.events_slider_container .bx-next {
	top: 0;
	right: 0;
}
.events_slide_datum {	
	background-size: contain;
	width: 100px;
	height: 106px;
	overflow: hidden;
	display: inline-block;
	float: left;
	text-align: center;
}
.calendar_1 {
	background: url("/assets/img/calendar_1.svg") center center no-repeat;
}
.calendar_2 {
	background: url("/assets/img/calendar_2.svg") center center no-repeat;
}
.calendar_3 {
	background: url("/assets/img/calendar_3.svg") center center no-repeat;
}
.calendar_4 {
	background: url("/assets/img/calendar_4.svg") center center no-repeat;
}
.calendar_5 {
	background: url("/assets/img/calendar_5.svg") center center no-repeat;
}
.events_slide_datum h3 {
	font-weight: 500;
	text-transform: uppercase;
	padding: 7px 0 0 0;
}
.events_slide_datum h3 span {
	display: block;
}
.events_slide_datum h3 span:nth-child(1) {
	font-size: 1rem;
	font-family: 'Barlow Semi Condensed', sans-serif;
	color: #fff;
	font-weight: 700;
}
.events_slide_datum.calendar_1 h3 span:nth-child(1) {
	color: #0a0a0a;
}
.events_slide_datum h3 span:nth-child(2) {
	font-weight: 700;
	font-size: 3rem;
	line-height: 2.5rem;
}
.events_slide_datum h3 span:nth-child(3) {
	font-size: 1rem;
	font-family: 'Barlow Semi Condensed', sans-serif;
}

.events_slide_text {
	width: calc(100% - 100px);
	display: inline-block;
	float: right;
	text-align: left;
	padding: 0 0.9375rem;
}
.events_slide_text h4 {
	font-size: 1.5rem;
	line-height: 1.2em;
	padding: 0.5rem 0 0 0;
	margin: 0;
}
.events_slide_text p {
	font-size: 1.5rem;
	line-height: 1.2em;
	padding: 0;
	margin: 0;
}
.events_slider a {
    position: relative;
    z-index: 9999; 
	pointer-events: auto;
}

.skolski_sat {
	width: calc(12.67605633802817%);
	height: auto;
	border: 1px solid #82b17b;
	float: left;
	display: inline-block;
	text-align: center;
	background: #fff;
	padding: 1rem 0;
}
.skolski_sat h3 {
	font-weight: 700;
	line-height: 1rem;
}
.skolski_sat p {
	font-family: 'Barlow Semi Condensed', sans-serif;
	font-size: 1.5rem;
	margin: 0;
	padding: 0.5rem 0 0 0;
	line-height: 1rem;
}
.odmor {
	width: calc(1.408450704225352%);
	height: auto;
	float: left;
	display: inline-block;
	background: #82b17b;
	border-top: 1px solid #82b17b;
	border-bottom: 1px solid #82b17b;
}
.veliki_odmor {
	width: calc(4.225352112676056%);
	height: auto;
	float: left;
	display: inline-block;
	background: #82b17b;
	border-top: 1px solid #82b17b;
	border-bottom: 1px solid #82b17b;
}
.skolski_sat.active, .odmor.active, .veliki_odmor.active {
	border: 3px solid #000;
}

/*********************************************************** NEWS ***************************************************************/

section {
	position: relative;
	width: 100%;
	padding: 0.9375rem 0;
}
.news_container_container {
	display: flex;
}
.news_container, .content_container {
	background: #fff;
	width: 100%;
}
.news_container h3, .content_container h3 {
	margin: 1rem 0;
}
.news_container p {
	
}
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;
}
.news_text, .content_text {
	position: relative;
	z-index: 1;
	padding: 0.9375rem 1.875rem;
}
.preheadline {
	display: inline-block;
	position: relative;
	color: #fff;
	text-transform: uppercase;
	padding: 5px 10px 5px 1.875rem;
	font-size: 0.8rem;
	line-height: 1em;
	margin: 0 0 0 -1.875rem !important;
}
.preheadline.color_1_light {	
	color: #333;
}
.preheadline::before {
	display: block;
	width: 100%;
	height: 100%;
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
}
.preheadline.color_1_light, .preheadline.color_1_light::before {	
	background-color: #f9d948;
}
.preheadline.color_2_light, .preheadline.color_2_light::before {	
	background-color: #82b17b;
}
.preheadline.color_3_light, .preheadline.color_3_light::before {	
	background-color: #60a0bb;
}
.preheadline.color_4_light, .preheadline.color_4_light::before {	
	background-color: #fe492b;
}
.preheadline.color_5_light, .preheadline.color_5_light::before {	
	background-color: #f6a226;
}
.home_btn {
	display: inline-block;
	padding: 10px 35px 10px 20px;
	color: #fff;
	background-color: #60a0bb;
	position: relative;
	margin: 0.9375rem 0 0 0;
	text-transform: uppercase;
	font-weight: 700;
	font-family: 'Barlow Semi Condensed', sans-serif;
	cursor: pointer;
	line-height: 1.5rem;
}
.home_btn a {
	color: #fff;
}
.home_btn:hover, .home_btn a:hover {
	color: #000;
}
.home_btn::after {
	border: outset 5px;
	display: block;
	width: 0;
	height: 0;
	content: "";
	left: auto;
	right: 15px;
	margin-top: -4px;
	border-color: transparent transparent transparent #ffffff;
	position: absolute;
	top: 50%;
}
.home_btn:hover::after {
	border-color: transparent transparent transparent #000;
}
#open_gallery, #open_video {
	margin-top: 1.875rem;
}
#open_gallery {
	margin-right: 0.9375rem;
}
.news_image_big, .content_image_big {
	width: 100%;
	height: auto;
}
h2 {
	position: relative;
	margin: 0;
	padding: 0.9375rem 0 0.46875rem 0; 
}
h2::before {
	display: block;
	width: 100%;
	height: 4px;
	content: "";
	position: absolute;
	z-index: -1;
	bottom: 0;
	left: 0;
}
.news_text h2, .content_text h2 {
	width: 100%;
}
.news_text h2::before {
	display: none;
}
h2.color_1_light::before {	
	background-color: #f9d948;
}
h2.color_2_light::before {	
	background-color: #82b17b;
}
h2.color_3_light::before {	
	background-color: #60a0bb;
}
h2.color_4_light::before {	
	background-color: #fe492b;
}
h2.color_5_light::before {	
	background-color: #f6a226;
}
.documents {
	width: 100%;
	height: auto;
	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: 1px solid #000;
}
.documents ul li:nth-child(odd) {
	width: 100%;
	
}
.documents ul li a {
	display: block;
	width: 100%;
	height: auto;
	padding: 1rem;
	font-size: 1rem;
	line-height: 1.2em;
	font-weight: normal;
	position: relative;
}
.documents ul li a:hover {
	
}
.documents ul li a p {
	display: inline-block;
	width: calc(100% - 100px);
	margin: 0;
	padding: 0;
	line-height: 1em;
}
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;
	display: block;
	text-transform: uppercase;
	font-size: 10px;
	line-height: 10px;
	text-align: center;
	width: 40px;
	height: 10px;
}
.documents ul li a p span.document_date {
	color: #666;
	font-size: 0.8em;
}

#acc {
	background: transparent;
}
.accordion-title {
	color: #333;
	font-size: 1.5rem;
	border: none;
	padding-left: 2rem;
	font-weight: 500;
}

.accordion-title::before {
	right: auto;
	left: 0;
	margin-top: -0.8rem;
	font-size: 1.5rem;
}
:last-child:not(.is-active) > .accordion-title {
	border-bottom: none;
}
.accordion-title:hover, .accordion-title:focus, .is-active .accordion-title {
	background: transparent;
	color: #222;
}
.accordion-content, .accordion-item:last-child > :last-child {
	border: none;
}
.accordion-content {
	background: transparent;
	padding: 0;
}
.accordion-content .accordion-title {
	font-size: 1.5rem;
	padding: 1rem 1rem 1rem 3rem;
}
.accordion-content .accordion-title::before {
	margin-top: -0.8rem;
}


.imgs {
	margin: 0 -2px 30px -2px;
	width: calc(100% + 5px);
}
.small_img {
	display: block;
	width: 25%;
	max-width: 147px;
	height: auto;
	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;
}
.hidden_img {
	visibility: hidden;
	width: 0;
	height: 0;
}
.lg-backdrop {
	background-color: rgba(0,0,0,0.9);
}

/*********************************************************** CONTENT ***************************************************************/

.table_container {
  	
}
.content table {
	width: 100%;
	border: none;
}
table thead, table tbody, table tfoot {
	border: none;
}
.content table tr td, .content table tr th  {
	border: none;
	vertical-align: top;
	line-height: 1.2em;
}
.content table tr th  {
	font-weight: 500;
}
.content table tr td p {
	margin: 0;
	padding: 0;
}
thead p {
	margin: 0;
	font-weight: 500;
}
thead {
	background: rgba(96, 160, 187, 0.5);
}
tbody tr:nth-child(even) {
	background-color: rgba(96, 160, 187, 0.1);
}
.color_1_light thead {
	background: rgba(249, 217, 72, 0.8);
}
.color_1_light  tbody tr:nth-child(even) {
	background-color: rgba(249, 217, 72, 0.3);
}
.color_2_light thead {
	background: rgba(130, 177, 123, 0.5);
}
.color_2_light  tbody tr:nth-child(even) {
	background-color: rgba(130, 177, 123, 0.1);
}
.color_3_light thead {
	background: rgba(96, 160, 187, 0.5);
}
.color_3_light  tbody tr:nth-child(even) {
	background-color: rgba(96, 160, 187, 0.1);
}
.color_4_light thead {
	background: rgba(254, 73, 43, 0.5);
}
.color_4_light  tbody tr:nth-child(even) {
	background-color: rgba(254, 73, 43, 0.1);
}
.color_5_light thead {
	background: rgba(246, 162, 38, 0.5);
}
.color_5_light  tbody tr:nth-child(even) {
	background-color: rgba(246, 162, 38, 0.1);
}
.content table .h3 {
	font-weight: 500;
	font-size: 1.2rem;
	margin: 0;
	padding: 0;
	display: block;
}
.content h4, .news_text .h4 {
	font-weight: 500;
	font-size: 1.2rem;
	display: block;
}
.content table .h4 {
	font-weight: 500;
	font-size: 1.2rem;
	margin: 0;
	padding: 0;
	display: block;
}
.content table .h5 {
	font-weight: 500;
	font-size: 1rem;
	margin: 0;
	padding: 0;
	display: block;
}
#informacije table th .h5 strong {
	font-size: 2rem;
	font-weight: normal;
	line-height: 1rem;
}
#djelatnici table th, #informacije table th, #razredi table th {
	text-align: left;
	font-weight: normal;
	padding-top: 1rem;
}
#djelatnici table thead tr th:nth-child(3), #djelatnici table tbody tr td:nth-child(3), #informacije table thead tr th:nth-child(3), #informacije table tbody tr td:nth-child(3) {
	text-align: center;
}
#djelatnici table thead tr th:first-child, #djelatnici table tbody tr td:first-child, #informacije table thead tr th:first-child, #informacije table tbody tr td:first-child {
	text-align: right;
	line-height: 1.5rem;
	width: 50px;
}
#djelatnici table thead tr th:last-child, #djelatnici table tbody tr td:last-child {
	text-align: left;
	max-width: 300px;
}
.content table tr.razrednik {
	border: 1px solid #000;
}
.content_text p a, .news_text p a {
	background-color: #f9d948;
	border-radius: 10px;
	display: inline-block;
	font-weight: 500;
	font-style: italic;
	padding: 0 0.4rem;
}
.content_text p a:hover, .news_text p a:hover, .content_text p a:active, .news_text p a:active {
	background-color: #82b17b;
	color: #fff;
}

/*********************************************************** BANNERI ***************************************************************/

#banneri a {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	display: block;
	width: 100%;
	height: 100%;
	text-align: center;
	aspect-ratio: 16 / 9;
	position: relative;
}
#banneri a p {	
	font-family: 'Barlow Condensed', sans-serif;
	margin: 0;
	padding: 0;
}
#banneri a img {
	display: block;
	width: 100%;
	height: auto;
}
#pedagoska_sluzba a {
	background-image: url("/assets/img/bg_pedagoska_sluzba.jpg");
	color: #018790;
	font-size: 1.1rem;
	font-weight: 500;
	padding-top: 3.5rem;
}
#pedagoska_sluzba a strong {	
	font-size: 1.5rem;
	font-weight: 700;
	display: block;
}
#lijecnica a {
	background-image: url("/assets/img/bg_lijecnica.jpg");
	color: #333333;
	font-size: 0.9rem;
	font-weight: 500;
	padding-top: 1rem;
}
#lijecnica a strong {	
	color: #cf1f2c;
	font-size: 1.7rem;
	font-weight: 700;
	margin: -0.2rem auto 0.4rem auto;
	display: block;
}
#lijecnica a strong:last-child {	
	font-size: 1.2em;
	margin: -0.3rem auto 0 auto;
}
#savjeti a {
	background-image: url("/assets/img/bg_savjeti.png");
	color: #315491;
	font-size: 1.1rem;
	font-weight: 700;
	text-transform: uppercase;
	font-family: 'Barlow Condensed', sans-serif;
}
#savjeti a p {
	position: absolute;
	bottom: 0.6rem;
	left: 0;
	width: 100%;
	display: block;
	font-weight: 700;
}

#info tr td:nth-child(2) {
	font-weight: 500;
	font-size: 1.1rem;
}

/*********************************************************** GALERIJA ***************************************************************/

.lg-outer .lg-thumb-item {
	border: 2px solid rgb(10, 10, 10);
}
.lg-outer .lg-thumb-item.active, .lg-outer .lg-thumb-item:hover {
	border-color: #fff;
}
.lg-sub-html h4 {
	font-size: 1rem;
	font-weight: 500;
}
.lg-sub-html p {
	font-size: 0.8rem;
	font-weight: 400;
}

/*********************************************************** FOOTER ***************************************************************/

footer {
	background: #fff;
	width: 100%;
	position: relative;
	margin-top: auto;
	padding: 2rem 0;
}
footer p.copyright {
	text-align: center;
	font-size: 0.8rem;
	border-top: 1px solid #60a0bb;
	margin: 0;
	padding: 1rem;
}

/*********************************************************** MISC ***************************************************************/

table.escaperoom tr td {
	vertical-align: top;
}
table.escaperoom tr td:nth-child(1) {
	text-align: right;
}
table.escaperoom tr td:nth-child(2) {
	text-align: center;
	font-weight: bold;
}
table.escaperoom tr td:nth-child(3) {
	text-align: left;
}
table.escaperoom tr td:nth-child(4) {
	text-align: left;
}
table.escaperoom tr td:nth-child(5) {
	text-align: center;
}
table.escaperoom tr td:nth-child(6) {
	text-align: center;
}
.video_thumb {
	background-position: auto 140%;
}
.video_thumb::after {
	display: block;
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: url("/assets/img/play_white.svg") center center no-repeat;
	background-size: 30% auto;
}
table.dopunski_rad {
	table-layout: fixed;
	min-width: 100%;
}
table.dopunski_rad tr th {
	text-align: center;
}
table.dopunski_rad tr td {
	text-align: center;
}
table.kalendar_rada {
	margin-bottom: 2rem;
}
table.kalendar_rada tr td {
	text-align: center;
	vertical-align: middle;
}
table.kalendar_rada tr th {
	font-weight: 600;
	background-color: #f6a226;
	vertical-align: middle;
	color: #fff;
}
table.kalendar_rada tr td:first-child, table.kalendar_rada tr th:first-child {
	text-align: left;
}
.blagdani span {
	display: inline-block; 
	width: 100px;
	font-weight: 500;
	text-align: right;
}