@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,600,600italic,700");
@import url("fontawesome-all.min.css");

/*
	Miniport by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

	blockquote:before, blockquote:after, q:before, q:after {
		content: '';
		content: none;
	}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
	-webkit-text-size-adjust: none;
}

mark {
	background-color: transparent;
	color: inherit;
}

input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input, select, textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
}

/* Basic */

	html {
		box-sizing: border-box;
	}

	*, *:before, *:after {
		box-sizing: inherit;
	}

	body {
		padding-top: 3.5em;
	}

		body.is-preload *, body.is-preload *:before, body.is-preload *:after {
			-moz-animation: none !important;
			-webkit-animation: none !important;
			-ms-animation: none !important;
			animation: none !important;
			-moz-transition: none !important;
			-webkit-transition: none !important;
			-ms-transition: none !important;
			transition: none !important;
		}

	body, input, textarea, select {
		font-family: 'Open Sans', sans-serif;
		line-height: 1.85em;
		color: #888;
		font-weight: 300;
		font-size: 13pt;
	}

	a {
		-moz-transition: color .2s ease-in-out;
		-webkit-transition: color .2s ease-in-out;
		-ms-transition: color .2s ease-in-out;
		transition: color .2s ease-in-out;
		color: #5FA66A;
		text-decoration: underline;
	}

		a:hover {
			color: #5FA66A !important;
		}

		a img {
			border: 0;
		}

	b, strong {
		font-weight: 600;
		color: #3e3e3e;
	}

	i, em {
		font-style: italic;
	}

	sub {
		position: relative;
		top: 0.5em;
		font-size: 0.8em;
	}

	sup {
		position: relative;
		top: -0.5em;
		font-size: 0.8em;
	}

	blockquote {
		border-left: solid 0.75em #eee;
		padding: 1em 0 1em 1.5em;
		font-style: italic;
	}

	h1, h2, h3, h4, h5, h6 {
		color: #3e3e3e;
		margin: 0 0 0.75em 0;
	}

	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
		text-decoration: none;
		color: inherit;
	}

	h2, h3, h4, h5, h6 {
		font-weight: 700;
	}

	h1 {
		font-size: 3.25em;
		letter-spacing: -0.025em;
		font-weight: 300;
	}

		h1 strong {
			font-weight: 700;
		}

	h2 {
		font-size: 2em;
		letter-spacing: -0.015em;
	}

	h3 {
		font-size: 1.5em;
		letter-spacing: -0.015em;
	}

	em, i {
		font-style: italic;
	}

	br.clear {
		clear: both;
	}

	hr {
		border: 0;
		border-top: solid 1px #444;
		border-top-color: rgba(0, 0, 0, 0.35);
		box-shadow: 0 8px 20px rgba(0,0,0,0.15);
		height: 1px;
		margin: 3em 0;
	}

	p, ul, ol, dl, table {
		margin-bottom: 2em;
	}

	header {
		margin: 0 0 3em 0;
	}

		header > p {
			font-size: 1.25em;
			margin: 0;
		}

	footer {
		margin: 3em 0 0 0;
	}

		footer > p {
			font-size: 1.25em;
		}

/* Container */

	.container {
		margin: 0 auto;
		max-width: calc(100% - 50px);
		width: 1200px;
	}

		.container.medium {
			width: 900px;
		}

		@media screen and (max-width: 1680px) {

			.container {
				width: 1200px;
			}

				.container.medium {
					width: 900px;
				}

		}

		@media screen and (max-width: 1280px) {

			.container {
				width: 960px;
			}

				.container.medium {
					width: 720px;
				}

		}

		@media screen and (max-width: 980px) {

			.container {
				width: 100%;
			}

				.container.medium {
					width: 75%;
				}

		}

		@media screen and (max-width: 736px) {

			.container {
				width: 100%;
				max-width: calc(100% - 30px);
			}

				.container.medium {
					width: 100%;
				}

		}

/* Row */

	.row {
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		align-items: stretch;
	}

		.row > * {
			box-sizing: border-box;
		}

		.row.gtr-uniform > * > :last-child {
			margin-bottom: 0;
		}

		.row.aln-left {
			justify-content: flex-start;
		}

		.row.aln-center {
			justify-content: center;
		}

		.row.aln-right {
			justify-content: flex-end;
		}

		.row.aln-top {
			align-items: flex-start;
		}

		.row.aln-middle {
			align-items: center;
		}

		.row.aln-bottom {
			align-items: flex-end;
		}

		.row > .imp {
			order: -1;
		}

		.row > .col-1 {
			width: 8.33333%;
		}

		.row > .off-1 {
			margin-left: 8.33333%;
		}

		.row > .col-2 {
			width: 16.66667%;
		}

		.row > .off-2 {
			margin-left: 16.66667%;
		}

		.row > .col-3 {
			width: 25%;
		}

		.row > .off-3 {
			margin-left: 25%;
		}

		.row > .col-4 {
			width: 33.33333%;
		}

		.row > .off-4 {
			margin-left: 33.33333%;
		}

		.row > .col-5 {
			width: 41.66667%;
		}

		.row > .off-5 {
			margin-left: 41.66667%;
		}

		.row > .col-6 {
			width: 50%;
		}

		.row > .off-6 {
			margin-left: 50%;
		}

		.row > .col-7 {
			width: 58.33333%;
		}

		.row > .off-7 {
			margin-left: 58.33333%;
		}

		.row > .col-8 {
			width: 66.66667%;
		}

		.row > .off-8 {
			margin-left: 66.66667%;
		}

		.row > .col-9 {
			width: 75%;
		}

		.row > .off-9 {
			margin-left: 75%;
		}

		.row > .col-10 {
			width: 83.33333%;
		}

		.row > .off-10 {
			margin-left: 83.33333%;
		}

		.row > .col-11 {
			width: 91.66667%;
		}

		.row > .off-11 {
			margin-left: 91.66667%;
		}

		.row > .col-12 {
			width: 100%;
		}

		.row > .off-12 {
			margin-left: 100%;
		}

		.row.gtr-0 {
			margin-top: 0px;
			margin-left: 0px;
		}

			.row.gtr-0 > * {
				padding: 0px 0 0 0px;
			}

			.row.gtr-0.gtr-uniform {
				margin-top: 0px;
			}

				.row.gtr-0.gtr-uniform > * {
					padding-top: 0px;
				}

		.row.gtr-25 {
			margin-top: -6.25px;
			margin-left: -6.25px;
		}

			.row.gtr-25 > * {
				padding: 6.25px 0 0 6.25px;
			}

			.row.gtr-25.gtr-uniform {
				margin-top: -6.25px;
			}

				.row.gtr-25.gtr-uniform > * {
					padding-top: 6.25px;
				}

		.row.gtr-50 {
			margin-top: -12.5px;
			margin-left: -12.5px;
		}

			.row.gtr-50 > * {
				padding: 12.5px 0 0 12.5px;
			}

			.row.gtr-50.gtr-uniform {
				margin-top: -12.5px;
			}

				.row.gtr-50.gtr-uniform > * {
					padding-top: 12.5px;
				}

		.row {
			margin-top: -25px;
			margin-left: -25px;
		}

			.row > * {
				padding: 25px 0 0 25px;
			}

			.row.gtr-uniform {
				margin-top: -25px;
			}

				.row.gtr-uniform > * {
					padding-top: 25px;
				}

		.row.gtr-150 {
			margin-top: -37.5px;
			margin-left: -37.5px;
		}

			.row.gtr-150 > * {
				padding: 37.5px 0 0 37.5px;
			}

			.row.gtr-150.gtr-uniform {
				margin-top: -37.5px;
			}

				.row.gtr-150.gtr-uniform > * {
					padding-top: 37.5px;
				}

		.row.gtr-200 {
			margin-top: -50px;
			margin-left: -50px;
		}

			.row.gtr-200 > * {
				padding: 50px 0 0 50px;
			}

			.row.gtr-200.gtr-uniform {
				margin-top: -50px;
			}

				.row.gtr-200.gtr-uniform > * {
					padding-top: 50px;
				}

		@media screen and (max-width: 1680px) {

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-xlarge {
					order: -1;
				}

				.row > .col-1-xlarge {
					width: 8.33333%;
				}

				.row > .off-1-xlarge {
					margin-left: 8.33333%;
				}

				.row > .col-2-xlarge {
					width: 16.66667%;
				}

				.row > .off-2-xlarge {
					margin-left: 16.66667%;
				}

				.row > .col-3-xlarge {
					width: 25%;
				}

				.row > .off-3-xlarge {
					margin-left: 25%;
				}

				.row > .col-4-xlarge {
					width: 33.33333%;
				}

				.row > .off-4-xlarge {
					margin-left: 33.33333%;
				}

				.row > .col-5-xlarge {
					width: 41.66667%;
				}

				.row > .off-5-xlarge {
					margin-left: 41.66667%;
				}

				.row > .col-6-xlarge {
					width: 50%;
				}

				.row > .off-6-xlarge {
					margin-left: 50%;
				}

				.row > .col-7-xlarge {
					width: 58.33333%;
				}

				.row > .off-7-xlarge {
					margin-left: 58.33333%;
				}

				.row > .col-8-xlarge {
					width: 66.66667%;
				}

				.row > .off-8-xlarge {
					margin-left: 66.66667%;
				}

				.row > .col-9-xlarge {
					width: 75%;
				}

				.row > .off-9-xlarge {
					margin-left: 75%;
				}

				.row > .col-10-xlarge {
					width: 83.33333%;
				}

				.row > .off-10-xlarge {
					margin-left: 83.33333%;
				}

				.row > .col-11-xlarge {
					width: 91.66667%;
				}

				.row > .off-11-xlarge {
					margin-left: 91.66667%;
				}

				.row > .col-12-xlarge {
					width: 100%;
				}

				.row > .off-12-xlarge {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0px;
					margin-left: 0px;
				}

					.row.gtr-0 > * {
						padding: 0px 0 0 0px;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0px;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0px;
						}

				.row.gtr-25 {
					margin-top: -6.25px;
					margin-left: -6.25px;
				}

					.row.gtr-25 > * {
						padding: 6.25px 0 0 6.25px;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -6.25px;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 6.25px;
						}

				.row.gtr-50 {
					margin-top: -12.5px;
					margin-left: -12.5px;
				}

					.row.gtr-50 > * {
						padding: 12.5px 0 0 12.5px;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -12.5px;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 12.5px;
						}

				.row {
					margin-top: -25px;
					margin-left: -25px;
				}

					.row > * {
						padding: 25px 0 0 25px;
					}

					.row.gtr-uniform {
						margin-top: -25px;
					}

						.row.gtr-uniform > * {
							padding-top: 25px;
						}

				.row.gtr-150 {
					margin-top: -37.5px;
					margin-left: -37.5px;
				}

					.row.gtr-150 > * {
						padding: 37.5px 0 0 37.5px;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -37.5px;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 37.5px;
						}

				.row.gtr-200 {
					margin-top: -50px;
					margin-left: -50px;
				}

					.row.gtr-200 > * {
						padding: 50px 0 0 50px;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -50px;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 50px;
						}

		}

		@media screen and (max-width: 1280px) {

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-large {
					order: -1;
				}

				.row > .col-1-large {
					width: 8.33333%;
				}

				.row > .off-1-large {
					margin-left: 8.33333%;
				}

				.row > .col-2-large {
					width: 16.66667%;
				}

				.row > .off-2-large {
					margin-left: 16.66667%;
				}

				.row > .col-3-large {
					width: 25%;
				}

				.row > .off-3-large {
					margin-left: 25%;
				}

				.row > .col-4-large {
					width: 33.33333%;
				}

				.row > .off-4-large {
					margin-left: 33.33333%;
				}

				.row > .col-5-large {
					width: 41.66667%;
				}

				.row > .off-5-large {
					margin-left: 41.66667%;
				}

				.row > .col-6-large {
					width: 50%;
				}

				.row > .off-6-large {
					margin-left: 50%;
				}

				.row > .col-7-large {
					width: 58.33333%;
				}

				.row > .off-7-large {
					margin-left: 58.33333%;
				}

				.row > .col-8-large {
					width: 66.66667%;
				}

				.row > .off-8-large {
					margin-left: 66.66667%;
				}

				.row > .col-9-large {
					width: 75%;
				}

				.row > .off-9-large {
					margin-left: 75%;
				}

				.row > .col-10-large {
					width: 83.33333%;
				}

				.row > .off-10-large {
					margin-left: 83.33333%;
				}

				.row > .col-11-large {
					width: 91.66667%;
				}

				.row > .off-11-large {
					margin-left: 91.66667%;
				}

				.row > .col-12-large {
					width: 100%;
				}

				.row > .off-12-large {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0px;
					margin-left: 0px;
				}

					.row.gtr-0 > * {
						padding: 0px 0 0 0px;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0px;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0px;
						}

				.row.gtr-25 {
					margin-top: -6.25px;
					margin-left: -6.25px;
				}

					.row.gtr-25 > * {
						padding: 6.25px 0 0 6.25px;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -6.25px;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 6.25px;
						}

				.row.gtr-50 {
					margin-top: -12.5px;
					margin-left: -12.5px;
				}

					.row.gtr-50 > * {
						padding: 12.5px 0 0 12.5px;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -12.5px;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 12.5px;
						}

				.row {
					margin-top: -25px;
					margin-left: -25px;
				}

					.row > * {
						padding: 25px 0 0 25px;
					}

					.row.gtr-uniform {
						margin-top: -25px;
					}

						.row.gtr-uniform > * {
							padding-top: 25px;
						}

				.row.gtr-150 {
					margin-top: -37.5px;
					margin-left: -37.5px;
				}

					.row.gtr-150 > * {
						padding: 37.5px 0 0 37.5px;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -37.5px;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 37.5px;
						}

				.row.gtr-200 {
					margin-top: -50px;
					margin-left: -50px;
				}

					.row.gtr-200 > * {
						padding: 50px 0 0 50px;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -50px;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 50px;
						}

		}

		@media screen and (max-width: 980px) {

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-medium {
					order: -1;
				}

				.row > .col-1-medium {
					width: 8.33333%;
				}

				.row > .off-1-medium {
					margin-left: 8.33333%;
				}

				.row > .col-2-medium {
					width: 16.66667%;
				}

				.row > .off-2-medium {
					margin-left: 16.66667%;
				}

				.row > .col-3-medium {
					width: 25%;
				}

				.row > .off-3-medium {
					margin-left: 25%;
				}

				.row > .col-4-medium {
					width: 33.33333%;
				}

				.row > .off-4-medium {
					margin-left: 33.33333%;
				}

				.row > .col-5-medium {
					width: 41.66667%;
				}

				.row > .off-5-medium {
					margin-left: 41.66667%;
				}

				.row > .col-6-medium {
					width: 50%;
				}

				.row > .off-6-medium {
					margin-left: 50%;
				}

				.row > .col-7-medium {
					width: 58.33333%;
				}

				.row > .off-7-medium {
					margin-left: 58.33333%;
				}

				.row > .col-8-medium {
					width: 66.66667%;
				}

				.row > .off-8-medium {
					margin-left: 66.66667%;
				}

				.row > .col-9-medium {
					width: 75%;
				}

				.row > .off-9-medium {
					margin-left: 75%;
				}

				.row > .col-10-medium {
					width: 83.33333%;
				}

				.row > .off-10-medium {
					margin-left: 83.33333%;
				}

				.row > .col-11-medium {
					width: 91.66667%;
				}

				.row > .off-11-medium {
					margin-left: 91.66667%;
				}

				.row > .col-12-medium {
					width: 100%;
				}

				.row > .off-12-medium {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0px;
					margin-left: 0px;
				}

					.row.gtr-0 > * {
						padding: 0px 0 0 0px;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0px;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0px;
						}

				.row.gtr-25 {
					margin-top: -6.25px;
					margin-left: -6.25px;
				}

					.row.gtr-25 > * {
						padding: 6.25px 0 0 6.25px;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -6.25px;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 6.25px;
						}

				.row.gtr-50 {
					margin-top: -12.5px;
					margin-left: -12.5px;
				}

					.row.gtr-50 > * {
						padding: 12.5px 0 0 12.5px;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -12.5px;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 12.5px;
						}

				.row {
					margin-top: -25px;
					margin-left: -25px;
				}

					.row > * {
						padding: 25px 0 0 25px;
					}

					.row.gtr-uniform {
						margin-top: -25px;
					}

						.row.gtr-uniform > * {
							padding-top: 25px;
						}

				.row.gtr-150 {
					margin-top: -37.5px;
					margin-left: -37.5px;
				}

					.row.gtr-150 > * {
						padding: 37.5px 0 0 37.5px;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -37.5px;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 37.5px;
						}

				.row.gtr-200 {
					margin-top: -50px;
					margin-left: -50px;
				}

					.row.gtr-200 > * {
						padding: 50px 0 0 50px;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -50px;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 50px;
						}

		}

		@media screen and (max-width: 736px) {

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-small {
					order: -1;
				}

				.row > .col-1-small {
					width: 8.33333%;
				}

				.row > .off-1-small {
					margin-left: 8.33333%;
				}

				.row > .col-2-small {
					width: 16.66667%;
				}

				.row > .off-2-small {
					margin-left: 16.66667%;
				}

				.row > .col-3-small {
					width: 25%;
				}

				.row > .off-3-small {
					margin-left: 25%;
				}

				.row > .col-4-small {
					width: 33.33333%;
				}

				.row > .off-4-small {
					margin-left: 33.33333%;
				}

				.row > .col-5-small {
					width: 41.66667%;
				}

				.row > .off-5-small {
					margin-left: 41.66667%;
				}

				.row > .col-6-small {
					width: 50%;
				}

				.row > .off-6-small {
					margin-left: 50%;
				}

				.row > .col-7-small {
					width: 58.33333%;
				}

				.row > .off-7-small {
					margin-left: 58.33333%;
				}

				.row > .col-8-small {
					width: 66.66667%;
				}

				.row > .off-8-small {
					margin-left: 66.66667%;
				}

				.row > .col-9-small {
					width: 75%;
				}

				.row > .off-9-small {
					margin-left: 75%;
				}

				.row > .col-10-small {
					width: 83.33333%;
				}

				.row > .off-10-small {
					margin-left: 83.33333%;
				}

				.row > .col-11-small {
					width: 91.66667%;
				}

				.row > .off-11-small {
					margin-left: 91.66667%;
				}

				.row > .col-12-small {
					width: 100%;
				}

				.row > .off-12-small {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0px;
					margin-left: 0px;
				}

					.row.gtr-0 > * {
						padding: 0px 0 0 0px;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0px;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0px;
						}

				.row.gtr-25 {
					margin-top: -3.75px;
					margin-left: -3.75px;
				}

					.row.gtr-25 > * {
						padding: 3.75px 0 0 3.75px;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -3.75px;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 3.75px;
						}

				.row.gtr-50 {
					margin-top: -7.5px;
					margin-left: -7.5px;
				}

					.row.gtr-50 > * {
						padding: 7.5px 0 0 7.5px;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -7.5px;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 7.5px;
						}

				.row {
					margin-top: -15px;
					margin-left: -15px;
				}

					.row > * {
						padding: 15px 0 0 15px;
					}

					.row.gtr-uniform {
						margin-top: -15px;
					}

						.row.gtr-uniform > * {
							padding-top: 15px;
						}

				.row.gtr-150 {
					margin-top: -22.5px;
					margin-left: -22.5px;
				}

					.row.gtr-150 > * {
						padding: 22.5px 0 0 22.5px;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -22.5px;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 22.5px;
						}

				.row.gtr-200 {
					margin-top: -30px;
					margin-left: -30px;
				}

					.row.gtr-200 > * {
						padding: 30px 0 0 30px;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -30px;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 30px;
						}

		}

/* Form */

	form label {
		color: #3e3e3e;
		font-weight: 700;
		display: block;
		margin: 0 0 0.5em 0;
	}

	form input[type=text],
	form input[type=email],
	form input[type=password],
	form select,
	form textarea {
		-moz-transition: background .2s ease-in-out, box-shadow .2s ease-in-out;
		-webkit-transition: background .2s ease-in-out, box-shadow .2s ease-in-out;
		-ms-transition: background .2s ease-in-out, box-shadow .2s ease-in-out;
		transition: background .2s ease-in-out, box-shadow .2s ease-in-out;
		-webkit-appearance: none;
		display: block;
		border: 0;
		padding: 0.75em;
		font-size: 1em;
		border-radius: 8px;
		border: solid 1px #ddd;
		background: #fff;
		color: #bbb;
		box-shadow: inset 0px 2px 3px 1px rgba(0, 0, 0, 0.05), 0px 1px 0px 0px rgba(255, 255, 255, 0.025);
		width: 100%;
	}

		form input[type=text]:focus,
		form input[type=email]:focus,
		form input[type=password]:focus,
		form select:focus,
		form textarea:focus {
			background: #fafafa;
			box-shadow: inset 0px 2px 5px 0px rgba(0, 0, 0, 0.05), 0px 1px 0px 0px rgba(255, 255, 255, 0.025), inset 0px 0px 2px 1px #43bff0;
		}

	form textarea {
		height: 15em;
	}

	form .actions:last-child {
		margin-bottom: 0;
	}

	form ::-webkit-input-placeholder {
		color: #555 !important;
	}

	form :-moz-placeholder {
		color: #555 !important;
	}

	form ::-moz-placeholder {
		color: #555 !important;
	}

	form :-ms-input-placeholder {
		color: #555 !important;
	}

	form ::-moz-focus-inner {
		border: 0;
	}

/* Tables */

	table {
		width: 100%;
	}

		table.default {
			width: 100%;
		}

			table.default tr {
				border-top: solid 1px #eee;
			}

				table.default tr:first-child {
					border-top: 0;
				}

			table.default td {
				padding: 0.5em 1em 0.5em 1em;
			}

			table.default th {
				text-align: left;
				padding: 0.5em 1em 0.5em 1em;
				font-weight: 600;
				margin: 0 0 1em 0;
			}

			table.default thead {
				background: #4f4f4f;
				color: #fff;
			}

/* Section/Article */

	section, article {
		margin-bottom: 3em;
	}

	section > :last-child,
	article > :last-child,
	section:last-child,
	article:last-child {
		margin-bottom: 0;
	}

/* Image */

	.image {
		display: inline-block;
		position: relative;
	}

		.image img {
			display: block;
			width: 100%;
		}

		.image.fit {
			display: block;
			width: 100%;
		}

		.image.featured {
			display: block;
			width: 100%;
			margin: 0 0 2em 0;
		}

		.image.left {
			float: left;
			margin: 0 2em 2em 0;
		}

		.image.centered {
			display: block;
			margin: 0 0 2em 0;
		}

			.image.centered img {
				margin: 0 auto;
				width: auto;
			}

/* Button */

	input[type="button"],
	input[type="submit"],
	input[type="reset"],
	button,
	.button {
		background-image: url("images/bg.png"), -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
		background-image: url("images/bg.png"), -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
		background-image: url("images/bg.png"), -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
		background-image: url("images/bg.png"), linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
		-moz-transition: background-color .2s ease-in-out;
		-webkit-transition: background-color .2s ease-in-out;
		-ms-transition: background-color .2s ease-in-out;
		transition: background-color .2s ease-in-out;
		-webkit-appearance: none;
		position: relative;
		display: inline-block;
		color: #fff !important;
		text-decoration: none;
		font-weight: 700;
		border: 0;
		outline: 0;
		cursor: pointer;
		border-radius: 8px;
		text-shadow: -1px -1px 0.5px rgba(0, 0, 0, 0.5);
		overflow: hidden;
		box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.5), inset 0px 2px 1px 0px rgba(255, 255, 255, 0.75);
		background-color: #499356;
		padding: 1em 2.35em 1em 2.35em;
		font-size: 1.1em;
		max-width: 24em;
	}

		input[type="button"]:hover,
		input[type="submit"]:hover,
		input[type="reset"]:hover,
		button:hover,
		.button:hover {
			background-color: #5FA66A;
			color: #fff !important;
		}

		input[type="button"]:active,
		input[type="submit"]:active,
		input[type="reset"]:active,
		button:active,
		.button:active {
			background-color: #499356;
			top: 1px;
		}

		input[type="button"].large,
		input[type="submit"].large,
		input[type="reset"].large,
		button.large,
		.button.large {
			font-size: 1.5em;
			letter-spacing: -0.025em;
		}

		input[type="button"].alt,
		input[type="submit"].alt,
		input[type="reset"].alt,
		button.alt,
		.button.alt {
			background-color: #499356;
			box-shadow: inset 0px 0px 0px 1px #242424, inset 0px 2px 1px 0px rgba(255, 255, 255, 0.2);
		}

			input[type="button"].alt:hover,
			input[type="submit"].alt:hover,
			input[type="reset"].alt:hover,
			button.alt:hover,
			.button.alt:hover {
				background-color: #5FA66A;
				color: #fff !important;
			}

			input[type="button"].alt:active,
			input[type="submit"].alt:active,
			input[type="reset"].alt:active,
			button.alt:active,
			.button.alt:active {
				background-color: #499356;
			}

/* List */

	ul {
		list-style: disc;
		padding-left: 1em;
	}

		ul li {
			padding-left: 0.5em;
		}

	ol {
		list-style: decimal;
		padding-left: 1.25em;
	}

		ol li {
			padding-left: 0.25em;
		}

/* Social */

	ul.social {
		cursor: default;
		margin: 0;
		list-style: none;
		padding-left: 0;
	}

		ul.social li {
			position: relative;
			display: inline-block;
			margin: 0.25em;
			top: 0;
			padding-left: 0;
		}

			ul.social li a {
				-moz-transition: top .2s ease-in-out;
				-webkit-transition: top .2s ease-in-out;
				-ms-transition: top .2s ease-in-out;
				transition: top .2s ease-in-out;
				display: block;
				width: 48px;
				height: 48px;
				border-radius: 8px;
				top: 0;
				position: relative;
			}

				ul.social li a:before {
					background-image: url("images/bg.png"), -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
					background-image: url("images/bg.png"), -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
					background-image: url("images/bg.png"), -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
					background-image: url("images/bg.png"), linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
					-moz-transition: background-color .2s ease-in-out;
					-webkit-transition: background-color .2s ease-in-out;
					-ms-transition: background-color .2s ease-in-out;
					transition: background-color .2s ease-in-out;
					background-color: #444;
					border-radius: 8px;
					box-shadow: inset 0px 0px 0px 1px #282828, inset 0px 2px 1px 0px rgba(255, 255, 255, 0.1);
					color: #2E2E2E !important;
					display: block;
					font-size: 26px;
					height: 48px;
					line-height: 48px;
					text-align: center;
					outline: 0;
					overflow: hidden;
					text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.1);
					width: 48px;
				}

				ul.social li a.fa-twitter {
					background-color: #2DAAE4;
				}

				ul.social li a.fa-facebook-f {
					background-color: #3C5A98;
				}

				ul.social li a.fa-dribbble {
					background-color: #C4376B;
				}

				ul.social li a.fa-linkedin-in {
					background-color: #006599;
				}

				ul.social li a.fa-tumblr {
					background-color: #51718A;
				}

				ul.social li a.fa-google-plus {
					background-color: #DA2713;
				}

				ul.social li a.fa-github {
					background-color: #FAFAFA;
				}

				ul.social li a.fa-rss {
					background-color: #F2600B;
				}

				ul.social li a.fa-instagram {
					background-color: #E0D7C8;
				}

				ul.social li a.fa-foursquare {
					background-color: #39A3D4;
				}

				ul.social li a.fa-skype {
					background-color: #10BEF1;
				}

				ul.social li a.fa-soundcloud {
					background-color: #FE5419;
				}

				ul.social li a.fa-youtube {
					background-color: #BF2E25;
				}

				ul.social li a.fa-blogger {
					background-color: #FF6501;
				}

				ul.social li a.fa-flickr {
					background-color: #0062DB;
				}

				ul.social li a.fa-vimeo {
					background-color: #4C8AB0;
				}

				ul.social li a:hover {
					top: -5px;
				}

					ul.social li a:hover:before {
						background-color: transparent;
					}

/* Actions */

	ul.actions {
		list-style: none;
		padding-left: 0;
	}

		ul.actions li {
			display: inline-block;
			margin: 0 0 0 1em;
			padding-left: 0;
		}

			ul.actions li:first-child {
				margin-left: 0;
			}

/* Box */

	.box {
		background: #fff;
		box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.15), 0px 2px 3px 0px rgba(0, 0, 0, 0.1);
		text-align: center;
		padding: 2em;
	}

		.box.style1 {
			padding: 3em 2em 3.5em 2em;
		}

			.box.style1 h3 {
				margin-bottom: 0.5em;
			}

		.box.style2 h3 {
			margin-bottom: 0.25em;
		}

		.box.style2 .image {
			position: relative;
			left: 2em;
			top: 2em;
			margin: -4em 0 4em -4em;
			width: auto;
		}

/* Icons */

	.icon {
		text-decoration: none;
		text-decoration: none;
	}

		.icon:before {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			display: inline-block;
			font-style: normal;
			font-variant: normal;
			text-rendering: auto;
			line-height: 1;
			text-transform: none !important;
			font-family: 'Font Awesome 5 Free';
			font-weight: 400;
		}

		.icon:before {
			font-size: 1.25em;
		}

		.icon > .label {
			display: none;
		}

		.icon.solid:before {
			font-weight: 900;
		}

		.icon.brands:before {
			font-family: 'Font Awesome 5 Brands';
		}

		.icon.featured {
			color: #EA8A95;
			display: block;
			margin: 0 0 1.5em 0;
			cursor: default;
		}

			.icon.featured:before {
				font-size: 6em;
			}

/* Wrappers */

	.wrapper {
		background-image: url("images/bg.png");
		box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.05), inset 0px 2px 3px 0px rgba(0, 0, 0, 0.1);
		padding: 8em 0 8em 0;
		text-align: center;
	}

		.wrapper.style1 {
			background-image: none;
			background-color: #fff;
		}

		.wrapper.style2 {
			background-color: #F3F0E7;   /* nature beige */
			text-shadow: none; 
		}

		.wrapper.style3 {
			background-color: #f4f4f4;
			text-shadow: 1px 1px 0px #fff;
		}

		.wrapper.style4 {
			background-color: #303030;
			color: #999;
			text-shadow: -1px -1px 0px #181818;
		}

			.wrapper.style4 h1, .wrapper.style4 h2, .wrapper.style4 h3, .wrapper.style4 h4, .wrapper.style4 h5, .wrapper.style4 h6 {
				color: #fff;
			}

			.wrapper.style4 form input[type=text],
			.wrapper.style4 form input[type=password],
			.wrapper.style4 form select,
			.wrapper.style4 form textarea {
				border: none;
				background: #282828;
			}

				.wrapper.style4 form input[type=text]:focus,
				.wrapper.style4 form input[type=password]:focus,
				.wrapper.style4 form select:focus,
				.wrapper.style4 form textarea:focus {
					background: #252525;
				}

/* Nav */

	#nav {
		background-color: #282828;
		text-align: center;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 10000;
		cursor: default;
		height: 3.5em;
		line-height: 3.5em;
	}

		#nav ul {
			margin-bottom: 0;
			list-style: none;
			padding-left: 0;
		}

		#nav li {
			display: inline-block;
			padding-left: 0;
		}

		#nav a {
			-moz-transition: background-color .2s ease-in-out;
			-webkit-transition: background-color .2s ease-in-out;
			-ms-transition: background-color .2s ease-in-out;
			transition: background-color .2s ease-in-out;
			position: relative;
			display: block;
			color: #fff;
			text-decoration: none;
			outline: 0;
			font-weight: 600;
			border-radius: 8px;
			color: #fff;
			height: 2.5em;
			line-height: 2.5em;
			padding: 0 1.25em;
		}

			#nav a:hover {
				color: #fff !important;
				background: #383838;
			}

			#nav a.active {
				background: #484848;
			}

				#nav a.active:before {
					content: '';
					display: block;
					position: absolute;
					bottom: -0.6em;
					left: 50%;
					margin-left: -0.75em;
					border-left: solid 0.75em transparent;
					border-right: solid 0.75em transparent;
					border-top: solid 0.6em #282828;
				}

/* Articles */

	body > article {
		margin-bottom: 0;
	}

	#top {
		padding: 10em 0 10em 0;
		text-align: left;
	}

		#top .image {
			border-radius: 100%;
			width: 20em;
			height: 20em;
			margin: 0;
		}

			#top .image img {
				border-radius: 100%;
			}

		#top h1 {
			margin-top: 0.35em;
		}

		#top p {
			font-size: 1.5em;
			line-height: 1.75em;
		}

			#top p a {
				color: inherit;
			}

	#contact footer {
		font-size: 0.9em;
	}

/* Copyright */

	#copyright {
		color: #666;
		font-size: 1em;
		line-height: 1em;
		list-style: none;
		padding-left: 0;
		margin-bottom: 0;
	}

		#copyright li {
			display: inline-block;
			border-left: solid 1px rgba(0, 0, 0, 0.5);
			box-shadow: -1px 0px 0px 0px rgba(255, 255, 255, 0.1);
			padding: 0 0 0 1em;
			margin: 0 0 0 1em;
		}

			#copyright li:first-child {
				border: 0;
				box-shadow: none;
				padding-left: 0;
				margin-left: 0;
			}

		#copyright a {
			-moz-transition: color .2s ease-in-out;
			-webkit-transition: color .2s ease-in-out;
			-ms-transition: color .2s ease-in-out;
			transition: color .2s ease-in-out;
			color: inherit;
		}

			#copyright a:hover {
				color: #777;
			}

/* Large */

	@media screen and (max-width: 1280px) {

		/* Basic */

			body {
				font-size: 11pt;
			}

			input, textarea, select {
				font-size: 11pt;
			}

			header {
				margin: 0 0 4em 0;
			}

		/* Wrappers */

			.wrapper {
				padding: 5em 0 5em 0;
				text-align: center;
			}

				.wrapper.style4 .row-special {
					margin: 2em 0 0 0;
					padding: 2em 0 2em 0;
				}

		/* Articles */

			#top {
				padding: 8em 0;
			}

				#top .image {
					width: 24em;
					height: 24em;
					margin: 0;
				}

	}

/* Medium */

	@media screen and (max-width: 980px) {

		/* Articles */

			#top {
				text-align: center;
				padding: 5em 0;
			}

				#top .image {
					margin: 0 auto 2em auto;
				}

	}

/* Small */

	@media screen and (max-width: 736px) {

		/* Basic */

			body {
				padding-top: 44px;
			}

			body, input, textarea, select {
				line-height: 1.75em;
				font-size: 10pt;
				letter-spacing: 0;
			}

			h1, h2, h3, h4, h5, h6 {
				font-size: 1.25em;
				margin: 0 0 0.4em 0;
			}

			h1 {
				font-size: 2.25em;
				line-height: 1.25em;
			}

			header {
				margin: 0 0 2em 0;
			}

				header > p {
					font-size: 1.25em;
				}

			footer {
				margin: 2.5em 0 0 0;
			}

				footer > p {
					font-size: 1.25em;
				}

			hr {
				margin: 1.5em 0 2em 0;
			}

		/* Section/Article */

			section, article {
				clear: both;
			}

		/* Button */

			input[type="button"],
			input[type="submit"],
			input[type="reset"],
			button,
			.button {
				text-align: center;
				font-size: 1.2em;
				width: 100%;
				padding: 1em 0 1em 0;
			}

				input[type="button"].large,
				input[type="submit"].large,
				input[type="reset"].large,
				button.large,
				.button.large {
					font-size: 1.2em;
					letter-spacing: 0;
				}

		/* Social */

			ul.social {
				padding: 1em 0.5em 0 0.5em;
			}

				ul.social li {
					margin: 0.5em 0.5em 0.5em 0.5em;
				}

					ul.social li a {
						top: 0 !important;
					}

						ul.social li a:before {
							background-color: transparent !important;
						}

		/* Actions */

			ul.actions {
				margin: 0;
			}

				ul.actions li {
					display: block;
					margin: 15px 0 0 0;
				}

					ul.actions li:first-child {
						margin-top: 0;
					}

		/* Box */

			.box {
				padding: 30px 20px 30px 20px;
				margin: 0 0 20px 0 !important;
			}

				.box h3 {
					margin-bottom: 0.25em;
				}

				.box .image.centered {
					margin-bottom: 1em;
				}

				.box .image.featured {
					position: relative;
					left: 20px;
					top: 20px;
					margin: -50px 0 50px -40px;
					width: auto;
				}

				.box.style1 {
					max-width: 32em;
					margin-left: auto !important;
					margin-right: auto !important;
				}

				.box.style2 {
					max-width: 32em;
					margin-left: auto !important;
					margin-right: auto !important;
				}

		/* Wrappers */

			.wrapper {
				padding: 3em 0;
				text-align: center;
			}

		/* Nav */

			#nav {
				height: 44px;
				line-height: 44px;
			}

				#nav a {
					padding: 0 0.75em;
					height: inherit;
					line-height: inherit;
					border-radius: 0;
				}

					#nav a:hover {
						background-color: transparent;
					}

		/* Articles */

			#top {
				padding: 3em 0;
			}

				#top .image {
					width: 15em;
					height: 15em;
					margin-bottom: 0;
				}

				#top p {
					font-size: 1em;
				}

			#contact footer {
				margin: 0;
			}

		/* Copyright */

			#copyright {
				font-size: 1em;
				margin: 0;
			}

				#copyright li {
					display: block;
					margin: 1em 0 0 0;
					padding: 0;
					box-shadow: none;
					border-left: 0;
				}

					#copyright li:first-child {
						margin-top: 0;
					}

	}

	/* Header with logo + two-line title */

	#header.with-logo {
		display: flex;
		align-items: center; /* ključno */
		gap: 1rem;
	}

	.fg-logo {
		height: 85px; /* ili 60px ako želiš mrvicu veću */
		width: auto;
		display: block;
		margin-bottom: -15px; /* ovo ga spušta NA SREDINU */
		padding-left: 20px; /* pomeri ulevo (povećaj ili smanji po želji) */
	}

.header-text .site-title {
    margin: 0;
    padding: 0;
    line-height: 1.1;
    font-size: 2.5em;
    font-weight: 700;
    color: #499356; /* tvoja zelena */
	padding-left: 40px; /* pomeri ulevo (povećaj ili smanji po želji) */
}

.header-text .site-title span {
    display: block; /* forsira dva reda */
}
.handwritten-dancing {
    font-family: 'Dancing Script', cursive;
    font-size: 1.35em;     /* malo veće da bude efektnije */
    font-style: normal;    /* Dancing Script je ionako cursive */
    color: #555;           /* NE zelena – samo neutralno */
    letter-spacing: 0.4px; /* daje čitljivost */
    line-height: 1.3em;
}

.subtitle-container {
    text-align: right;   /* redovi poravnani desno */
    margin-top: -10px;   /* fino podešavanje */
    margin-bottom: 20px;
    padding-right: 400px; /* pomeri ulevo (povećaj ili smanji po želji) */
}

.handwritten-marck {
    font-family: 'Marck Script', cursive;
    font-size: 1.25em;
    font-style: normal;
    color: #555;        /* neutralna siva, ne zelena */
    letter-spacing: 0.3px;
    line-height: 1.3em;
}
.house-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

/* responsivno */
@media screen and (max-width: 980px) {
    .house-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 736px) {
    .house-gallery-grid {
        grid-template-columns: 1fr;
    }

    .house-gallery-item {
        height: 180px;
    }
}


/* Grid za zajedničke slike */
.house-gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    height: 200px;          /* visina bloka, po želji */
}

/* sve slike u bloku – jedna preko druge */
.house-gallery-item img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 0.6s ease;
}

/* aktivna slika */
.house-gallery-item img.active {
    opacity: 1;
}
/* SLIDESHOW FIX — mora biti poslednji u fajlu */

.house-gallery-item {
    position: relative !important;
    overflow: hidden;
    border-radius: 14px;
    height: 240px; /* povećaj ili smanji po želji */
}

.house-gallery-item img {
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0 !important;
    transition: opacity 0.6s ease !important;
}

.house-gallery-item img.active {
    opacity: 1 !important;
}
/* GRID */
.house-gallery-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    margin-top: 25px;
}

/* BLOK ZA SLIKE */
.house-gallery-item {
    position: relative !important;
    height: 220px !important;
    overflow: hidden !important;
    border-radius: 14px;
}

/* SLIKE IN-SLIDESHOW */
.house-gallery-item img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0 !important;
    transition: opacity 0.6s ease-in-out !important;
}

.house-gallery-item img.active {
    opacity: 1 !important;
}

/* RESPONSIVE GRID */
@media screen and (max-width: 980px) {
    .house-gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media screen and (max-width: 736px) {
    .house-gallery-grid {
        grid-template-columns: 1fr !important;
    }
}
/* svaki blok je mini kolona */
.house-gallery-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* naziv iznad bloka */
.gallery-label {
    font-size: 1.1em;
    font-weight: 600;
    color: #499356; /* tvoja zelena */
    margin: 0;
    text-align: left; /* može i center ili right */
	border-left: 4px solid #499356;
    padding-left: 10px;
}
 /* Poravnavanje slika u boxovima (sobe) */
.box.style1 .image.featured img {
    width: 100%;
    height: 200px;       /* promeni po želji: 180px, 220px itd. */
    object-fit: cover;   /* poravna slike identično */
    border-radius: 8px;  /* estetika */
}



/* 1. Sve slike u karticama soba – ista visina i crop */
.box.style1 .image.featured img {
    width: 100%;
    height: 210px;        /* probaj 210–230px, po želji */
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

/* 2. Kutije za sobe – iste visine i raspored unutra */
.box.style1 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 420px;        /* po potrebi 400, 430… */
}

/* 3. Blok sa slikom – uvek isti razmak od teksta ispod */
.box.style1 .image.featured {
    margin: 0 0 1.8em 0;  /* spušta naslov malo niže od slike */
}

.handwritten-courgette {
    font-family: 'Courgette', cursive;
	padding-right: 3px; /* mali razmak posle svake Courgette reči */
}

.handwritten-sacramento {
    font-family: 'Sacramento', cursive;
    font-size: 1.1em;     /* 1.6–2.0 idealno */
    letter-spacing: 0.5px;
}
.hero-reserve {
    text-align: center;
}

.hero-reserve .image {
    display: inline-block;
}

.hero-reserve .button {
    margin-top: -1em;    /* razmak ispod slike */
}
.wrapper.style2 {
    padding-top: 3.5em !important;
    padding-bottom: 3.5em !important;
}

.wrapper.style1 {
    padding-top: 3.5em !important;
    padding-bottom: 3.5em !important;
}

.wrapper.style3 {
    padding-top: 3.5em !important;
    padding-bottom: 3.5em !important;
}

.wrapper.style4 {
    padding-top: 3.5em !important;
    padding-bottom: 3.5em !important;
}

/* ===========================
   BOOKING – OCENA + SLIDER
   =========================== */

/* Box sa prosečnom ocenom */
.booking-score-box {
    text-align: center;
    padding: 2.5em 2em;
    background-color: #FBF9F4;
    border-radius: 14px;
	box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    width: 100%;                  /* zauzmi celu svoju kolonu */
}

.booking-score-main {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25em;
    margin-bottom: 0.3em;
}

.booking-score-number {
    font-size: 3.2em;
    font-weight: 700;
    color: #499356;
    line-height: 1;
}

.booking-score-label {
    font-size: 1.4em;
    color: #777;
}

.booking-score-text {
    margin-top: 0.5em;
    margin-bottom: 1.6em;
    color: #666;
    font-size: 0.95em;
}

/* Dve kolone – Booking box levo, slider desno */
.reviews-flex {
    display: flex;
    justify-content: flex-start;   /* nema razvlačenja, drži ih zajedno */
    align-items: stretch;
    gap: 3em;
    margin-top: 2em;
}

.reviews-left,
.reviews-right {
    flex: 1 1 0;
}

/* Naslov iznad slidera */
.booking-review-slider h3 {
    margin-bottom: 1em;
    text-align: left;
}

/* Kartica sa sliderom (screenshotovima) */
.review-slider {
    position: relative;
    width: 100%;
    height: 295px;                 /* po potrebi 380–440 */
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    overflow: hidden;
}

/* slike – jedna preko druge, samo jedna vidljiva */
.review-slider img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;           /* hoćeš veći tekst → probaj 'cover' */
    background: #ffffff;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.review-slider img.active {
    opacity: 1;
}

/* MOBILNI: jedno ispod drugog */
@media screen and (max-width: 980px) {
    .reviews-flex {
        flex-direction: column;
        align-items: center;
    }

    .reviews-left,
    .reviews-right {
        width: 100%;
        max-width: 480px;
    }

    .booking-review-slider h3 {
        text-align: center;
    }
}
/* Kontakt sekcija – jednostavna i čista */

.contact-box {
    text-align: center;
    margin-top: 2em;
}

.contact-box h3 {
    margin-bottom: 0.3em;
    color: #3e3e3e;
    font-weight: 700;
}

.contact-box p {
    margin-bottom: 1.2em;
    color: #666;
    font-size: 1.1em;
}

.contact-link {
    color: #499356;
    font-weight: 600;
    text-decoration: none;
}

.contact-link:hover {
	
    text-decoration: underline;
	
}

/* Social ikone ispod "Pronađite nas" */
.social-contact {
    list-style: none;
    padding-left: 0;
    margin-top: 1.5em;
}

.social-contact li {
    display: inline-block;
    margin: 0 0.4em;
}

.social-contact a {
    font-size: 1.6em;
    color: #499356 !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.social-contact a:hover {
    color: #3b7c45 !important;
}


/* Omotač – centriran, ide preko širine svog kontejnera */
 
.products-mosaic-wrapper {
    width: 100%;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}

/* Sam mozaik */
.products-mosaic {
    display: grid;
	align-items: center;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    /* OBRIŠI grid-auto-rows ovde! */
    gap: 12px;
}


/* Osnovna pločica */
.pm-tile {
    position: relative;
    overflow: hidden;                 /* da slike prate zaobljene ivice */
    border-radius: 14px;              /* zaobljeni ćoškovi kao ranije */
    /* NEMA background-a – nasleđuje pozadinu stranice */
}

/* Velika pločica – efekat "big" */
.pm-tile--big {
    grid-column: span 2;
    grid-row: span 1;
}

/* Slike – da se NE CROPUJU i budu centrirane */
/* Slike u pločicama – prirodna visina, bez croppovanja,
   ali i dalje slideshow + fade + zoom */
   .pm-tile img {
    width: 100%;
    height: auto;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 1s ease, transform 0.3s ease;
	border-radius: inherit;
}

/* aktivna slika – ona drži visinu pločice */
.pm-tile img.active {
    opacity: 1;
    position: relative;   /* ovo je trik: ova slika određuje visinu */
	transform-origin: center center;   /* OVO DODAJ */
}

 

.products-mosaic-box {
    height: 550px;         /* prilagodi visini najviše slike */
    overflow: hidden;      /* sprečava pomeranje stranice */
    display: flex;
    align-items: center;   /* centriranje pločica vertikalno */
}

.products-mosaic-box {
	padding-top: 8px;   /* kontrolišeš tačno razmak */
	box-sizing: border-box;
  }

/* RESPONSIVE – manje kolona na užim ekranima */
@media (max-width: 1100px) {
    .products-mosaic {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .products-mosaic {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 180px;
    }

    /* Na manjim ekranima smanjujemo "big" efekat da se ne lomi layout */
    .pm-tile--big {
        grid-column: span 2;
        grid-row: span 2;
    }
}

@media (max-width: 520px) {
    .products-mosaic {
        grid-template-columns: 1fr;
        grid-auto-rows: 200px;
    }

    .pm-tile--big {
        grid-column: span 1;
        grid-row: span 1;
    }
}
 /* Ceo box je klikabilan */
.apartment-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Animacija cele kartice */
.apartment-link .box.style1 {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.apartment-link:hover .box.style1 {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

/* Slika se uvećava */
.image.featured {
    overflow: hidden;
}

.image.featured img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

/* Zoom efekat */
.apartment-link:hover .image.featured img {
    transform: scale(1.08);
}
/* 1. Vrati osnovnu boju za celu karticu (link) */
.apartment-link,
.apartment-link:link,
.apartment-link:visited {
    color: inherit !important;
}
 

/* 4. Na hover malo potamni samo tu liniju, ostatak ostaje isti */
.apartment-link:hover p {
    color: #499356 !important;
}

.hero-video-slider {
    margin-top: 1.3rem;
    position: relative;
    width: 100%;
    max-width: 460px;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.hero-video-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.hero-video-slide.active {
    opacity: 1;
    position: relative;
}

.hero-video-slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Video u hero slajderu - prikaži ceo kadar */
.hero-video-slide video {
    width: 100%;
    height: 100%;
    object-fit: contain;      /* umesto cover */
    background: #000;         /* crne “trake” ako treba */
}
/* Poravnaj kolone u #top sekciji po sredini po visini */
#top .row {
    align-items: center;
}

/* Zbij malo razmak iznad videa */
.hero-video-slider {
    margin-top: 0.5rem;   /* ako je i dalje prenisko, slobodno stavi 0 */
}
.subtitle-container p {
    margin-bottom: 0.5rem;
}
/* === HERO DESNO: TEKST + VIDEO U ISTOM REDU === */

.hero-right {
    display: flex;
    align-items: center;
    gap: 2rem;                 /* razmak između teksta i videa */
}

/* Tekst zauzima više prostora, video fiksnu širinu */
.hero-text {
    flex: 1 1 0;
}

/* PREGAZI stari subtitle-container (skidamo ogromni padding-right) */
.subtitle-container {
    text-align: left;
    margin-top: 0;
    margin-bottom: 0.75rem;
    padding-right: 0;
}

/* Video kutija desno */
.hero-video-slider {
    flex: 0 0 360px;           /* širina videa (po potrebi 320–420px) */
    max-width: 100%;
	height: 450px;   /* VISINA – slobodno prilagodi */
    margin-top: 0;             /* da ne beži naniže */
    position: relative;
    border-radius: 14px;
    overflow: hidden;
	box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

 


/* Slajdovi – jedan preko drugog */
.hero-video-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.hero-video-slide.active {
    opacity: 1;
}

/* Prikaži ceo kadar videa, bez sečenja */
.hero-video-slide video {
    width: 100%;
    height: 100%;
    object-fit: contain;        /* važno: ceo video, bez croppovanja */
    background: #000;           /* crne trake ako treba */
    display: block;
}




/* Ceo red #top poravnaj po sredini po visini */
#top .row {
    align-items: center;
}

/* RESPONSIVE: na mobilnom neka video ide ispod teksta */
@media screen and (max-width: 980px) {
    .hero-right {
        flex-direction: column;
        align-items: center;
    }

    .hero-video-slider {
        flex: 0 0 auto;
        width: 100%;
        max-width: 420px;
    }

    .subtitle-container {
        text-align: center;
    }
}
 
/* Remove spacing between lines */
.subtitle-lines span {
    display: block;
    line-height: 1.5;   /* tight, natural spacing */
     
}

/* Text alignment */
.subtitle-lines .line-left   { text-align: left; }
.subtitle-lines .line-center { text-align: center; }
.subtitle-lines .line-right  { text-align: right;  }


.hero-reserve {
    display: flex;
    flex-direction: column;
	align-items: center;   
    justify-content: space-between;  /* slika gore, dugme dole */
    height: 100%;                    /* poravnanje sa desnom kolonom */
}
 

.hero-reserve .button {
	margin-top: 3.2rem;
    width: fit-content;
    padding: 0.6rem 1.1rem;
    display: inline-block;
}



/* Zajedničke slike domaćinstva – unutrašnje margine */
.house-gallery {
    /* ograniči sadržaj i centriraj ga */
    max-width: 1200px;
    margin: auto auto;
	margin-top: 4.5em;
	margin-bottom: 4.5em;
    padding: 0 1px;   /* leve i desne margine unutar bež pozadine */
}

/* dodatno: grid da ne nalegne na ivice */
.house-gallery-grid {
    padding-left: 1px;
    padding-right: 1px;
}

/* 🟩 VIDEO MOZAIK – GRID STRUKTURA */
.video-grid {
    display: grid;
    /* prve 3 kolone malo uže, četvrta šira */
    grid-template-columns: 0.7fr 0.7fr 0.7fr 1.3fr;

	
}

/* 🟦 WIDE (gornji) – 3 kolone */
.video-main {
    grid-column: 1 / span 3;
    grid-row: 1;
    height: 375px;   /* ✔ visina pod tvojom kontrolom */
}

/* 🟥 TALL (desni visoki) – obuhvata oba reda */
.video-tall {
    grid-column: 4;
    grid-row: 1 / span 2;
    height: 705px;   /* ✔ visina = 2 × donje videe (npr. 2x270) */
}

/* 🟨 3 NARROW blokovi dole */
.video-narrow-1,
.video-narrow-2,
.video-narrow-3 {
    height: 310px;  /* ✔ ista visina kao .video-main, ti menjaš */
}

.video-narrow-1 { grid-column: 1; grid-row: 2; }
.video-narrow-2 { grid-column: 2; grid-row: 2; }
.video-narrow-3 { grid-column: 3; grid-row: 2; }



/* 🧱 Pločice: okvir + boja pozadine (crna za letterbox) */
.video-tile {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    background: transparent;        /* ✔ tamne trake po želji */
	box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* 🎥 VIDEO — CELO VIDILJIVO (zoom-out), BEZ CROPA */
.video-tile video {
    width: 100%;
    height: 100%;
    object-fit: contain;      /* ✔ zoom-out + crne trake */
    display: none;
	background: transparent;   /* crne trake */
}

.video-tile video.active {
    display: block;
}

/* 📱 Responsive – sve ispod jednog */
@media (max-width: 980px) {
    .video-grid {
        grid-template-columns: 1fr;
    }

    .video-main,
    .video-tall,
    .video-narrow-1,
    .video-narrow-2,
    .video-narrow-3 {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    /* niže visine na mobilnim */
    .video-main,
    .video-narrow-1,
    .video-narrow-2,
    .video-narrow-3 {
        height: 220px;
    }

    .video-tall {
        height: 440px;
    }
}

 

/* Aktivni video */
.video-tile video.active {
    display: block;
}

/* Uklanjanje svih vizuelnih efekata oko videa */
.video-gallery,
.video-grid {
    background: transparent !important;
}

/* === HERO SOBE – DVE KOLONE === */
.room-hero {
	max-width: 1100px;
	margin: 3rem auto;
	padding: 0 25px;
  }
  
  .room-hero-grid {
	display: grid;
	grid-template-columns: 1fr minmax(320px, 460px);
	gap: 2rem;
	align-items: center;
  }
  
  /* LEVO */
  .room-hero-text h2 {
	font-size: 2rem;
	margin-bottom: 0.5rem;
  }
  
  .room-hero-text p {
	font-size: 1.1rem;
	margin-bottom: 1.5rem;
  }
  
  /* === VIDEO BOX (BEZ POZADINE, BEZ CROPA) === */
  .room-video-box {
	position: relative;
	width: 100%;
	aspect-ratio: 9 / 16;     /* ⬅️ PROMENI U 9 / 16 AKO SU VERTIKALNI */
	overflow: hidden;
	border-radius: 14px; 
  }
  
  /* VIDEO SLIDE */
  .room-video-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;      /* ceo video */
	background: transparent;  /* NEMA TRAKA */
	opacity: 0;
	transition: opacity 0.6s ease;
  }
  
  .room-video-slide.active {
	opacity: 1;
	z-index: 1;
  }
  
  /* MOBILE */
  @media (max-width: 900px) {
	.room-hero-grid {
	  grid-template-columns: 1fr;
	}
  }
  
 


.room-video-box {
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 6;
    overflow: hidden;
    border-radius: 14px;
}

.room-video-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: transparent;
    border-radius: 14px;
}

.room-video-box {
	position: relative;
	width: 100%;
	aspect-ratio: 5 / 6;
	overflow: hidden;
	border-radius: 14px;
  
	/* VAŽNO: nema okvira */
	border: none;
	outline: none;
	box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  }
  
  .room-video-box .room-video-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: transparent;
  
	/* KLJUČNO: radius i na videu */
	border-radius: 14px;
  }
  .house-gallery-item video {
	width: 100%;
	height: auto;
	display: none;          /* isto kao slike kad nisu aktivne */
	border-radius: inherit;    /* ili inherit ako već imaš */
  }
  .house-gallery-item img,
.house-gallery-item video {
  opacity: 0;
  transition: opacity 1s ease;
  display: block;
}

.house-gallery-item img.active,
.house-gallery-item video.active {
  opacity: 1;
}
 
.house-gallery-item video {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
  }
  
  /* VIDEO u house galeriji: malo “zum” ali bez sečenja (contain) */
.house-gallery-item video.active {
	transform: scale(3.2);   /* probaj 1.08 – 1.18 */
	transform-origin: center;
  }



  .video-gallery {
    padding-top: 80px;
}

/* ===== VIDEO MOZAIK: zaobljeni ćoškovi + suptilan shadow ===== */

.video-tile {
	border-radius: 14px;
	overflow: hidden; /* ključno da video prati radius */
	box-shadow: 0 8px 20px rgba(0,0,0,0.15);
	background: transparent; /* da ostane tvoja bež pozadina */
  }
  
  /* video u pločici */
  .video-tile video {
	width: 100%;
	height: 100%;
	object-fit: contain;  /* zoom-out, bez sečenja */
	display: none;
	border-radius: inherit;
	background: transparent; /* nema crnih “traka” kao pozadine */
  }
  
  .video-tile video.active {
	display: block;
  }
/* ===== VIDEO TILE: da pločica bude 100% video (mali crop) ===== */

.video-tile{
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 8px 20px rgba(0,0,0,0.15);
	background: #0000; /* može i transparent */
  }
  
  /* video mora da popuni celu pločicu */
  .video-tile video{
	position: absolute;
	inset: 0;              /* top/right/bottom/left = 0 */
	width: 100%;
	height: 100%;
	object-fit: cover;      /* <-- OVO je “mali crop”, ali izgleda premium */
	object-position: center;
	display: none;          /* ako koristiš slideshow logiku */
  }
  
  /* aktivni video */
  .video-tile video.active{
	display: block;
  }
	
  .video-grid{
	display: grid !important;
	grid-template-columns: 0.7fr 0.7fr 0.7fr 1.3fr;
  
	column-gap: 20px;   /* ovo drži horizontalni razmak "kao sada" */
	row-gap: 20px;      /* ovo je vertikalni razmak koji želiš */
  }

 
/* O nama – tekst */
#about .about-text p{

	margin-bottom: 1.2em;
  }
  
  /* Dragan – isti kontejner, iste ivice */
  #about .host-section{
	display: flex;
	gap: 3rem;
	align-items: flex-start;
	margin-top: 2rem;
  }
  
  /* Važno: ubija centriranje iz template-a */
  #about .host-text{
	flex: 1;
	
  }
  
  /* Slika desno, ali u ISTOJ širini */
  #about .host-image{
	flex: 0 0 380px;
  }
  
  #about .host-image img{
	width: 100%;
	display: block;
	border-radius: 14px;
  }
  
  /* Mobilni */
  @media (max-width: 736px){
	#about .host-section{
	  flex-direction: column;
	}
  }
  

  .youtube-link {
    color: #cc0000;
    font-weight: 600;
    text-decoration: none;
    margin-left: 6px;
}

.youtube-link i {
    margin-right: 6px;
    font-size: 1.1em;
    vertical-align: middle;
}

.youtube-link:hover {
    text-decoration: underline;
}
 
/* ================================
   DROPDOWN SAMO ZA "SMEŠTAJ"
   ================================ */

/* Glavni meni – vrati default ponašanje ostalih stavki */
#nav ul.container > li {
	display: inline-block;
	vertical-align: middle;
}

/* Samo Smeštaj ima relativnu poziciju */
#nav ul.container > li.has-submenu {
	position: relative;
}

/* Strelica (dugme) – ne utiče na layout */
#nav ul.container > li.has-submenu > .submenu-toggle {
	display: inline-block;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
	padding: 0 8px;
	line-height: 1;
	vertical-align: middle;
}

/* Podmeni – ISKLJUČIVO ovaj UL */
#nav ul.container > li.has-submenu > ul.submenu {
	display: none !important;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: rgba(0,0,0,0.85);
	border-radius: 8px;
	padding: 8px 0;
	margin: 0;
	list-style: none;
	z-index: 9999;
}

/* Stavke u podmeniju su vertikalne */
#nav ul.container > li.has-submenu > ul.submenu > li {
	display: block;
	margin: 0;
}

/* Linkovi u podmeniju */
#nav ul.container > li.has-submenu > ul.submenu > li > a {
	display: block;
	padding: 10px 14px;
	white-space: nowrap;
	color: #fff !important;
	text-decoration: none;
}

/* Hover u podmeniju */
#nav ul.container > li.has-submenu > ul.submenu > li > a:hover {
	background: rgba(255,255,255,0.12);
}

/* Otvoreno stanje (samo Smeštaj) */
#nav ul.container > li.has-submenu.open > ul.submenu {
	display: block !important;
}


/* ================================
   PODMENI SAMO ZA SMEŠTAJ (ROBUST)
   ================================ */

/* Podrazumevano sakrij podmeni u nav-u (bez obzira na strukturu) */
#nav ul.submenu {
	display: none !important;
  }
  
  /* Samo taj LI je relativan */
  #nav li.has-submenu {
	position: relative;
  }
  
  /* Strelica dugme */
  #nav li.has-submenu > .submenu-toggle {
	display: inline-block;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
	padding: 0 8px;
	line-height: 1;
	vertical-align: middle;
  }
  
  /* Izgled dropdown-a */
  #nav li.has-submenu > ul.submenu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: rgba(0,0,0,0.85);
	border-radius: 8px;
	padding: 8px 0;
	margin: 0;
	list-style: none;
	z-index: 9999;
  }
  
  /* Stavke u dropdown-u vertikalno */
  #nav li.has-submenu > ul.submenu > li {
	display: block;
	margin: 0;
  }
  
  /* Linkovi u dropdown-u */
  #nav li.has-submenu > ul.submenu > li > a {
	display: block;
	padding: 10px 14px;
	white-space: nowrap;
	color: #fff !important;
	text-decoration: none;
  }
  
  #nav li.has-submenu > ul.submenu > li > a:hover {
	background: rgba(255,255,255,0.12);
  }
  
  /* Otvoreno stanje */
  #nav li.has-submenu.open > ul.submenu {
	display: block !important;
  }
  
  #nav li.has-submenu {
	position: relative;
  }
  
  /* caret je deo linka, NE pravi novi element u redu */
  #nav .submenu-parent {
	display: inline-block;
  }
  
  #nav .caret {
	margin-left: 6px;
	font-size: 0.8em;
  }
  
  /* dropdown je IZBAČEN iz toka */
  #nav ul.fg-submenu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: rgba(0,0,0,0.85);
	border-radius: 8px;
	padding: 8px 0;
	list-style: none;
	min-width: 220px;
	z-index: 9999;
  }
  
  #nav li.has-submenu:hover > ul.fg-submenu {
	display: block;
  }
  
  .price-list {
	max-width: 700px;
	margin: 0 auto;
  }
  
  .price-list h2 {
	text-align: center;
	margin-bottom: 2em;
  }
  
  .price-list h2 span {
	color: #888;
	font-weight: normal;
  }
  
  .price-block {
	margin-bottom: 2.5em;
  }
  
  .price-block h3 {
	margin-bottom: 0.3em;
  }
  
  .price-block h3 span {
	color: #777;
	font-weight: normal;
  }
  
  .price-block .rooms {
	font-style: italic;
	color: #666;
	margin-bottom: 0.8em;
  }
  
  .price-block .note {
	font-weight: bold;
	text-align: right;
	margin-bottom: 0.5em;
  }
  
  .price-row {
	display: flex;
	justify-content: space-between;
	padding: 6px 0;
	border-bottom: 1px dotted rgba(0,0,0,0.15);
  }
  
  .price-row:last-child {
	border-bottom: none;
  }
  
  .price-row .price {
	font-weight: 600;
	white-space: nowrap;
  }
  
  .call-button{
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start;
	gap: 18px;
  }
  
  /* Fiksna kolona za ikonu */
  .call-ico{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	flex: 0 0 48px;
  }
  
  /* Ikona – poništi Miniport .icon ponašanje */
  .call-ico .icon{
	font-size: 1.8em;
	line-height: 1;
	position: static !important;
	margin: 0 !important;
	transform: translateY(1px); /* fino optičko poravnanje */
  }
  
  /* Tekst desno */
  .call-text{
	display: flex;
	flex-direction: column;
	justify-content: center;
	line-height: 1.15;
	text-align: left;
	font-size: 0.85em;
  }
  
  .call-text .en{
	font-size: 0.85em;
	line-height: 1.15;
	opacity: 0.9;
  }
  

  .section-title-inline { 
	text-align: center; 
  }
  
  .section-title-inline span{
	all: unset;                 /* resetuje sve što span vuče */
	display: inline;            /* vrati inline */
	font: inherit;              /* 100% isti font kao h2 */
	color: inherit;             /* isti kao h2 */
	opacity: 0.45;              /* samo “sivlje” */
  }
  
  

  /* MOBILNI MENI – spreči preklapanje sa sadržajem */
@media screen and (max-width: 736px) {

	/* neka nav bude iznad sadržaja i da ima punu pozadinu */
	#nav {
	  position: sticky;
	  top: 0;
	  z-index: 10000;
	  background: rgba(0,0,0,0.85);
	}
  
	/* lista ide u jednu kolonu */
	#nav ul.container {
	  display: flex;
	  flex-direction: column;
	  align-items: stretch;
	  padding: 10px 12px;
	  gap: 6px;
	}
  
	#nav ul.container > li {
	  display: block;
	  width: 100%;
	  text-align: center;
	}
  
	#nav ul.container > li > a {
	  display: block;
	  width: 100%;
	  padding: 10px 12px;
	}
  
	/* dropdown podmeni (ako ga imaš) neka bude ispod, ne apsolutno */
	#nav li.has-submenu > ul.fg-submenu {
	  position: static;
	  display: none;
	  min-width: 100%;
	  margin: 6px 0 0 0;
	}
  
	#nav li.has-submenu.open > ul.fg-submenu {
	  display: block;
	}
  }
  
/* =========================================
   MOBILE DRAWER MENU – LEFT + HAMBURGER (FINAL)
   ========================================= */

   #nav .nav-mobile { display: none; } /* desktop: nema dugmeta */

   /* Desktop: mobilni elementi ne postoje */
.mobile-menu-btn,
.mobile-menu {
  display: none;
}

@media screen and (max-width: 736px) {

  /* sakrij desktop nav */
  #nav {
    display: none !important;
  }

  /* HAMBURGER – LEVO, CENTRIRAN */
  .mobile-menu-btn{
    display: flex;
    align-items: center;
    justify-content: center;      /* ✅ centriran ☰ */
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 30000;

    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 8px;

    background: rgba(0,0,0,0.85);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
  }

  /* Overlay (blago zatamnjenje, može i transparentno) */
  .mobile-menu{
    display: none;
    position: fixed;
    inset: 0;
    z-index: 30001;
    background: rgba(0,0,0,0.18);
  }

  .mobile-menu.open{
    display: block;
  }

  /* PANEL – LEVO, JOŠ UŽI */
  .mobile-menu-panel{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;

	width: min(38vw, 180px);     /* ✅ uži panel */
    padding: 16px 14px;

    background: rgba(0,0,0,0.92);
    overflow-y: auto;

    transform: translateX(-100%);
    transition: transform 220ms ease;
  }

  .mobile-menu.open .mobile-menu-panel{
    transform: translateX(0);
  }

  /* CLOSE dugme */
  .mobile-menu-close{
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 8px;
    background: rgba(255,255,255,0.12);
    color: #fff;
    cursor: pointer;
    margin-bottom: 14px;
  }

  /* GLAVNE KARTICE – JOŠ UŽE */
  .mobile-menu-panel a{
    display: block;
    width: 65%;                   /* ✅ uža kartica */
    margin: 10px 0;
    padding: 12px 12px;

    color: #fff;
    text-decoration: none;
    border-radius: 14px;
    background: rgba(255,255,255,0.10);
    text-align: left;
  }

  /* PODMENI – jasno uvučen */
  .mobile-menu-panel a.mobile-sub{
    width: 65%;
    margin-left: 16px;            /* ✅ pravi podmeni */
    background: rgba(255,255,255,0.06);
    font-size: 0.95em;
  }

  /* mala vizuelna naznaka podmenija */
  .mobile-menu-panel a.mobile-sub::before{
    content: "— ";
    opacity: 0.7;
  }

  .mobile-menu-panel a:hover{
    background: rgba(255,255,255,0.16);
  }
}


@media screen and (max-width: 736px) {

	/* ukloni gornju belu traku */
	body {
	  padding-top: 0 !important;
	}
  
	/* ako Miniport koristi wrapper */
	.wrapper:first-of-type {
	  padding-top: 0 !important;
	  margin-top: 0 !important;
	}
  
	/* sigurnosno – prvi section/article */
	section:first-of-type,
	article:first-of-type {
	  margin-top: 0 !important;
	  padding-top: 0 !important;
	}
  }

  @media screen and (max-width: 736px) {

	/* ne diramo body */
	body { padding-top: 0 !important; }
  
	/* pomeri samo GLAVNI SADRŽAJ malo dole */
	#main,
	#main > .wrapper:first-child,
	.wrapper:first-of-type {
	  padding-top: 48px !important;  /* ✅ ovde kontrolišeš razmak */
	}
  }

  @media screen and (max-width: 736px) {

	/* 1) Kartica da bude uža i centrirana */
	#smestaj .col-12-small > a {
	  display: block;
	  max-width: 320px;              /* <-- užina kartice */
	  margin: 0 auto !important;
	}
  
	/* 2) Smanji padding unutar bele kartice */
	#smestaj .box.style1 {
	  padding: 1.2em 1.2em 0.8em !important;   /* manje “visine” */
	}
  
	/* 3) Slika u kartici: centriraj u odnosu na beli prostor */
	#smestaj .box.style1 .image.featured {
	  display: block;
	  width: 100%;
	  margin: 0 auto 2em !important;         /* manji razmak ispod slike */
	  text-align: center;                       /* fallback za centriranje */
	}
  
	#smestaj .box.style1 .image.featured img {
	  display: block;
	  margin: 0 auto !important;               /* ✅ centriraj sliku */
	  max-width: 100%;
	  height: auto;
	}
  
	/* 4) Ukloni nepotreban beli prostor ispod teksta */
	#smestaj .box.style1 p {
	  margin: 0.35em 0 0 !important;           /* skoro bez “dole” */
	}
  
	/* 5) Ako h3 pravi veliki razmak, malo ga smanji */
	#smestaj .box.style1 h3 {
	  margin: 0.2em 0 0.2em !important;
	}
  }
  #smestaj .image.featured { left: auto !important; }  

  @media screen and (max-width: 736px) {

	/* 1) UKLONI forsiranu visinu kartice */
	#smestaj .box.style1 {
	  min-height: auto !important;
	  height: auto !important;
	  padding-bottom: 0.8em !important;
	}
  
	/* 2) Slika ne sme da dodaje visinu */
	#smestaj .image.featured {
	  margin-bottom: 0.5em !important;
	}
  
	/* 3) Tekst bez ogromnog donjeg razmaka */
	#smestaj .box.style1 p {
	  margin-bottom: 0 !important;
	  padding-bottom: 0 !important;
	}
  
	/* 4) Naslov da ne “diše” previše */
	#smestaj .box.style1 h3 {
	  margin-bottom: 0.3em !important;
	}
  }
  
/* =========================================
   HRANA (products-mosaic) – MOBILE kao house-gallery
   ========================================= */
   @media screen and (max-width: 736px) {

	/* 1) UGASI desktop "prozor" koji seče sadržaj */
	.products-mosaic-box{
	  height: auto !important;
	  overflow: visible !important;
	  display: block !important;
	  align-items: initial !important;
	  padding-top: 0 !important;
	}
  
	/* 2) 1 kolona */
	.products-mosaic{
	  display: grid !important;
	  grid-template-columns: 1fr !important;
	  gap: 15px !important;
	  align-items: stretch !important;
	}
  
	/* 3) Svaki tile ima svoju visinu (kao house-gallery-item) */
	.pm-tile{
	  position: relative !important;
	  overflow: hidden !important;
	  border-radius: 14px !important;
	  height: 220px !important;     /* menjaj 180–260 po želji */
	}
  
	/* 4) Slideshow slojevi (fade) */
	.pm-tile img{
	  position: absolute !important;
	  inset: 0 !important;
	  width: 100% !important;
	  height: 100% !important;
	  object-fit: cover !important;
	  display: block !important;
	  opacity: 0 !important;
	  transition: opacity 0.6s ease-in-out !important;
	}
  
	.pm-tile img.active{
	  opacity: 1 !important;
	}
  }


  /* =========================
   HRANA (MOBILNI) – da "prodise"
   ========================= */
@media screen and (max-width: 736px) {

	/* malo vazduha oko sekcije */
	#hrana .container {
	  padding-left: 18px !important;
	  padding-right: 18px !important;
	}
  
	/* razmak iznad/ispod svake grupe */
	#hrana .products-mosaic-wrapper {
	  margin: 0 0 100px 0 !important;
	}
  
	/* label (naslov) da ne lepi uz slike */
	#hrana .gallery-label {
	  margin: 0 0 12px 0 !important;
	}
  
	/* GRID: razmak između pločica */
	#hrana .products-mosaic {
	  display: grid !important;
	  grid-template-columns: 1fr !important;
	  gap: 100px !important;         /* ⬅️ ovo je ključ */
	}
  
	/* svaka pločica: malo niža, lepši radius */
	#hrana .pm-tile {
	  height: 280px !important;     /* probaj 200–230 */
	  border-radius: 14px !important;
	  overflow: hidden !important;
	}
  }
  
   /* =========================================================
   MOBILE NORMALIZER – JEDINSTVENE MARGINE (18px)
   HRANA ostaje kakva jeste
   Sve ostale sekcije se usklađuju sa HRANA stilom
   ========================================================= */

@media screen and (max-width: 736px) {

	/* ---------------------------------
	   1) GLOBAL RESET – ukloni sabiranja
	   --------------------------------- */
	body {
	  overflow-x: hidden;
	}
  
	.wrapper,
	article,
	section {
	  padding-left: 0 !important;
	  padding-right: 0 !important;
	}
  
	/* ---------------------------------
	   2) JEDINSTVEN MOBILE GUTTER
	   (sve sekcije dobijaju 18px)
	   --------------------------------- */
	.wrapper > .container,
	article > .container,
	section > .container,
	.video-gallery,
	.house-gallery,
	.room-hero,
	.review-section,
	.booking-section,
	.room-section {
	  padding-left: 18px !important;
	  padding-right: 18px !important;
	}
  
	/* ---------------------------------
	   3) Sekcije bez container-a
	   (video, zajednički prostor, hero slike)
	   --------------------------------- */
	.video-gallery,
	.house-gallery,
	.room-hero {
	  box-sizing: border-box;
	}
  
	/* ---------------------------------
	   4) Kartice i slike – uvek centrirane
	   --------------------------------- */
	img,
	video {
	  max-width: 100%;
	  height: auto;
	}
  
	/* ---------------------------------
	   5) Vizuelna konzistencija kartica
	   --------------------------------- */
	.video-tile,
	.house-gallery-item,
	.room-video-box,
	.review-slider,
	.booking-score-box {
	  border-radius: 14px !important;
	  overflow: hidden !important;
	  box-shadow: 0 8px 20px rgba(0,0,0,0.12) !important;
	}
  
  }


/* =========================================================
   MOBILE GUTTER – CENTRALNA KONTROLA
   menjaš SAMO ovu vrednost (npr. 24–36px)
   ========================================================= */
   :root {
	--mobile-gutter: 33px;
  }

  @media screen and (max-width: 736px) {

	/* SAMO zajedničke slike */
	.house-gallery {
	  margin-left: var(--mobile-gutter) !important;
	  margin-right: var(--mobile-gutter) !important;
	  padding: 0 !important;
	  width: auto !important;
	  max-width: none !important;
	  box-sizing: border-box !important;
	}
  
	/* Unutrašnji grid ostaje pun */
	.house-gallery-grid {
	  width: 100% !important;
	  margin: 0 !important;
	  padding: 0 !important;
	}
  
  }
  
  /* =========================================================
   FIX: Video galerija – ne sme da se pomera / sužava na mobile
   (ukida duplo sabiranje padding-a/margine)
   ========================================================= */
@media screen and (max-width: 736px) {

	/* 1) Video galerija: bez dodatnih margina/paddinga na samoj sekciji */
	section.video-gallery {
	  margin-left: 0 !important;
	  margin-right: 0 !important;
	  padding-left: 0 !important;
	  padding-right: 0 !important;
	  width: 100% !important;
	  max-width: 100% !important;
	  box-sizing: border-box !important;
	}
  
	/* 2) Header može da ima “vazduh”, ali grid ne sme da bude sužen */
	section.video-gallery > header {
	  padding-left: 18px !important;
	  padding-right: 18px !important;
	}
  
	/* 3) Grid: full width, bez dodatnih offseta */
	section.video-gallery .video-grid {
	  margin: 0 !important;
	  padding: 0 !important;
	  width: 100% !important;
	  max-width: 100% !important;
	  box-sizing: border-box !important;
	}
  
	/* 4) Tile: nikad širi od roditelja */
	section.video-gallery .video-tile {
	  width: 100% !important;
	  max-width: 100% !important;
	}
  }