/* Madib Theme - Artworks/Portfolio Page Styles */

/***********************
Base Portfolio Item Styles
***********************/

.portfolio-item h3{
	font-size: 1.6rem;
	margin: 5px 0;
	width: 100%;
}

.portfolio-item h4{
	margin: 15px 0;
	width: 100%;
	font-weight: 200;
}

.prints-butt{
	padding: 4px 10px;
	border-radius: 5px;
	border: var(--orange-trim-passive) solid 1px;
	color:var(--orange-trim-passive);
	font-size: 0.9rem;
	text-decoration: none;
}

.prints-butt:hover{
	background-color:var(--orange-trim);
	border-color: var(--orange-trim);
	color: #FFF;
	cursor: pointer;
}

.single-prints-butt{
	padding: 4px 10px;
	border-radius: 5px;
	border: var(--orange-trim-passive) solid 1px;
	color:var(--orange-trim-passive);
	font-size: 0.9rem;
	margin-top: 10px;
	display: inline-block;
}

.single-prints-butt:hover{
	background-color:var(--orange-trim);
	border-color: var(--orange-trim);
	color: #FFF;
	cursor: pointer;
}

.port-grey-line{
	margin: 0 auto;
	border-top: var(--light-grey-base) 1px solid;
	opacity: 0.5;
}

.portfolio-item img{
	cursor: pointer;
	object-fit: contain;
	height: auto;
}

/********************
Artworks Filter UI
********************/

#selections-wrap{
	transition: all 0.3s ease-in-out;
	width: 100%;
	display: flex;
	justify-content: center;
	margin: 0 auto;
	overflow: hidden;
	/* background-color: rgba(255, 255, 255, 0.95); */
}

#port-start-year, #port-end-year{
	margin-left: 4px;
}

.select-box{
	border-radius: 10px;
	text-align: center;
	color: #FFF;
	font-size: 1rem;
	font-weight: 200;
	background: var(--light-grey-base);
	border-color: var(--light-grey-base);
	padding: 0px 6px;
	line-height: 1rem;
}

.select-box:hover{
	background: var(--orange-trim-passive);
	border-color: var(--orange-trim-passive);
	cursor: pointer;
}

#row-selections{
	display: flex;
	justify-content: space-evenly;
}

#row-selections .select-box{
	height: 100%;
}

#check-prints{
	height: auto;
	border-radius: 10px;
	text-align: center;
	font-size: 1rem;
	padding: 0px 12px;
	margin-left: 4px;
}

html[lang="zh-Hant"] #check-prints{
	font-weight: 400;
	line-height: 1.8rem;
}

html[lang="en-US"] #check-prints{
	font-weight: 300;
	line-height: 1.8rem;
}

#check-prints:hover{
	cursor: pointer;
}

.prints-on{
	background-color: var(--orange-trim-passive);
	color: #FFF;
	border: var(--orange-trim-passive) 1px solid;

}

.prints-on:hover{
	color: #FFF;
	background-color:var(--orange-trim);
	border: var(--orange-trim) 1px solid;
}

.prints-off{
	color: var(--light-grey-base);
	border: var(--light-grey-base) 1px solid;
}

.prints-off:hover{
	color: var(--orange-trim-passive);
	border: var(--orange-trim-passive) 1px solid;
}

#artwork-search{
    margin-left: 5px;
    border-radius: 10px;
    border: 1px #888 solid;
}

#artwork-search:focus{
	border: 1px var(--orange-trim) solid;
	color: var(--orange-trim);
}

/****************
Artworks Loaders
****************/

#artworks-loader{
	z-index: 1;
}

#single-artwork-loader{
	z-index: -1;
	top: 0;
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-content: center;
	align-items: center;
}

#artworks-loader, #single-artwork-loader{
	padding-top: 60px;
	width: 100%;
	position: absolute;
	height: 100%;
	background-color: #FFF;
	transition: opacity 0.5s;
}

.loader-hidden{
	opacity: 0;
}

#artworks-loader p, #single-artwork-loader p{
	width: 100%;
	text-align: center;
	margin-top: 20px;
	color: #CCC;
}

#loader-animation{
	display: block;
	width: 40px;
	height: 40px;
	border: 4px solid #CCC;
	border-top-color: var(--orange-trim-passive);
	border-radius: 50%;
	animation: loading 1s ease infinite;

}

#artworks-loader #loader-animation{
	margin: 0 auto;
}

@keyframes loading{
	from{
		transform: rotate(0turn);
	}
	to{
		transform: rotate(1turn);
	}
}

/********************
Artworks Page Layout
********************/

.port-page{
	position: relative;
	padding-top: 1px;
}

#port-cat{
	width: 164px;
}

#port-start-year{
	width: 79px;
}

#port-end-year{
	width: 79px;
}

#check-prints{
	width: 85px
}


/**************************
Responsive - min-width 581px
(shared between 581-1180 and 1181+)
**************************/

.artworks-wrap{
	max-width: 1000px;
	margin: 0 auto;
}

@media screen and (min-width: 1181px){

	.artworks-wrap{
		width: 100%;
		padding-top: 135px;
	}

	#selections-wrap{
		padding: 10px 0 15px 0;
		height: 30px;
		flex-wrap: wrap;
}
}
@media screen and (min-width: 581px) and (max-width: 1180px){

	.artworks-wrap{
		width: 85%;
		padding-top: 152px;
	}

	#selections-wrap{
		padding: 5px 0 20px 0;
		height: 30px;
		flex-wrap: wrap;
	}
}

@media screen and (min-width: 581px){

	#artwork-search{
		height: 30px;
	}

	html[lang="zh-Hant"] .portfolio-item h3{
		font-weight: 500;
	}

	html[lang="zh-Hant"] .portfolio-item h4{
		font-weight: 200;
	}

	html[lang="zh-Hant"] .portfolio-item p{
		font-weight: 200;
	}

	.portfolio-item{
		display: flex;
		margin: 60px auto;
		padding: 10px 0;
		position: relative;
	}

	.portfolio-item-Portrait, .portfolio-item-Feature{
		max-width: 700px;
	}

	.portfolio-item-Feature, .portfolio-item-Landscape{
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}

	.portfolio-item-Feature p, .portfolio-item-Landscape p{
		width: 80%;
		margin: 0 auto;
		line-height: 1.6rem;
	}

	.portfolio-item-Feature h3, .portfolio-item-Landscape h3{
		text-align: center;
		margin-top: 20px;
	}

	.portfolio-item-Feature h4, .portfolio-item-Landscape h4{
		text-align: center;
	}

	.thumb-cont-Feature{
		width: 80%
	}

	.port-meta{
		width: 100%;
		margin-top: 30px;
	}

	.portfolio-item-Landscape{
		max-width: 900px;
	}

	.portfolio-item img{
		width: 100%;
	}

	.port-R{
		flex-direction: row-reverse;
	}

	.thumb-cont-Portrait{
		width: 60%;
	}

	.meta-cont-Landscape{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 5px;
	}

	.meta-cont-Portrait{
		width: 40%;
		display: flex;
		flex-wrap: wrap;
		align-content: center;
	}

	.port-meta-L{
		justify-content: left;
		padding-left: 30px;
	}

	.port-meta-R{
		justify-content: right;
		padding-right: 30px;
	}

	.port-meta-R h3{
		text-align: right;
	}

	.port-meta-R h4{
		text-align: right;
	}

	.port-grey-line{
		width: 40%;
	}

	#selections{
		display: flex;
		justify-content: center;
		width: auto;
	}

	#row-selections{
		height: 30px;
	}

}

/**************************
Responsive - max-width 580px
**************************/

@media screen and (max-width: 580px) {

	.artworks-wrap{
		width: 90%;
		padding-top: 170px;
	}

	#artwork-search{
		height: 36px;
		font-size: 1rem;
		margin-top: 4px;
	}

	#selections-wrap{
		padding: 20px 0 15px 0;
        height: 90px;
        flex-direction: column;
        align-items: center;
        gap: 10px;
	}

	#selections{
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		width: 360px;
		gap: 3px;
	}

	#selections select{
		height: 40px;
	}

	#row-selections{
		height: 40px;
	}

	html[lang="zh-Hant"] .portfolio-item h3{
		font-weight: 500;
	}

	html[lang="zh-Hant"] .portfolio-item h4{
		font-weight: 200;
	}

	html[lang="zh-Hant"] .portfolio-item p{
		font-weight: 200;
	}

	.port-image-wrap{
		margin-bottom: 20px;
	}

	.portfolio-item-Portrait, .portfolio-item-Feature{
		padding: 10px 20px;
		max-width: 400px;
		margin: 60px auto 40px auto;
	}

	.portfolio-item-Landscape{
		margin: 60px 0;
		padding: 10px 0;
	}

	.portfolio-item-Portrait img, .portfolio-item-Feature img{
		width: 100%;
	}

	.portfolio-item-Landscape img{
		width: 100%;
		object-fit: contain;
	}

	.meta-cont-Landscape{
		padding: 0 20px;
	}

	.meta-cont{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;

	}

	.meta-cont h3, .meta-cont h4{
		text-align: center;
	}

	.port-grey-line{
		width: 60%;
	}

}