/* Events Box code for the transforming box thing */


			.events-container {
				display: flex;
				flex-wrap: wrap;
				margin-top: 1rem;
				justify-content: flex-start;
			}
			.event-box-subhead {
			    padding-top: 0;
				margin-top: -0.5rem;
				font-weight: bold;
				text-transform: uppercase;
				color: #007298;
			}
			.event-item {
				padding: 1rem;
				margin: 0 .5rem 1rem !important;
				background-color: white;
				text-align: left;
				width: calc(33.3333% - 1rem);
			}
			.event-item h3 {
				font-size: 1.2rem;
			}
			.event-item p {
				padding: 0 0.5rem;
				font-size: .9rem;
			}
			.event-item .date {
				font-weight: bold;
				padding: 0.5rem 0.5rem 0rem;
				font-size: 1rem;
			}
			.event-item .register-button {
				margin-top: 1.5rem;
			}
			
			@media screen and (max-width: 1200px) {
				.event-item {
					width: calc(50% - 1rem);
				}
			}
			@media screen and (max-width: 767px) {
				.event-item {
					width: 100%;
				}
			}

/* Two-Flex Style */
			
			.two-flex {
				display: flex;
				flex-wrap: wrap;
				padding:5px;
			}
			.two-flex p {
				width: 50%;
				line-height:1.2;
			}

			@media screen and (max-width: 991px) {
				.two-flex {
					margin: .5rem 0 0;
				}
				.two-flex p {
					width: 100%;
				}
			}
			
			
		

/* This is for headshot boxes, not actually containers, as seen on the Advising sites */
			
		.advHeadshot-container {
				display: flex;
				width: calc(100% + 1rem);
				flex-wrap: wrap;
				margin: 2rem 0 !important;
				margin-left: -.5rem !important;
				padding-left: 0 !important;
			}
			.advHeadshot-item {
				position: relative;
				width: calc(25% - 1rem);
				margin: .5rem;
				min-height: 100px;
				list-style: none;
				padding: 0 !important;
				box-shadow: 0.05rem 0.1rem 0.3rem rgb(0 0 0 / 10%);
	}


			.advHeadshot-item .title {
				background-color: #003E52;
				padding: .5rem;
				color: white;
				width: 100%;
				border-left: 0px solid #003E52;
				transition: border .3s;
				line-height: 1.2;
				font-size: 1.2rem;
			}
			.advHeadshot-item a:hover .title {
				border-left: 10px solid #007298;
			}

			@media screen and (max-width: 991px) {
				.advHeadshot-item {
					width: calc(50% - 1rem);
				}
			}	


			.head-bg {
				background-color: #007298 !important;
			}
			.cd-main-header {
				background-color: #007298 !important;
			}
			.btn {
				box-shadow: none;
			}
			.nav-item {
				display: flex;
				align-items: center;
			}

			.cd-logo {
				background-color: white;
				// bottom: -1rem;
				padding: .9rem;
				width: auto;
			}
			.btn-resources {
				background-color: #007298 !important;
			}

			header .cs-logo svg .cls-2 {
				fill: #646569;
			}
			header .cs-logo svg .cls-1 {
				fill: #007298;
			}

			.cs-logo svg #cs_lower path, .cs-logo svg #cs_lower rect, .cs-logo svg #cs_lower polygon, .cs-logo svg #cs_lower text {
				fill: #007298 !important;
			}
			
			.cs-logo svg #cs_upper path, .cs-logo svg #cs_upper rect, .cs-logo svg #cs_upper polygon, .cs-logo svg #cs_upper text {
				fill: #646569 !important;
			}

 .cd-main-header {
	
}

/* Mongoose chatbot - this bumps it up over the sitewide banner */

.botpress--button-container--f1ib9x {
    z-index: 300 !important;
}
			
/* Vertical Video code. The original is on /seb/cougar-connect.shtml */

	.verticalVideo {
		padding-bottom: 89%;
		position: relative;
		display: block;
		width: calc(50% - 1rem);
		float: right;
		margin-bottom: 15px;
		margin-left: 15px;
		}
	.verticalVideo iframe {
		position:absolute; 
		top:0; 
		left:0;
		}
		@media screen and (max-width: 767px) {
			.verticalVideo {
				width: 100%;
			}
		}