:root {
	--ttuo-button-radius: 6px;
	--ttuo-button-padding: 0.5em 1em;
	--ttuo-color-red: #E90802;
	--ttuo-color-brightred: #E90802;
	--ttuo-color-lightred: #fcc;
	--ttuo-color-darkred: #900;
	--ttuo-color-darkerred: #600;
	--ttuo-color-black: #000;
	--ttuo-color-lightgray: #D3D9DD;
	--ttuo-color-gray: #72767a;
	--ttuo-color-darkgray: #333333;
	--ttuo-color-blue: #004197;
	--ttuo-color-lightblue: #D2E5FF;
	--ttuo-color-darkblue: #00224E;
	--ttuo-color-green: #00861F;
	--ttuo-color-brightgreen: #01F438;
	--ttuo-color-lightgreen: #C6FFD3;
	--ttuo-color-greenbg: #D6FFE0;
	--ttuo-color-darkgreen: #005E15;
	--ttuo-color-orange: #D5470F;
	--ttuo-color-lightorange: #FFDED0;
	--ttuo-color-darkorange: #A72F00;
	--ttuo-color-white: #fff;
}

._color-swatch {
	display: inline-block;
	width: 30px;
	height: 30px;
	background-color: #000;
	border-width: 1px;
	border-style: solid;
	border-color: transparent;
	border-radius: 3px;
	vertical-align: bottom;
}
._color-swatch.red {
	background-color: var(--ttuo-color-red);
}
._color-swatch.white {
	background-color: var(--ttuo-color-white);
	border-color: var(--ttuo-color-black);
}
._color-swatch.gray {
	background-color: var(--ttuo-color-gray);
}
._color-swatch.brightred {
	background-color: var(--ttuo-color-brightred);
}
._color-swatch.darkred {
	background-color: var(--ttuo-color-darkred);
}
._color-swatch.lightred {
	background-color: var(--ttuo-color-lightred);
}
._color-swatch.lightgray {
	background-color: var(--ttuo-color-lightgray);
}
._color-swatch.darkgray {
	background-color: var(--ttuo-color-darkgray);
}
._color-swatch.blue {
	background-color: var(--ttuo-color-blue);
}
._color-swatch.lightblue {
	background-color: var(--ttuo-color-lightblue);
}
._color-swatch.darkblue {
	background-color: var(--ttuo-color-darkblue);
}
._color-swatch.green {
	background-color: var(--ttuo-color-green);
}
._color-swatch.lightgreen {
	background-color: var(--ttuo-color-lightgreen);
}
._color-swatch.darkgreen {
	background-color: var(--ttuo-color-darkgreen);
}
._color-swatch.orange {
	background-color: var(--ttuo-color-orange);
}
._color-swatch.lightorange {
	background-color: var(--ttuo-color-darkorange);
}
._color-swatch.darkorange {
	background-color: var(--ttuo-color-darkorange);
}

/*** Text Styles ***/
.l-main-pagecontent {
	/*** Unordered List ***/
	/*** Description Details Element ***/
}
.l-main-pagecontent h1, .l-main-pagecontent h2, .l-main-pagecontent h3, .l-main-pagecontent h4, .l-main-pagecontent h5, .l-main-pagecontent h6 {
	font-family: var(--ttuo-fontFamily-default);
	color: var(--ttuo-color-black);
	text-transform: uppercase;
	letter-spacing: normal;
}
.l-main-pagecontent h1 {
	font-size: 4em;
	line-height: 0.95em;
}
.l-main-pagecontent h2 {
	font-size: 3em;
	line-height: 0.95em;
}
.l-main-pagecontent h3 {
	font-size: 2.5em;
	line-height: 0.95em;
}
.l-main-pagecontent h4 {
	font-size: 1.8em;
	line-height: 0.95em;
}
.l-main-pagecontent h5 {
	font-size: 1.4em;
	line-height: 0.95em;
}
.l-main-pagecontent h6 {
	font-size: 1em;
	line-height: 0.95em;
}
.l-main-pagecontent .alpha {
	font-size: 3em;
	line-height: 1.1em;
}
.l-main-pagecontent .beta {
	font-size: 2.5em;
	line-height: 1.2em;
}
.l-main-pagecontent .gamma {
	font-size: 1.8em;
	line-height: 1.2em;
}
.l-main-pagecontent .delta {
	font-size: 1.4em;
	line-height: 1.5em;
}
.l-main-pagecontent .epsilon {
	font-size: 1.2em;
	line-height: 1.5em;
}
.l-main-pagecontent .zeta {
	font-size: 1em;
	line-height: 0.95em;
	font-weight: normal;
	font-variant: normal;
}
.l-main-pagecontent a {
	line-height: 1.875rem;
}
.l-main-pagecontent p {
	font-family: var(--ttuo-fontFamily-default);
	line-height: 1.875rem;
	margin-top: 1rem;
}
.l-main-pagecontent small {
	font-size: 0.75em;
	line-height: 1rem;
}
.l-main-pagecontent p small {
	line-height: 0;
}
.l-main-pagecontent .small {
	font-size: 0.4em;
	line-height: 1em;
}
.l-main-pagecontent strong {
	font-weight: 700;
}
.l-main-pagecontent hgroup h1, .l-main-pagecontent hgroup h2, .l-main-pagecontent hgroup h3, .l-main-pagecontent hgroup h4, .l-main-pagecontent hgroup h5, .l-main-pagecontent hgroup h6 {
	margin-bottom: 0.1em;
	margin-top: 0;
}
.l-main-pagecontent hgroup p {
	margin-top: 0;
	margin-bottom: 0.5rem;
}
.l-main-pagecontent hgroup ~ ul {
	margin-top: 0;
}
.l-main-pagecontent a, .l-main-pagecontent p a {
	position: relative;
	color: var(--ttuo-color-brightred);
	box-shadow: none;
	border-bottom: 3px solid;
	z-index: 1;
}
.l-main-pagecontent a::before, .l-main-pagecontent p a::before {
	content: none;
}
.l-main-pagecontent a.external::before, .l-main-pagecontent a.pdf::before, .l-main-pagecontent a.email::before, .l-main-pagecontent p a.external::before, .l-main-pagecontent p a.pdf::before, .l-main-pagecontent p a.email::before {
	content: "";
	top: unset;
	bottom: -3px;
}
.l-main-pagecontent a.external::after, .l-main-pagecontent a.pdf::after, .l-main-pagecontent a.email::after, .l-main-pagecontent p a.external::after, .l-main-pagecontent p a.pdf::after, .l-main-pagecontent p a.email::after {
	content: "";
	background-color: #000;
	-webkit-transition: background-color 0.16s ease-out;
	-moz-transition: background-color 0.16s ease-out;
	transition: background-color 0.16s ease-out;
}
.l-main-pagecontent a.external::after, .l-main-pagecontent p a.external::after {
	-webkit-mask-image: url("/_ttu-template/2017/img/icons/svg/external.svg");
	mask-image: url("/_ttu-template/2017/img/icons/svg/external.svg");
}
.l-main-pagecontent a.pdf::after, .l-main-pagecontent p a.pdf::after {
	-webkit-mask-image: url("/_ttu-template/2017/img/icons/svg/external.svg");
	mask-image: url("/_ttu-template/2017/img/icons/svg/pdf.svg");
}
.l-main-pagecontent a.email::after, .l-main-pagecontent p a.email::after {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	mask-size: 100%;
	-webkit-mask-size: 100%;
	vertical-align: text-bottom;
	margin: 0px 4px 1px 3px;
	mask-image: url("/online/_ttuo-template/2022/icons/icon-email.svg");
	-webkit-mask-image: url("/online/_ttuo-template/2022/icons/icon-email.svg");
}
.l-main-pagecontent a:hover, .l-main-pagecontent p a:hover {
	color: var(--ttuo-color-white);
	background-color: var(--ttuo-color-brightred);
	border-color: var(--ttuo-color-brightred);
}
.l-main-pagecontent a:hover.external::before, .l-main-pagecontent a:hover.pdf::before, .l-main-pagecontent p a:hover.external::before, .l-main-pagecontent p a:hover.pdf::before {
	bottom: 0px;
}
.l-main-pagecontent a:hover.external::after, .l-main-pagecontent a:hover.pdf::after, .l-main-pagecontent a:hover.email::after, .l-main-pagecontent p a:hover.external::after, .l-main-pagecontent p a:hover.pdf::after, .l-main-pagecontent p a:hover.email::after {
	content: "";
	background-color: #fff;
}
.l-main-pagecontent a.active, .l-main-pagecontent p a.active {
	color: var(--ttuo-color-darkerred);
}
.l-main-pagecontent a.active::before, .l-main-pagecontent p a.active::before {
	background-color: var(--ttuo-color-darkerred);
}
.l-main-pagecontent a.active:hover, .l-main-pagecontent p a.active:hover {
	color: #fff;
}
.l-main-pagecontent a.active:hover::before, .l-main-pagecontent p a.active:hover::before {
	background-color: var(--ttuo-color-red);
}
.l-main-pagecontent p a:hover::before {
	height: calc(100% + 6px);
}
.l-main-pagecontent a.img-link, .l-main-pagecontent p a.img-link {
	box-shadow: none;
}
.l-main-pagecontent a.img-link::before, .l-main-pagecontent p a.img-link::before {
	content: none;
}
.l-main-pagecontent hr {
	display: block !important;
	left: 0%;
	width: 100%;
	height: 3px;
	background-color: transparent;
	border-bottom: 3px solid var(--ttuo-color-lightgray);
	border-top: 3px solid var(--ttuo-color-lightgray);
	padding-bottom: 3px;
}
.l-main-pagecontent hr::after {
	content: "";
	display: block;
	margin-top: 15px;
	width: 100%;
	height: 3px;
	background-color: var(--ttuo-color-lightgray);
}
.l-main-pagecontent hr.alternate {
	border: none;
}
.l-main-pagecontent hr.pattern {
	border: none;
	height: 70px;
	mask-image: url("/online/_ttuo-template/2022/images/tagline-pattern.svg");
	-webkit-mask-image: url("/online/_ttuo-template/2022/images/tagline-pattern.svg");
	mask-size: 100%;
	-webkit-mask-size: 380px;
	background-color: #000;
	width: 100%;
}
.l-main-pagecontent hr.pattern::after {
	content: none;
}
.l-main-pagecontent .verticalpattern {
	width: 80px;
	max-width: 80px;
	position: relative;
	overflow: hidden;
}
.l-main-pagecontent .verticalpattern::after {
	content: "";
	position: absolute;
	top: 0;
	width: 80px;
	mask-image: url("/online/_ttuo-template/2022/images/pattern-vertical.svg");
	-webkit-mask-image: url("/online/_ttuo-template/2022/images/pattern-vertical.svg");
	mask-size: 80px;
	-webkit-mask-size: 80px;
	z-index: 1;
	background-color: #fff;
	height: 100%;
}
.l-main-pagecontent .verticalpattern.right::after {
	right: 0;
}
.l-main-pagecontent hr.red {
	border-color: var(--ttuo-color-red);
}
.l-main-pagecontent hr.red::after, .l-main-pagecontent hr.red::before {
	background-color: var(--ttuo-color-red);
}
.l-main-pagecontent hr.darkred {
	border-color: var(--ttuo-color-darkred);
}
.l-main-pagecontent hr.darkred::after, .l-main-pagecontent hr.darkred::before {
	background-color: var(--ttuo-color-darkred);
}
.l-main-pagecontent hr.gray {
	border-color: var(--ttuo-color-gray);
}
.l-main-pagecontent hr.gray::after, .l-main-pagecontent hr.gray::before {
	background-color: var(--ttuo-color-gray);
}
.l-main-pagecontent hr.white {
	border-color: var(--ttuo-color-white);
}
.l-main-pagecontent hr.white::after, .l-main-pagecontent hr.white::before {
	background-color: var(--ttuo-color-white);
}
.l-main-pagecontent hr.pattern.red {
	background-color: var(--ttuo-color-red);
}
.l-main-pagecontent hr.pattern.darkred {
	background-color: var(--ttuo-color-darkred);
}
.l-main-pagecontent hr.pattern.gray {
	background-color: var(--ttuo-color-gray);
}
.l-main-pagecontent hr.pattern.white {
	background-color: var(--ttuo-color-white);
}
.l-main-pagecontent li {
	font-family: var(--ttuo-fontFamily-default);
	margin-bottom: 0.5rem;
}
.l-main-pagecontent ol li::marker {
	font-weight: bold;
}
.l-main-pagecontent dl {
	font-family: var(--ttuo-fontFamily-default);
}
.l-main-pagecontent dt {
	font-family: var(--ttuo-fontFamily-default);
	letter-spacing: 0px;
}
.l-main-pagecontent dd {
	font-style: normal;
	margin-left: 2.2em;
	margin-top: 0.2em;
	font-size: 0.9em;
	line-height: 1.4em;
}
.l-main-pagecontent dl.inline dt {
	display: inline-block;
}
.l-main-pagecontent dl.inline dd {
	display: inline-block;
	margin-left: 0;
	font-size: 1em;
}
.l-main-pagecontent dl dd p {
	margin-bottom: 0.5rem;
}
.l-main-pagecontent code {
	font-size: 0.85em;
	line-height: inherit;
	background: var(--ttuo-color-lightblue);
	border: 1px solid var(--ttuo-color-blue);
	color: var(--ttuo-color-darkblue);
	padding: 0.125em 0.25em;
	border-radius: 3px;
	font-family: font(code);
}
.l-main-pagecontent code.codeblock {
	display: inline-block;
	padding: 0em 1em;
}
@media screen and (max-width: 40em) {
	.l-main-pagecontent h1 {
		font-size: 2.8em;
	}
	.l-main-pagecontent h2 {
		font-size: 2.6em;
	}
	.l-main-pagecontent h3 {
		font-size: 2.3em;
	}
	.l-main-pagecontent .alpha {
		font-size: 2.8em;
	}
	.l-main-pagecontent .beta {
		font-size: 2.4em;
	}
	.l-main-pagecontent .gamma {
		font-size: 1.6em;
	}
	.l-main-pagecontent .delta {
		font-size: 1.3em;
	}
	.l-main-pagecontent .epsilon {
		font-size: 1.1em;
	}
	.l-main-pagecontent .zeta {
		font-size: 1em;
	}
	.l-main-pagecontent p, .l-main-pagecontent a {
		font-size: 1.1rem;
	}
	.l-main-pagecontent li {
		font-size: 1.1rem;
	}
}

.top {
	--offset: 50px;

	position: sticky;
	bottom: 40px;
	margin-right: 10px;
	margin-left: 20px;
	place-self: end;
	margin-top: calc(100vh + var(--offset));
	z-index: 100;

	/* visual styling */
	text-decoration: none;
	padding: 10px;
	color: #fff;
	background: #000;
	border-radius: 100px;
	white-space: nowrap;
}
* {
	box-sizing: border-box;
}

body {
	margin: 0;
}

#myBtn {
	display: none;
	position: fixed;
	bottom: 20px;
	right: 30px;
	z-index: 99;
	font-size: 18px;
	border: none;
	outline: none;
	background-color: red;
	color: white;
	cursor: pointer;
	padding: 15px;
	border-radius: 4px;
}

#myBtn:hover {
	background-color: #555;
}

.panel {
	padding: 0 18px;
	background-color: white;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease-out;
}


img {
	padding: 0;
	display: block;
	margin: 0 auto;
	max-height: 100%;
	max-width: 100%;
}

#grad1 {
	background-color: red; /* For browsers that do not support gradients */
	background-image: linear-gradient(to right, #800000, #E90802, #800000);
	margin-bottom: -44px;
}

/* Style the counter cards */
.card {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	padding: 0px;
	text-align: center;
	background-color: #000000;
	height: auto;
}

/* Responsive layout - makes the two cards stack on top of each other instead of next to each other */
@media screen and (max-width: 1330px) {
	.card {
		width: 100%;
		margin: 0;
		height: 950px;
	}
}

/* Responsive layout - makes the two cards stack on top of each other instead of next to each other */
@media screen and (max-width: 900px) {
	.card {
		width: 100%;
		margin: 0;
		height:auto;
	}
}


.imgzoom {
	transition: transform .2s;
	margin: 0 auto;
	width: 100%;


}

.imgzoom:hover {
	-ms-transform: scale(1.05); /* IE 9 */
	-webkit-transform: scale(1.05); /* Safari 3-8 */
	transform: scale(1.02); 
	width: 100%;
	margin: 0;
}

/* Responsive layout - makes the two cards stack on top of each other instead of next to each other */
@media screen and (max-width: 900px) {
	.imgzoom {
		width: 75%;
	}
}

/* Responsive layout - makes the two cards stack on top of each other instead of next to each other */
@media screen and (max-width: 900px) {
	.imgzoom:hover {
		width: 75%;
	}
}

.crd {
	color:#000000;
	background-size: cover;
	max-width: 35ch;
	border-radius: 1rem;
	overflow: hidden;

	transition: transform 500ms ease;
	display: block;
}

.crd:hover {
	transform: scale(1.05);
}

.crd-content {
	--padding: 1.5rem;
	padding: var(--padding);
	background: linear-gradient(
		hsl(0, 0%, 0% / 0),
		hsl(20, 0%, 0.3%) 20%,
		hsl(0, 0%, 0% / 1)
	);
	transform: translateY(65%);
	transition: transform 500ms ease;
	transition-delay: 500ms;
}

.crd-content > * {
	transform: translateY(0);
}

.crd:hover .crd-content {
	transform: translateY(0);
	transition-delay: 500ms;
}

.crd-content > *:not(.crd-title) {
	opacity: 0;
	transition: opacity 500ms linear;
}

.crd:hover .crd-content > *:not(.crd-title) {
	opacity: 1;
	transition-delay: 1000ms;
}

.crd-title {
	position: relative;
	width: 100%;
	bottom: 10px;
	text-align: center;
}

.crd-title::after {
	content:"";
	position: absolute;
	height: 4px;
	bottom: -2px;
	left: calc(var(--padding) * -1);
	width: calc(100% + var(--padding));
	background: var(--clr-accent-400);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 500ms ease;
}

.crd:hover .crd-title::after {
	transform: scaleX(1);
}

.crd-body {
	color: rgba(255, 255, 255, 100)
}

.crd:hover .crd-title::after {
	transform: scaleX(1)
}

.crdbutton {
	cursor: pointer;
	display: inline;
	text-decoration: none; 
	color: black;
	background-color: black;
	padding: 0.5em 1.25em;
	border-radius: .25em;
}

.crdbutton:hover,
.crdbutton-focus {
	background-color: #000000;
}

.ctnr1 {
	display: flex;
}

.ctnr1-card {
	height: 500px;
	margin: 50px;
	box-shadow: 5px 5px 20px black;
	overflow: hidden;
}

.ctnr1-img {
	height: 500px;
	width: 350px;
	border-radius: 3px;
}

.ctnr1-intro {
	height: 200px;
	width: 350px;
	padding: 6px;
	box-sizing: border-box;
	position: absolute;
	background: rgb(27, 27, 27, .5)
		color: white;
}

.ctnr1-card:hover {
	cursor: pointer;
}

.ctnr1-card:hover .ctnr1-intro {
	height: 220px;
	bottom: 240px;
}

.cntr2 {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 40px 30px;
}

.cntr2 .crd2 {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 300px;
	height: 120px;
	background: #000000;
	border-radius: 20px;
	box-shadow: 0 35px 50px rgba(0, 0, 0, 0.15);
	transition: 0.5s;
}

.cntr2 .crd2:hover {
	height: 550px;
}

.cntr2 .crd2 .imgBx {
	position: absolute;
	top: 20px;
	justify-content: center;
	align-items: center;
	height: 220px;
	background: #000000;
	border-radius: 12px;
	overflow: hidden;
	transition: 0.5s;
}
.cntr2 .crd:hover .imgBx {
	top: -100px;
	scale: 0.75;
	justify-content: center;
	align-items: center;
	box-shadow: 0 15px 45px rgba(0, 0, 0, 0.2);

}

.cntr2 .crd2 .imgBx img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	object-fit: cover;
}

.cntr2 .crd2 .cntent {
	position: absolute;
	top: -40px;
	width: 100%;
	padding: 0 30px;
	height: 140px;
	overflow: hidden;
	text-align: center;
	justify-content: center;
	align-items: center;
	transition: 0.5s;
}

.cntr2 .crd2:hover .cntent {
	top: -40px;
	height: 550px;
}

.ncontain {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 100px 50px;
	padding: 100px 50px;
}

.ncontain .card {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	width: 450px;
	height: 350px;
	background: #E90802;
	border-radius: 20px;
	box-shadow: 0 35px 80px rgba(0,0,0,0.15);
	transition: 0.5s;
}

.ncontain .card:hover {
	height: 530px;
}

.ncontain .card .imgBx {
	position: absolute;
	top: 15px;
	width: 420px;
	height: 320px;
	background: #E90802;
	border-radius: 12px;
	transition: 0.5s;
}

.ncontain .card:hover .imgBx {
	top: -100px;
	scale: 0.75;
	box-shadow: 0 15px 45px rgba(0,0,0,0.2);
}

.ncontain .card .imgBx img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ncontain .card .content {
	position: absolute;
	top: 162px;
	width: 100%;
	padding: 0 30px;
	height: 95px;
	overflow: hidden;
	text-align: center;
	transition: 0.5s;
	color: #000000;
}

.ncontain .card:hover .content {
	top: 130px;
	height: 470px;
	color: #000000;
}

/* Responsive layout - makes the two cards stack on top of each other instead of next to each other */
@media screen and (max-width: 900px) {
	.ncontain .card .imgBx  {
		width: 290px;
		margin: 0;
	}
}

/* Responsive layout - makes the two cards stack on top of each other instead of next to each other */
@media screen and (max-width: 900px) {
	.ncontain .card:hover {
		width: 100%;
		margin: 0;
		height: 650px;
	}
}

/* Responsive layout - makes the two cards stack on top of each other instead of next to each other */
@media screen and (max-width: 900px) {
	.ncontain .card:hover .content  {
		margin: 0;
		height: 1070px;
	}
}

.pimg1 {
	background-image: url(https://www.depts.ttu.edu/coe/testingfolder/redblack.jpg);
	min-height: 500px;
}

.pimg1, .pimg2, .pimg3 {
	position: relative;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.dropbtn {
	background-color: #E90802;
	color: #000000;
	padding: 16px;
	font-size: 16px;
	border: none;
	cursor: pointer;
	z-index: 1000;
	align-content: center;
}

.dropbtn:hover, .dropbtn:focus {
	background-color: #000000;
	z-index: 1000;
}

.dropdown {
	position: relative;
	display: inline-block;
	z-index: 1000;
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: #000000;
	min-width: 160px;
	overflow: auto;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1000;
}

.dropdown-content a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	z-index: 1000;
}

.dropdown a:hover {background-color: #000000;}

.show {display: block;}

.deptcontainer {
	position: relative;
	width: 100%;
}

.deptimage {
	opacity: 1;
	display: block;
	width: 100%;
	transition: .5s ease;
	backface-visibility: hidden;
}

.deptmiddle {
	transition: .5s ease;
	opacity: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	text-align: center;
}

.deptcontainer:hover .deptimage {
	opacity: 0.6;
}

.deptcontainer:hover .deptmiddle {
	opacity: 1;
}

.deopttext {
	background-color: #E90802;
	font-size: 16px;
}

@media screen and (max-width: 500px) {
	.deopttext  {
		background-color: #E90802;
		font-size: 12px;
	}
}

/* Style the counter cards */
.cardima {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	padding: 46px 16px;
	text-align: center;
	background-color: #000000;
	border-radius: 120px;
	color: black;
}

/* Responsive layout - makes the two cards stack on top of each other instead of next to each other */
@media screen and (max-width: 900px) {
	.cardima {
		width: 100%;
		margin: 0;
	}
}

.imgzoom {
	transition: transform .4s;
	margin: 0 auto;
	width: 100%;

}

.imgzoom:hover {
	-ms-transform: scale(1.01); /* IE 9 */
	-webkit-transform: scale(1.01); /* Safari 3-8 */ 
	transform: scale(1.01); 
	width: 100%;
	margin: 0;
}

.bottom-left {
	position: absolute;
	bottom: 8px;
	left: 16px;
}

.hero-image {
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://www.depts.ttu.edu/coe/images/ME.jpg");
	height: 700px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}

@media screen and (max-width: 900px) {
	.hero-image {
		height: 800px;
		margin: 0;
	}
}

@media screen and (max-width: 500px) {
	.hero-image {
		height: 300px;
		margin: 0;
	}
}

.hero-text {
	text-align: center;
	position: absolute;
	top: 50%;
	left: 30%;
	transform: translate(-50%, -50%);
	color: white;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

ol {
	list-style: none;
}


.containerfilter {
	max-width: 1200px;
	margin: 0 auto;
}

.h12 {
	text-align: center;
	margin-bottom: 2rem;
}

.h12 a {
	transition: all 0.1s;
}

.h12 a:hover {
	background: var(--green);
	color: var(--white);
}

input[type="radio"] {
	position: absolute;
	left: -9999px;
}


/* FILTERS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.filters {
	text-align: center;
	margin-bottom: 2rem;
}

.filters * {
	display: inline-block;
}

.filters label {
	padding: 0.5rem 1rem;
	margin-bottom: 0.5rem;
	border-radius: 2rem;
	min-width: 50px;
	line-height: normal;
	cursor: pointer;
	transition: all 0.1s;
	background-color: #000000;
	color: #ffffff;
}

.filters label:hover {
	background-color: #E90802;
	color:#ffffff
}


/* FILTERED ELEMENTS (POSTS)
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.posts {
	display: grid;
	grid-gap: 1.5rem;
	grid-template-columns: repeat(4, 1fr);
}

.posts .post-title:hover {
	text-decoration: underline;
}

.posts .post-categories {
	margin-bottom: 0.75rem;
}

.posts .post-categories * {
	display: inline-block;
}

.posts .post-categories li {
	margin-bottom: 0.2rem;
}

.posts .post-categories a {
	border-radius: 1rem;
	border: 1px solid;
	line-height: normal;
	transition: all 0.1s;
}

.posts .post-categories a:hover {
	background: var(--red);
	color: var(--white);
}


/* FILTERING RULES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
[value="All"]:checked ~ .filters [for="All"],
[value="Che"]:checked ~ .filters [for="Che"],
[value="CECE"]:checked ~ .filters [for="CECE"],
[value="CS"]:checked ~ .filters [for="CS"],
[value="Inter"]:checked ~ .filters [for="Inter"],
[value="IMSE"]:checked ~ .filters [for="IMSE"],
[value="ME"]:checked ~ .filters [for="ME"],
[value="PE"]:checked ~ .filters [for="PE"] {
	background-color: #E90802;
	color: white;
}

[value="All"]:checked ~ .posts [data-category] {
	display: block;
}

[value="Che"]:checked ~ .posts .post:not([data-category~="Che"]),
[value="CECE"]:checked ~ .posts .post:not([data-category~="CECE"]),
[value="CS"]:checked ~ .posts .post:not([data-category~="CS"]),
[value="Inter"]:checked ~ .posts .post:not([data-category~="Inter"]),
[value="IMSE"]:checked ~ .posts .post:not([data-category~="IMSE"]),
[value="ME"]:checked ~ .posts .post:not([data-category~="ME"]),
[value="PE"]:checked ~ .posts .post:not([data-category~="PE"]) {
	display: none;
}


/* MQ
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 900px) {
	.posts {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media screen and (max-width: 650px) {
	html {
		font-size: 14px;
	}

	.posts {
		grid-template-columns: repeat(2, 1fr);
	}
}

/*********************/
/*** Button Styles ***/
/*********************/
.l-main-pagecontent .btn, .l-main-pagecontent a.btn, .l-main-pagecontent p a.btn {
	display: inline-block;
	font-family: var(--ttuo-fontFamily-default);
	font-weight: 500;
	box-shadow: none;
	color: var(--ttuo-color-white);
	border: 3px solid;
	border-color: var(--ttuo-color-red);
	border-radius: 2px;
	background-color: var(--ttuo-color-red);
	text-transform: uppercase;
	margin-bottom: 0.5rem;
	transition: all 0.3s ease;
	cursor: pointer;
	justify-content: center;
}
.l-main-pagecontent .btn::before, .l-main-pagecontent a.btn::before, .l-main-pagecontent p a.btn::before {
	content: none;
}
.l-main-pagecontent .btn.small, .l-main-pagecontent a.btn.small, .l-main-pagecontent p a.btn.small {
	font-size: 0.9rem;
	font-weight: 400;
}
.l-main-pagecontent .btn .icon, .l-main-pagecontent a.btn .icon, .l-main-pagecontent p a.btn .icon {
	background-color: var(--ttuo-color-white);
	transition: background-color 0.3s ease;
}
.l-main-pagecontent .btn.hollow, .l-main-pagecontent a.btn.hollow, .l-main-pagecontent p a.btn.hollow {
	background-color: transparent;
	border-color: var(--ttuo-color-red);
	color: var(--ttuo-color-red);
}
.l-main-pagecontent .btn.hollow .icon, .l-main-pagecontent a.btn.hollow .icon, .l-main-pagecontent p a.btn.hollow .icon {
	background-color: var(--ttuo-color-red);
}
.l-main-pagecontent .btn:hover, .l-main-pagecontent a.btn:hover, .l-main-pagecontent p a.btn:hover {
	background-color: var(--ttuo-color-white);
	color: var(--ttuo-color-red);
	border-color: var(--ttuo-color-red);
}
.l-main-pagecontent .btn:hover .icon, .l-main-pagecontent a.btn:hover .icon, .l-main-pagecontent p a.btn:hover .icon {
	background-color: var(--ttuo-color-red);
}
.l-main-pagecontent .btn:active, .l-main-pagecontent a.btn:active, .l-main-pagecontent p a.btn:active {
	background-color: var(--ttuo-color-darkerred);
	border-color: var(--ttuo-color-darkerred);
	color: var(--ttuo-color-lightred);
}
.l-main-pagecontent .btn:active .icon, .l-main-pagecontent a.btn:active .icon, .l-main-pagecontent p a.btn:active .icon {
	background-color: var(--ttuo-color-lightred);
}
.l-main-pagecontent .btn.disabled, .l-main-pagecontent a.btn.disabled, .l-main-pagecontent p a.btn.disabled {
	opacity: 0.3;
	cursor: not-allowed;
}
.l-main-pagecontent .btn.disabled:hover, .l-main-pagecontent .btn.disabled:active, .l-main-pagecontent a.btn.disabled:hover, .l-main-pagecontent a.btn.disabled:active, .l-main-pagecontent p a.btn.disabled:hover, .l-main-pagecontent p a.btn.disabled:active {
	background-color: var(--ttuo-color-red);
	border-color: var(--ttuo-color-red);
	color: var(--ttuo-color-white);
}
.l-main-pagecontent .btn-link, .l-main-pagecontent a.btn-link, .l-main-pagecontent p a.btn-link {
	padding: 0.5rem;
	font-size: 1rem;
	display: inline-block;
	font-family: var(--ttuo-fontFamily-default);
	font-weight: 500;
	color: var(--ttuo-color-brightred);
	border: 3px solid;
	border-color: transparent;
	border-radius: 2px;
	background-color: transparent;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
	transition: all 0.3s ease;
	cursor: pointer;
	box-shadow: none;
	position: relative;
	z-index: 0;
	margin: 0;
}
.l-main-pagecontent .btn-link::before, .l-main-pagecontent a.btn-link::before, .l-main-pagecontent p a.btn-link::before {
	content: "";
	position: absolute;
	z-index: -1;
	bottom: 0px;
	left: 0;
	width: 100%;
	height: 3px;
	background-color: var(--ttuo-color-red);
	-webkit-transition: all 0.16s ease-out;
	-moz-transition: all 0.16s ease-out;
	transition: all 0.16s ease-out;
}
.l-main-pagecontent .btn-link:hover, .l-main-pagecontent a.btn-link:hover, .l-main-pagecontent p a.btn-link:hover {
	color: var(--ttuo-color-white);
}
.l-main-pagecontent .btn-link:hover::before, .l-main-pagecontent a.btn-link:hover::before, .l-main-pagecontent p a.btn-link:hover::before {
	height: 100%;
	width: 100%;
	left: 0px;
	border-radius: 2px;
}
.l-main-pagecontent .btn-link:active, .l-main-pagecontent a.btn-link:active, .l-main-pagecontent p a.btn-link:active {
	color: var(--ttuo-color-lightred);
}
.l-main-pagecontent .btn-link:active::before, .l-main-pagecontent a.btn-link:active::before, .l-main-pagecontent p a.btn-link:active::before {
	height: 100%;
	width: 100%;
	left: 0px;
	border-radius: 2px;
	background-color: var(--ttuo-color-darkerred);
}
.l-main-pagecontent button[type=reset].btn {
	background-color: transparent;
	border-color: var(--ttuo-color-black);
	color: var(--ttuo-color-black);
}
.l-main-pagecontent button[type=reset].btn:hover {
	background-color: var(--ttuo-color-lightgray);
	border-color: var(--ttuo-color-lightgray);
	color: var(--ttuo-color-darkgray);
}
.l-main-pagecontent button[type=reset].btn:active {
	background-color: var(--ttuo-color-darkgray);
	border-color: var(--ttuo-color-darkgray);
	color: var(--ttuo-color-lightgray);
}
.l-main-pagecontent .btn.darkred, .l-main-pagecontent a.btn.darkred, .l-main-pagecontent p a.btn.darkred {
	background-color: var(--ttuo-color-darkerred);
	border-color: var(--ttuo-color-darkerred);
}
.l-main-pagecontent .btn.darkred .icon, .l-main-pagecontent a.btn.darkred .icon, .l-main-pagecontent p a.btn.darkred .icon {
	background-color: var(--ttuo-color-white);
}
.l-main-pagecontent .btn.darkred.hollow, .l-main-pagecontent a.btn.darkred.hollow, .l-main-pagecontent p a.btn.darkred.hollow {
	background-color: transparent;
	border-color: var(--ttuo-color-darkred);
	color: var(--ttuo-color-darkred);
}
.l-main-pagecontent .btn.darkred.hollow .icon, .l-main-pagecontent a.btn.darkred.hollow .icon, .l-main-pagecontent p a.btn.darkred.hollow .icon {
	background-color: var(--ttuo-color-darkred);
}
.l-main-pagecontent .btn.darkred:hover, .l-main-pagecontent a.btn.darkred:hover, .l-main-pagecontent p a.btn.darkred:hover {
	background-color: var(--ttuo-color-lightred);
	border-color: var(--ttuo-color-lightred);
	color: var(--ttuo-color-darkred);
}
.l-main-pagecontent .btn.darkred:hover .icon, .l-main-pagecontent a.btn.darkred:hover .icon, .l-main-pagecontent p a.btn.darkred:hover .icon {
	background-color: var(--ttuo-color-darkred);
}
.l-main-pagecontent .btn.darkred:active, .l-main-pagecontent a.btn.darkred:active, .l-main-pagecontent p a.btn.darkred:active {
	background-color: var(--ttuo-color-darkerred);
	border-color: var(--ttuo-color-darkerred);
	color: var(--ttuo-color-lightred);
}
.l-main-pagecontent .btn.darkred.disabled:hover, .l-main-pagecontent .btn.darkred.disabled:active, .l-main-pagecontent a.btn.darkred.disabled:hover, .l-main-pagecontent a.btn.darkred.disabled:active, .l-main-pagecontent p a.btn.darkred.disabled:hover, .l-main-pagecontent p a.btn.darkred.disabled:active {
	background-color: var(--ttuo-color-black);
	border-color: var(--ttuo-color-black);
	color: var(--ttuo-color-white);
}
.l-main-pagecontent .btn.black, .l-main-pagecontent a.btn.black, .l-main-pagecontent p a.btn.black {
	background-color: var(--ttuo-color-black);
	border-color: var(--ttuo-color-black);
}
.l-main-pagecontent .btn.black .icon, .l-main-pagecontent a.btn.black .icon, .l-main-pagecontent p a.btn.black .icon {
	background-color: var(--ttuo-color-white);
}
.l-main-pagecontent .btn.black.hollow, .l-main-pagecontent a.btn.black.hollow, .l-main-pagecontent p a.btn.black.hollow {
	background-color: transparent;
	border-color: var(--ttuo-color-black);
	color: var(--ttuo-color-black);
}
.l-main-pagecontent .btn.black.hollow .icon, .l-main-pagecontent a.btn.black.hollow .icon, .l-main-pagecontent p a.btn.black.hollow .icon {
	background-color: var(--ttuo-color-black);
}
.l-main-pagecontent .btn.black:hover, .l-main-pagecontent a.btn.black:hover, .l-main-pagecontent p a.btn.black:hover {
	background-color: var(--ttuo-color-white);
	border-color: var(--ttuo-color-black);
	color: var(--ttuo-color-black);
}
.l-main-pagecontent .btn.black:hover .icon, .l-main-pagecontent a.btn.black:hover .icon, .l-main-pagecontent p a.btn.black:hover .icon {
	background-color: var(--ttuo-color-black);
}
.l-main-pagecontent .btn.black:hover.hollow:hover, .l-main-pagecontent a.btn.black:hover.hollow:hover, .l-main-pagecontent p a.btn.black:hover.hollow:hover {
	background-color: var(--ttuo-color-black);
	border-color: var(--ttuo-color-black);
	color: var(--ttuo-color-white);
}
.l-main-pagecontent .btn.black:active, .l-main-pagecontent a.btn.black:active, .l-main-pagecontent p a.btn.black:active {
	background-color: var(--ttuo-color-gray);
	border-color: var(--ttuo-color-gray);
	color: var(--ttuo-color-lightgray);
}
.l-main-pagecontent .btn.black.disabled:hover, .l-main-pagecontent .btn.black.disabled:active, .l-main-pagecontent a.btn.black.disabled:hover, .l-main-pagecontent a.btn.black.disabled:active, .l-main-pagecontent p a.btn.black.disabled:hover, .l-main-pagecontent p a.btn.black.disabled:active {
	background-color: var(--ttuo-color-black);
	border-color: var(--ttuo-color-black);
	color: var(--ttuo-color-white);
}
.l-main-pagecontent .btn.white, .l-main-pagecontent a.btn.white, .l-main-pagecontent p a.btn.white {
	background-color: var(--ttuo-color-white);
	border-color: var(--ttuo-color-white);
	color: var(--ttuo-color-black);
}
.l-main-pagecontent .btn.white .icon, .l-main-pagecontent a.btn.white .icon, .l-main-pagecontent p a.btn.white .icon {
	background-color: var(--ttuo-color-black);
}
.l-main-pagecontent .btn.white.hollow, .l-main-pagecontent a.btn.white.hollow, .l-main-pagecontent p a.btn.white.hollow {
	background-color: transparent;
	border-color: var(--ttuo-color-white);
	color: var(--ttuo-color-white);
}
.l-main-pagecontent .btn.white.hollow .icon, .l-main-pagecontent a.btn.white.hollow .icon, .l-main-pagecontent p a.btn.white.hollow .icon {
	background-color: var(--ttuo-color-white);
}
.l-main-pagecontent .btn.white:hover, .l-main-pagecontent a.btn.white:hover, .l-main-pagecontent p a.btn.white:hover {
	background-color: var(--ttuo-color-red);
	border-color: var(--ttuo-color-red);
	color: var(--ttuo-color-lightred);
}
.l-main-pagecontent .btn.white:hover .icon, .l-main-pagecontent a.btn.white:hover .icon, .l-main-pagecontent p a.btn.white:hover .icon {
	background-color: var(--ttuo-color-lightred);
}
.l-main-pagecontent .btn.white:active, .l-main-pagecontent a.btn.white:active, .l-main-pagecontent p a.btn.white:active {
	background-color: var(--ttuo-color-darkred);
	border-color: var(--ttuo-color-darkred);
	color: var(--ttuo-color-lightred);
}
.l-main-pagecontent .btn.white.disabled, .l-main-pagecontent .btn.white.disabled:hover, .l-main-pagecontent .btn.white.disabled:active, .l-main-pagecontent a.btn.white.disabled, .l-main-pagecontent a.btn.white.disabled:hover, .l-main-pagecontent a.btn.white.disabled:active, .l-main-pagecontent p a.btn.white.disabled, .l-main-pagecontent p a.btn.white.disabled:hover, .l-main-pagecontent p a.btn.white.disabled:active {
	opacity: 0.3;
	background-color: var(--ttuo-color-white);
	border-color: var(--ttuo-color-white);
	color: var(--ttuo-color-gray);
}
.l-main-pagecontent .btn.gray, .l-main-pagecontent a.btn.gray, .l-main-pagecontent p a.btn.gray {
	background-color: var(--ttuo-color-gray);
	border-color: var(--ttuo-color-gray);
}
.l-main-pagecontent .btn.gray .icon, .l-main-pagecontent a.btn.gray .icon, .l-main-pagecontent p a.btn.gray .icon {
	background-color: var(--ttuo-color-white);
}
.l-main-pagecontent .btn.gray.hollow, .l-main-pagecontent a.btn.gray.hollow, .l-main-pagecontent p a.btn.gray.hollow {
	background-color: transparent;
	border-color: var(--ttuo-color-gray);
	color: var(--ttuo-color-gray);
}
.l-main-pagecontent .btn.gray.hollow .icon, .l-main-pagecontent a.btn.gray.hollow .icon, .l-main-pagecontent p a.btn.gray.hollow .icon {
	background-color: var(--ttuo-color-gray);
}
.l-main-pagecontent .btn.gray:hover, .l-main-pagecontent a.btn.gray:hover, .l-main-pagecontent p a.btn.gray:hover {
	background-color: var(--ttuo-color-lightgray);
	border-color: var(--ttuo-color-lightgray);
	color: var(--ttuo-color-gray);
}
.l-main-pagecontent .btn.gray:hover .icon, .l-main-pagecontent a.btn.gray:hover .icon, .l-main-pagecontent p a.btn.gray:hover .icon {
	background-color: var(--ttuo-color-gray);
}
.l-main-pagecontent .btn.gray:active, .l-main-pagecontent a.btn.gray:active, .l-main-pagecontent p a.btn.gray:active {
	background-color: var(--ttuo-color-darkgray);
	border-color: var(--ttuo-color-darkgray);
	color: var(--ttuo-color-lightgray);
}
.l-main-pagecontent .btn.gray.disabled:hover, .l-main-pagecontent .btn.gray.disabled:active, .l-main-pagecontent a.btn.gray.disabled:hover, .l-main-pagecontent a.btn.gray.disabled:active, .l-main-pagecontent p a.btn.gray.disabled:hover, .l-main-pagecontent p a.btn.gray.disabled:active {
	background-color: var(--ttuo-color-gray);
	border-color: var(--ttuo-color-gray);
	color: var(--ttuo-color-white);
}
.l-main-pagecontent .callout .btn.gray:hover {
	border-color: var(--ttuo-color-gray);
}
.l-main-pagecontent .btn.blue, .l-main-pagecontent a.btn.blue, .l-main-pagecontent p a.btn.blue {
	background-color: var(--ttuo-color-blue);
	border-color: var(--ttuo-color-blue);
}
.l-main-pagecontent .btn.blue.hollow, .l-main-pagecontent a.btn.blue.hollow, .l-main-pagecontent p a.btn.blue.hollow {
	background-color: transparent;
	border-color: var(--ttuo-color-blue);
	color: var(--ttuo-color-blue);
}
.l-main-pagecontent .btn.blue.hollow .icon, .l-main-pagecontent a.btn.blue.hollow .icon, .l-main-pagecontent p a.btn.blue.hollow .icon {
	background-color: var(--ttuo-color-blue);
}
.l-main-pagecontent .btn.blue:hover, .l-main-pagecontent a.btn.blue:hover, .l-main-pagecontent p a.btn.blue:hover {
	background-color: var(--ttuo-color-lightblue);
	border-color: var(--ttuo-color-lightblue);
	color: var(--ttuo-color-blue);
}
.l-main-pagecontent .btn.blue:hover .icon, .l-main-pagecontent a.btn.blue:hover .icon, .l-main-pagecontent p a.btn.blue:hover .icon {
	background-color: var(--ttuo-color-blue);
}
.l-main-pagecontent .btn.blue:active, .l-main-pagecontent a.btn.blue:active, .l-main-pagecontent p a.btn.blue:active {
	background-color: var(--ttuo-color-darkblue);
	border-color: var(--ttuo-color-darkblue);
	color: var(--ttuo-color-lightblue);
}
.l-main-pagecontent .btn.blue.disabled:hover, .l-main-pagecontent .btn.blue.disabled:active, .l-main-pagecontent a.btn.blue.disabled:hover, .l-main-pagecontent a.btn.blue.disabled:active, .l-main-pagecontent p a.btn.blue.disabled:hover, .l-main-pagecontent p a.btn.blue.disabled:active {
	background-color: var(--ttuo-color-blue);
	border-color: var(--ttuo-color-blue);
	color: var(--ttuo-color-white);
}
.l-main-pagecontent .callout .btn.blue:hover {
	border-color: var(--ttuo-color-blue);
}
.l-main-pagecontent .btn.green, .l-main-pagecontent a.btn.green, .l-main-pagecontent p a.btn.green {
	background-color: var(--ttuo-color-green);
	border-color: var(--ttuo-color-green);
}
.l-main-pagecontent .btn.green.hollow, .l-main-pagecontent a.btn.green.hollow, .l-main-pagecontent p a.btn.green.hollow {
	background-color: transparent;
	border-color: var(--ttuo-color-green);
	color: var(--ttuo-color-green);
}
.l-main-pagecontent .btn.green.hollow .icon, .l-main-pagecontent a.btn.green.hollow .icon, .l-main-pagecontent p a.btn.green.hollow .icon {
	background-color: var(--ttuo-color-green);
}
.l-main-pagecontent .btn.green:hover, .l-main-pagecontent a.btn.green:hover, .l-main-pagecontent p a.btn.green:hover {
	background-color: var(--ttuo-color-lightgreen);
	border-color: var(--ttuo-color-lightgreen);
	color: var(--ttuo-color-green);
}
.l-main-pagecontent .btn.green:hover .icon, .l-main-pagecontent a.btn.green:hover .icon, .l-main-pagecontent p a.btn.green:hover .icon {
	background-color: var(--ttuo-color-green);
}
.l-main-pagecontent .btn.green:active, .l-main-pagecontent a.btn.green:active, .l-main-pagecontent p a.btn.green:active {
	background-color: var(--ttuo-color-darkgreen);
	border-color: var(--ttuo-color-darkgreen);
	color: var(--ttuo-color-lightgreen);
}
.l-main-pagecontent .btn.green.disabled:hover, .l-main-pagecontent .btn.green.disabled:active, .l-main-pagecontent a.btn.green.disabled:hover, .l-main-pagecontent a.btn.green.disabled:active, .l-main-pagecontent p a.btn.green.disabled:hover, .l-main-pagecontent p a.btn.green.disabled:active {
	background-color: var(--ttuo-color-green);
	border-color: var(--ttuo-color-green);
	color: var(--ttuo-color-white);
}
.l-main-pagecontent .callout .btn.green:hover {
	border-color: var(--ttuo-color-green);
}
.l-main-pagecontent .btn.orange, .l-main-pagecontent a.btn.orange, .l-main-pagecontent p a.btn.orange {
	background-color: var(--ttuo-color-orange);
	border-color: var(--ttuo-color-orange);
}
.l-main-pagecontent .btn.orange.hollow, .l-main-pagecontent a.btn.orange.hollow, .l-main-pagecontent p a.btn.orange.hollow {
	background-color: transparent;
	border-color: var(--ttuo-color-orange);
	color: var(--ttuo-color-orange);
}
.l-main-pagecontent .btn.orange.hollow .icon, .l-main-pagecontent a.btn.orange.hollow .icon, .l-main-pagecontent p a.btn.orange.hollow .icon {
	background-color: var(--ttuo-color-orange);
}
.l-main-pagecontent .btn.orange:hover, .l-main-pagecontent a.btn.orange:hover, .l-main-pagecontent p a.btn.orange:hover {
	background-color: var(--ttuo-color-lightorange);
	border-color: var(--ttuo-color-lightorange);
	color: var(--ttuo-color-orange);
}
.l-main-pagecontent .btn.orange:hover .icon, .l-main-pagecontent a.btn.orange:hover .icon, .l-main-pagecontent p a.btn.orange:hover .icon {
	background-color: var(--ttuo-color-orange);
}
.l-main-pagecontent .btn.orange:active, .l-main-pagecontent a.btn.orange:active, .l-main-pagecontent p a.btn.orange:active {
	background-color: var(--ttuo-color-darkorange);
	border-color: var(--ttuo-color-darkorange);
	color: var(--ttuo-color-lightorange);
}
.l-main-pagecontent .btn.orange.disabled:hover, .l-main-pagecontent .btn.orange.disabled:active, .l-main-pagecontent a.btn.orange.disabled:hover, .l-main-pagecontent a.btn.orange.disabled:active, .l-main-pagecontent p a.btn.orange.disabled:hover, .l-main-pagecontent p a.btn.orange.disabled:active {
	background-color: var(--ttuo-color-orange);
	border-color: var(--ttuo-color-orange);
	color: var(--ttuo-color-white);
}
.l-main-pagecontent .btn-group {
	display: flex;
	flex-flow: row wrap;
	gap: 10px 20px;
	justify-content: center;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
}
.l-main-pagecontent .btn-group .btn {
	flex: 1;
	text-align: center;
	min-width: fit-content;
}
.l-main-pagecontent .btn-group.even .btn {
	flex: 1 1 200px;
	max-width: clamp(100px, 30vw, 400px);
}
@media screen and (max-width: 50em) {
	.l-main-pagecontent .btn-group.even .btn {
		max-width: inherit;
	}
}

.l-main-pagecontent form {
	display: flex;
	flex-flow: column wrap;
	align-content: center;
}
.l-main-pagecontent form fieldset {
	margin-bottom: 0.4em;
	padding: 0.8em;
	max-width: 40em;
	background: #fefefe;
	border: 2px solid var(--ttuo-color-lightgray);
	border-radius: 3px;
}
.l-main-pagecontent form div.control-group {
	margin-bottom: 1em;
	max-width: 40em;
	font-size: 1.2rem;
	position: relative;
}
.l-main-pagecontent .control-label {
	font-family: var(--ttuo-fontFamily-default);
	font-weight: 500;
	letter-spacing: normal;
}
.l-main-pagecontent form textarea,
.l-main-pagecontent form select,
.l-main-pagecontent form input[type=text],
.l-main-pagecontent form input[type=password],
.l-main-pagecontent form input[type=datetime],
.l-main-pagecontent form input[type=datetime-local],
.l-main-pagecontent form input[type=date],
.l-main-pagecontent form input[type=month],
.l-main-pagecontent form input[type=time],
.l-main-pagecontent form input[type=week],
.l-main-pagecontent form input[type=number],
.l-main-pagecontent form input[type=email],
.l-main-pagecontent form input[type=url],
.l-main-pagecontent form input[type=search],
.l-main-pagecontent form input[type=tel],
.l-main-pagecontent form input[type=color],
.l-main-pagecontent .uneditable-input {
	border: 1px solid #ccc;
	padding: 0.6em;
	font-size: 1.1rem;
	font-family: var(--ttuo-fontFamily-default);
	font-weight: normal;
	color: #1b1b1b;
	border-radius: 3px;
	margin-bottom: 0;
}
.l-main-pagecontent form .controls select {
	height: 2.5em;
	border: 1px solid #ccc;
	background-color: #efefef;
}
.l-main-pagecontent .checkbox-label, .l-main-pagecontent .radio-label {
	font-family: var(--ttuo-fontFamily-default);
	padding: 5px 10px 2px 5px;
}
.l-main-pagecontent .checkbox + .checkbox-label::before, .l-main-pagecontent .radio + .radio-label::before {
	content: "";
	background: #cdcdcd;
	-webkit-mask-image: url("/icons/icon-square.svg");
	mask-image: url("/icons/icon-square.svg");
	border: none;
	display: inline-block;
	width: 2em;
	height: 2em;
	-webkit-mask-size: 100%;
	mask-size: 100%;
	vertical-align: middle;
	padding: 0px;
	margin-right: 0.2em;
	margin-top: -3px;
}
.l-main-pagecontent .checkbox:checked + .checkbox-label::before {
	background: #d60000;
	box-shadow: none;
	-webkit-mask-image: url("/icons/icon-square-check.svg");
	mask-image: url("/icons/icon-square-check.svg");
	justify-content: center;
}
.l-main-pagecontent .form-actions {
	display: flex;
	flex-flow: row-reverse wrap;
	justify-content: space-between;
	max-width: 40em;
}

/*** Badges ***/
/*** List Groups ***/
/***************8***/
.list-group, ul.list-group {
	display: flex;
	flex-direction: column;
	padding-left: 0;
	margin-bottom: 0;
	border-radius: 0.25rem;
	margin-left: 0;
}

.list-group-flush {
	border-radius: 0;
	padding: 0.5rem 0.1rem;
}

.list-group-item {
	position: relative;
	display: block;
	padding: 0.5rem 0rem;
	color: #212529;
	text-decoration: none;
	background-color: #fff;
	border: 2px solid rgba(0, 0, 0, 0.125);
}

.list-group-item:first-child {
	border-top-left-radius: inherit;
	border-top-right-radius: inherit;
}

.list-group-flush > .list-group-item {
	border-width: 0 0 2px;
	margin-top: 0;
}

.list-group-flush > .list-group-item:last-child {
	border-bottom: none;
}

.list-group .list-group-link {
	align-items: center;
	padding: 0.5rem;
	margin: 0.5rem 0rem 0.5rem 0rem;
	color: inherit;
	background-color: transparent;
	box-shadow: none;
	border-bottom: none;
	z-index: 0;
}
.list-group .list-group-link p {
	margin: 0;
}
.list-group .list-group-link::before {
	content: "";
	position: absolute;
	height: 100%;
	width: 0px;
	background: var(--ttuo-color-lightred);
	bottom: 0px;
	left: 0px;
	transition: all 0.2s ease;
	z-index: -1;
}
.list-group .list-group-link .icon {
	background-color: var(--ttuo-color-red);
}
.list-group .list-group-link:hover {
	color: inherit;
	background-color: transparent;
}
.list-group .list-group-link:hover::before {
	background: var(--ttuo-color-lightred);
	height: 100%;
	width: 100%;
	bottom: 0px;
	left: 0px;
	border-radius: 3px;
}

.l-main-pagecontent .ttuo-hero {
	padding-left: 1rem;
	margin-top: 1em;
	margin-bottom: 4rem;
	min-height: 450px;
	display: flex;
	justify-content: center;
}
.l-main-pagecontent .ttuo-hero h1 {
	color: var(--ttuo-color-brightred);
}
.l-main-pagecontent .ttuo-hero .ttuo-hero-content {
	max-width: 74rem;
	width: 100%;
	display: block;
	align-items: center;
	background-size: 400px;
	background-repeat: no-repeat;
	background-position: 0rem 0px;
}
.l-main-pagecontent .ttuo-hero .row {
	max-width: 100%;
}
.l-main-pagecontent .image-fill {
	background-size: cover;
}

@media screen and (max-width: 40em) {
	.l-main-pagecontent .ttuo-hero {
		padding: 2em 1em;
		margin-top: 0;
		margin-bottom: 2rem;
		border-right: none;
		min-height: auto;
	}
	.l-main-pagecontent .ttuo-hero .ttuo-hero-content {
		background-image: none;
		padding: 0;
	}
	.l-main-pagecontent .ttuo-hero .ttuo-hero-content h1 {
		font-size: 1.5em;
	}
	.l-main-pagecontent .ttuo-hero .ttuo-hero-content h1 .small {
		font-size: 0.8em;
	}
}
.l-main-pagecontent .ttuo-home-header-container {
	background-color: #707079;
	background-size: cover;
	background-position: top right;
	min-height: clamp(100px, 80vh, 700px);
	display: flex;
	flex-direction: column;
	justify-content: end;
}
.l-main-pagecontent .ttuo-home-header-container h1 {
	color: var(--ttuo-color-brightred);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	text-transform: uppercase;
	margin-bottom: 0;
	justify-content: right;
}
.l-main-pagecontent .ttuo-home-header-container .ttuo-home-header-p1 {
	display: flex;
	color: var(--ttuo-color-black);
	text-align: right;
	font-size: 40%;
	line-height: 1em;
	padding-right: 0.5rem;
	padding-top: 0.25em;
	justify-content: center;
}
.l-main-pagecontent .ttuo-home-header-container .tagline-block {
	display: flex;
	justify-content: end;
	background-color: var(--ttuo-color-brightred);
	margin-right: -6rem;
	margin: 1rem -4em 1em -2em;
	text-align: right;
	background-image: url("/online/_ttuo-template/2022/images/tagline-pattern.svg");
	background-position-x: right 400px;
	background-size: contain;
}
.l-main-pagecontent .ttuo-home-header-container .tagline-block img {
	height: 6rem;
	width: 400px;
	background-color: var(--ttuo-color-brightred);
	display: block;
	padding: 1rem 2rem 1rem 2rem;
}

@media screen and (max-width: 40em) {
	.l-main-pagecontent .ttuo-home-header-container {
		padding-top: 0;
		padding-bottom: 200px;
		background-position: bottom 0px right 0px;
		min-height: clamp(100px, 80vw, 700px);
		background-size: 600px;
	}
	.l-main-pagecontent .ttuo-home-header-container h1 {
		justify-content: center;
	}
	.l-main-pagecontent .ttuo-home-header-container .tagline-block {
		margin: 2em -1em;
		width: 100vw;
	}
}
.grid-container-padding-x {
	padding: 0;
}

.l-main-pagecontent .lowercase, .l-main-pagecontent .btn.lowercase {
	text-transform: none;
}
.l-main-pagecontent .block, .l-main-pagecontent .btn.block {
	display: block;
}
.l-main-pagecontent .uppercase {
	text-transform: uppercase;
}
.l-main-pagecontent .smallcaps {
	font-variant: small-caps;
}
.l-main-pagecontent .text-center {
	text-align: center;
}
.l-main-pagecontent .text-left {
	text-align: left;
}
.l-main-pagecontent .text-right {
	text-align: right;
}
.l-main-pagecontent .list-unstyled {
	margin-left: 0;
	list-style: none;
}
.l-main-pagecontent .text-red {
	color: var(--ttuo-color-red);
}
.l-main-pagecontent .text-black {
	color: var(--ttuo-color-black);
}
.l-main-pagecontent .text-white {
	color: var(--ttuo-color-white);
}
.l-main-pagecontent .text-brightred {
	color: var(--ttuo-color-brightred);
}
.l-main-pagecontent .text-darkred {
	color: var(--ttuo-color-darkred);
}
.l-main-pagecontent .text-gray {
	color: var(--ttuo-color-gray);
}
.l-main-pagecontent .text-blue {
	color: var(--ttuo-color-blue);
}
.l-main-pagecontent .text-darkblue {
	color: var(--ttuo-color-darkblue);
}
.l-main-pagecontent .text-green {
	color: var(--ttuo-color-green);
}
.l-main-pagecontent .text-brightgreen {
	color: var(--ttuo-color-brightgreen);
}
.l-main-pagecontent .text-darkgreen {
	color: var(--ttuo-color-darkgreen);
}
.l-main-pagecontent .text-orange {
	color: var(--ttuo-color-orange);
}
.l-main-pagecontent .bg-red, .l-main-pagecontent .icon.red {
	background-color: var(--ttuo-color-red);
}
.l-main-pagecontent .bg-brightred, .l-main-pagecontent .icon.brightred {
	background-color: var(--ttuo-color-brightred);
}
.l-main-pagecontent .bg-darkred, .l-main-pagecontent .icon.darkred {
	background-color: var(--ttuo-color-darkred);
}
.l-main-pagecontent .bg-darkerred, .l-main-pagecontent .icon.darkerred {
	background-color: var(--ttuo-color-darkerred);
}
.l-main-pagecontent .bg-black, .l-main-pagecontent .icon.black {
	background-color: var(--ttuo-color-black);
}
.l-main-pagecontent .bg-gray, .l-main-pagecontent .icon.gray {
	background-color: var(--ttuo-color-gray);
}
.l-main-pagecontent .bg-lightgray, .l-main-pagecontent .icon.lightgray {
	background-color: var(--ttuo-color-lightgray);
}
.l-main-pagecontent .bg-darkgray, .l-main-pagecontent .icon.darkgray {
	background-color: var(--ttuo-color-gray);
}
.l-main-pagecontent .bg-blue, .l-main-pagecontent .icon.blue {
	background-color: var(--ttuo-color-blue);
}
.l-main-pagecontent .bg-lightblue, .l-main-pagecontent .icon.lightblue {
	background-color: var(--ttuo-color-lightblue);
}
.l-main-pagecontent .bg-darkblue, .l-main-pagecontent .icon.darkblue {
	background-color: var(--ttuo-color-darkblue);
}
.l-main-pagecontent .bg-lightgreen, .l-main-pagecontent .icon.lightgreen {
	background-color: var(--ttuo-color-lightgreen);
}
.l-main-pagecontent .bg-green, .l-main-pagecontent .icon.green {
	background-color: var(--ttuo-color-green);
}
.l-main-pagecontent .bg-darkgreen, .l-main-pagecontent .icon.darkgreen {
	background-color: var(--ttuo-color-darkgreen);
}
.l-main-pagecontent .bg-organge, .l-main-pagecontent .icon.organge {
	background-color: var(--ttuo-color-orange);
}
.l-main-pagecontent .bg-lightorgange, .l-main-pagecontent .icon.lightorgange {
	background-color: var(--ttuo-color-lightorange);
}
.l-main-pagecontent .bg-darkorgange, .l-main-pagecontent .icon.darkorgange {
	background-color: var(--ttuo-color-darkorange);
}
.l-main-pagecontent .no-margin-top {
	margin-top: 0;
}
.l-main-pagecontent .no-margin-bottom {
	margin-bottom: 0;
}
.l-main-pagecontent .no-margin-vertical {
	margin-top: 0;
	margin-bottom: 0;
}
.top {
	--offset: 50px;
	position: sticky;
	bottom: 40px;
	margin-right: 10px;
	margin-left: 20px;
	place-self: end;
	margin-top: calc(100vh + var(--offset));
	z-index: 100;

	/* visual styling */
	text-decoration: none;
	padding: 10px;
	color: #fff;
	background: #000;
	border-radius: 100px;
	white-space: nowrap;
}

.jarallax {
	position: relative;
	z-index: 0; }

.jarallax > .jarallax-img {
	position: absolute;
	object-fit: cover;
	font-family: 'object-fit: cover;';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1; }

.impact {
	position: relative;
	background: #f7f6f6;
	padding-bottom: 60px; }
.impact__image {
	min-height: 409px;
	overflow: hidden; }
.impact__inner {
	position: relative;
	z-index: 100; }
.impact__sub {
	transition: all 0.8s ease;
	font-size: 27px !important;
	font-size: 1.6875rem !important;
	line-height: 1.2 !important;
	text-transform: uppercase;
	letter-spacing: 8.27px;
	color: #ffffff !important;
	margin-bottom: 0 !important;
	padding-bottom: 12px;
	font-family: 'acumin-pro-condensed' !important;
	opacity: 0; }
.impact__sub.active {
	opacity: 1; }
.impact__title {
	transition: all 0.8s ease;
	overflow: hidden;
	margin-bottom: 0;
	opacity: 0;
	margin-top: 0 !important; }
.impact__title span {
	font-size: 40px !important;
	font-size: 2.5rem !important;
	line-height: 1.2 !important;
	max-width: 800px;
	font-family: "charterbold", "Helvetica Neue", Helvetica, sans-serif !important;
	display: block; }
@media (min-width: 30em) {
	.impact__title span {
		font-size: 70px !important;
		font-size: 4.375rem !important;
		line-height: 1.2 !important; } }
.impact__title.active {
	opacity: 1; }
.impact__title.active span {
	opacity: 0;
	animation: rollUp forwards;
	animation-duration: 1s; }
.impact__heading {
	margin-top: -114px;
	margin-bottom: 20px; }
.impact__content {
	margin-bottom: 28px; }
.impact__content p {
	font-size: 16px !important;
	font-size: 1rem !important;
	line-height: 1.4 !important;
	font-family: "charterroman", "Helvetica Neue", Helvetica, sans-serif !important; }
.impact__links {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: column;
	width: 100%; }
@media (min-width: 64.0625em) {
	.impact__links {
		flex-direction: initial; } }
.impact__links__link {
	font-size: 16px !important;
	font-size: 1rem !important;
	line-height: 1.2 !important;
	color: #2a2a2a;
	/* Hover MUST be last in the list */
	transition: all 0.3s ease;
	text-decoration: underline;
	cursor: pointer;
	font-weight: bold;
	width: 100%;
	font-family: "charterroman", "Helvetica Neue", Helvetica, sans-serif;
	font-style: italic;
	margin-bottom: 12px; }
.impact__links__link:link {
	color: #2a2a2a; }
.impact__links__link:visited {
	color: #2a2a2a; }
.impact__links__link:active {
	color: #2a2a2a; }
.impact__links__link:hover {
	color: #e70100; }
@media (min-width: 64.0625em) {
	.impact__links__link {
		margin-bottom: initial;
		width: 240px; } }

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	.impact__links {
		display: inline-block; }
	.impact__links__link {
		display: inline-block;
		padding: 0 12px; } }

/* Create ten equal columns that floats next to each other */
.column10 {
	float: left;
	width: 10%;
	margin: 0;
}

/* Clear floats after the columns */
.row10:after {
	content: "";
	display: table;
	clear: both;
}

/* Responsive layout - makes the ten columns stack on top of each other instead of next to each other */
@media screen and (max-width: 900px) {
	.column10 {
		width: 50%;
		margin: 0;
	}
}

/* Responsive layout - makes the ten columns stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
	.column10 {
		width: 50%;
		margin: 0;
	}
}

.navbar2 {
	background-color: #E90802;
	position: sticky;
	top: 0;
	text-align: center;
	justify-content: center;
	justify-items: center;
	width: 100%;
	z-index: 100;
	display: flex;
}

.navtop2 {
	--offset: -100px;
	position: sticky;
	top: 75px;
	place-self: end;
	margin-top: calc(10vh + var(--offset));
	z-index: 100;
	justify-content: center;
}

.menu2 {
	display: flex;
	justify-content: center;
	flex-direction: row;
	align-items: center;
	z-index: 10;
	transition: 0.5s;
}

.navbar2 li {
	list-style-type: none;
}

.navbar2 li a {
	color: #ffffff;
	text-decoration: none;
	display: block;
	line-height: 1;
	transition: 0.3s;
}

div.polaroid {
	width: 90%;
	margin: auto;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	text-align: center;
}

/* Rounded border */
hr.rounded {
	border-top: 8px solid #E90802;
	border-bottom: #000000;
	border-radius: 5px;
}

.center2 {
	padding: 70px 0;
	text-align: center;
}


@media screen and (max-width: 900px) {
	.center2 {
		margin: 0;
	}
}


.nav2 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #E90802;
	padding: 1em;
}

#logo {
	font-size: 1.2em;
	font-weight: 600;
}
input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
}
label {
	display: none;
	cursor: pointer;
}
.ul2 {
	list-style: none;
	display: flex;
	gap: 1em;
	text-align: center;
}
.ul2 a {
	padding: 0.5em;
}
.ul2 a:hover {
	background-color: #000000;
	border-radius: 0.5em;
}
.active {
	border-bottom: 2px solid #ffffff;
}
@media screen and (max-width: 1000px) {
	label {
		display: block;
	}
	.ul2 {
		font-size: 0.9em;
		position: absolute;
		left: -115%;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #333333;
		gap: 2em;
		top: 60px;
		width: 100%;
		transition: 0.5s;
	}
	input[type="checkbox"]:checked ~ ul {
		left: -16px;
		width: 100%;
	}
	.ul2 a:hover {
		background-color: #ffffff;
		color: #000000;
	}
}

@media screen and (max-width: 1000px) {
	.ul2 {
		font-size: 0.7rem;
	}
}

#one2 {
	margin: 8px;
	width: 30px;
	height: 50px;
	background-image: url(https://www.depts.ttu.edu/_ttu-template/_global/images/nav-arrow--black.svg);
	background-repeat: no-repeat;
	background-position: center;
	border-radius: none !important;
	display: none;
}

@media screen and (max-width: 1000px) {
	#one2 {
		display: block;
		border-radius: none !important;
		font-size: 0.5rem;
	}
}

#one2 span {
	display: block;
	background-color: rgb(255, 255, 255);
	width: 40px;
	height: 600px;
	border-radius: 5px;
	margin-bottom: 6px;
	transition-duration: 0.5s;
}

#one2:hover span:nth-child(2) {
	opacity: 0;
	margin-left:-100px;
}

#one2:hover span:nth-child(1) {
	position: relative;
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 23px;
}

#one2:hover span:nth-child(3) {
	position: absolute;
	-moz-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

/* Create four equal columns that floats next to each other */
.columnf {
	float: left;
	width: 25%;
	padding: 10px;
	color: #E90802;
}

/* Clear floats after the columns */
.rowf:after {
	content: "";
	display: table;
	clear: both;
}

/* Responsive layout - makes the four columns stack on top of each other instead of next to each other */
@media screen and (max-width: 1560px) {
	.columnf {
		width: 50%;
	}
}

/* Responsive layout - makes the four columns stack on top of each other instead of next to each other */
@media screen and (max-width: 870px) {
	.columnf {
		width: 100%;
	}
}