@charset "utf-8";

/* ---- GLOBAL VALUES ---- */
:root {
  --main-blue-color: #005ca9;
  --main-gray-color: #eaeaea;
  --dark-gray-color: #afafaf;
  --black-text-over-gray: #454545;
  --btn-gray-color: #929292;
  --section-one-link-color: #005ca9;
  --nav-normal: #c2c2c2;
  --nav-hover: #0084f2;
}
/* ^^^^ GLOBAL VALUES ^^^^ */



/* ---- GLOBAL SETTING ---- */
* {
	font-family: Arial, Helvetica, sans-serif;
}

html {
	background-color: white;
}

body {
  	font-size: 16px;
  	margin: 0 auto;
	max-width: 1400px;
	background-color:white;
	padding: 0 !important;
}

/* adds class when popup gets open and delete when popup closes */
body.magnificpopupnoscroll{
  overflow-y: hidden !important;
}


h1, h2 {
	font-family: 'Titillium Web', sans-serif;
}
/* ^^^^ GLOBAL SETTING ^^^^ */



/* ---- table ---- */

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

thead,
tbody {
  display: block;
}

.tableParent {
	overflow: auto;
	width:100%;
	height:auto;
}
/* ^^^^ table ^^^^ */



/* ---- top section ---- */
#top-section {
	background-color: var(--main-gray-color);
}
/* ^^^^ top section ^^^^ */



/* ---- CUSTOM BLUE BTN ---- */
.btn-blue {
  color: #fff;
  background-color: var(--main-blue-color);
  border-color: #003166
}

.btn-blue:hover {
  /* width: 100%; */
  /* text-decoration: none; */
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc
}

.btn-blue.focus,
.btn-blue:focus {
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc;
  box-shadow: 0 0 0 .2rem rgba(38, 143, 255, .5)
}

.btn-blue.disabled,
.btn-blue:disabled {
  color: #fff;
  background-color: var(--main-blue-color);
  border-color: #003166
}

.btn-blue:not(:disabled):not(.disabled).active,
.btn-blue:not(:disabled):not(.disabled):active,
.show > .btn-blue.dropdown-toggle {
  color: #fff;
  background-color: #0062cc;
  border-color: #005cbf
}

.btn-blue:not(:disabled):not(.disabled).active:focus,
.btn-blue:not(:disabled):not(.disabled):active:focus,
.show > .btn-blue.dropdown-toggle:focus {
  box-shadow: 0 0 0 .2rem rgba(38, 143, 255, .5)
}

/* ^^^^ CUSTOM BLUE BTN  ^^^^ */



/* ---- ACCORDIONS ---- */
.card-header {
  background-color: var(--main-gray-color);
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  border: none;
}

.accordion-title {
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--black-text-over-gray);
    margin: 0;
}

#accordionTopThings {
	margin-top:10%;
	padding:15px 10px 10px 10px;
}

.accordion h3 {
    font-weight: 600;
    font-size: 1.3rem;
    color: #005ca9;
}

.accordion li {
    font-size: 20px !important; 
}

.accordion .card{
	border: none;
}

.accordion .card-body {
	padding-left: 10px;
}

.accordion hr {
	border-top: 2px solid black !important;
}

.accordion-sub-title {
	color: #005ca9;
	margin-bottom:5px;
}
/* ^^^^ ACCORDIONS  ^^^^ */



/* ---- OPPORTUNITY SECTION ---- */
.opportunity-card {
	position: relative;
}

.opportunity-card img {
	width: 100%;
}

.opportunity-card-content {
	position: absolute;
	width:50%;
	left: 22px;
}

.opportunity-card-content {
	top: 60px;
}

.special-opportunity {
	top:10px;
}

.opportunity-card-info {
	position: absolute;
	z-index: 10;
	width:54%;
	top: 10px;
	right: 10px;
}

.opportunity-card-info a:hover {
	transform: scale(1.2);
	filter: brightness(130%);
}

@media (hover: hover) {
	.footer-links-social img:hover {
		transform: scale(1.2);
		filter: brightness(120%);
	}
}

.opportunity-card-info a{
	float: right;
}

.opportunity-card-info img {
	height:50px;
	width:50px;
	border-radius: 50%;
}

.opportunity-card h2 {
	margin:0;
	font-size:240%;
	font-weight:bolder;
	color: var(--main-blue-color);
	
}

h2 a {
  color: var(--main-blue-color) !important;
  text-decoration: none;
  background-color: transparent;
  font-weight: bolder;
  font-family: 'Titillium Web', sans-serif !important;
}

.tile-title {
	position:absolute;
	top:10px;
	width:90%;
	left:22px;
}


.opportunity-card-content p {
	font-size:130%;
	line-height: 25px;
}

.apply-now-link {
	font-size:116%;
	padding: 6px 11px;
	position:absolute;

}

.apply-now-link-popup {
	font-size:130%;
	padding: 5px 10px;
	margin: 0 auto;
	display:block;
	width:180px;
}

.left-card {
	padding:0px;
}

.right-card {
	padding:0px;
}

.bottom-card {
	padding-bottom: 0px !important;
}
/* ^^^^ Opportunity SECTION ^^^^ */



/* ---- MORE OPPORTUNITIES SECTION ---- */
#more-opportunities-section {
	background-color: var(--main-gray-color);
	
}
#more-opportunities-section a {
	color: var(--dar-gray-color) !important;
}

.more-opportunites-item {
	margin:20px 50px;
	transition: transform .2s ease-in-out;
}

@media (hover: hover) {
	.more-opportunites-item:hover {
		transform: scale(1.1);
	}
}

.more-opportunites-item img {
	width:80%;
	margin: 0 auto;
	display:block;

}

.more-opportunites-item p {
	margin-top:20px;
	font-size: 130%;
	text-align: center;
	line-height: 25px;
}
/* ^^^^ MORE OPPORTUNITIES SECTION ^^^^ */



/* ---- section title ---- */
.section-title {
	background-color: var(--main-blue-color);
}

.section-title h2 {
	color: white;
	font-size:180%;
	font-weight:bold;
	padding:15px;
	margin:0px;
}
/* ^^^^ section title ^^^^ */



/* ---- TOP THINGS TO KNOW section formatting ---- */
/* .carousel-item {
  height: 350px;
}

.carousel-item span {
  width: 10px;
  height: 10px;
  border-radius: 100%;
} */

.carousel-caption h5 {
	margin: auto;
	font-size:130%;
}

.carousel-caption p {
	margin-bottom:0px;
}

.carousel-caption .btn {
	margin-bottom:3px;
	margin-top:4px;
	margin-right:50px;
	z-index: 20;
}

.carousel-caption {
	padding-bottom: 15px;
	padding-top:5px;
	left:0;
	bottom:0;
	background-color:#000000b0;
	width:100%;
}

.carousel-control-next-icon, .carousel-control-prev-icon {
	width: 50px;
	height: 50px;
	
}
.carousel-control-next, .carousel-control-prev {
	z-index: 11;
	opacity: 0.6;
}

#top-things-carousel {
  padding: 0;
}

#top-things-carousel #video-container {
  width: 100%;
  height: auto;
  object-fit: cover;
  overflow: hidden;
  position:relative;
}

#top-things-carousel #video-container video {
  width: 100%;
  height: auto;
  object-fit: cover;
  overflow: hidden;
	display: block;
}

#top-things-questions {
	position:relative;
  padding: 3em 3.5em;
}

#top-things-questions h4 {
  margin-bottom: .7em;
   color: black;
}

#top-things-questions .btn {
  padding: 0;
  margin-bottom: .4em;
  color: black;
  border: none;
  background-color: transparent;
  text-align: left;
}

#top-things-questions hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid var(--btn-gray-color);
  margin: .6em 0;
  padding: 0;
}

#top-things-questions .card-body {

  color: black;
  width: 90%;
}

.card-header {
	padding: 5px 0 0 0;
	margin: 0;
}

.faq-arrow {
	cursor: pointer;
  display: inline-block;
  line-height: 15px;
  width: auto;
  height: auto;
  text-align: center;
  position: absolute;
  top: -11px;
  right: 20px;
  float: right;
  font-size: 4.5em;
  color: var(--btn-gray-color);
  text-shadow: -1px 0 #ffffff, 0 1px #ffffff, 1px 0 #ffffff, 0 -1px #ffffff;
  -webkit-transition: all .3s linear;
  -moz-transition: all .3s linear;
  -ms-transition: all .3s linear;
  -o-transition: all .3s linear;
  transition: all .3s linear;
}

#things-to-know-section .btn[data-bs-toggle="collapse"] + .faq-arrow,
#faq-section .btn[data-bs-toggle="collapse"] + .faq-arrow,
#mentor-section .btn[data-bs-toggle="collapse"] + .faq-arrow{
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  opacity: 1;
}

#things-to-know-section .btn[data-bs-toggle="collapse"].collapsed + .faq-arrow,
#faq-section .btn[data-bs-toggle="collapse"].collapsed + .faq-arrow,
#mentor-section .btn[data-bs-toggle="collapse"].collapsed + .faq-arrow{
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  opacity: .7;
}


/* same styling for different sections */
#things-to-know-section, #faq-section, #mentor-section {
	background-color: var(--main-gray-color);
}

#faq-section, #mentor-section {
	padding: 15px 10px 10px 10px;
}

/* ^^^^ TOP THIINGS TO KNOW section formatting ^^^^  */



/* ---- MAP SECTION ---- */
#map-section {
	background-color: var(--main-gray-color);
}

#map-content {
	position: relative;
}

.point { /* global control of all map-dot objects */
  display: block;
  position: absolute; /* place manually over map */
  width: 4.5%; /* set size for the map dot objects */
  height: auto;
  transform: translate(-50%, -50%); /* ensure we position based on center */
}

/* per map-dot positioning over US map */
.p1 { top: 38%; left: 4%; } /* AMES Research Center */
.p2 { top: 52%; left: 6%; } /* Vandenberg AFB */
.p3 { top: 56%; left: 9.5%; } /* Jet Propulsion Laboratory */
.p4 { top: 55%; left: 12.5%; } /* Armstrong Flight Research Center */
.p5 { top: 67%; left: 30%; } /* White Sands Test Facility */
.p6 { top: 81.5%; left: 52%; } /* Johnson Space Center */
.p7 { top: 77%; left: 61%; } /* Michoud Assembly Facility */
.p8 { top: 75%; left: 64%; z-index: 1;} /* Stennis Space Center */
.p9 { top: 60.5%; left: 69%; } /* Marshall Space Flight Center */
.p10 { top: 81%; left: 81.8%; } /* Kennedy Space Center */
.p11 { top: 44.5%; left: 77%; } /* Software Independent Verification and Validation Facility */
.p12 { top: 47.5%; left: 86%; z-index: 1;} /* Langley Research Center */
.p13 { top: 42%; left: 87%; } /* Wallops Flight Facility */ 
.p14 { top: 41%; left: 83.75%; z-index: 1;} /* NASA Headquarters */  
.p15 { top: 37%; left: 85%; } /* Goddard Space Flight Center */  
.p16 { top: 30%; left: 88.5%; } /* Goddard Institute for Space Studies */
.p17 { top: 33.5%; left: 75.5%; } /* Glenn Research Center */
.p18 { top: 33%; left: 72.5%; } /* Glenn Research Center Plum Brook Station */ 
.p19 { top: 75%; left: 65.5%; } /* NASA Shared Services Center */

.map-popup {
  background-color: #005ca9;
  color: white;
  padding: 20px 30px;
  text-align: left;
  max-width:  28.75em;
  margin: 0 auto; /* center horizontally */
  position: relative;
}

.map-title h3 {
  text-transform: uppercase;
  font-weight: 900;
  font-size: 2.3rem;
  color: #005ca9;
  line-height: 1em;
  letter-spacing: -1px;
}

.to-know-title {
	font-size: 150%;
}
 
.map-box {
  background-color: #ffffff;
  height: 100%;
  border-radius: 1em;
  border: 1px solid var(--dark-gray-color);
  font-size: 1.15rem;
  line-height: 1.4em;
}

.location-title-box {
  background-color: #005ca9;
  height: 5.5em;
}

.location-title-box {
  background-color: #005ca9;
  min-height: 5.5em;
  height: 5.5em; /* set for IE browser */
  display: flex;
  justify-content: center; /* align horizontal */
  align-items: center; /* align vertical */
}

.location-title-box h2 {
  color: #ffffff;
  line-height: 2.7em;
  font-weight: 600;
}
/* ^^^^ MAP SECTION ^^^^ */



/* ---- VIDEO SECTION ---- */
.video-thumbnail 
{
   width: 100%;
   height: auto;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
}
.video-caption {
  width: 100%;
  height: 60px;
  background-color: #005ca9;
  color: white;
  line-height: 60px;
}
/* ^^^^ VIDEO SECTION ^^^^ */


/* ---- YOUTUBE ---- */  
.mfp-close:hover {
  color: white;
  border-color: white;
}

.mfp-fade.mfp-bg {
	opacity: 0;
	-webkit-transition: all 0.15s ease-out; 
	-moz-transition: all 0.15s ease-out; 
	transition: all 0.15s ease-out;
}

.mfp-fade.mfp-bg.mfp-ready {
	opacity: 0.8;
}

.mfp-fade.mfp-bg.mfp-removing {
	opacity: 0;
}

.mfp-fade.mfp-wrap .mfp-content {
	opacity: 0;
	-webkit-transition: all 0.15s ease-out; 
	-moz-transition: all 0.15s ease-out; 
	transition: all 0.15s ease-out;
}

.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
	opacity: 1;
}

.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
	opacity: 0;
}

.my-mfp-zoom-in .zoom-anim-dialog {
  opacity: 0;

  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;

  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -o-transform: scale(0.8);
  transform: scale(0.8);
}

.my-mfp-zoom-in.mfp-ready .zoom-anim-dialog {
  opacity: 1;

  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

.my-mfp-zoom-in.mfp-removing .zoom-anim-dialog {
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -o-transform: scale(0.8);
  transform: scale(0.8);

  opacity: 0;
}

.my-mfp-zoom-in.mfp-bg {
  opacity: 0;
  -webkit-transition: opacity 0.2s ease-out;
  -moz-transition: opacity 0.2s ease-out;
  -o-transition: opacity 0.2s ease-out;
  transition: opacity 0.2s ease-out;
}

/* animate in */
.my-mfp-zoom-in.mfp-ready.mfp-bg {
  opacity: 0.8;
}

/* animate out */
.my-mfp-zoom-in.mfp-removing.mfp-bg {
  opacity: 0;
}

.play-btn {
  position: absolute;
  max-width: 700px;
  width: 80px; /* try to match to actual image size */
  height: 80px;
  left: 50%;
  top: calc(50% - 40px);
  transform: translate(-50%, -50%);
  line-height: 1; /* needed if using Bootstrap */
  text-align: center;
  transition: all .2s ease;
  opacity: .8;
}

.play-btn:hover,
.play-btn:focus {
  opacity: 1;
  cursor: pointer;
}
.play:hover{
  cursor: pointer;
}

.play-btn::after {
  display: inline-block;
  /* positioning tweaks */
  padding-top: 20px;
  padding-left: 10px;
}
/* ^^^^ YOUTUBE ^^^^ */  



/* ---- MEDIA SECTION ---- */
#media-section {
	padding:15px 0px;
	background-color: var(--main-gray-color);
}

#media-section h1 {
  font-weight: 700;
  font-size: 2.19rem;
  color: #005ca9;
}

#media-section p {
  max-width: 900px;
  margin-top: 5px;
  font-size: 0.94rem;
  color: #4a4a4a;
  line-height: 1.3rem;
}
/* ^^^^ MEDIA SECTION ^^^^ */



/* ---- FOOTER formatting ---- */
#stem-logo {
	height:110px;
}
#stem-logo img {
	height:100%;
}

footer {
	margin-top:10px;
}

footer .listings{
  display: flex;
  align-items: center;
  height: 100%;
}

footer span {
  font-size: .95em;
}

footer .edit-details{
  list-style: none;
  float: left;
  padding: 0;
  margin-left: .5em;
  margin-bottom: 0;
}

footer .edit-details li {
  font-size: .75em;
  line-height: 1.4em;
}

footer .nasa-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

#related-links {
	margin-top: auto;
	margin-bottom: auto;
}

footer .stem-logo img {
  width: 20em;
  height: auto;
}

 .footer-links, .footer-links-social {
  width: 100%;
  text-align: center;
  list-style: none;
  line-height: 1.3em;
}

 .footer-links li, .footer-links-social li {
  display: inline-block;
  padding-top: 0.1em;
  padding-left: 0.1em;
  padding-right: 0.3em;
  font-size: .8em;
}


 .footer-links-social img {
  	width:50px;
	height:50px;
	transition: all 200ms ease-in-out;
}

footer .footer-links li a{
  color: #005ca9;
}

footer .footer-links li:not(:last-of-type) {
  border-right: 1px solid #cccccc;
}
/* ^^^^ FOOTER formatting ^^^^ */



/* ---- NOTICES POPUP ---- */
#notices-popup {
  display:flex;
  justify-content: center;
  margin:2.2em auto;
  background-color: #b9572d;
  border-radius:10px;
  border: 3px solid #914625;
  font-weight: bold;
  max-width: 222px;
	transition: background-color 180ms ease-in-out;
 }

#notices-popup a {
  color: white !important;
}

#notices-popup:hover {
  background-color: var(--main-blue-color);
}
/* ^^^^ NOTICES POPUP ^^^^ */



/* ---- RESIZING ---- */

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

@media only screen and (max-width: 1250px) {
	#accordionTopThings {
		margin-top:8%;
	}	

	.opportunity-card-content {
		top:65px;
	}
}

@media only screen and (max-width:1199px) {
	#notices-popup {
  		margin: 0 auto 1.5em auto;
 	}
}

@media only screen and (max-width: 1120px) {
	#accordionTopThings {
		margin-top:6.5%;
	}	
	
	.opportunity-card h2 {
		font-size:220%;
	}
	
	.opportunity-card-content p {
		font-size:125%;
		line-height: 23px;
	}

	.opportunity-card-content {
		top:50px;
	}
	
	.more-opportunites-item {
		margin:20px 30px;
	}
}

@media only screen and (max-width: 991px) {
	#accordionTopThings {
		margin-top:0%;
	}	
	.opportunity-card h2 {
		font-size:300%;
	}
	
	.opportunity-card-content, .opportunity-card h2 {
		left: 18px;
	}

	.opportunity-card-content {
		top:75px;
	}
	
	.opportunity-card-content p {
		font-size:180%;
		line-height: 35px;
	}
	
	.featured-intern-img img {
	  padding: 10px 0px 10px 0px;
	}
	
	.apply-now-link {
		font-size:170%;
	}
	
	.more-opportunites-item {
		margin:20px 50px;
	}
}

@media only screen and (max-width: 840px) {
	.opportunity-card-content, .opportunity-card h2 {
		left: 22px;
	}
	
	.opportunity-card-content p {
		font-size:150%;
		line-height: 30px;
	}
}

@media only screen and (max-width: 640px) {
	.opportunity-card h2 {
		font-size:250%;
	}
	.opportunity-card-content, .opportunity-card h2 {
		left: 23px;
	}

	.opportunity-card-content {
		top:60px;
	}
	
	.opportunity-card-content p {
		font-size:140%;
		line-height: 28px;
	}

	.footer-links-social img {
		width:40px;
		height:40px;
	}	
}

@media only screen and (max-width: 580px) {
	.opportunity-card h2 {
		font-size:200%;
	}
	
	.opportunity-card h2, .opportunity-card-content {
		left: 25px;
	}

	.opportunity-card-content {
		top:50px;
	}
	
	.opportunity-card-content p {
		font-size:120%;
		line-height: 24px;
	}
	
	.apply-now-link {
		font-size:130%;

	}
	.map-title h3 {
		font-size: 150%;
	}
	
	.more-opportunites-item {
		margin:20px 70px;
	}
}

@media only screen and (max-width: 520px) {
	.opportunity-card-content h2 {
		font-size:170%;
	}

	.opportunity-card-content p {
		font-size:110%;
		line-height: 22px;
	}
	
	.apply-now-link {
		font-size:130%;

	}
}

@media only screen and (max-width: 470px) {
	.opportunity-card h2 {
		font-size:150%;
	}
	
	.opportunity-card h2, .opportunity-card-content {
		left: 15px;
	}

	.opportunity-card-content p {
		font-size:95%;
		line-height: 15px;
	}
	
	.apply-now-link {
		font-size:100%;
	}
	
	.opportunity-card-content {
		top: 40px;
	}
	
	.more-opportunites-item {
		margin:20px 50px;
	}
	.carousel-control-next-icon, .carousel-control-prev-icon {
		width: 35px;
		height: 35px;
	
	}
	#media-carousel .carousel-control-next-icon, #media-carousel .carousel-control-prev-icon {
    	width: 35px !important;
    	height: 35px !important;
	}
}

@media only screen and (max-width: 370px) {
	.opportunity-card h2 {
		font-size:130%;
	}
	
	.opportunity-card-content p {
		font-size:78%;
		line-height: 13px;
	}
	
	.apply-now-link {
		font-size:90%;
	}
	
	.map-title h3 {
		font-size: 100%;
	}
	
	.opportunity-card-content {
		top: 35px;
	}
	
	.more-opportunites-item {
		margin:20px 20px;
	}
}

@media only screen and (max-width: 322px) {
	.opportunity-card h2 {
		font-size:110%;
	}
	
	.opportunity-card-content p {
		font-size:75%;
		line-height: 13px;
	}

	.apply-now-link {
		font-size:55%;
	}
}
/* ^^^^ RESIZING ^^^^ */


/* ---- MEDIA SECTION ---- */
.overlay-container .indicator .fa-angle-right {
  line-height: 0.8em;
}

#media-carousel .fa-angle-left,
#media-carousel .fa-angle-right {
  color: black;
  font-size: 1.7rem;
  font-weight: 900;
}

#media-carousel .owl-prev:hover,
#media-carousel .owl-next:hover {
  opacity: 1;
  background-color: #00000000 !important;
  border: 0px solid white !important;
  outline: none !important;
}


.owl-dots .owl-dot.active span {
	background: var(--nav-hover) !important;
}

.owl-dots {
	margin-top:-15px !important;
	margin-bottom:-15px !important;
}

#media-carousel .owl-prev, .owl-next {
    width: 40px;
    height: 100px;
    position: absolute;
    top: 30%;
    display: block !important;
    border:0px solid white;
	opacity: 0.7;
	outline: none !important;
	transition: opacity .1s ease;
}

#media-carousel .owl-prev {
	margin-left: 30px;
}

#media-carousel .owl-next {
	right: 30px;
}

#media-carousel .carousel-control-next-icon, #media-carousel .carousel-control-prev-icon {
	width:50px;
	height:50px;
}

.owl-prev i, .owl-next i {transform : scale(1,6); color: #ccc;}

#media-carousel {
	padding:5px 0px 15px 0px;
  position: relative;
}

#media-carousel .card {
  border-radius:10px;
	overflow:hidden;
	border: 1px solid var(--dark-gray-color);
}

#media-carousel .img-wrapper, #new-carousel .img-wrapper{
  position: relative;
  width: auto;
  height: 100%;
}

#media-carousel .img-wrapper .play-btn {
  position: absolute;
  width: 55px;
  height: 55px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
  text-align: center;
  transition: all .2s ease;
  opacity: .75;
}

#media-carousel .img-wrapper .play-btn:hover,
#media-carousel .img-wrapper .play-btn:focus {
  opacity: 1;
  cursor: pointer;
}

#media-carousel .owl-item {
  padding: 0 0.4em;
  margin: 1em 0 !important;
  height: 100%;
}

#media-carousel .owl-item .card-img {
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  overflow: hidden;
}

#media-carousel .card-body {
	padding:0.7em;
	min-height: 5.2em;
	background-color: white;
}

#media-carousel .card-title {
	font-weight: 600;
	color: var(--black-text-over-gray);
	font-size: 120% !important;
	margin-top:0;
}

/* owl carousel items on edge of carousel are dimmed */
.item {
  opacity: 0.5;
  transition: 0.2s ease all;
}

/* owl carousel items that are actively visible are full opacity */
.active .item {
  opacity: 1;
}

.carousel-indicators span {
    width: 10px !important;
    height: 10px !important;
    margin: 5px 7px !important;
    background: #D6D6D6;
    display: block;
    -webkit-backface-visibility: visible;
    transition: opacity .2s ease;
    border-radius: 50% !important
}

.carousel-indicators span:hover {
    cursor:pointer;
}

.carousel-indicators {
    position: absolute;
    margin-bottom: -10px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 15;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    padding-left: 0;
    margin-right: 15%;
    margin-left: 15%;
    list-style: none;
}


.carousel-indicators .active {
    background: var(--nav-hover) !important;
    background-clip: padding-box !important;
    border-radius: 50% !important
}
/* change indicators to match other owl-carousel */


.owl-item {
  margin-bottom: 15px;
}

.disabled {
  visibility: hidden;
}
/* ^^^^ MEDIA SECTION ^^^^ */



/* ---- PODCAST POPUP ---- */
.white-popup {
  position: relative;
  background: #FFF;
  padding: 20px;
  width:auto;
  max-width: 600px;
  margin: 20px auto;
}

#player {
  position: relative;
  z-index: 2;
  max-width: 600px;
  width:100%;
  height: 150px;
  background-color: #fff;
  border-radius: 10px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin:0 0em;
}

#player img {
  position: absolute;
  left: 0px;
  top: 20px;
  border-radius: 10px;
}

#player .player-song {
  width: 100%;
  max-width:446px;
  height: 100%;
  margin-left: 112px;
}

#player .player-song .title {
  color: #333;
  font-weight: 500;
  font-size: 20px;
  margin-top: 6px;
  line-height:20px;
}

#player .player-song .artist {
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.5);
}

#player .player-song .timestamps {
  width: calc(100% - 15px);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  font-size: 10px;
  color: rgba(0, 0, 0, 0.4);
}

#player .player-song .actions {
  width: 100%;
  height: 30px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

#player .player-song .actions .next, #player .player-song .actions .prev {
  cursor: pointer;
}

#player .player-song .actions i {
  font-size: 32px;
  -webkit-transform: translateY(2px);
          transform: translateY(2px);
  color: #bbbbbb;
  -webkit-transition: .1s;
  transition: .1s;
}

#player .player-song .actions i:hover {
  color: #888888;
  -webkit-transition: .1s;
  transition: .1s;
}

progress[value] {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: calc(100% - 15px);
  height: 6px;
  border-radius: 50px;
  margin-top: 20px;
}

progress[value]::-webkit-progress-bar {
  background-color: #eee;
  border-radius: 50px;
}

progress[value]::-webkit-progress-value {
  border-radius: 50px;
  background-color: #333DDD;
}

.play-button {
  height: 16px;
  width: 16px;
  display: block;
  overflow: hidden;
  position: relative;
  margin: 0 10px;
}
.play-button:hover .left, .play-button:hover .right {
  background-color: #888888;
}

.left {
  height: 100%;
  float: left;
  background-color: #bbbbbb;
  width: 36%;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
  overflow: hidden;
}

.triangle-1 {
  -webkit-transform: translate(0, -100%);
  transform: translate(0, -100%);
}

.triangle-2 {
  -webkit-transform: translate(0, 100%);
  transform: translate(0, 100%);
}

.triangle-1,
.triangle-2 {
  position: absolute;
  top: 0;
  right: 0;
  background-color: transparent;
  width: 0;
  height: 0;
  border-right: 16px solid #fff;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  -webkit-transition: -webkit-transform 0.25s ease;
  transition: -webkit-transform 0.25s ease;
  transition: transform 0.25s ease;
  transition: transform 0.25s ease, -webkit-transform 0.25s ease;
}

.right {
  height: 100%;
  float: right;
  width: 36%;
  background-color: #bbbbbb;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

.paused .left {
  width: 50%;
}

.paused .right {
  width: 50%;
}

.paused .triangle-1 {
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}

.paused .triangle-2 {
  -webkit-transform: translate(0, 50%);
  transform: translate(0, 50%);
}

.mfp-close button {
	color:#212529;
}
/* ^^^^ PODCAST POPUP ^^^^ */



/* ---- HEADER ---- */
#navbarHeader {
  background-color: var(--main-gray-color);
  height: auto;
  padding-top: 2em;
  padding-bottom:2em;
}

.header-title {
  margin: 1em auto;
  overflow: hidden;
  height: auto;
}

.title-logo {
  text-align: center;
  margin-left: auto;
  width: 100%;
  padding: 0em .9em;
}

.title-logo a {
    width: 100%;
    height: auto;
}

.title-logo img {
    width: auto;
    height: 8em;
}

.header-title h2 {
	font-size:160%;
  text-align: center;
  color: var(--black-text-over-gray);
  font-weight: bold;
	margin-bottom:0px;
}

.header-title h1 {
  font-size:310%;
  text-align: center;
  color: var(--main-blue-color);
  font-weight: bold;
  margin-top:-3px;
  margin-bottom:-3px;
	line-height: 50px;
}

.header-title p {
  text-align: center;
  color: var(--black-text-over-gray);
	font-size:150%;
	line-height:25px;
	margin-top: 5px;
}
/* ^^^^ HEADER ^^^^ */



/* ---- PLAY VIDEO BTN ---- */
.pause-btn {
	bottom: 50px !important;
	right: 50px !important;
}

.play-video-btn {
  position: absolute;
  width: 55px;
  height: 55px;
  right: 50%;
  bottom: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
  text-align: center;
  transition: all .2s ease;
  opacity: .75;
}

.play-video-btn:hover,
.play-video-btn:focus {
  opacity: 1;
  cursor: pointer;
}

.play-video-btn:active {
  opacity: 1;
  cursor: pointer;
}


.play-video-btn {
position: absolute;
    width: 25px !important;
    height: 25px !important;
    z-index:1;
  transform: translate(-50%, -50%);
  line-height: 1;
  text-align: center;
  transition: all .2s ease;
  opacity: .6;
  display: none;
}
/* ^^^^ PLAY VIDEO BTN ^^^^ */



/* ---- LOADING ---- */
/* hide this after everything on page loads. Fills space for carousel until it loads */
/* in Carousel.js we use javascript to set the CSS style to hide this */
#loading-placeholder { 
  height: 24em;
  width: 100%;
  background-color: var(--main-gray-color);
  padding-top: 9.5em; /* invisible padding, kicks the loader icon down */
}

.loader {
  text-align: center;
  margin: 0 auto;
  border: 1em solid #ffffff;
  border-top: 1em solid var(--nav-hover);
  border-radius: 50%;
  width: 100px;
  height: 100px;
  animation: loader-spin 2s linear infinite;
}

@keyframes loader-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* ^^^^ LOADING ^^^^ */
	

/* ---- Bootstrap 5.2 override ---- */
a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
h2 a:hover {
  text-decoration: underline;
}
.modal-anchor {
  text-decoration: none !important;
}
.btn-link {
  text-decoration: none;
  --bs-btn-focus-shadow-rgb:none;
}
.btn-link:hover {
  text-decoration: underline;
  --bs-btn-focus-shadow-rgb:none;
}
.btn-notice:hover {
  color:white;
  border-width: 0;
}
.btn-notice:focus {
  color:white;
  border-width: 0;
}
.btn-notice {
  color: white;
  border-width: 0;
}
.btn-close span{
  visibility: hidden;
  border: 0;
  float: right;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: .5;
}
#faq-section .btn {
  color: black;
}
#mentor-section .btn {
  color: black;
}
.btn-close:focus {
  border: solid 1px black;
  box-shadow: unset;
  opacity: 1;
}
.carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}
.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
 }
 .ml-2, .mx-2 {
  margin-left: .5rem !important;
}
button {
  position: relative
}

/* ^^^^ Bootstrap 5.2 override ^^^^ */

.focus-border:focus {
  border: solid 1px !important;
}
a:focus>img {
  border: solid 1px;
}

/* ^^ Force border display for focused elements ^^ */