/* Style*/
html {font-size:10px;}

* {box-sizing:border-box;}

body {
	font-family: Arial;	
	background-color:powderblue;
	background-repeat: no-repeat;
	background-size: cover;
}

	
	  
	 /* body::after {
		content: "";
		background: url('/img/bg2.jpg');
		opacity: 0.30;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		position: absolute;
		z-index: -1;   */
	  


/*navigate*/
.navigate {display:flex;height:7vh;width:100%;justify-content:center;align-items:center;}
	.navigate > a {display:inline-block;margin-right:4rem;font-size: 2.8rem;color:blue;text-decoration: none;}
/*.bar {display:flex;height:5rem;width:100%;justify-content:space-between; align-items:center;padding:0.75rem 5rem;position:fixed;  z-index: 999;background-color:rgba(0,0,0,0.2);}
		.back { display:inline-block;}
			.back > img { height:2.2rem;}
		.navigation > a { display:inline-block;font-size:2.2rem; color:black; text-decoration:none;margin-right:2rem;}
*/
/*navigate*/

/*navigation horizontal*/ /*varianta finala*/ 
.grid-header{grid-column-start:1;grid-column-end:13;height:5vh;text-align:center;}
.back {display: flex;justify-content:center;align-items: center;}
.back > a {display:inline-block;font-size: 2rem;margin-left:2rem;}
.picture {grid-column-start:1;grid-column-end:13;display:flex;height:75vh;justify-content: center;align-items: center;}
.view {display:block;width:90%;max-height:90%;margin-left: auto;margin-right: auto;}
.view > img {width:100%;height:auto;} 
/*.rama {border: 30px groove lightgray;}*/
.scrollbar {display:grid;height:10vh;grid-column-start:1;grid-column-end:13;grid-gap:1rem;grid-auto-flow:column;grid-auto-columns:(1fr,1fr);overflow-x:scroll;cursor:pointer;align-items: center;}
.scrollbar > img {display:block;height:8vh;width:auto;} 
/*navigation horizontal*/


/*navigation vertical*/ /*varianta finala*/ /*
.grid-header{grid-column-start:1;grid-column-end:13;background-color:yellow;height:5rem;}
.back {display: flex;justify-content:center;align-items: center;}
.back > a {display:inline-block;font-size: 2rem;margin-left:2rem;}
.container {display:grid;grid-template-columns:repeat(12,1fr)}
.picture {grid-column-start:1;grid-column-end:11;display:flex;background-color:red;height:calc(100vh - 5rem);justify-content:center;align-items:center;}
.view {display:block;max-width:90%;max-height:auto;margin-left: auto;margin-right: auto;}
.view > img {max-width:100%;max-height:auto;} 
.scrollbar {display:grid;grid-column-start:11;grid-column-end:13;grid-auto-flow:row;grid-auto-rows:20%;overflow-y:scroll;cursor:pointer;height:calc(100vh - 5rem);align-items:center;}
.scrollbar > img {display:block;min-width:100%;max-width:100%;height:auto;} */
/*navigation vertical*/


/* media queries */
/*
@media (min-width:576px) and (orientation:portrait){

}

@media (min-width:576px) and (orientation:landscape){

}

@media (min-width:768px) and (orientation:portrait){

}

@media (min-width:768px) and (orientation:landscape){

}

@media (min-width:992px){
  
}

@media (min-width:1200px){

}
*/

@media (max-width:991px) and (orientation:landscape)
{
	.grid-header{grid-column-start:1;grid-column-end:13;height:15vh;text-align:center;}
	.container {display:grid;grid-template-columns:repeat(12,1fr);}
	.picture {grid-column-start:1;grid-column-end:11;display:flex;height:65vh;justify-content:center;align-items:center;}
	.view {display:block;height:90%;width:90%;margin:auto;justify-content:center;align-items: center;}
	.view > img {height: 100%;width:auto;} 
	.scrollbar {display:grid;grid-column-start:11;grid-column-end:13;grid-gap:1rem;grid-auto-flow:row;grid-auto-rows:(1fr,1fr);overflow-y:scroll;cursor:pointer;height:70vh;align-items:center;justify-content:center;}
	.scrollbar > img {display:block;width:90%;height:auto;} 
	
}

@media (min-width:992px)
{
	.grid-header{grid-column-start:1;grid-column-end:13;height:5vh;text-align:center;}
	.picture {grid-column-start:1;grid-column-end:13;display:flex;height:82vh;justify-content: center;align-items: center;}
	.view {display:block;width:90%;height:90%;margin-left: auto;margin-right: auto;justify-content: center;align-items: center;}
	.view > img {height:100%;width:auto;} 
	.scrollbar {display:grid;height:10vh;grid-column-start:1;grid-column-end:13;;grid-gap:1rem;grid-auto-flow:column;grid-auto-columns:(1fr,1fr);overflow-x:scroll;cursor:pointer;}
	.scrollbar > img {display:block;height:8vh;width:auto;} 
}
/*responsivenes*/