/*
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap');
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');



/* Main styles */
:root {
    --primary-color: rgb(210,210,210);
    --primary-background-color: rgb(11, 11, 11);
    --secondary-color: rgb(150,150,150);
    --secondary-background-color: rgb(21, 21, 21);
    --h-color: rgb(255, 255, 255);
    --footer-color: rgb(150, 150, 150);
    --dimmed-color: rgb(180, 180, 180);
    --highlight-color: rgb(255, 255, 255);
    --timecode-color: rgb(77, 77, 77);
    --box-shadow-color: rgb(0, 0, 0);
    --disabled-button-color: rgb(50, 50, 61);
    --border-radius: 0rem;
    --link-color: rgb(255,255,255);
    
    /* Additional Variables */
    --button-background-color: #008080; /* Teal */
    --button-hover-background-color: #007373; /* Slightly darker teal */
    --button-text-color: #FFFFFF;
}





* {
	box-sizing: border-box;
}


html,
body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
}

body {
	font-family: 'Work Sans', sans-serif;
	font-weight: 400;
	font-size: 19px;
	line-height: 1.5rem;
	color: var(--primary-color);
	background-color: var(--primary-background-color);
	overflow-x: hidden;
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,th,td {
margin: 0;
padding: 0;
direction: ltr;
}


.visually-hidden {
	display: none;
}


/* Ensure the ul and ol styles are applied correctly */
ul, ol {
    margin: 1rem 0 2rem 2rem;

}

ul li ul, ul li ol {
}

ol li {
    margin-bottom: 1em;
}
ol li h4 {
    display: inline; /* Make the <h4> inline so it stays on the same line */
    font-weight: 700; /* Optional: make the heading bold */
}
ol li p {
    display: block; /* Ensure the paragraph starts on a new line */
    padding-left: 1rem; /* Add some padding to align the text */
}

ul li {

}



h1, h2, h3, h4, h5, h6 {
	font-family: 'Montserrat', sans-serif;
	color: var(--h-color);
	margin-top: 2rem;
}

h1 {
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	line-height:1.5rem;
}

h2 {
	font-size: 1.2rem;
	letter-spacing: 1px;
	text-transform: uppercase;
}

h3 {
	font-size: 1rem;
	letter-spacing: 1px;
	text-transform: none;
}

h4 {
	font-size: 0.8rem;
	letter-spacing: 1px;
	text-transform: none;
}


p {
	margin-top: 0.5rem;
	margin-bottom: 1rem;
}

a {
	color: var(--link-color);
	line-height: inherit;
	cursor: pointer;
	text-decoration: none;
}

p > a {
	text-decoration: underline;
}


.ingress {
	font-size: 1.3em;
	line-height: 1.5em;
	margin-bottom: 1em;
}


.wrapper {
	display: grid;
	grid-template-columns: 1fr ;
	grid-template-rows: auto auto 1fr auto;
	min-height: 100vh;
	grid-template-areas: 
    	'header'
    	'main'
    	'footer'
    	'audio-player';
}


@media screen and (max-width: 740px) {
	.wrapper {
		grid-template-rows: 72px auto 1fr auto;
	}
}


header {
	grid-area: header;
	grid-column: 1 / -1;
	z-index: 4;
}




/*
main {
	grid-area: main;
	grid-column: 1 / -1;
	grid-row-start: 1;
}
*/

main {
	grid-area: main;
	grid-column: 1 / -1;
	grid-row-start: 2;
	z-index: 3;
	min-height: 20px;
	width:100%;
}


footer {
	grid-area: footer;
	grid-column: 1 / -1;
	padding-bottom: 200px;


	text-align: center;
}

footer > .footer-links {
	font-size: 0.8rem;
	margin: 0.5rem 0;
	color: var(--footer-color);
}


footer > .legal {
	font-size: 14px;
	margin: 3rem 0 0 0;
	color: var(--footer-color);
}

footer > .copyright {
	font-size: 14px;
	margin: 3rem 0 0 0;
	color: var(--footer-color);
}





#ajax-loader {
  position: fixed;
  display: table;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#ajax-loader > div {
  display: table-cell;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  text-align: center;
  background-color: var(--primary-background-color);
  opacity: 0.65;
}


.mapsitna { 
	display:none;
}



/* FRONTPAGE ITEMS BLOCK ------------------------------------------------ */
.items-block-wrapper {
	width: 100%;
	max-width: 1280px;
	margin: 5em auto;

}
.items-block-wrapper > .items-block {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
	grid-gap: 1rem;
	padding: 0 1rem;
	border: 0 solid red;
}
.items-block-wrapper > .items-block > .items-block-header {
	grid-column: 1 / -1;
	margin: 10px 0;
	text-align: center;
	font-weight: 300;
	font-size: 24px;
	text-transform: uppercase;
	letter-spacing: 6px;
	color: #fff;
}
.items-block-wrapper > .items-block > .item {
	justify-self: center;
	width: 360px;
	max-width: 100%;
	background-color: #212121;

    display: grid;
    grid-template-rows: auto auto 1fr auto;
    grid-template-columns: 100%;


}


.items-block-wrapper > .items-block > .item > .item-header h3 {
	font-weight: 300;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--primary-color);
	padding: 0 1rem;
}
.items-block-wrapper > .items-block > .item > .item-summary {
	color: var(--primary-color);
	padding: 0 1rem;
}
.items-block-wrapper > .items-block > .item > .item-pubdate {
	color: #666;
	font-size: 1rem;
	padding: 0.5rem 1rem;
}
/* ------------------------------------------------------------ */





/* BLOG INDEX --------------------------------------------- */
.blog-index-wrapper {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
	margin: 3rem auto 0 auto;
	width: 100%;
	max-width: 1580px;
    padding-left: 1em; /* Maintain padding on the left */
    padding-right: 1em; /* Maintain padding on the right */
}

.blog-index-wrapper > .index-grid {
	grid-column: 1 / span 6;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
}



.blog-index-wrapper > .index-grid > .index-item:first-child {
    grid-column: 1 / span 2; /* Span the first item across both 3fr columns */
    width: 100%;
}

.blog-index-wrapper > .index-grid > .index-item {
    grid-column: span 1; /* Each index item takes one of the two 3fr columns */
    justify-self: stretch;
    width: 100%;
    max-width: 100%;
}

.blog-index-wrapper > .index-grid .item-ingress {
	margin-bottom:3rem;
}

.blog-index-wrapper > .info-column {
    grid-column: 7 / -1; /* Info column takes up the 2fr column */
    padding: 0 1em 0 2em;
}



@media screen and (max-width: 1024px) {
    .blog-index-wrapper {
        grid-template-columns: 1fr 1fr; /* Two columns: one for items, one for info column */
        padding-left: 1em; /* Maintain padding on the left */
        padding-right: 1em; /* Maintain padding on the right */
    }

    .blog-index-wrapper > .index-grid {
        grid-template-columns: 1fr; /* Make each index item occupy a full row */
        grid-column: 1 / 2; /* Index grid occupies the first column */
    }
	
    .blog-index-wrapper > .index-grid > .index-item:first-child {
        grid-column: 1 / 2; /* Span the first item across all available space */
        grid-row: 1; /* Ensure it's at the top row */
        width: 100%;
    }

    .blog-index-wrapper > .index-grid > .index-item {
        grid-column: 1 / 2; /* Ensure each item spans the full width of the first column */
        width: 100%;
    }
	
    .blog-index-wrapper > .info-column {
        grid-column: 2 / 3; /* Info column stays in the second column */
        grid-row: 1 / -1; /* Make sure it spans the entire height beside the index items */
    }
}

@media screen and (max-width: 740px) {
    .blog-index-wrapper {
        grid-template-columns: 1fr; /* Stack everything in one column on mobile */
        padding-left: 1em; /* Maintain padding on the left */
        padding-right: 1em; /* Maintain padding on the right */
    }
    .blog-index-wrapper > .index-grid {
        grid-template-columns: 1fr; /* One column for index items */
    }
    .blog-index-wrapper > .info-column {
        grid-column: 1 / 2; /* Info column appears below index items */
        grid-row: 2;
    }
}





/* ------------------------------------------------------------ */






/* NEWS INDEX --------------------------------------------- */
.news-index-wrapper {
	width: 100%;
	max-width: 1580px;
	margin: 3rem auto 0 auto;
	padding: 0 1rem;
}
.news-index-wrapper > .index-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
	grid-gap: 5px;

}
.news-index-wrapper > .index-grid > .index-header {
	grid-column: 1 / -1;
	margin: 10px 0;
	text-align: center;
	font-weight: 300;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 3px;
	color: var(--secondary-color);
}
.news-index-wrapper > .index-grid > .index-item {
	justify-self: center;
	width: 100%;
	max-width: 100%;
}

.news-index-wrapper > .index-grid .item-ingress {
	margin-bottom:3rem;
}


.news-index-wrapper > .index-grid > .paginanation-nav {
	grid-column: 1 / -1;
	text-align: center;
}
/* ------------------------------------------------------------ */











#ajax-content {
	margin: 0 0 0 0;
}


@media screen and (max-width: 740px) {
	#ajax-content {
		margin: 0 0 0 0;
	}
}


.block-header {
	max-width: 1600px;
	margin: 0 auto;
	padding: 3em 1em 0 1em;
}


.topbar-header {

}




.row {
  max-width: 1580px;
  width: 100%;
  margin: 0 auto;
}

.row::before, .row::after {
  content: "";
  display: table;
}


.twelve, .row .twelve {
  width: 100%;
}
.column, .columns {
  float: left;
  min-height: 1px;
  padding: 0 2em;
  position: relative;
}


.notis {
	display: inline-block;
	padding-left: 10px;
	margin-bottom: 25px;
	border-left: 10px solid var(--secondary-color);
	color: var(--secondary-color);
}


/**
 * VIDEOS INDEX
 */

.videos {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 350px;
  grid-auto-flow: dense;
  grid-gap: 1em;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0;
}

.video-item {
    display: flex;
    flex-flow: column nowrap;
}


.video-item:nth-child(1) { grid-column-end: span 3; }
.video-item:nth-child(2) { grid-column-end: span 3; }
.video-item:nth-child(3) { grid-column-end: span 3; }
.video-item:nth-child(4) { grid-column-end: span 3; }
.video-item:nth-child(5) { grid-column-end: span 3; }
.video-item:nth-child(6) { grid-column-end: span 3; }
.video-item:nth-child(7) { grid-column-end: span 3; }
.video-item:nth-child(8) { grid-column-end: span 3; }

.video-item img {
    width: 100%;
    height: auto;
}

@media (max-width: 1200px) {
	.video-item:nth-child(1) { grid-column-end: span 4; }
	.video-item:nth-child(2) { grid-column-end: span 4; }
	.video-item:nth-child(3) { grid-column-end: span 4; }
	.video-item:nth-child(4) { grid-column-end: span 4; }
	.video-item:nth-child(5) { grid-column-end: span 4; }
	.video-item:nth-child(6) { grid-column-end: span 4; }
	.video-item:nth-child(7) { grid-column-end: span 4; }
	.video-item:nth-child(8) { grid-column-end: span 4; }
}

@media (max-width: 900px) {

	.video-item:nth-child(1) { grid-column-end: span 6; }
	.video-item:nth-child(2) { grid-column-end: span 6; }
	.video-item:nth-child(3) { grid-column-end: span 6; }
	.video-item:nth-child(4) { grid-column-end: span 6; }
	.video-item:nth-child(5) { grid-column-end: span 6; }
	.video-item:nth-child(6) { grid-column-end: span 6; }
	.video-item:nth-child(7) { grid-column-end: span 6; }
	.video-item:nth-child(8) { grid-column-end: span 6; }

}

@media (max-width: 600px) {
	.video-item {
    	grid-column-end: span 12 !important;
  	}
}


/**
 * NEWS
 */

.page-items {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 350px;
  grid-auto-flow: dense;
  grid-gap: 1em;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
}


.post {
    display: flex;
    flex-flow: column nowrap;
}

.post:nth-child(1) { 
	grid-column-end: span 9; 

}
.post:nth-child(2) { grid-column-end: span 3; }
.post:nth-child(3) { grid-column-end: span 3; }
.post:nth-child(4) { grid-column-end: span 6; }
.post:nth-child(5) { grid-column-end: span 3; }
.post:nth-child(6) { grid-column-end: span 6; }
.post:nth-child(7) { grid-column-end: span 3; }
.post:nth-child(8) { grid-column-end: span 3; }

.media {
	display: block;
	flex: 1 1 auto;
	background-size: cover;
	background-position: center;
	background-color: #ddd;
}


.caption {
	padding: .5em 0 0;
	background-color: rgba(0,0,0,0.5);
}

.title { 
	margin: 0 0 .5em; 
}



.overlaid {
	position: relative;
}


.caption {
        z-index: 2;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        color: #fff;
        padding: 1em;
}

.caption::after {
        z-index: 1;
        content: '';
        position: absolute;
        top: 0; bottom: 0;
        left: 0; right: 0;
}


@media (max-width: 1200px) {
	.post:nth-child(1) { grid-column-end: span 12; }
	.post:nth-child(2) { grid-column-end: span 4; }
	.post:nth-child(3) { grid-column-end: span 4; }
	.post:nth-child(4) { grid-column-end: span 4; }
	.post:nth-child(5) { grid-column-end: span 12; }
	.post:nth-child(6) { grid-column-end: span 4; }
	.post:nth-child(7) { grid-column-end: span 4; }
	.post:nth-child(8) { grid-column-end: span 4; }
}

@media (max-width: 900px) {

	.post:nth-child(1) { grid-column-end: span 12; }
	.post:nth-child(2) { grid-column-end: span 6; }
	.post:nth-child(3) { grid-column-end: span 6; }
	.post:nth-child(4) { grid-column-end: span 12; }
	.post:nth-child(5) { grid-column-end: span 6; }
	.post:nth-child(6) { grid-column-end: span 6; }
	.post:nth-child(7) { grid-column-end: span 6; }
	.post:nth-child(8) { grid-column-end: span 6; }

}

@media (max-width: 600px) {
	.post {
    	grid-column-end: span 12 !important;
  	}
}






.ajax-nav {
	/*
    display:inline-block;
    width:100%;
    height:100%;
    */
}

.media .ajax-nav {
    display:inline-block;
    width:100%;
    height:100%;
}





/** SOCIAL MEDIA LIST */
.social-media {
    display: flex;
    align-items: center;
    justify-content: center;
	margin-top: 2rem;
}

ul.social-media-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
	font-size: 0px; /* eliminate space between li */
}

ul.social-media-list li {
    display: inline-block;
    margin: 10px;
}

.list-item-light {
	width: 24px;
	height: 24px;
	fill: #fff;
	opacity:  50%;
	transition: opacity 0.2s;
	--order-alpha: 1091;
}

.list-item-light:hover {
	fill: #fff;
	opacity:100%;
	transition: opacity 0.2s;
}

.list-item-dark {
	width: 24px;
	height: 24px;
	fill: #000;
	opacity:  90%;
	transition: opacity 0.2s;
	--order-alpha: 1091;
}

.list-item-dark:hover {
  fill: #3399ff;
	opacity:100%;
	transition: opacity 0.2s;
}

.list-item-link {
	fill: inherit;
	display: block;
	text-align: center;
}



/* PAGE-BLOCK 
.page-block {
    width: 100%;
    max-width: 1580px;
    margin: 0 auto;
    padding: 1em;
}
*/


.news-post, .blog-post {
	margin-top:3rem;
}

.page-block {
	width: 100%;
}


.page-block-content {
	display: grid;
    grid-template-columns: repeat(1fr);
    grid-template-areas: 
        'col1'
		'sharing_col'
        'col2'
        'col3'
        'col4';
	width: 100%;
	margin: 0 auto;
	padding: 0 2em;
}

.page-block-content-col-1,.sharing-col,.page-block-content-col-2,.page-block-content-col-3,.page-block-content-col-4 {
    grid-column: 1 / -1;
}

.page-block-content-col-2 img {
	width:100%;
	max-width:100%;
	height: auto;
}

.page-block-content-col-4 ul {
  list-style-type: none;
  padding-left: 0;
}



@media (min-width: 779px) {
	.page-block-content {
		margin: 0 auto;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-template-areas: 
		    	'col1'
				'sharing_col'
		    	'col2'
				'col3'
				'col4';
		grid-gap: 1em;
		width: 100%;
	}


	.page-block-content-col-1 {
		grid-area: col1;
		grid-column: 1 / 4;
		margin-top: 0;
	}

	.sharing-col {
		grid-area: sharing_col;
		grid-column: 1 / 4;
		grid-row-start: 2;
	}

	.page-block-content-col-2 {
		grid-area: col2;
		grid-column: 1 / 4;
		grid-row-start: 2;
	}

	.page-block-content-col-3 {
		grid-area: col3;
		grid-column: 1 / 4;
		font-size: 0.8em;
	}

	.page-block-content-col-4 {
		grid-area: col4;
		grid-column: 4 / -1;
		grid-row-start: 1;
		margin-top: 1em;
		padding-left: 1em;
	}

}


@media (min-width: 1079px) {
	.page-block-content {
		margin: 0 auto;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-template-areas: 
		    	'col1'
				'sharing_col'
		    	'col2'
				'col3'
				'col4';
		grid-gap: 1em;
		width: 100%;
		max-width: 1539px;
	}


	.page-block-content-col-1 {
		grid-area: col1;
		grid-column: 1 / 8;
	}
	
	.sharing-col {
		grid-area: sharing_col;
		grid-column: 1 / 3;
		grid-row-start: 2;
		min-height: 100px;
	}
	


	.page-block-content-col-2 {
		grid-area: col2;
		grid-column: 3 / 8;
		grid-row-start: 2;
	}

	.page-block-content-col-3 {
		grid-area: col3;
		grid-column: 3 / 8;
		font-size: 0.8em;
	}

	.page-block-content-col-4 {
		grid-area: col4;
		grid-column: 8 / -1;
		grid-row-start: 1;
		padding-left: 1em;
	}

}








/* HERO BLOCK */


.hero-block {
	width: 100%;
	max-width: 100%;
	margin:3rem 0;
}
.hero-block > .hero-img{
    position: relative;
}

.hero-block > .hero-img img {
    max-width: 100%;
    height: auto;
    width: auto;
    height: 100%;
    z-index: -999;
}

.hero-block > .hero-img > .background-image{
	min-height: 280px;
    height: 100%;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-size: cover !important;
    position: absolute;

}

.hero-block .hero-img .feat-overlay{
	display: grid;
	grid-template-columns: 1fr;
	justify-content: center;
	align-content: end;
	padding: 0 0 1em 1rem;
    width: 100%;
    height: 100%;
}

.hero-block .hero-img .feat-overlay .header{
	display: block;
	font-size: 3rem;
	font-weight: 900;
	letter-spacing: 2px;
	text-align: left;
	color: rgba(255,255,255,1);
	line-height: 3rem;
	margin-bottom: 0;
	text-transform: uppercase;
}
.hero-block .hero-img .feat-overlay .sub-header{
	flex: 0 1 auto;
	display: block;
	font-size: 1.3rem;
	font-weight: 300;
	letter-spacing: 2px;
	text-align: left;
	color: #fff;
	text-transform: uppercase;
}

.hero-block .hero-img .feat-overlay a{
    color: #FFF;
    text-shadow: 0px 0px 1px rgba(0,0,0,0.4);

}

.hero-block .hero-img .feat-overlay a:hover{
    color: #FFF;
}

.hero-block .hero-img img{
    max-width: 100%;
    height: auto;
    width: 100%;

}




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

}


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



	footer {
		font-size: 150%;
	}
}



/**
 * RESUME
 */

hr {
	margin-top: 3em;
}

.resume {
	color: #333;
	background-color: #fff;
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-template-rows: auto 1fr;
	grid-template-areas: 
	  	'resheader'
    	'rescol1'
    	'rescol2';
}


.resume a {
	color: #3399ff;
}

.resume p {
	margin-top: 0;
}

.resume .summary {
	font-style: italic;
	border-left: 10px solid #999;
	color: #444;
	padding-left: 1em;
}

.res-header{
	grid-area: resheader;
	grid-column: 1 / -1;
	width: 100%;
	padding: 0 2em;
	background-color: #000;
	color:  #fff;
}


.res-col-1 {
	grid-area: rescol1;
	grid-column-start: 2;
	grid-row-start: 2;
	width: 100%;
	height: 100%;
	padding: 2em;
	background-color: #e2e2e2;
	overflow: auto;
}

.res-col-2 {
	grid-area: rescol2;
	grid-column-start: 1;
	grid-row-start: 2;
	padding: 2em;
}


@media screen and (max-width: 740px) {
	.res-header {
		grid-column: 1 / -1;
		grid-row-start: 1;
	}
	.res-col-1 {
		grid-column: 1 / -1;
		grid-row-start: 2;
	}
	.res-col-2 {
		grid-column: 1 / -1;
		grid-row-start: 3;
	}
}


.resume h1, h2, h3, h4 {

}


.resume ul {
	margin-top: 0;
	padding-left: 1em;
}

.resume li {

}

.resume .item {
	margin-bottom: 1em;
}

.resume .item-dates {
	font-size: 100%;
}

.resume .item-title{
	display: block;
	font-weight: 300;
}


.resume .item-description{
	display: block;
	font-size: 100%;
}




.img-box {
	vertical-align: top;
	margin-bottom: 1em;
}

.img-box img {
	width: 100%;
	height: auto;
}

.img-box .by-line {
	font-weight: 400;
	font-style: italic;
}










/* LIST ITEMS */
.list-item {
	font-size: 1rem;
	margin: 0 0 1em 0;
}
.list-date {
	font-size: 0.8rem;
	color: var(--secondary-color);
}
.list-title {
	font-size: 1rem;
	font-weight: 700;
}
.list-description {
	font-size: 1rem;
}
.list-item a {
	text-decoration: underline;
}








/* PHOTOS */

#photos {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 99px 1em;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: start;
}

#photos > .section-header {
	grid-column: 1 / -1;
	width: 100%;
	max-width: 740px;
	height: auto;
}

#photos > .section-description {
	grid-column: 1 / -1;
	padding: 0;
	width: 100%;
	max-width: 740px;
	height: auto;
}


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

	#photos {
  		padding: 27px 1em;
	}

}





/* VIDEO EMBEDS */

.embedded-video {
  position: relative;
  display: inline-block;
  width: 100%;
  padding-bottom: 50%; /* Enforces a 2:1 aspect ratio (height is 50% of the width) */
  margin: 1rem 0 0 0;
  overflow: hidden; /* Ensures anything outside the aspect ratio is hidden */
}

.embedded-video img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the image covers the container while maintaining its aspect ratio */
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px; /* Adjust size as needed */
  height: 72px;
  opacity: 0.8;
}

.play-button img {
  width: 100%;
  height: 100%;
}

.embedded-video:hover .play-button {
  opacity: 1;
}


.by-line {
	font-size: 0.8rem;
	font-weight: 400;
	font-style: italic;
}





/**
BIO BOX 
*/

.bio-box {
  border: 2px solid #272727; /* Adjust color to suit your theme */
  background-color: #171717; /* Light background for contrast */
  padding: 20px;
  margin: 20px 0;
  border-radius: 8px; /* Rounded corners */
}

.bio-box h4 {
  margin-top: 0;
  font-size: 1.1rem;
  color: #CCC; /* Adjust heading color */
}

.bio-box p {
  margin: 0.5rem 0;
  font-size: 1rem;
  color: #CCC; /* Text color */
}

.bio-box a {
  color: #0073e6; /* Link color */
  text-decoration: none;
  font-weight: bold;
}

.bio-box a:hover {
  text-decoration: underline;
}







.star-rating {
  font-size: 0.9rem; /* Adjust size as needed */
  font-style: italic;
  display: inline-block;
}

.filled-star {
  font-size: 1.5rem; /* Adjust size as needed */
  font-style: normal;
  color: #FFF; /* Gold for filled stars */
}

.outlined-star {
  font-size: 1.5rem; /* Adjust size as needed */
  font-style: normal;
  color: #D3D3D3; /* Gray for outlined stars */
}



/**
ARTICLE 
*/
article {
	margin: 3rem auto;
	padding: 0 1rem;
	width: 100%;
	max-width: 779px;
}




.remix-icon-light {
	margin-left:0.5rem;
    width: 16px;
    height: 16px;
    filter: invert(1);
}