/* Riznice baštine CSS */

body{background:url(slike/wall9.1.jpg) repeat center center;     
font-family:"Trebuchet MS", sans serif;
text-align:center;
margin:0;}

a{color:#9b9b6a;
text-decoration:none;}

a:visited{color:#003333; /* petrolej zelena */ } 
a:hover{color:#9b9b6a; /* sivo zlatna */ } 
a:active{color:#1c1836; /* tamno ljubičasta */} 

.active-link{color:#e3ce6d !important; /* svjetlo žuta */
text-decoration:underline overline;
text-decoration-style:double;
text-decoration-color:#a39740; /* zlatna 1 */
text-underline-position:under;} 

h1{font-weight:bold;
text-transform:uppercase;}

h2{text-decoration:none;
text-transform:none;}

p{text-align:justify;}


/* Logo */
.logo{width:10%;
position:relative;
padding-right:5px;}



/* PAGE LAYOUT */

					/* HEADER */
.page-header, .page-footer{grid-column:1/4;}

.page-header{background-color:#003333; /* petrolej zelena */
background-image:url(header_slike/crijep2.6.jpg);
background-position:center center;
background-size:100%;
background-repeat:no-repeat;
background-size:cover;
border:black double 2px;}

				/* FOOTER */
.page-footer{display:grid;
align-items:center;
background-color:#263430; /* tamno zeleno-cijan */
height:150px;
display:grid;
height:auto;
padding-bottom:30px;
padding-top:0;
margin-top:0;}


/* Footer - sadržaj*/
.social{display:grid;
grid-template-columns:repeat(auto-fit,minmax(50px,max-content));
grid-gap:auto;
padding:10px;
padding-bottom:0;
margin-top:10px;
justify-content:space-evenly;}

.fa{display:grid;
padding: 20px;
font-size: 30px;
width: 50px;
height:50px;
text-align:center;
text-decoration:none;
color:#9B9B6A !important;}

.prava{margin:20px;
font-size:12px;
color:#9b9b6a; /* sivo zlatna */ } 


.copyright{font-weight:bolder;
margin-bottom:10px;
color:#a39740; /* zlatna 1 */ } 


/* Footer - impressum */

.impressum{display:grid;
grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
padding:10px;
margin:0;
justify-content:space-evenly;
background-color:#9b9b6a; /* sivo zlatna */
color:#110e19; /* vrlo tamno ljubičasta 1 */
animation-name:press;
animation-duration:5s;
border:10px solid #0e0714; /* vrlo tamno ljubičasta 2 */ } 

@keyframes press{from {background-color:#0e0714;} /* vrlo tamno ljubičasta 2 */
  to{background-color:#9b9b6a;}
}

.impressum summary{padding:10px;
font-weight:bolder;
font-size:18px;}

.impressum p{text-align:center;
margin:0;
padding:10px;}

p .ime{font-weight:bolder;
font-size:120%;
line-height:30px;
color:#263430; /* tamno zeleno-cijan */}


/* Navigation */
.site-navigation{padding:20px;
background-color:rgba(155, 155, 106, 0.5);  /* sivo zlatna - #9b9b6a s prozirnošću */
font-size:20px;
font-weight:bold;}

.nav-btn{display:none;}

.site-navigation ul{margin:0;
padding:0;
list-style-type:none;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,max-content));
grid-gap:20px;
justify-content:center;}


/* Naslov virtualne izložbe */
.site-title{font-family:'Milonga', cursive;
color:#a39740; /* zlatna 1 */
font-size:6.25vw;
margin:0;
padding:50px;
padding-bottom:120px;
text-align:center;
text-shadow:5px 5px 10px #330033; /* patlidžan ljubičasta */ } 


.first-letter{font-size:200%;
}


/* Pozadina */
.pozadina{background:url(slike/wall9.jpg) repeat center center;
background-size:cover;
padding-top:50px;
padding-bottom:100px;
margin:0;}


/* Bordura - podnaslov */
.upper-border{background-color:#9b9b6a; /* sivo zlatna */
height:75px;
display: flex;
justify-content: center;
align-items: center;
border:5px double #0e0714; /* vrlo tamno ljubičasta 2 */ } 


#podnaslov{color:#0e0714; /* vrlo tamno ljubičasta 2 */
padding:20px;
font-size:30px;
animation:fade-in 5s;}

@keyframes fade-in {0%, 100% {opacity:0}
100% {opacity:1}
}


/* Index - Vrata */
.vrata{background-color:transparent;
display:flex;
position: relative;
left:50%;
transform:translateX(-50%);
max-width:720px;
max-height:820px;
padding:20px;
margin:0;}

.first-door, .second-door {position:absolute;
max-width:auto;
max-height:auto;
background-color:transparent;
top:0;
transition:0.5s;
z-index:5;}

.first-door {transform-origin:left;
left:0;}

.second-door {left:380px;
transform-origin:right;}

.vratnicaL, .vratnicaD{max-width:380px;
height:auto;}

.inner{background-color:transparent;
border:none;
max-height:750px;
padding:0;
padding-top:30px;
margin:0;
border-top-left-radius:280px;
border-top-right-radius:280px;
overflow:none;}

.about-title{font-family:'Milonga', cursive;
font-size:1.8em;
line-height:1.5em;
padding-top:0;
margin-top:0;
margin-bottom:40px;
text-align:center;
color:#968c45; /* zlatna 2 */} 

.about{font-size:18px;
padding:45px;
margin-top:0px;
background-color:#968c45; /* zlatna 2 */
color:#110e19; /* vrlo tamno ljubičasta 1 */
border:10px solid #0e0714; /* vrlo tamno ljubičasta 2 */
max-height:535px;}

.vrata:hover .first-door {transform: rotateY(-160deg) !important;}

.vrata:hover .first-door:before {display: none;}

.vrata:hover .second-door {transform: rotateY(160deg) !important;}

.vrata:hover .second-door:before {display: none;} 
	
	

/* O dijapozitivima */
section{max-width:1200px;
margin:0 auto;}

.about2{background-color:#968c45; /* zlatna 2 */
font-size:18px;
color:#110e19; /* vrlo tamno ljubičasta 1 */
border:10px solid #0e0714; /* vrlo tamno ljubičasta 2 */
padding:45px;
margin-top:70px;
margin-bottom:70px;}

#slovo{font-size:3em;
font-weight:bolder;
font-family:Milonga, cursive;
color:#9b9b6a; /* sivo zlatna */
border:3px solid #0e0714; /* vrlo tamno ljubičasta 2 */
background:#263430; /* tamno zeleno-cijan */ } 

.about2 em{font-weight:bolder;}

#icom{color:#003333; /* petrolej zelena */ } 


/* Aside - donji izbornik */
.aside-container{display:grid;
grid-template-columns: auto auto;
background-color:#0e0714; /* vrlo tamno ljubičasta 2 */
width:auto;
height:auto;
border:10px solid #968c45; /* zlatna 2 */ } 

.biografija{color:#9b9b6a !important; /* sivo zlatna */ }  

.izložba{color:#0e0714 !important; /* vrlo tamno ljubičasta 2 */
display:none;
padding:20px;
text-align:center;}

.izložba img{width:150px;
margin:10px;
margin-bottom:40px;
vertical-align: middle;}

button .logo{width:50px;}

button{background-color:transparent;
border:0;
cursor:pointer;
color:#9b9b6a !important; /* sivo zlatna */
font-size:1.5em;
line-height:50px;
padding:20px;}


/* Virtualna izložba - upute */
#upute{padding:5px;
display:flex;
justify-content:center;
width:minmax(max-content, 1200px);
height:autofit;
background-color:#9b9b6a; /* sivo zlatna */
color:#263430; /* tamno zelena-cijan */
border:5px double #0e0714; /* vrlo tamno ljubičasta 2 */ } 

#upute p{text-align:center;
margin-top:10px;
background-color:transparent;}

#upute p:hover {transform:scale(1.5, 1.5);
cursor:cell;
background-color:#263430; /* tamno zelena-cijan */
color:#9b9b6a; /* sivo zlatna */
margin:20px;
padding:20px;}


/* Virtualna izložba - galerija */
ul{list-style-type:none;}

.image-gallery{display: flex; 
flex-wrap: wrap;
justify-content:center;
gap:10px; 
margin-bottom:65px;
padding-bottom:30px;}

.image-gallery>li{flex-basis: 350px;
margin-top:50px;}

.image-gallery img{object-fit: cover;
width: 100%;
height: 100%;
vertical-align: middle;
border-radius: 5px;}

.image-gallery > li {position: relative;}

.dijapozitiv{background-size:100%;
padding:50px;
margin-bottom:5px;
margin-top:15px;
background-color:#f2f3f4; /* vrlo svjetlo siva */
width:200px;
height:150px;
cursor:pointer;
filter:grayscale(100%);}


/* Virtualna izložba - .more-btn i .more-text */
.more-btn{color:#9b9b6a; /* sivo zlatna */
border-radius:50%;
position:absolute;
bottom:-50px;
left:135px;
text-align:center;
line-height:55px;
cursor:cell;
z-index:9;
font-size:30px;
transition:all ease 0.5s;}

.more-text{position:absolute;
left:0;
width:230px;
height:185px;
background-color:#dbdbc5; /* vrlo svijetlo sivo zlatna */
padding:30px;
overflow-y:auto;
display:none;
transition:all ease 0.7s;
border:5px double #0e0714; /* vrlo tamno ljubičasta 2 */ } 

.more-text h1{color:#330033; /* patlidžan ljubičasta */
font-size:26px;} 

.more-text p{color:#110e19; /* vrlo tamno ljubičasta 1 */
font-size:18px;
line-height:30px;
font-weight:500;
text-align:justify;
text-justify:inter-word;} 

.more-text.active{bottom:0;
display:block;}

.links a{display:block;
padding:10px;
cursor:pointer;
color:#003333; /* petrolej zelena */ } 

.links a:visited{color:#003333; /* petrolej zelena */ } 

.links a:hover{color:#a39740 !important; /* zlatna 1 */
text-decoration:underline !important;}

.links a:active{color:#a39740 !important; /* zlatna 1 */
text-decoration:underline !important;}

.links summary{padding:5px;
font-weight:bolder;}

.izvori{padding:10px;
margin:5px;
color:#330033; /* patlidžan ljubičasta */ } 

.izvori a{display:block;
padding:10px;}

.dodatno{padding:10px;
margin:5px;
color:#330033; /* patlidžan ljubičasta */ } 

.dodatno a{display:block;
padding:10px;}


/* Virtualna izložba - expanded image */
.container2{position:relative;
padding-top:40px;
padding-bottom:60px;
background:url("slike/wall8.jpg");
display:none;
border-bottom:10px solid #968c45; /* zlatna 2 */ } 

#expandedImg{padding:20px;
margin:20px;
height:auto;}


/* Virtualna izložba - expanded image text */
#imgtext{position:relative;
bottom:15px;
color:#9b9b6a; /* sivo zlatna */
font-size: 20px;}



				/* MEDIA QUERIES */

/* Navigacija */
@media (min-width:650px){
	.site-navigation ul{display:grid !important;} 	
}

@media (max-width:649px){
	.site-navigation ul{grid-template-columns:1fr;
	display:none;}
	
	.site-navigation li{padding:10px;}
	
	.nav-btn{display:block;
	font-size:3.5em;
	color:#a39740; /* zlatna 1 */}
}


/* Naslov web sjedišta */
@media (max-width:700px) {
	.site-title{font-size:300%;}
}

@media (max-width:370px) {
	.site-title{font-size:200%;}
}


/* Index i O dijapozitivima - #podnaslov */
@media (max-width:1100px) {
	#podnaslov{font-size:28px;}
}

@media (max-width:1000px) {
	#podnaslov{font-size:26px;}
}

@media (max-width:850px) {
	#podnaslov{font-size:24px;}
}

@media (max-width:700px) {
	#podnaslov{font-size:22px;}
}

@media (max-width:520px) {
	#podnaslov{font-size:20px;}
}

@media (max-width:420px) {
	#podnaslov{font-size:18px;}
}

@media (max-width:379px) {
	#podnaslov{font-size:16px;}
}

@media (max-width:300px) {
	#podnaslov{font-size:14px;}
}


/* Index - .pozadina */
@media (max-width:785px) {
	.pozadina{background:url(slike/wall9.1.jpg) repeat center center;
	padding-top:20px;
	margin-bottom:40px;}
}

@media (max-width:520px) {
	.pozadina{margin-bottom:0;}
}

@media (max-width:379px) {
	.pozadina{margin-bottom:10px;}
}

@media (max-width:350px) {
	.pozadina{margin-bottom:40px;}
}
	
@media (max-width:322px) {
	.pozadina{margin-bottom:80px;}
}


 /* Index - .vrata */
@media (max-width:1500px) {
	.vrata:hover .first-door {transform: rotateY(-270deg) !important; /* 270 deg ako želimo da vratnice nestanu */}

	.vrata:hover .first-door:before {display: none;}

	.vrata:hover .second-door {transform: rotateY(270deg) !important;}

	.vrata:hover .second-door:before {display: none;}
}
 
@media (hover: none) and (pointer: coarse) {
	.first-door, .second-door {animation:fade-out 5s forwards;}
	
	@keyframes fade-out {from {opacity:1;}
    to{opacity:0;}}
}


/* Index - .vrata i sadržaj unutar .vrata */
@media (max-width:785px) {
	.first-door, .second-door{display:none;}
	
	.inner{border-top-left-radius:0;
	border-top-right-radius:0;
	padding:0;
	margin:0;}
	
	.inner{padding-top:50px;}
	
	.about{overflow-y:auto;}
}

@media (max-width:520px) {
	.about{padding:30px;}
}	
	

/* O dijapozitivima - .about2 */
@media (min-width:750px) {
	.about2{columns:300px 3;
	column-gap:30px;}
}

@media (max-width:749px){
	.about2{max-height:535px;
	overflow-y:auto;}
}

@media (max-width:450px){
	.about2{padding:30px;}
}

@media (max-width:320px){
	.about2{padding:20px;}
}


/* O dijapozitivima - Aside - donji izbornik*/
@media (max-width:370px) {
	button {font-size:20px !important;}
	
	.izložba img{width:100px !important;
	margin:0px;
	margin-bottom:40px;
	vertical-align: middle;}
}


/* Virtualna izložba - #upute */

@media (min-width:1626px) {
	#upute p:hover {transform:scale(1.5, 1.5);}
}

@media (max-width:1625px) {
	#upute p:hover {transform:scale(1.4, 1.4);}
}

@media (max-width:1500px) {
	#upute p:hover {transform:scale(1.3, 1.3);}
}

@media (max-width:1410px) {
	#upute p:hover {transform:scale(1.2, 1.2);}
}

@media (max-width:1300px) {
	#upute p:hover {transform:scale(1.1, 1.1);}
}

@media (max-width:1200px) {
	#upute p:hover {transform:none;}
}


/* Virtualna izložba - .image-gallery, img, .dijapozitiv, .more-text i .more-btn */
@media (max-width:469px) {
	.izložba img{width:150px;
	padding-left:0px;}
}

@media (max-width:370px) {
	.dijapozitiv{width:180px;
	height:130px;
	padding:45px;}
	
	.more-text{width:200px;
	height:160px;}
	
	.more-text p{text-align:center;}
	
	.more-btn{left:120px;}
}

@media (max-width:350px) {
	.dijapozitiv{width:150px;
	height:100px;
	padding:40px;
	margin-left:15px;}
	
	.more-text{width:160px;
	height:120px;
	margin-left:15px;}
	
	.more-text h1{font-size:22px;}
	
	.more-text p{font-size:16px;}
	
	.more-btn{left:115px;}
}

@media (max-width:340px) {
	.dijapozitiv{margin-left:10px;}
	
	.more-text{margin-left:10px;}
	
	.more-btn{left:110px;}
}

@media (max-width:320px) {
	.dijapozitiv{margin-left:5px;}
	
	.more-text{margin-left:5px;}
	
	.more-btn{left:105px;}
}

@media (max-width:300px) {
	.image-gallery{padding-left:20px;}
}


/* Virtualna izložba - #expanded image */
@media (max-width:1100px) {
	#expandedImg{max-width:90%;}
}

@media (max-width:850px) {
	#expandedImg{max-width:80%;}
}

@media (max-width:520px) {
	#expandedImg{min-width:300px;}
}

@media (max-width:379px) {
	#expandedImg{padding-left:0;
	padding-right:0;
	margin-left:0;
	margin-right:0;}
}

@media (max-width:300px) {
	#expandedImg{min-width:250px;}
}