.page-dynasties .alldynasties{ 
display: flex;
    flex-direction: column;
    gap: 4rem;
	margin: 0 0 3rem 0;
}
.page-dynasties .singlesdynasty p
{
line-height: 23px;
}

.page-dynasties #main-content
{
	min-height:70vh;
}
.page-dynasties .dynasty-descriptions-wrapper
{
    padding: 0 12px;
    margin: 0 0 2rem 0;
}
.page-dynasties .dynasty-descriptions-wrapper p
{
line-height: 21px;
}



.page-dynasties #main-content .container:before
{
	display:none;
}


.page-dynasties .alldynasties ul
{
display: flex;
	gap:20px;
	list-style:none;
	    font-family: 'abril-display-regula', Georgia, "Times New Roman", serif;
    font-size: 15px;
    color: #000000 !important;
	justify-content: center;

}
.page-dynasties .alldynasties {
margin: 0 0 10px 0;
}
.page-dynasties .alldynasties ul li button
{
    background: none;
    border: none;
    margin: 0;
    padding: 0;
	 font-size: 15px;
}

.page-dynasties .alldynasties ul li button:hover
{
	text-decoration: underline;
	cursor: pointer;
}

.page-dynasties .container
{
	padding-top:0 !important;
	margin: 6px auto;
}

.page-dynasties .alldynastiescont ul.singleimage
{
	list-style:none;
}
.page-dynasties .alldynastiescont .singleimage .ekcmasonry-grid-item
{
 height: 120px;
  float: left;
}

.page-dynasties .alldynastiescont .singleimage .ekcmasonry-grid-item,
.page-dynasties .alldynastiescont .singleimage .ekcmasonry-grid-sizer

{
	width: calc(50.00000000%);
padding:12px;
	height: auto;
}



/* ------------------------------------------------ */
/* 1. SETUP: Position and Overflow */
/* The parent container needs relative positioning to anchor the absolute children */
.page-dynasties .ekcmasonry-grid-item {
    position: relative ;
    overflow: hidden; /* Ensures nothing spills out of the image area */
	line-height: 0; 
    
}

.page-dynasties .ekcmasonry-grid-item img {
display: block; /* Removes any baseline spacing below the image */
    width: 100%;
    height: auto;
}

/* ------------------------------------------------ */
/* 2. OVERLAY: Create and Hide the Color Layer */
.page-dynasties .ekcmasonry-grid-item::after {
    content: '';
    position: absolute;
    top: 12px;
    left: 12px;
    width: calc(100% - 24px);
    height: calc(100% - 24px);
    background-color: #B48D8C; /* Example: A dark blue overlay */
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease;
    pointer-events: none; /* Allows clicks to pass through to the image/link if needed */
}

/* ------------------------------------------------ */
/* 3. REVEAL TEXT: Centering and Stacking */
.page-dynasties .artworkhoverreveal {
    position: absolute; /* Takes it out of the normal flow */
    top: 12px;
    left: 12px;
    width: calc(100% - 24px);
    height: calc(100% - 24px);
    
    /* Use Flexbox for perfect center alignment */
    display: flex; 
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */

    z-index: 10; /* Ensures text is always on top of the overlay */
    
    /* Hiding by default (from previous step) */
    opacity: 0;
    visibility: hidden; 
    transition: opacity 0.3s ease;
    text-align: center; /* Centers the text lines within the reveal box */
    color: white; /* Ensure text is visible over the dark overlay */
}

/* ------------------------------------------------ */
/* 4. HOVER STATE: Apply the effects simultaneously */
.page-dynasties .ekcmasonry-grid-item:hover::after {
    opacity: 1; /* Reveal the semi-transparent overlay */
}

.page-dynasties .ekcmasonry-grid-item:hover .artworkhoverreveal {
    opacity: 1; /* Reveal the text */
    visibility: visible;
	    line-height: normal;
}

.single-dynasty-artwork #main-content .container:before
{
	display:none;
}

.single-dynasty-artwork .artworkimage
{
	text-align:center;
}

.single-dynasty-artwork .artworkimage img
{
max-height: 800px;
}

.single-dynasty-artwork .artworkshortdesc
{
	font-family: 'Gill Sans', Helvetica, Arial, Lucida, sans-serif;
	font-size:14px;
	text-align:center;
}
.single-dynasty-artwork h1.arttitle
{
    margin: 3rem 0px;
    border-bottom: 1px solid;
    padding: 0 0 1rem 0;
    font-size: 40px;
}
.single-dynasty-artwork p
{
    line-height: 21px;
font-family: 'Gill Sans', Helvetica, Arial, Lucida, sans-serif;
}

.single-dynasty-artwork .artworkdesc
{
    margin: 0 0 8rem 0;
}




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

.page-dynasties .alldynasties ul
{
display: flex;
gap: 10px;
	flex-direction: column;
    /* justify-items: center; */
    align-items: center;
}
}