/**FONT**/
@font-face {
    font-family: "Lexend";
    src: url("https://ngohung.com/Fonts/Lexend-VariableFont_wght.ttf") format("truetype");
    font-weight: 100 900; /* Variable font supports multiple weights */
    font-display: swap;
}

/**ROOT VARIABLES**/
:root {
  	--main-color: #444;
	--accent-color: #feba19;
	--font: "Lexend", sans-serif;
	--thin: 200;
	--base: 300;
	--bold: 600;
	--big: 800;
	--trans: all .8s ease;
	--content-vert: calc(97svw - 0px);
	--content-horz: calc(97svh - 0px);
}

/**GENERAL HTML**/
html{
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    box-sizing: border-box; /**box-sizing**/
    /** prevent window from scrolling for mobile browser**/
    overflow-y: hidden;
	overflow-x:hidden;
    /** set base font for rem
    font-size: calc(13px + 1vw);**/
	overscroll-behavior: none;
	}
	@media only screen and (orientation: landscape) and (max-aspect-ratio: 1.5/ 1) {
		html{
			font-size: calc(var(--content-vert) * .0333);
		}
	}
	@media only screen and (orientation: landscape) and (min-aspect-ratio: 1.5/ 1) {
		html{
			font-size: calc(var(--content-horz) * .05);
		}
	}
	@media only screen and (orientation: portrait) and (max-aspect-ratio: 1 / 1.5) {
		html{
			font-size: calc(var(--content-vert) * .05);
		}
	}
	@media only screen and (orientation: portrait) and (min-aspect-ratio: 1 / 1.5) {
		html{
			font-size: calc(var(--content-horz) * .0333);
		}
	}
	
body{
    transition: all .6s ease;
    margin: 0;
	scroll-behavior: smooth;
	overscroll-behavior: none;
	width: 100vw;
	height: 100vh;	
	display: flex;
	overflow: scroll;
}
body::before{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.83); /* Semi-transparent black */
  backdrop-filter: blur(10px); /* Apply the blur effect to the background */
  content: "";
	width: 100%;
	height: 100%;
}

.post,
.page,
.page-content,
.entry-content,
.entry-summary {
    margin: 0 0;
    overflow:hidden;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

/** Accessibility*/
/* Text meant only for screen readers. */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 0.875rem;
    font-weight: var(--bold);
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
    outline: 0;
}

/**FONT**/
body,
button,
input,
select,
optgroup,
textarea {
    color: var(--main-color);
	font-family: var(--font);
	font-size: .65rem;
    line-height: 1.5;
	text-rendering: optimizeLegibility !important;
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale !important; 
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    clear: both;
	font-family: var(--font);
	text-rendering: optimizeLegibility !important;
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale !important; 
	color: var(--main-color);
}
p{
	font-weight: var(--base);
}

b,
strong {
    font-weight: var(--bold);
}

i{
    font-style: italic;
}

/**LINK ZELDA**/
a {
    color: var(--main-color);
    text-decoration:underline;
    background-color: transparent;
    transition: text-shadow .8s ease, color .8s ease, opacity .8s ease;
}

a:visited {
    color: var(--main-color);
}

a:focus,
a:active {
    color: var(--accent-color);
	opacity:1;
}

a:focus {
    outline: thin dotted;
}

a:active {
    outline: 0;
}

a:hover{
	color: var(--accent-color);
}
/**BUTtONS**/
button a{
	text-decoration: none !important;
}
button{
	border: none;
	background: none;
	color: var(--main-color);
	cursor: pointer;
	transition: all 0.5s ease;
}
button:hover{
	color: var(--accent-color);
}
	
/**SITE CODE**/
hr{
	border: none;
  	height: 1px;
  	background-color: var(--main-color);
	width: 100%;
	margin: .1rem auto;
  }
 
.site-main{
	background: white;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);
	margin: auto;
	z-index:1;
	position: relative;
	display:grid;
	width: 100%;
	height: 100%;
	gap: 0;
}
	@media only screen and (orientation: landscape) and (max-aspect-ratio: 1.5/ 1) {
		.site-main{
			width: var(--content-vert);
    		height: calc(var(--content-vert) / 1.5);
			grid-template-columns: 1fr .5fr ; 
			grid-template-areas: 
			  	"area1 area1 area2";
		}
	}
	@media only screen and (orientation: landscape) and (min-aspect-ratio: 1.5/ 1) {
		.site-main{
			width: calc(var(--content-horz) * 1.5);
			height: var(--content-horz);
			grid-template-columns: 1fr .5fr ; 
			grid-template-areas: 
			  	"area1 area1 area2";
		}
	}
	@media only screen and (orientation: portrait) and (max-aspect-ratio: 1 / 1.5) {
		.site-main{
			width: var(--content-vert);
			height: calc(var(--content-vert) * 1.5); 
			grid-template-rows: 1fr .5fr ; 
			grid-template-areas: 
			  	"area1"
				"area1"
				"area2";
		}
	}
	@media only screen and (orientation: portrait) and (min-aspect-ratio: 1 / 1.5) {
		.site-main{
			width: calc(var(--content-horz) /1.5);
    		height: var(--content-horz);
			grid-template-rows: 1fr .5fr ; 
			grid-template-areas: 
			  	"area1"
				"area1"
				"area2";
		}
	}
	
.menu{ 
	display: grid; 
	position: relative;

}

	@media only screen and (orientation: landscape) and (max-aspect-ratio: 1.5/ 1) {
		.menu{
			width: calc(var(--content-vert) / 3);
			height: calc(var(--content-vert) / 1.5);
			grid-template-columns: 1fr;
			grid-template-rows: 1fr 1fr 1fr 6.5fr;
			grid-column: 2; 
	  		grid-row: 1; 
			/**grid-area: area2;**/
		}
	}
	@media only screen and (orientation: landscape) and (min-aspect-ratio: 1.5/ 1) {
		.menu{
			width: calc( var(--content-horz) * .5);
			height: var(--content-horz);
			grid-template-columns: 1fr;
			grid-template-rows: 1fr 1fr 1fr 6.5fr;
			grid-column: 2; 
	  		grid-row: 1; 
			/**grid-area: area2;**/
		}
	}
	
	@media only screen and (orientation: portrait) and (max-aspect-ratio: 1 / 1.5){
		.menu{
			width: var(--content-vert);
			height: calc( var(--content-vert) * .5);
			grid-column: 1; 
	  		grid-row: 2; 
			grid-template-columns: 1fr 1fr 1fr;
			grid-template-rows: 3.3fr 1fr;
			grid-template-areas: 
				"area1 area1 area1"
			  	"area2 area3 area4";
			/**grid-area: area2;**/
		}
	}
	@media only screen and (orientation: portrait) and (min-aspect-ratio: 1 / 1.5){	
		.menu{
			width: calc(var(--content-horz) / 1.5);
			height: calc(var(--content-horz) / 3);
			grid-column: 1; 
	  		grid-row: 2; 
			grid-template-columns: 1fr 1fr 1fr;
			grid-template-rows: 3.3fr 1fr;
			grid-template-areas: 
				"area1 area1 area1"
			  	"area2 area3 area4";
			/**grid-area: area2;**/
		}
	}

.button-wrapper{
	overflow: hidden;
	padding: .2rem .5rem;
	background-color: rgba(255,255, 255, 0.6);
	backdrop-filter: blur(.05rem);
}
.menu button{
	font-size: 1.5rem;
	padding: 0;
	display: flex;
  	align-items: center;
	cursor: pointer;
	transition: all .5s ease !important;
	width: auto;
	height: 100%;
	transform-origin: center center;
}
#nav-menu{
	font-weight: var(--bold);
}
.menu-desc{
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	padding: .5rem;
	background-color: rgba(255,255, 255, 0.6);
	backdrop-filter: blur(.05rem);
}
.desc-container,
.menu-desc-wrapper{
	width: 100%;
	height: auto;
}
.desc-container p{
	font-size: .65rem;
	line-height: 1.2;
	margin: .2rem 0;
	opacity: .8;
}
.desc-container .name{font-size:1.9rem; margin:.1rem 0; line-height: 1.2;}
.desc-container .name-2{font-size:1rem; margin:.1rem 0; font-weight: var(--base); opacity: .8;}
.desc-container .title{font-size:.65rem; margin:.1rem 0; line-height: 1.2;}
.desc-container .cat-heading{font-size:1.3rem; margin:.1rem 0; line-height: 1.2;}

	@media only screen and (orientation: landscape) and (max-aspect-ratio: 1.5/ 1) {
		.button-wrapper{
			width: 100%;
			border-left: solid 1px var(--main-color);
			border-bottom: solid 1px var(--main-color);
		}
		.menu-desc{
			width: 100%;
			border-left: solid 1px var(--main-color);
			order: 4;
		}
		.menu-button {order:1}
		.prev-button {order:2}
		.next-button {order:3}
		.menu button{
		  	justify-content: left;
		}
		.desc-container,
		.menu-desc-wrapper{
			margin: auto 0 0 0;
		}
	}
	@media only screen and (orientation: landscape) and (min-aspect-ratio: 1.5/ 1) {
		.button-wrapper{
			width: 100%;
			border-left: solid 1px var(--main-color);
			border-bottom: solid 1px var(--main-color);
		}
		.menu-desc{
			width: 100%;
			border-left: solid 1px var(--main-color);
			order: 4;
		}
		.menu-button {order:1}
		.prev-button {order:2}
		.next-button {order:3}
		.menu button{
		  	justify-content: left;
		}
		.desc-container,
		.menu-desc-wrapper{
			margin: auto 0 0 0;
		}
	}
	
	@media only screen and (orientation: portrait) and (max-aspect-ratio: 1 / 1.5){
		.button-wrapper{
			width: 100%;
		}
		.menu-desc{
			width: 100%;
			grid-area: area1;
			border-top: solid 1px var(--main-color);
			border-bottom: solid 1px var(--main-color);
		}
		.prev-button {grid-area: area2;}
		.menu-button {grid-area: area3; border-left: solid 1px grey; border-right: solid 1px grey;}
		.next-button {grid-area: area4;}
		.menu button{
		  	justify-content: center;
			margin:auto;
		}
		.desc-container,
		.menu-desc-wrapper{
			margin: auto;
		}
	}
	@media only screen and (orientation: portrait) and (min-aspect-ratio: 1 / 1.5){	
		.button-wrapper{
			width: 100%;
		}
		.menu-desc{
			width: 100%;
			grid-area: area1;
			border-top: solid 1px var(--main-color);
			border-bottom: solid 1px var(--main-color);
		}
		.prev-button {grid-area: area2;}
		.menu-button {grid-area: area3; border-left: solid 1px grey; border-right: solid 1px grey;}
		.next-button {grid-area: area4;}
		.menu button{
		  	justify-content: center;
			margin:auto;
		}
		.desc-container,
		.menu-desc-wrapper{
			margin: auto;
		}
	}
.desc-container .price{font-size: .8rem; margin:auto;}
.desc-container .sold{font-size: .8rem; margin:auto;}
.desc-container .BUY-NOW{font-size: .8rem; margin:auto; font-weight:bold}

#content{
	display: flex;
	overflow: hidden;
	position: relative;
}
	@media only screen and (orientation: landscape) and (max-aspect-ratio: 1.5/ 1) {
		#content{
			width: calc(var(--content-vert));
    		height: calc(var(--content-vert) / 1.5);
			grid-area: area1;
		}
	}
	@media only screen and (orientation: landscape) and (min-aspect-ratio: 1.5/ 1) {
		#content{
			width: calc(var(--content-horz) * 1.5);
			height: calc(var(--content-horz) / 1);
			grid-area: area1;
		}
	}
	@media only screen and (orientation: portrait) and (max-aspect-ratio: 1 / 1.5) {
		#content{
			width: calc(var(--content-vert) / 1);
    		height: calc(var(--content-vert) * 1.5);
			grid-area: area1;
		}
	}
	@media only screen and (orientation: portrait) and (min-aspect-ratio: 1 / 1.5) {
		#content{
			width: calc(var(--content-horz) / 1.5);
    		height: calc(var(--content-horz) * 1);
			grid-area: area1;
		}
	}
.home img{
	object-fit: cover;
}
.not-home img{
	object-fit: contain;
}
.not-home{
	padding: .25rem;
}
	@media only screen and (orientation: landscape) and (max-aspect-ratio: 1.5/ 1) {
		.not-home{
			width: calc(var(--content-vert) / 1.5) !important;
    		height: calc(var(--content-vert) / 1.5) !important;
		}
	}
	@media only screen and (orientation: landscape) and (min-aspect-ratio: 1.5/ 1) {
		.not-home{
			width: calc(var(--content-horz) / 1) !important;
			height: calc(var(--content-horz) / 1) !important;
		}
	}
	@media only screen and (orientation: portrait) and (max-aspect-ratio: 1 / 1.5) {
		.not-home{
			width: calc(var(--content-vert) / 1) !important;
    		height: calc(var(--content-vert) / 1) !important;
		}
	}
	@media only screen and (orientation: portrait) and (min-aspect-ratio: 1 / 1.5) {
		.not-home{
			width: calc(var(--content-horz) / 1.5) !important;
    		height: calc(var(--content-horz) / 1.5) !important;
		}
	}
.gallery-nav{
	padding: .25rem;
	display: flex;
	overflow: hidden;
	position: relative;
	opacity: 0;
	pointer-events: none;
}	
	@media only screen and (orientation: landscape) and (max-aspect-ratio: 1.5/ 1) {
		.gallery-nav{
			width: calc(var(--content-vert) / 1.5) !important;
    		height: calc(var(--content-vert) / 1.5) !important;
			grid-area: area1;
		}
	}
	@media only screen and (orientation: landscape) and (min-aspect-ratio: 1.5/ 1) {
		.gallery-nav{
			width: calc(var(--content-horz) / 1) !important;
			height: calc(var(--content-horz) / 1) !important;
			grid-area: area1;
		}
	}
	@media only screen and (orientation: portrait) and (max-aspect-ratio: 1 / 1.5) {
		.gallery-nav{
			width: calc(var(--content-vert) / 1) !important;
    		height: calc(var(--content-vert) / 1) !important;
			grid-area: area1;
		}
	}
	@media only screen and (orientation: portrait) and (min-aspect-ratio: 1 / 1.5) {
		.gallery-nav{
			width: calc(var(--content-horz) / 1.5) !important;
    		height: calc(var(--content-horz) / 1.5) !important;
			grid-area: area1;
		}
	}
#content-img{
	width: 100%;
  	height: 100%;
	pointer-events: none;
  }

.page-picture{
	width: 100%;
	height: 100%;
	background: white; 
	margin: auto;
}

nav{
	z-index:99;
	position: fixed;
	top:0;
	right:0;
	background-color: rgba(255, 255, 255, 0.93);
	transition: opacity 1s ease;
	bottom: 0;
	left:0;
	pointer-events:none;
	opacity: 0;
	display: flex;
	padding: 0;
	overflow-x: hidden;
	overflow-y: scroll;
	backdrop-filter: blur(3px);
	align-items: flex-start;
}
	.nav-full{
		pointer-events:unset;
		opacity: 1 !important;
	}

.nav-contents{
	height: auto;
	margin: 0 auto;
	display: grid;
	justify-content: center;
	z-index:1;
}
	@media only screen and (orientation: landscape) and (max-aspect-ratio: 1.5/ 1) {
		.nav-contents{
			width: var(--content-vert);
		  	grid-template-areas:
				"contents close" 
				"contents nav"
				"contents empty"
				"rights empty";
		}	
	}
	@media only screen and (orientation: landscape) and (min-aspect-ratio: 1.5/ 1) {
		.nav-contents{
			width: calc(var(--content-horz) * 1.5);
		  	grid-template-areas:
				"contents close" 
				"contents nav"
				"contents empty"
				"rights empty";
		}
	}
	@media only screen and (orientation: portrait) and (max-aspect-ratio: 1 / 1.5) {
		.nav-contents{
			width: var(--content-vert);
			padding: 1rem .3rem .3rem .3rem;
		  	grid-template-areas:
				"close" 
				"contents"
				"nav"
				"rights";
		}
	
	}
	@media only screen and (orientation: portrait) and (min-aspect-ratio: 1 / 1.5) {
		.nav-contents{
			width: calc(var(--content-horz) /1.5);
			padding: 1rem .3rem .3rem .3rem;
		  	grid-template-areas:
				"close" 
				"contents"
				"nav"
				"rights";
		}
	}

.side-close{
	grid-area: close;
	display: flex;
	height: max-content;
}
.side-menu{
	grid-area: nav;
	display: flex;
	height: max-content;
}
.rights{
	grid-area: rights;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: max-content;
	margin: 0;
}
.rights p{
	font-size: .5rem;
  	margin: .5rem;
}
	@media only screen and (orientation: landscape) and (max-aspect-ratio: 1.5/ 1) {
		.side-close{
			margin: .3rem auto .5rem auto;
  			width: 100%;
		}
		.side-menu{
			flex-direction: column;
			min-height: 10rem;
		}
	}
	@media only screen and (orientation: landscape) and (min-aspect-ratio: 1.5/ 1) {
		.side-close{
			margin: .3rem auto .5rem auto;
  			width: 100%;
		}
		.side-menu{
			flex-direction: column;
			min-height: 10rem;
		}
	}
	@media only screen and (orientation: portrait) and (max-aspect-ratio: 1 / 1.5) {
		.side-close{
			width: 100%;
			margin: 0;
		}
		.side-menu{
			width: 100%;
			flex-direction: row;
			justify-content: space-between;
		}
	}
	@media only screen and (orientation: portrait) and (min-aspect-ratio: 1 / 1.5) {
		.side-close{
			width: 100%;
			margin: 0;
		}
		.side-menu{
			width: 100%;
			flex-direction: row;
			justify-content: space-between;
		}
	}
#close{
	font-weight: var(--bold);
}

.side-close button,
.side-menu button{
	line-height: 1;
	height: auto; 
	text-align: left;
	padding: 0 .3rem;
}
	@media only screen and (orientation: landscape) and (max-aspect-ratio: 1.5/ 1) {
		.side-close button,
		.side-menu button{
			text-wrap: wrap;
			width: 100%;
			font-size: .75rem;
			margin: .3rem auto .3rem 0;
		}
	}
	@media only screen and (orientation: landscape) and (min-aspect-ratio: 1.5/ 1) {
		.side-close button,
		.side-menu button{
			text-wrap: wrap;
			width: 100%;
			font-size: .75rem;
			margin: .3rem auto .3rem 0;
		}
	}
	@media only screen and (orientation: portrait) and (max-aspect-ratio: 1 / 1.5) {
		.side-close button{
			text-wrap: nowrap;
			width: max-content;
			margin: 0 0 0 auto;
			font-size: .9rem;
		}
		.side-menu button{
			text-wrap: nowrap;
			width: max-content;
			font-size: .75rem;
			margin: .3rem auto;
		}
	}
	@media only screen and (orientation: portrait) and (min-aspect-ratio: 1 / 1.5) {
		.side-close button{
			text-wrap: nowrap;
			width: max-content;
			margin: 0 0 0 auto;
			font-size: .9rem;
		}
		.side-menu button{
			text-wrap: nowrap;
			width: max-content;
			font-size: .75rem;
			margin: .3rem auto;
		}
	}

.content-table{
	border: solid .05rem var(--main-color); 
	padding: .5rem;
	display: block;
	margin: .5rem auto;
	grid-area: contents;
	max-height: max-content;
	transition: all .6s ease;
}
	@media only screen and (orientation: landscape) and (max-aspect-ratio: 1.5/ 1) {
		.content-table{
			width: calc(var(--content-vert) - 3.8rem);
			/**min-height: calc(100vh - 2rem);**/
			min-height: 10rem;
		}
	}
	@media only screen and (orientation: landscape) and (min-aspect-ratio: 1.5/ 1) {
		.content-table{
			width: calc((var(--content-horz) * 1.5) - 3.8rem);
			/**min-height: calc(100vh - 2rem);**/
			min-height: 10rem;
		}
	}
	@media only screen and (orientation: portrait) and (max-aspect-ratio: 1 / 1.5) {
		.content-table{
			width: calc(var(--content-vert) - .6rem);
			/**min-height: calc(100vh - 3.2rem);**/
			min-height: max-content;
		}
	}
	@media only screen and (orientation: portrait) and (min-aspect-ratio: 1 / 1.5) {
		.content-table{
			width: calc((var(--content-horz) /1.5) - .6rem);
			/**min-height: calc(100vh - 3.2rem);**/
			min-height: max-content;
		}
	}
	
.content-wrapper{
	display: block;
	margin: auto;
}	

.contents-h3{
	font-size: 1.5rem;
	font-weight: var(--big);
	margin: .5rem 0;
}

#catalog-menu{
	width: max-content;
	display: flex; 
	justify-content: space-evenly;
	align-items: center;
	border-bottom: solid 1px var(--main-color);
	margin: 0 auto .6rem auto;
	padding: 0 .25rem;
}
#catalog-menu button{
	padding: 0;
}
	@media only screen and (orientation: landscape) and (max-aspect-ratio: 1.5/ 1) {
		#catalog-menu{
			justify-content: space-evenly;
			gap: 1.5rem;
		}
	}
	@media only screen and (orientation: landscape) and (min-aspect-ratio: 1.5/ 1) {
		#catalog-menu{
			justify-content: space-evenly;
			gap: 1.5rem;
		}
	}
	@media only screen and (orientation: portrait) and (max-aspect-ratio: 1 / 1.5) {
		#catalog-menu{
			justify-content: space-between;
			gap: 1rem;
		}
	}
	@media only screen and (orientation: portrait) and (min-aspect-ratio: 1 / 1.5) {
		#catalog-menu{
			justify-content: space-between;
			gap: 1rem;
		}
	}
	
#catalog-menu button.active {
    color: var(--accent-color); 
    pointer-events: none;
}

#catalog{
  display: grid;
  justify-content: space-evenly;
  align-items: start; 
  margin: auto;
  width: max-content;
  gap: .6rem;
}
	@media only screen and (orientation: landscape){
		#catalog{
			grid-template-columns: repeat(3, 1fr); 
		}
	}
	@media only screen and (orientation: portrait){
		#catalog{
			grid-template-columns: repeat(2, 1fr); 
		}
	}
	
#catalog figure{
	aspect-ratio: 2 / 3;
	border: solid 0 var(--main-color);
	overflow: hidden;
	transition: box-shadow .5s ease;
	margin: 0;
	cursor: pointer;
}
#catalog figure:hover{
	box-shadow: 0 4px 10px rgba(0,0,0,.7);
}
	@media only screen and (orientation: landscape) and (max-aspect-ratio: 1.5/ 1) {
		#catalog figure{
			width: calc( (var(--content-vert) - 6rem) /3);
		}
	}
	@media only screen and (orientation: landscape) and (min-aspect-ratio: 1.5/ 1) {
		#catalog figure{
			width: calc( ((var(--content-horz) * 1.5) - 6rem) / 3 );
		}
	}
	@media only screen and (orientation: portrait) and (max-aspect-ratio: 1 / 1.5) {
		#catalog figure{
			width: calc( (var(--content-vert) - 2.5rem) / 2);
		}
	}
	@media only screen and (orientation: portrait) and (min-aspect-ratio: 1 / 1.5) {
		#catalog figure{
			width: calc( ((var(--content-horz) /1.5) - 2.5rem) / 2);
		}
	}

#catalog figure img{
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
#catalog figure figcaption{
	width: 100%;
	height: unset !important;
	aspect-ratio: 2 / 1;
	padding: .2rem;
	border-top: solid 0 var(--main-color);
}
#catalog figure figcaption .title{
	width: 100%;
	height: unset !important;
	display: -webkit-box; 
		-webkit-box-orient: vertical; 
	  	-webkit-line-clamp: 2; 
  	overflow: hidden;
  	text-overflow: ellipsis; 
  	word-wrap: break-word; 
	line-height: 1.2;
	font-weight: var(--bold);
}
#catalog figure figcaption .dims{
	width: 100%;
	height: unset !important;
	display: -webkit-box; 
		-webkit-box-orient: vertical; 
	  	-webkit-line-clamp: 1; 
  	overflow: hidden;
  	text-overflow: ellipsis; 
  	word-wrap: break-word; 
	line-height: 1.2;
	opacity: .8;
}
#catalog figure figcaption .mats{
	width: 100%;
	height: unset !important;
	display: -webkit-box; 
		-webkit-box-orient: vertical; 
	  	-webkit-line-clamp: 1; 
  	overflow: hidden;
  	text-overflow: ellipsis; 
  	word-wrap: break-word; 
	line-height: 1.2;
	opacity: .8;
}
#catalog figure figcaption .info{
	width: 100%;
	height: unset !important;
	display: -webkit-box; 
		-webkit-box-orient: vertical; 
  	overflow: hidden;
  	text-overflow: ellipsis; 
  	word-wrap: break-word; 
	line-height: 1.2;
}
	@media only screen and (orientation: landscape) {
		#catalog figure figcaption .info{
			-webkit-line-clamp: 4; 
		}
	}
	@media only screen and (orientation: portrait)  {
		#catalog figure figcaption .info{
			-webkit-line-clamp: 5; 
		}
	}
#catalog figure p{
	margin: .1rem 0;
}









.chapters-container{
	padding-left: 1rem;
	display: flex;
	flex-direction:column;
	justify-content: flex-start;
	margin-bottom: 1rem;
}
.chapters-container button{
	width: max-content;
	max-width: 100%;
	height: max-content;
	padding: .3rem;
	font-weight: bold;
	text-decoration: none !important;
	text-align: left;
	font-size: .85rem;
}

.subchapter-button{
	text-indent: .6rem;
	font-weight: var(--base) !important;
}
.subchapter-button:before{
	content: "\2022\00a0";
}


.contents-h4{
	font-size: .85rem;
	font-weight: var(--big);
	margin:0;
	position: relative;
}
.contents-h4::after {
    content: "";
    border-left: .5rem solid transparent;
    border-right: .5rem solid transparent;
    border-top: .5rem solid var(--main-color);
    transition: all 0.5s ease;
    position: absolute;
    right: 0;
    bottom: .35rem;
	transform: rotate(0deg);
}
.contents-h4:hover{
	color: var(--accent-color);
}
.contents-h4:hover::after{
	border-top: .5rem solid var(--accent-color);
}
.contents-h4.rotate-180::after {
    transform: rotate(-180deg);
}
.expand-content{
	cursor: pointer;
	transition: all .5s ease !important;
}

.hidden-content {
    height: 3.2rem;
    overflow: hidden;
    transition: height 0.5s ease;
}

.hidden-content h5{
	margin: 1rem auto 0 auto; 
	font-size: .7rem;
}
.content-p{
	margin: .5rem auto 1rem auto;
	font-size: .65rem;
	text-indent: 1rem;
}

.show-content {
    height: auto;
}

.hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.visible {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.3s ease;
}

img{
    display:block;
    border-style: none;
    opacity:1;
	/**
	max-height:100%;
	max-width: 100%;
	**/
	width: 100%;
	height: 100%;
	transition: opacity .8s ease;
	margin: auto;
	object-fit: contain;
}   

.text-wrapper{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 1rem 1.75rem;
}
.text-wrapper .heading{
	margin: .2rem 0;
	font-weight: var(--big);
}
.text-wrapper .text{
	margin: .2rem 0;
}






/* Gallery styles */
.gallery {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
    overflow: hidden;
    height: 400px; /* Fixed height for consistent layout */
}

.gallery-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.gallery-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
    transition: opacity 0.5s ease, z-index 0s 0.5s; /* Delay z-index reset after opacity */
}

.gallery-item.active {
    opacity: 1;
    z-index: 2; /* Active image stays on top */
    transition: opacity 0.5s ease, z-index 0s; /* z-index is instant */
}

/* Navigation arrows */
.gallery-arrow {
    position: absolute;
    top: 0;
	bottom: 0;
    background-color: rgba(255, 255, 255, 0.5);
    color: var(--main-color);
    border: none;
	border-radius: 50%;
    cursor: pointer;
    z-index: 3;
	width: 1rem;
	height: 1rem;
	margin: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-bottom: .135rem;
}

.left-arrow {
    left: .44rem;
}

.right-arrow {
    right: .44rem;
}

/* Image counter */
.image-counter {
    position: absolute;
    bottom: .5rem;
    left: 0;
	right: 0;
    background-color: rgba(255, 255, 255, 0.5);
    color: var(--main-color);
    padding: .2rem;
    border-radius: .1rem;
    font-size: .44rem;
    z-index: 3;
	line-height: 1;
	width: max-content;
	height: max-content;
	margin: auto;
}
















/**




	
.caption{
	height: auto; 
	width: 100%;
	position: absolute; 
	z-index: 1; 
	bottom: 0; 
	left:0; 
	right:0; 
	padding: .5rem; 
	margin: .5rem auto; 
	transition: opacity .5s ease;
	background-color: rgba(0, 0, 0, 0.6);
}
.caption p{
	text-align:left; 
	color: white; 
	margin: 0;
	padding: .2rem 1rem;
	position: relative;
	font-size: .7rem;
	line-height: 1.2;
}

.caption.mono{
	width: 100%;
  	height: 100%;
  	max-width: unset !important;
  	top: 0;
  	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.caption.mono h1{
	padding: 1rem 1.7rem;
	font-size: 2rem;
	color: white;
	font-weight: var(--thin);
	margin:0;
}
.caption.mono p{
	color: white;
	padding: 1rem;
	font-size: 1rem;
}
.caption.mono span p{
	color: var(--main-color);
	padding: 0;
}

.hide-caption{
	opacity: 0 !important;
	pointer-events: none !important;
}

#toggle-info{
	position: absolute; 
	top: 2.3rem; 
	right: 4.5rem;
	
}
#toggle-arrow{
	position: absolute; 
	top: 1.45rem; 
	right: .85rem;
}

@media only screen and (orientation: landscape) {
	#navigation-info{
		position: absolute; 
		top: 4.8rem; 
		right: 2.5rem;
	}
	#navigation-arrow-hor{
		position: absolute; 
		top: 5.5rem; 
		right: .3rem;
	}
	#navigation-arrow-ver{
		display:none;
		}
}
@media only screen and (orientation: portrait) {
	#navigation-info{
		position: absolute;
		right: 8.5rem;
		bottom: 1.2rem;
	}
	#navigation-arrow-ver{
		position: absolute;
		bottom: .1rem;
		right: 3.8rem;
	}
	#navigation-arrow-hor{
		display:none;
	}
}
	

.lazy{
    opacity:0 !important;
}

figure{
	max-height:100%;
	max-width: 100%;
	margin: auto !important;
	display: table;
	position:relative;
}

figcaption{
    text-align:left;
    margin: 1vh auto calc(5vh + 100px) auto;
	font-size: .7rem;
	font-weight: var(--thin);
	display: table-caption; 
    caption-side: bottom ; 
}





.hide{
	display: none !important;
}
*/