/* Boje */
html {
	--bg: #fff;
	--alt-bg: #D9D7BF;
	--expo-bg: #9a9a68;
	--text: #666;
	--link: #999;
	--link--active: #000;
	--link--tap: #f0f0f0;
	--link--hover: #c47500;
	--link--red: #CC0000;
	--link--orange: #FFCC00;
}

/* Tipografija */
html { font: normal clamp(16px, 1.11vw, 18px)/1.4 Arial, sans-serif }
h1,
.supertitle { font-size: 1.3rem; margin: 1em 0 0 }
h2,
.title { font-size: 1rem; margin: 1em 0 0 }
h3,
.subtitle { font-size: .9rem; margin: 1em 0 0 }
small { font-size: 0.8rem }
.header { font-size: 0.85rem }
.mobile-menu { font-size: 1rem }
h1:first-child,
h2:first-child,
h3:first-child,
p:first-child { margin-top: 0 }

/* Reset */
img { vertical-align: bottom }
table { border-collapse: collapse }

body { background: var(--bg); color: var(--text) }
a { color: var(--link); font-style: italic; text-decoration: none; cursor: pointer; display: inline-block; user-select: none }
a:active { color: var(--link--active) }
@media (pointer: coarse) {
	a:active { -webkit-tap-highlight-color: transparent; background: var(--link--tap); }
}
@media (pointer: fine) {
	a:hover { color: var(--link--hover) }
}

html { overflow-y: scroll }
html,
body { height: 100%; box-sizing: border-box }
body { margin: 0; display: flex; flex-direction: column }
@media (max-width: 699px) {
	body { padding: 3rem 0 0; }
}
.has-modal { position: fixed; width: 100% }

.header__logo { width: 13rem; height: auto }
.header__languages { display: none; }
.header__menu { display: none }
.header__submenu { display: none }
@media (max-width: 699px) {
	.header { position: fixed; z-index: 97; top: 0; left: 0; right: 0; height: 3rem; background: var(--bg); display: flex; }
	.header__home { padding: 0 1rem; display: inline-flex }
	.header.is-scrolled { box-shadow: 0 3px 20px #0002 }
	.header__menu-opener { margin-left: auto; width: 3rem; color: var(--text); position: relative }
	.header__menu-opener:active { color: var(--text) }
	.header__menu-icon,
	.header__close-icon { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; transform: rotate(0); transition: transform 200ms ease-out }
	.header__menu-icon  { opacity: 1 }
	.header__menu-opener--open .header__menu-icon  { opacity: 0; transform: rotate(-90deg) }
	.header__menu-opener--open .header__close-icon { opacity: 1; transform: rotate(-90deg) }
}
@media (min-width: 700px) {
	.header { flex-shrink: 0; line-height: 1.8 }
	.header__home { display: inline-block; padding: 1rem 1rem 0 }
	.header__menu { padding: 0 1rem; display: flex; flex-wrap: wrap }
	.header__languages { display: flex; gap: 0.5rem }
	.header__items { margin-left: auto; display: flex; gap: 0.6rem }
	.header__submenu { padding: 0 1rem; background: var(--alt-bg); text-align: right; display: flex; justify-content: flex-end; gap: 0.8rem }
	.header__link { display: inline-block; color: #333; text-transform: uppercase; font-style: normal; white-space: nowrap; }
	.header__link--current { text-decoration: underline; }
	.header__menu-opener { display: none }
}

.mobile-menu { position: fixed; z-index: 98; top: 3rem; width: 100%; height: calc(100% - 3rem); padding: 1rem 0; box-sizing: border-box; overflow-y: auto; display: none; background: #fff }
.mobile-menu--open { display: block; animation: 150ms 1 appearing }
.mobile-menu__item,
.mobile-menu__subitem { padding: 0.5rem 1rem; border-bottom: 1px dotted var(--text); color: var(--text); font-style: normal; text-transform: uppercase; display: flex; align-items: center }
.mobile-menu__item:focus,
.mobile-menu__item:active { color: var(--link--active) }
.mobile-menu__subitem:focus,
.mobile-menu__subitem:active { background-color: var(--alt-bg) }
.mobile-menu__item--closed::after { content: ''; background: center/contain url(chevron.svg) no-repeat; width: 0.85rem; height: 0.85rem; margin-left: 0.5rem; opacity: 0.4; display: inline-block; vertical-align: baseline }
.mobile-menu__item--open::after { content: ''; background: center/contain url(chevron.svg) no-repeat; width: 0.85rem; height: 0.85rem; margin-left: 0.5rem; opacity: 0.4; display: inline-block; vertical-align: baseline; transform: rotate(90deg) }
.mobile-menu__item--current,
.mobile-menu__subitem--current,
.mobile-menu__lang--current { text-decoration: underline; }
.mobile-menu__langs { margin-top: 1.4rem; padding: 0 1rem; line-height: 2.6rem; display: flex; gap: 1rem; font-size: 88% }
.mobile-menu__lang { color: var(--text); font-style: normal; text-transform: uppercase; }
.mobile-menu__submenu { display: flex; flex-direction: column; height: 0; overflow: hidden; background: var(--alt-bg); transition: 200ms ease-out all; }
@media (min-width: 700px) {
	.mobile-menu { display: none }
}

/* .main-container ima padding i centriran je pomoću 3rem margina na dnu, da parira headeru (na dugim stranicama to ne igra ulogu) */
.main-container { flex-grow: 1; margin-bottom: 3rem; padding: 2rem 1rem; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.main-container--home { padding: 0 }
@media (min-width: 700px) {
	.main-container { padding: 4rem 1rem }
}

.expo { background-color: var(--expo-bg); color: #eee }
.expo__header { padding: 1.25rem 0 1.25rem 1rem }
.expo__footer { padding: 1.25rem 0 1.25rem 1rem }
.expo__image { max-width: 100% }
@media (max-width: 699px) {
	.expo { flex-grow: 1 }
}
@media (min-width: 700px) {
	.expo { position: relative; padding-right: 17.5rem; box-shadow: 0 4px 9px #0006; font-size: 85% }
	.expo__header { position: absolute; right: 0; top: 0; padding: 1.25rem 1.25rem 0 0; text-align: right; }
	.expo__footer { position: absolute; right: 0; bottom: 0; padding: 0 1.25rem 1.25rem 0; text-align: right }
}

.columns { display: flex; flex-direction: column; gap: 1.6rem }
.columns__middle { text-align: justify; hyphens: auto; }
.columns__right { display: none }
@media (min-width: 700px) {
	.columns { max-width: 750px; flex-direction: row }
	.columns__left { flex: 0 0 21%; text-align: right; }
	.columns__middle { padding: 0; }
	.columns__right { flex: 0 0 21%; display: block }
}
.columns__image { max-width: 9.4rem; max-height: 11.25rem }
.columns__link { display: block; margin: 0 0 1rem }
.columns__link--current { color: var(--link--active) }

.gallery { display: grid; grid-template-columns: auto auto; gap: 1.6rem; justify-content: center; justify-items: center; align-items: center; }
.gallery__item { display: grid; grid-template-columns: auto auto auto auto; border: 1px solid #666 }
.gallery__item:hover,
.gallery__item:focus,
.gallery__item:active { opacity: 0.7 }
.gallery__image { max-width: 9.4rem; max-height: 11.25rem; }
@media (min-width: 700px) {
	.gallery { grid-template-columns: auto auto auto auto }
}

.image { width: 100%; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto auto; align-items: center; justify-items: center; gap: 1rem 0 }
.image__back { grid-column: 2/3; grid-row: 1/2; justify-self: flex-end; line-height: 2 }
.image__item { grid-column: 1/3; grid-row: 2/3 }
.image__title { grid-column: 1/3; grid-row: 3/4; text-align: center; font-size: 90%; }
.image__prev { grid-column: 1/2; grid-row: 4/5; justify-self: flex-start; line-height: 2; }
.image__next { grid-column: 2/3; grid-row: 4/5; justify-self: flex-end; line-height: 2 }
.image__image { max-width: 100%; width: auto; height: auto }
@media (min-width: 700px) {
	.image { width: auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; justify-items: center; gap: 1.25rem 3.2rem }
	.image__back { grid-column: 3/4; justify-self: flex-start }
	.image__prev { grid-column: 1/2; grid-row: 2/3 }
	.image__next { grid-column: 3/4; grid-row: 2/3 }
	.image__item { grid-column: 2/3 }
	.image__title { grid-column: 1/4; text-align: center; padding-left: 3.5rem }
}

.viewer { position: fixed; top: 48px; left: 0; right: 0; bottom: 0; display: grid; grid-template-rows: auto 1fr auto; gap: 0.5rem 0; background: var(--bg); z-index: 97; }
.viewer__link { line-height: 2.5; padding: 0 1rem; background: var(--bg); z-index: 1; }
.viewer__link--close { grid-column: 2/3; grid-row: 1/2; justify-self: flex-end; }
.viewer__link--prev { grid-column: 1/2; grid-row: 3/4; justify-self: flex-start }
.viewer__link--next { grid-column: 2/3; grid-row: 3/4; justify-self: flex-end }
.viewer__slides { grid-column: 1/3; grid-row: 2/3; width: 100%; height: 100%; position: relative; }
.viewer__slide { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.5rem; padding: 1px; box-sizing: border-box }
.viewer__image { max-width: 100%; max-height: 100%; width: auto; height: auto; min-height: 0 }
.viewer__title { text-align: center; white-space: pre-wrap; font-size: 90%; user-select: none }
@media (max-width: 699px) {
	.viewer { padding: 2rem 0 1rem }
}
@media (min-width: 700px) {
	.viewer { padding: 0 calc(50vw - 550px) 1rem; grid-template-columns: auto 1fr auto; grid-template-rows: auto 1fr; align-items: center }
	.viewer__link--close { grid-column: 3/4; grid-row: 1/2 }
	.viewer__link--prev { grid-column: 1/2; grid-row: 2/3 }
	.viewer__link--next { grid-column: 3/4; grid-row: 2/3 }
	.viewer__slides { grid-column: 1/4; grid-row: 1/3; overflow: hidden; }
}
@media (max-height: 575px) {
	.viewer { top: 0; padding: 0 }
}

.ani-from-left { transition: transform 200ms ease-out; transform: translateX(100%) }
.ani-from-right { transition: transform 200ms ease-out; transform: translateX(-100%) }
.ani-return { transition: transform 200ms ease-out; transform: translateX(0) }

.is-invisible { opacity: 0; pointer-events: none; }
[hidden] { display: none }

.arrow { width: 1.2rem; height: 1.2rem; vertical-align: -13% }
.warning-icon { width: 8rem; height: 4rem; vertical-align: -44%; opacity: 0.48; margin: 0.41rem; }

.text-center { text-align: center }