:root{
	--purple: #48256d;
	--dark-teal: #1c73ba;
	--teal: #00aeef;
	--gray: #ccc;
	--dark-purple:#2f0e51;
}

a{
	text-decoration: none;
	color: var(--teal);
}

a:hover{
	color: var(--purple);
}

.header{
	display: flex;
	flex-direction: column;
}

.top-bar{
	background: linear-gradient(to right, #00aeef, #48256d);
}

.bot-bar{
	height: 10px;
	background: linear-gradient(to right, #00aeef, #48256d);
}

.header-content{	
	position: relative;
}

.overlay{
	position: absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background-color: rgba(0,0,0,0.3);
}

#carouselHome .carousel-item{
	height:80vh;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

#carouselTestimonials .carousel-item{
}

.carousel-caption{
	bottom: auto;
	top:50%;
	transform: translateY(-50%);
}

.carousel-home h2{
	font-size: 48px;
	font-weight: bold;
}

.carousel-home p{
	font-size: 32px;
}

a.button{
	background-color: var(--teal);
	border-radius: 100px;
	padding:0.5rem 1.5rem;
	font-size: 18px;
	color: white;
	text-decoration: none;
	display: inline-block;
	margin-right: 15px;
}

a.button:hover{
	background-color: var(--purple);
}

a.button.small{
	font-size: 14px;
	padding:0.25em 0.75em;
}

a.button.purple-bg{
	background-color: var(--purple);
}

a.button.purple-bg:hover{
	background-color: var(--teal);
}

.nav-container{
	width:100%;
	position: absolute;
	top:0px;
	left:0px;
	z-index: 200;
}

div.nav-container ul{
	list-style-type: none;
	display: flex;
	flex-direction: row;
	justify-content: end;
	align-items: center;
	margin-top:25px;
}

div.nav-container ul li{
	margin-left:20px;
}

div.nav-container ul li a{
	color: white;
	font-size: 18px;
}

div.nav-container ul li a:hover{
	color: var(--teal);
}

.logo{
	position: absolute;
	padding:35px 30px;
	background-color: var(--purple);
	top:-10px;
	left:0px;
	z-index: 500;
}

.logo img{
	width:200px;
	height:auto;
}

.featured-box{
	height:350px;
	background-position: center center;
	background-size: cover;
	display: flex;
	flex-direction: column;
	border-radius: 25px;
	overflow: hidden;
	justify-content: center;
	align-items: center;
	position: relative;
	transition: 0.2s all linear;
}

.featured-box .featured-overlay{
	position: absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background-color: rgba(72, 37, 109, 0.47);
	transition: 0.2s all linear;
}

.featured-box:hover .featured-overlay{
	background-color: rgba(72, 37, 109, 0.85);
	transition: 0.2s all linear;
}

div.featured-title{
	z-index: 200;
}

div.featured-title a{	background-color: rgba(0,0,0,0.5);
	padding:0.3rem 1rem;
	border-radius: 40px;
	border:1px solid white;
	color: white !important;
	transition: 0.2s all linear;
	transform: scale(1.0);
}

div.featured-title:hover a{
	background-color: black;
	padding:0.6rem 2rem;
}

.connected{
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	position: relative;
	background-image: url('../images/dino_bg.jpg');
}

.connected-overlay{
	position: absolute;
	top:0px;
	left:0px;
	z-index: 0;
	height:100%;
	width:100%;
	background-color: rgba(72, 37, 109, 0.485);
}

.connected .container{
	position: relative;
	z-index: 1;
}

.logo-col{
	border-left: 1px solid white;
}

.secondary-header{
	display: flex;
	flex-direction: column;
	height: 450px;
	justify-content: center;
	align-items: center;
	color: white;
	position: relative;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.secondary-overlay{
	position: absolute;
	top: 0px;
	left: 0px;
	width:100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.3);
	z-index: 0;
}

.secondary-header h1{
	position: relative;
	z-index: 1;
	font-weight: bold;
}



p.breadcrumbs, p.breadcrumbs a{
	color: #888;
}

.purple-fade p.breadcrumbs, .purple-fade p.breadcrumbs a{
	color: black;
}

p.breadcrumbs{
	margin-bottom: 1.75rem;
}



.nav .nav-item button {
	background: linear-gradient(to right, #48256d, #1c73ba);
	width:100%;
	display: block;
	color: white !important;
	border-top-left-radius: 100px;
	border-bottom-left-radius: 100px;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
	text-transform: uppercase !important;
	text-align: left !important;
	margin-bottom: 12px;
	padding-right: 100px;
	font-size: 18px;
}

.nav .nav-item button.active {
	background: none;
	background-color: color(display-p3 0.906 0.906 0.91);
	color: var(--purple) !important;
}



ul.nav-pills li{
	width: 100%;
	text-transform: uppercase !important;
}

div#pills-tabContent{
	background-color: color(display-p3 0.906 0.906 0.91);
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
}

.quote-div{
	position: relative;
	padding-left: 200px;
	padding-top:30px;
	font-size: 24px;
	overflow: visible;
}

.quote-div img{
	position: absolute;
	left:0px;
	top:0px;
	width:170px;
	height:auto;
}

.purple-fade{
	background-image:url('../images/purple-fade.png');
	background-repeat: repeat-x;
	background-position: top center;
}

.img-gradient{
	width:100%;
	padding:8px;
	background: linear-gradient(to right top, #48256d, #00aeef);
	border-radius: 18px;
}

.img-gradient img{
	border-radius: 15px;
}

.image-corners{
	width:100%;
	height:100%;
	border-radius: 18px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.mission-vision{
	text-align: center;
}

.mv-col>div{
	display: flex;
	flex-direction: column;
	width:100%;
	height:100%;
	justify-content: center;
	align-items: center;
	padding:100px 0px;
}

.mv-col>div img{
	height: 200px;
	width:auto;
	margin-bottom:20px;
}

.mv-col>div a{
	font-size: 36px;
	font-weight: bold;
	color: white;
}

.mv-col>div:hover{
	background-color: var(--purple) !important;
}

.members{
	text-align: center;
}

.members img{
	height: 150px;
	width: auto;
}

.secondary-header.news-events-header{
	display: flex;
	flex-direction: column;
	height: auto;
	justify-content: center;
	align-items: center;
	color: white;
	position: relative;
	background: linear-gradient(45deg,rgba(72, 37, 109, 1) 0%, rgba(0, 174, 239, 1) 50%, rgba(72, 37, 109, 1) 100%);


}

.faux-bar{
	height:60px;
}

div.news-events div.nav-container ul li a:hover{
	color: var(--purple) !important;
}

.news-events-header h1{
	margin-top:150px;
	font-weight: 200 !important;
}

div.item-image{
	width:100%;
	aspect-ratio: 3/2;
	background-size: cover;
	background-position: center center;
	background-repeat: none;
	margin-bottom:15px;
	border-radius: 15px;
}

p.item-title,a.item-detail{
	color: white;
	text-transform: uppercase;
	text-align: center;
}

p.item-title{
	font-weight: bold;
	font-size: 24px;
	margin-bottom:0px;
}

a.item-detail{
	font-size: 14px;
	margin-bottom: 0px;
	width:100%;
	text-align: center;
	display: block;
}

div.item-col:hover a{
	text-decoration: underline;
}

span.breadcrumb_last{
	color: var(--purple);
	)
}

.text-overlay{
	opacity: 0;
	position: absolute;
	top:0px;
	left:0px;
	width:100%;
	height: 100%;
	background-color: var(--purple);
	color: white;
	font-size: 18px;
	padding: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: 0.2s linear all;
}

.text-overlay:hover{
	opacity: 1;
}

div.nav-links{
	display: none;
}


.flip-card {
  background-color: transparent;
  width: 100%;
  height: 500px;
  border: 0px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

.flip-card-front img{
	width:200px;
	height:auto;
}

.accordion-button:not(.collapsed){
	
	background-color: var(--purple) !important;
	color: white !important;
}

.accordion-button:not(.collapsed)::after {
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
}
 
a.hover-white:hover{
	color: white;
}
 
.sponsors img{
	height:120px;
	width:auto;
}
 
.mobile-nav{
	position: relative;
}
 
.mobile-nav .logo{
	position: absolute;
	padding:20px 20px;
	background-color: var(--purple);
	top:-10px;
	left:20px;
	z-index: 500;
	box-shadow: 0px 0px 5px black;
}
 
.mobile-nav .logo img{
	width:100px;
	height:auto;
}
 
.mobile-nav ul{
	list-style-type: none;
	margin:0 0 0 0;
	padding:0 0 0 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: 12px;
}

.mobile-nav ul li{
	list-style-type: none;
	padding:0 0 0 0;
	margin:0 0 0 0;
}

.mobile-nav ul li a{
	text-decoration: none;
	color: white;
	font-size: 24px;
	font-weight: 600;
}

.collapse:not(.show){
	display: block;
}

.accordion .collapse:not(.show){
	display: none;
}

@media (max-width: 991.98px) {
	
	.collapse:not(.show){
		display: none;
	}
	
	#carouselHome .carousel-item{
		height:60vh;
	}
	
	.carousel-home h2{
		font-size: 36px;
	}
	
	.carousel-home p{
		font-size: 24px;
	}
	
	.footer-bottom{
		text-align: center;
	}
	
	.footer-bottom .w-75{
		width:100% !important;
	}
	
	.footer-bottom .text-end{
		text-align: center !important;
	}
	
	.logo-col{
		border-left: 0px solid white;
		width:50% !important;
		margin-left:auto !important;
		margin-right: auto !important;
		padding-top:20px;
	}
	
	.featured-box{
		margin-bottom:20px !important;
	}
	
	.secondary-header{
		height:250px;
	}
	
	.nav .nav-item button {
		width:auto;
		text-align: center;
		display: inline-block;
		border-top-right-radius: 100px;
		border-bottom-right-radius: 100px;
		text-transform: uppercase !important;
		text-align: left !important;
		margin-bottom: 12px;
		margin-right:12px;
		padding-right: 25px;
		padding-left:25px;
	}
	
	
	
	
	ul.nav-pills li{
		width: auto;
		text-transform: uppercase !important;
	}
	
	div#pills-tabContent{
		border-top-right-radius: 0px;
		border-bottom-right-radius: 0px;
	}
	
.news-events-header h1{
		margin-top:50px;
		font-weight: 200 !important;
	}
	
	.image-corners{
		height:600px;

	}

}

@media (max-width: 767.98px) {
	

	#carouselHome .carousel-item{
		height:40vh;
	}
	
	.carousel-home h2{
		font-size: 24px;
	}
	
	.carousel-home p{
		font-size: 18px;
	}
	
	.carousel-home a.button{
		font-size: 14px;
		margin-top:15px !important;
	}
	
	.overlay{
		background-color: rgba(0,0,0,0.45);
	}
	
	.quote-div{
		position: relative;
		padding-left: 30px;
		padding-right:30px;
		padding-top:10px;
		font-size: 18px;
		overflow: visible;
	}
	
	.quote-div img{
		display: none;
		position: absolute;
		left:0px;
		top:0px;
		width:170px;
		height:auto;
	}
	
	.carousel-control-next, .carousel-control-prev{
		width:20px;
	}
	
	.flip-card {
	  background-color: transparent;
	  width: 100%;
	  height: auto;
	  border: 0px solid #f1f1f1;
	  perspective: 1000px; /* Remove this if you don't want the 3D effect */
	}
	
	/* This container is needed to position the front and back side */
	.flip-card-inner {
	  position: static;
	  width: 100%;
	  height: auto%;
	  text-align: center;
	  transition: transform 0.8s;
	  transform-style: preserve-3d;
	}
	
	/* Do an horizontal flip when you move the mouse over the flip box container */
	.flip-card:hover .flip-card-inner {
	  transform: rotateY(0);
	}
	
	/* Position the front and back side */
	.flip-card-front, .flip-card-back {
	  position: static;
	  width: 100%;
	  height: auto%;
	  -webkit-backface-visibility: hidden; /* Safari */
	  backface-visibility: hidden;
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	}
	
	/* Style the front side (fallback if image is missing) */
	.flip-card-front {
	  background-color: #bbb;
	  color: black;
	  padding:50px 0;
	}
	
	/* Style the back side */
	.flip-card-back {
	  background-color: dodgerblue;
	  color: white;
	  transform: rotateY(0deg);
	  padding:50px 0;
	}
	
	.flip-card-front img{
		width:200px;
		height:auto;
	}
	
	h2.fs-36{
		font-size: 24px;
	}
	
	.carousel-caption{
		right:10%;
		left:10%;
	}
	
}

time.updated{
	display: none;
}