#r34lbx {
	background: rgba(0,0,0,0.5);
	display: block;
	height: calc(100vh - var(--wp-admin--admin-bar--height));
	position: fixed; top: var(--wp-admin--admin-bar--height); right: 0; bottom: 0; left: 0;
	opacity: 0;
	overflow: hidden;
	transition: opacity 0.25s ease;
	width: 100vw;
	z-index: -9999;
}

#r34lbx.open {
	opacity: 1;
	padding-top: 0;
	z-index: 999;
}

	#r34lbx .r34lbx_close {
		background-color: #ffffff;
		border-radius: 100%;
		color: #231f20;
		cursor: pointer;
		height: 44px;
		position: absolute; top: calc(2em - 22px); right: calc(5% - 22px); bottom: auto; left: auto;
		width: 44px;
		z-index: 4;
	}
	
	#r34lbx .r34lbx_close:is(:focus, :hover) {
		color: #342d2f;
	}
	
	#r34lbx.r34lbx-small .r34lbx_close {
		top: calc(8em - 22px); right: calc(20% - 22px);
	}
	
	#r34lbx .r34lbx_nav {
		display: block;
		height: 0;
		overflow: visible;
		position: absolute; top: calc(50% - 22px); right: 2px; bottom: calc(50% - 22px); left: 2px;
		width: 100%;
		z-index: 3;
	}
	
		#r34lbx .r34lbx_nav div {
			background: #231f20 url('') center center no-repeat;
			background-size: 24px 24px;
			border: 1px solid rgba(255,255,255,0.5);
			border-radius: 100%;
			height: 44px;
			position: absolute; top: 0; bottom: auto;
			width: 44px;
		}
		
		#r34lbx .r34lbx_nav div::after {
			color: #ffffff;
			font-family: 'Arial', sans-serif;
			font-size: 50px;
			position: absolute; top: 0; right: 0; bottom: 0; left: 0;
			height: 44px;
			line-height: 34px;
			text-align: center;
			width: 44px;
		}
		
		#r34lbx .r34lbx_nav div[data-dir] {
			cursor: pointer;
		}
	
		#r34lbx .r34lbx_nav div[data-dir='prev'] {
			background-image: url('r34lbx_previous.svg');
			right: auto; left: calc(5% - 22px);
		}
		
		#r34lbx .r34lbx_nav div[data-dir='next'] {
			background-image: url('r34lbx_next.svg');
			right: calc(5% - 22px); left: auto;
		}
	
	#r34lbx .r34lbx_content {
		aspect-ratio: 16 / 9; /* Forced aspect assumes video; @todo make this smarter */
		background: transparent;
		position: absolute; top: calc(50vh + var(--wp-admin--admin-bar--height)); right: 5%; bottom: auto; left: 5%;
		transition: all 0.25s ease;
		width: 90%;
		z-index: 1;
	}
	
	#r34lbx.open .r34lbx_content {
		top: 2rem; bottom: 2rem;
	}

	#r34lbx.r34lbx-small .r34lbx_content {
		top: 8em; right: 20%; bottom: 8em; left: 20%;
		width: 60%;
	}

	#r34lbx .r34lbx_content.image {
		background: rgba(0,0,0,0.5);
	}

	#r34lbx .r34lbx_content.image_description {
		background: #ffffff;
		overflow: auto;
	}
	
		#r34lbx .r34lbx_content img {
			border: 1em solid transparent;
			display: block;
			height: auto;
			margin: auto;
			max-height: 100%;
			max-width: calc(100% - 2em);
			position: relative; top: 50%;
			transform: translateY(-50%);
			/*width: auto; Removed as a workaround for possible Chrome CSS bug */
		}
		#r34lbx .r34lbx_content.image_description .image {
			position: absolute; top: 0; right: 40%; bottom: 0; left: 0;
		}
		
		#r34lbx .r34lbx_content.image_description .description {
			position: absolute; top: 50%; right: 6rem; bottom: 3rem; left: calc(60% + 1.5rem);
			transform: translateY(-50%);
		}
	
		#r34lbx .r34lbx_content iframe {
			background: #ffffff;
			height: 100%;
			margin: 0 auto;
			overflow: auto;
			position: absolute; top: 0; right: 0; bottom: 0; left: 0;
			width: 100%;
		}
		
		#r34lbx .r34lbx_content video.r34lbx_html5_video {
			height: auto;
			max-width: 100%;
			position: absolute; top: 0; right: 0; bottom: 0; left: 0;
			width: auto;
			
		}
		
	#r34lbx .r34lbx_caption {
		color: #ffffff;
		position: absolute; top: auto; right: 5%; bottom: 0.5em; left: 5%;
		z-index: 2;
	}

		#r34lbx .r34lbx_caption .r34lbx_caption_content {
			font-weight: 700;
			position: absolute; bottom: 0; left: 0;
			width: 70%;
		}
		
		#r34lbx .r34lbx_caption .r34lbx_item_count {
			float: right;
			position: absolute; bottom: 0; right: 0;
			text-align: right;
			width: 25%;
		}


/* CSS3 MEDIA QUERIES */

/* PHONES (content area under 782 pixels) */
@media screen and (max-width: 782px) {

	#r34lbx.open .r34lbx_close, #r34lbx.open.r34lbx-small .r34lbx_close {
		right: 10px;
	}
	
	#r34lbx.open .r34lbx_content, #r34lbx.open.r34lbx-small .r34lbx_content {
		top: 0; right: 0; bottom: 0; left: 0;
		width: 100%;
		/*bottom: 8rem;*/ /* Fixes iPhone "no click zone" issue */
	}

	#r34lbx.open.r34lbx-small .r34lbx_content {
		right: 10%; left: 10%;
		width: 80%;
	}

	#r34lbx .r34lbx_content.image img {
		border: none;
		max-width: 100vw;
		right: 0; left: 0;
	}

	#r34lbx .r34lbx_nav:has(~ .r34lbx_content.image) div[data-dir] {
		opacity: 0.5;
		transition: opacity 0.25s ease;
	}
	
	#r34lbx .r34lbx_nav:has(~ .r34lbx_content.image) div[data-dir]:is(:focus, :hover) {
		opacity: 1;
	}

	#r34lbx .r34lbx_nav div[data-dir='prev'] {
		left: 10px;
	}
	
	#r34lbx .r34lbx_nav div[data-dir='next'] {
		right: 10px;
	}

	#r34lbx .r34lbx_nav div[data-dir='next'] {

	#r34lbx.open .r34lbx_content.image_description .image {
		top: 1.5rem; right: 0; bottom: 40%; left: 0;
	}
	
	#r34lbx.open .r34lbx_content.image_description .description {
		top: calc(60% + 1rem); right: 3rem; bottom: 1.5rem; left: 3rem;
		transform: none;
	}

}