/*
Theme Name:		 Strossmayer izlozba
Theme URI:		 http://strossmayer.duckdns.org
Description:
Author:			 Lovro
Author URI:		 https://lovrohrust.com.hr
Template:		 virtual-exhibition
Version:		 	 1.0.0
Text Domain:	 strossmayer-izlozba
Tags:				 virtual,exhibition
*/


html {
	--header-background-color: #efede5;
	--pronounced-color: #8c191e;
	--text-color: #1e1e1e;
	--visited-color: #642828;
}

body {
	color: var(--text-color);
}

.page-id-2367 #primary ul li {
	line-height: 1.6;
}

#language-choose {
	color: #cecece;
}

#language-choose a {
	color: #fff;
	text-decoration: none;
}

.home #masthead {
	position: static;
	width: 100%;
}

.home #content {
	padding-top: 2em;
}

#primary a {
	transition: color 0.5s;
}

a:link {
	color: #6d6d6d;
}

#primary a:visited {
	color: var(--visited-color);
}

#primary a:hover,
#primary a:visited:hover {
	color: var(--pronounced-color);
}


/* language bar */
#language-and-icons {
	background: var(--pronounced-color);
	color: #fff;
	height: 4.06rem;
	text-align: right;
	padding: 0.938rem 11.9%;
	font-family: Spectral, serif;
}

.site-branding {
	padding-left: 11.9%;
	padding-right: 11.9%;
}

#language-and-icons .icon {
	display: inline-block;
	height: 100%;
}

.accessibility {
	margin-right: 14.4px;
}

#language-and-icons img {
	height: 100%;
	width: auto;
	max-width: none;
}

#language-and-icons > button,
#language-and-icons > a {
	vertical-align: middle;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}

#language-choose {
	font-size: 1.125rem;
}

#language-choose, #language-and-icons .facebook {
	margin-right: 2.1%;
}

/* break language choose in two lines */
@media (max-width: 28em) {
	#language-choose {
		width: 10%;
	}
}

#text-logo {
	flex: initial;
	display: flex;
	align-items: center;
	width: 14rem;
}

/* 14rem(224px) @ 23.4rem(374.4px) increasing to 28.75rem(460px) @ 105rem(1680px) */
/* Ems strongly recommended on media queries! */
@media (min-width: 23.4em) {
  #text-logo {
    width: calc(14rem + ((1vw - 0.23399999999999999rem) * 18.076));
    /* Where: 18.076 = 100 * width_difference / viewport_width_difference */

    /* Safari resize fix */
    min-height: 0vw;
  }
}
/* Prevent scaling beyond this breakpoint */
@media (min-width: 105em) {
  #text-logo {
    width: 28.75rem;
  }
}


#text-logo img {
	display: block;
}

#HAZUlogo {
	width: 35%;
	flex: none;
}

#HAZUlogo img {
	width: 100%;
}

#sjat-ce {
	margin-left: 9%;
}

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after,
.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after {
	background-color: transparent;
	background: url(assets/images/dash.svg) center / contain no-repeat;
}

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
	height: 5px;
}

.hamburger {
	border-radius: 50%;
	padding: 1em 0.9em;
	transition: background-color 0.2s 0.1s
}

.hamburger.is-active {
	background: #fff;
}

.hamburger .hamburger-box {
	transition: filter ease 0.5s;
}

.hamburger.is-active:hover .hamburger-box,
.hamburger:hover .hamburger-box {
	filter: brightness(210%) sepia(100%) hue-rotate(0.87turn) saturate(420%);
  }

.site-branding {
	border: solid transparent;
	border-image: url('assets/images/rub.svg') 33.8% 0 / 0 0 12px / 0 0 11px repeat;
	position: relative;
}

/* navigation menu */
#container-slide ul {
	margin: 0;
	padding: 0;
}

#container-slide ul li {
	margin-bottom: 1.75rem;
}

#container-slide li a {
	display: block;
}

#container-slide li button {
	display: block;
	background: none;
	border: none;
	width: 3em;
	margin: 0 auto;
	padding: 0.5em;
	cursor: pointer;
	transition: transform 0.5s;
}

#container-slide li.opened button {
	transform: rotateX(0.5turn);
}

.menu-glavni-container .sub-menu {
	transition: height ease 0.3s;
	overflow: hidden;
}

.menu-glavni-container a {
	color: var(--text-color);
	transition: color 0.5s;
}

.menu-glavni-container a:hover {
	color: var(--pronounced-color);
}

.menu-item-has-children .menu-item a {
	text-transform: none;
	font-size: 80%;
}


/* page, typography */

body {
	font: 1.125rem "Encode sans", sans-serif
}

.nav-menu,
.entry-footer,
.site-branding p {
	font-family: Spectral, serif;
}

/* 1.125rem(18px) @ 23rem(368px) increasing to 1.375rem(22px) @ 105rem(1680px) */
/* Ems strongly recommended on media queries! */
@media (min-width: 23em) {
  .entry-content {
    font-size: calc(1.125rem + ((1vw - 0.23rem) * 0.3049));
    /* Where: 0.3049 = 100 * font-size_difference / viewport_width_difference */

    /* Safari resize fix */
    min-height: 0vw;
  }
}

@media (min-width: 48em) {
	#container-slide {
		padding-top: 8em
	}
}

/* Prevent scaling beyond this breakpoint */
@media (min-width: 105em) {
  .entry-content {
    font-size: 1.375rem;
  }
}


.entry-content > :not(.wp-block-quote), .entry-header {
	margin: auto auto 3.875rem auto;
	width: 85%;
}

.entry-content > .wp-block-quote {
	margin: auto auto 3.875rem;
}

.entry-content > p {
	font: 400 1em / 1.68 'Encode Sans', sans-serif
}

#colophon {
	background: var(--pronounced-color);
	padding: 3.125rem 12.13rem;
	font-family: Spectral, serif;
}

#colophon a {
	color: #fff;
}

.wp-block-image a {
	display: inline-block;
}

/* hover animation */
/* i listanje blok */
.wp-block-image a,
.wp-block-stross-blocks-listanje .blocks-gallery-grid,
.wp-block-stross-blocks-karta a {
	position: relative;
}

.wp-block-image a,
.wp-block-stross-blocks-listanje .blocks-gallery-grid,
.wp-block-stross-blocks-karta a {
	cursor: zoom-in;
}

.wp-block-image img,
.wp-block-stross-blocks-listanje .blocks-gallery-grid img {
	transition: filter ease 0.5s;
}

.wp-block-image a:hover img,
.wp-block-stross-blocks-listanje .blocks-gallery-grid:hover img,
.wp-block-stross-blocks-karta .blocks-gallery-grid:hover img {
	filter: contrast(50%) brightness(130%);
}

.wp-block-image a::before,
.wp-block-stross-blocks-listanje .blocks-gallery-grid::before,
.wp-block-stross-blocks-karta a::before {
	content: url('assets/images/magnifying-glass.svg');
	position: absolute;
	top:50%;
	left:50%;
	opacity: 0;
	transition: opacity ease 0.5s;
	transform: translate(-50%, -50%);
	z-index: 1;
}

.wp-block-image a:hover::before,
.wp-block-stross-blocks-listanje .blocks-gallery-grid:hover::before,
.wp-block-stross-blocks-karta a:hover::before {
	/* animation: 0.5s ease-in-out 0.2s forwards Shake; */
	opacity: 1;
}

/* gumb */
#primary .wp-block-button .wp-block-button__link {
	background-color: #8c191e;
	transition: background-color 0.5s;
	color: #fff;
}

#primary .wp-block-button a.wp-block-button__link:hover {
	background-color: #661317;
	color: #fff;
}

#primary .wp-block-button a.wp-block-button__link:visited,
#primary .wp-block-button a.wp-block-button__link:active
{
	color: #fff;
}

/* button karta i listanje */
.stross-interactive-button {
	cursor: pointer;
}

.self-contained-button {
	display: block;
	margin: 2em auto;
}

.self-contained-button svg {
	margin:auto;
}

.pswp__zoom-wrap .wp-block-audio {
	position: absolute;
	top:calc(50% - 3em);
	left: 10%;
	right: 10%;
	margin: auto;
	background: #fff6;
}


.pswp__caption button .Rectangle-karta-gumb {
	transition: fill 0.5s;
}

.pswp__caption button {
	padding: 0;
	border: none;
	background: none;
	width: 13ch;
	display: block;
	cursor: pointer;
	margin: auto;
}

.pswp__caption button:hover .Rectangle-karta-gumb {
	fill: #661317!important;
}

.soundcite-play::before {
	border-left-color: var(--pronounced-color)!important;
	transition: border-left-color 0.5s;
}

.soundcite-play:hover::before {
	border-left-color: var(--visited-color)!important;
}

@keyframes Shake {
	0% {
	  transform: rotate(0turn) translate(-50%, -50%);
	}

	50% {
	  transform: rotate(0.025turn) translate(-50%, -50%);
	}

	100% {
	  transform: rotate(0turn) translate(-50%, -50%);
	}
 }

@media (min-width: 64rem) {
	.entry-content > :not(.wp-block-quote), .entry-header {
		margin: auto auto 3.875rem;
		/* 46.9rem(750.4px) @ 64rem(1024px) increasing to 59.25rem(948px) @ 105rem(1680px) */
		max-width: calc(46.9rem + ((1vw - 0.64rem) * 30.122));
	}
}

@media screen and (max-width:63.99em) {
	.site-branding,
	#language-and-icons,
	#colophon.site-footer {
		padding-left: 7.5%;
		padding-right: 7.5%;
	}

	.hamburger-box {
		width: 30px;
	}
	.hamburger-inner::before {
		top: -7px; }
	.hamburger-inner::after {
		bottom: -7px; }

}

@media (min-width: 105rem) {
	.entry-content > :not(.wp-block-quote), .entry-header {
		max-width: 59.25rem;
	}
}