/* 12/18/24 - MR content area component restyle fron refresh */

.comp-wrap {display:flex;flex-direction:row;}

.comp-wrap .comp-content-area {width: calc(100%/3);}

@media (max-width: 70em) {
	.comp-wrap{display:flex;flex-direction:column;}
	.comp-wrap .comp-content-area {width: calc(100%/1);}
}

.bg-blue,.bg-gray,.bg-white{padding:2rem;border:1px solid #cdcdcd}
.bg-blue {background-color:#003da5} 
.bg-gray {background-color:#C8C9C7} 
.bg-white {background-color:#ffffff}

h2.black,h3.black,.p--alt.black {color:#000000 !important;margin:0 !important;padding:0 0 .5rem;}
h2.blue,h3.blue,.p--alt.blue {color:#003da5 !important;margin:0 !important;padding:0 0 .5rem;}
h2.gray,h3.gray,.p--alt.gray {color:#C8C9C7 !important;margin:0 !important;padding:0 0 .5rem;}
h2.white,h3.white,.p--alt.white {color:#ffffff !important;margin:0 !important;padding:0 0 .5rem;}
.p--alt.black,.p--alt.blue,.p--alt.gray,.p--alt.white{font-weight:500;margin:0;padding: 0 !important;}
.p--alt.black ul,.p--alt.blue ul,.p--alt.gray ul,.p--alt.white ul{margin:0;padding:.5rem 2rem 0 !important;}

.comp-content-area h2 {line-height:1;border-bottom:2px solid #ffffff;margin-bottom:.5rem}


.sidebar img.headshot-left,.sidebar img.headshot-right {width:120px;height:auto}
.sidebar h2 {font-size:1.75rem;}
.sidebar h3 {font-size:1.5rem;}

/* 12/14/24 - MR image snippet img/h2 control on mobile*/	
	.image-snippet h2 {font-size:x-large}
	.image-snippet .subhead {font-size:18px}
	.headshot-left,.headshot-right{
	width:130px;
	height:auto;
	margin:0 1rem 1rem;
	float: left; 
	border-radius:5px
}
@media (min-width: 70em) {
	.image-snippet h2 {font-size:2rem}
	.image-snippet .subhead {font-size:21px}
	.headshot-left,.headshot-right{width:200px;height:auto}
}

/* 12/12/24 - SF added to feature byline-widget-all to correct .contact usage in the next-steps portion of the refresh. */
.byline{
	margin:0 !important;
}

/* 12/04/24 - SF temporary solution for anchors in courseleaf accordions */
#requirementstextcontainer .toggle-group a[id]{
	margin-top:0 !important;
}

/* 12/03/24 - SF added to remove blue border box from MOCRA pagination */
#artTable_wrapper .active{
	border:0;
}

/* 11/26/24 - MR new gallery css to replace old gallery */	

/* Position the image container (needed to position the left and right arrows) */
.container-slideshow {
	position: relative;
	margin:2rem 0;
}

/* Hide the images by default */
.mySlides {
	display: none;
}

.mySlides:first-child {
	display: block;
}	

.mySlides img	{
	position: relative;
	border:1px solid #000;
	border-radius: 20% 0 0;
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 1.5s;
}

@keyframes fadeInOpacity {
	0% {
		opacity: .3;
		mix-blend-mode: darken;
		background-color:#003da5;
		filter: grayscale(1000%);
	}
	100% {
		opacity: 1;
	}
}
/* Add a pointer when hovering over the thumbnail images */
.cursor {
	cursor: pointer;
}

.slideshow-nav {
	display:flex;
	flex-direction:row;
	align-items: center;
	justify-content: center;
	gap:5px;
	min-width:20s%;
	background-color:rgba(255, 255, 255, 0.7);
}

/* Next and previous buttons */
.slideshow-nav .prev,
.slideshow-nav .next {
	cursor: pointer;
	width: auto;
	padding: 16px;
	margin-top: 0px;
	color: white;
	font-weight: 700;
	font-size: 20px;
	<!--border-radius:50% 0 0 50%; -->
	user-select: none;
	-webkit-user-select: none;
	background-color: #003da5;
}

/* Position the "next button" to the right */
.slideshow-nav .next {
	<!--border-radius:0 50% 50% 0; -->
}

/* On hover, add a black background color with a little bit see-through */
.slideshow-nav .prev:hover,
.slideshow-nav .next:hover {
	background-color: rgba(83, 195, 238, 1);
	color: #003da5;
}

.slide-count {
	color: #333;
	font-size: 15px;
	font-weight:bolder;
	align-items: center;
	justify-content: center;
	text-align:center;
	text-transform:uppercase;
	width:6rem;
}

/* Container for image text */
.caption-container {
	display:flex;
	flex-direction:row;
	justify-content: center;
	min-height:6.5rem;
	align-items: center;
	text-align: left;
	line-height:110%;
	background-color: #e3decb;
	padding: .25rem;
	color: #2b2b2b;
	font-size:110%;
	border:1px solid #cdcdcd;
	border-bottom:3px solid #cdcdcd;
}

div#caption {
	min-width:73%;
	max-width:73%;
	margin: 0 1rem;
}

@media (min-width: 70em) { 
	.caption-container {
		padding: .25rem .5rem;
	}
}

@media (max-width: 60em) { 
	.row:after {
		display: none;
	}
	.row, .column, .demo {
		display: none;
	} 

	.caption-container {
		flex-direction:column;
		align-items: center;
		justify-content: center;
		gap:5px;
	}

	div#caption {
		min-width:100%;
		padding:1rem;
		min-height:4rem;
	}
}

.row:after {
	content: "";
	display: table;
	clear: both;
}

/* Six columns side by side */
.column {
	float: left;
	width: 16.66%;
}

/* Add a transparency effect for thumnbail images */
.demo {
	opacity: 0.6;
	border:1px solid black;
	width:100px;
	height:100px;

}

.active,
.demo:hover {
	opacity: 1;
	border:2px solid #53C3EE;
	box-shadow: rgb(83, 195, 238) 0px 0px 20px 20px inset;
}	


/* 11/26/24 - MR to fix courseleaf right size col width fixed*/	
.flush {width:100%}

/* 11/25/24 - MR mobile version logo spacing below fixed*/	
.header__logo.school {
	min-width:240px
}
/* .header__main {padding:0 10px}
*/
@media (min-width: 48em) {
	.header__logo.school {
		min-width:300px
	}
}

@media (min-width: 70em) {
	.header__logo.school {
		min-width:350px
	}

}
/* 11/25/24 - MR hero text width control for better line break of first line*/	
@media (min-width: 70em) {
	.hundred{width:100%;}
	.ninety{width:90%;margin:0 auto}
	.eighty{width:80%;margin:0 auto}
	.seventy{width:70%;margin:0 auto}
}

/* 11/21/24 - MR podcast component up spacing below fixed*/		
.component-podcast-buzzsprout-episode {
	padding:0 0 .75rem;
	margin-bottom:1rem;
	border-bottom:1px solid #999;
}
.component-podcast-buzzsprout-episode .bodcopy {
	padding:0 1rem
}
.component-podcast-buzzsprout-episode iframe {
	aspect-ratio: unset;
	min-height:200px;
}	
/* 11/21/24 - MR c/s header main nav Tightened up spacing between  */
@media (min-width: 70em) {
	.header.header__colleges .header__nav a {padding:.5rem .25rem}
}
/* 11/21/24 - MR header logo name controls for left logo - check for existing styles when committing to main css*/
.logo-wrap {
	width: 100%;
	border:1px solid #cdcdcd;
	transition: 0.4s;
	padding:10px;padding:0;
}
.logo {
	height: 0;
	position: relative;
	padding-top: 81.75%;
	padding-top: 25%;
	> svg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}
.on {
	font-family:brandon-grotesque,sans-serif;
	text-transform:uppercase;			
	font-weight:700;
}				
.slu.on {
	font-size:1.25rem;
	letter-spacing: 3px;
}
.dash.on {
	font-weight:normal;
	font-size:3rem;
}				
.school.on {
	font-weight:700;
	font-size:.75rem;
	letter-spacing: 2px;
}
text {border:1px solid red;}

.sl.on {
	font-size:1.3rem;
	letter-spacing: 3.5px;
	font-weight:600;				
}
.univ.on {
	font-size:1.1rem;
	letter-spacing: 3px;
	font-weight:500;
}				
.tm.on {
	font-weight:500;
	font-size:.3rem;
}	

/* 11/21/24 - MR button spacing for groups of buttons*/
.button {margin:.25rem;}
h2#hero1 {color:#53c3ee}

/* 11/20/24 - adjusts old stat numbers size to allow 6 digit numbers - padding was not enough SF*/
/* Should not modify new */
.stat:not(.green):not(.light-blue):not(.orange) .stat__number {
	font-size: 3rem;
}

/* 11/19/24 - removes spacing after c/s landing hero - stupid Omni CMS p tag MR */
.Swoop + p {margin:0;}
/* 11/21/24 - removes spacing after SLU.edu homw hero - stupid Omni CMS p tag MR */
.Splash__content + p {margin:0;}

/* 11/18/24 - intended to correct newsfeed size of img, but keep proper card size for img MR */
ul.feed img
{
	width: 30%;
	height: auto;
}

/* 11/14/24 - sidebar class added for universal left sidebar MR/SF */
/* doesn't affect right sidebar on school landing page */

#filters .sidebar{
	padding:2rem;
	width:100%;
}

@media (min-width: 64em) {
	#filters .sidebar {
		width:calc(33.333% - 2rem);
		width:100%;
		float:left;
		clear:left;
		padding:0

	}
}
@media (min-width: 72em) {
	#filters .sidebar {
		width:calc(33.333% - 3rem);
		width:100%;
		padding:0
	}
}
@media (min-width: 80em) {
	#filters .sidebar {
		width:calc(33.333% - 4rem);
		width:100%;
		padding:0

	}
}