/* Reset */

img { vertical-align: bottom }
a { cursor: pointer }
html { overflow-y: scroll }

/* Struktura */

body,
html { height: 100% }
body { margin: 0; display: flex; flex-direction: column; align-items: center }
.editor__body { display: block }

@media (max-width: 719px) {
	.header,
	.gallery,
	.social { padding-left: 8px }
	.logo { line-height: 50px }
	.gallery { display: flex; flex-wrap: wrap }
	.gallery__item { position: static; margin: 0 1px 1px 0 }
	.language,
	.podnozje { width: 100%; padding-right: 8px; box-sizing: border-box }
}

@media (min-width: 720px) {
	.language { width: 700px }
	.page { width: 700px; margin: auto }
	.header { display: flex; flex-wrap: wrap; align-items: center }
	.logo { line-height: 20px }
	.content { min-height: 500px }
	.gallery { position: relative }
	.gallery__item { position: absolute }
}

.language { line-height: 30px; text-align: right }
.podnozje { line-height: 30px; text-align: right }
.social { padding-bottom: 16px }

.gallery__image { width: 100px; height: 100px }

[data-x="0"] { left: 0 }
[data-x="1"] { left: 100px }
[data-x="2"] { left: 200px }
[data-x="3"] { left: 300px }
[data-x="4"] { left: 400px }
[data-x="5"] { left: 500px }
[data-x="6"] { left: 600px }
[data-y="0"] { top: 0 }
[data-y="1"] { top: 100px }
[data-y="2"] { top: 200px }
[data-y="3"] { top: 300px }
[data-y="4"] { top: 400px }

.card { margin: auto; max-width: 100% }
.card__holder { max-width: 100%; position: relative; background: url(/slike/loading.gif) center no-repeat }
.card__image { position: absolute; max-width: 100% }
.card__description { background: #fff; padding: 3px 10px }

/* Boje i tipografija */

body { background-color: #9680da }
.content--gallery { background-color: #7670a4 }
.content--text { background-color: #9999cc }

a,
a:visited { text-decoration: none; color: #555 }
a:hover { text-decoration: none; color: #000 }

html { font-family: Verdana, Arial, sans-serif }
h1 { font: normal 24px "Arial Black", Arial, sans-serif; color:#996633; margin: 0 }
h2 { font: normal 18px "Arial Black", Arial, sans-serif; color:#996633; margin: 1em 0 0.5em 0 }
h3 { font-size: 19px; font-weight: normal }

.stivo { padding: 0 10px 10px 10px; font-size: 13px; background-color: #9999cc }
h3,
p,
blockquote,
ul,
ol { margin-top: 0; margin-bottom: 0 }
img.lijevo { float: left; clear: left; display: inline; margin-left: -10px; margin-right: 7px }
img.desno { float: right; clear: right; display: inline; margin-right: -10px; margin-left: 7px }

.slikoniz { font-size: 13px }

.podnozje { color: #ccc; font-size: 60% }
.podnozje a,
.podnozje a:visited { color: #ccc; display: inline-block }
.podnozje a:hover { color: #333 }

.logo { display: block; font-size: 20px; text-transform: uppercase; font-weight: bold; color: #d39cf1 }
.language a,
.language a:visited { color: #ccc; font-size: 85% }
.language a:hover { color: #2b3948 }
a.facebook { color: #ddd; font: normal 11px 'lucida grande', Verdana, sans-serif; line-height: 20px }
a.facebook:hover { color: #2b3948 }

/* Izbornik */

.menu__item { height: 30px; line-height: 30px; font-size: 15px; font-weight: bold; text-transform: uppercase; white-space: nowrap }
.menu__item:hover { color: black !important }
.menu__item--active { color: black !important; font-size: 20px }

@media (max-width: 719px) {
	.menu__item { margin-right: 7px }
	.menu__item--gallery { margin-right: 7px }
	.menu__item--text { margin-left: 7px }
}

@media (min-width: 720px) {
	.menu--galleries { order: 3; flex-grow: 1; display: flex; justify-content: space-between; flex-wrap: wrap }
	.menu--texts { order: 2; margin-left: auto }
}

/* Utility */

.v-middle { vertical-align: middle }
.v-baseline { vertical-align: baseline }