/* HOMEPAGE STYLES
************************************************************/

section.bannerImage {
    min-height: calc(100vh - 140px);
} 

@media (min-width: 768px)	{
section.bannerImage {
    min-height: calc(100vh - 240px);
}
}
   
section.projects,
section.teaching,
section.researchAndSpeaking	{
	border-bottom: 1px solid var(--color-row-border);
}

.sectionTitle	{
	text-align: center;
	margin-top: 4vw;
	margin-bottom: 2vw;
}

section.heroStatement .container	{
	max-width: 52rem;
}

section.heroStatement	{	
	text-align: center;
}

section.heroStatement h2	{	
	margin-top: 1em;
	font-size: 2em;
	font-style: italic;
	font-family: var(--font-quote);
}

@media (min-width: 768px) {
.text .container {
    width: min(30vw, 100%);
    }
}
/* li.current_page_item	{
	display: none;
} */

/* BANNER CAROUSEL
*****************/

.image-slide {
	background-size: cover;
	background-position: center;
	position: relative;
	height: 100vh !important;
	max-height: 100vh !important;
	z-index: 2;
	background-repeat: no-repeat;
}

.image-slide img {
	/* display: block; */
	width: 100%;
	/* height: auto; */
}
.image-slide .centered-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}
.image-slide figcaption {
	color: #000;
	font-size: 18px;
	font-weight: bold;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: rgba(255, 255, 255, 0.7); /* Adjust background color and opacity */
	padding: 10px;
	text-align: center;
}

section .flexContainer .image {
	background-size: cover; 
	background-position: center; 
	padding: 0px;
	min-height: 40vw;
}

section .flexContainer .text {
	padding-bottom: 30px;
}

@media (max-width: 768px)	{
section .flexContainer .image {
	min-height: 50vw;
	}
}

section.about .image {
	background-color: #956a95; /* purple */
	background-color: #3e4d88;
}

section.videos	{
	background-color: #060d27;
}

/* TEACHING
*****************/
@media (max-width: 768px) {
    .order-1-md {
        order: 2;
    }
    .order-2-md {
        order: 1;
    }
}

/**************/

@media (max-width: 768px)	{
	h2.sectionTitle, div.image {margin-bottom: 30px;}
}