/* CUSTOM CSS */
.banner-img { width:100%; height: 100%;}

/* Music CountUp - Homepage */
.music-countup {width: 30%; float: left;}
.music-countup-pic {width: 69%; float: left;}
.music-countup-pic img {width:80%; height: auto; float: right; border: 2px solid #7c7c7c; box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);}
@media only screen and (max-width: 1050px) {
	.music-countup {width: 100%; float: none;}
	.music-countup-pic {width: 100%; float: none;}
	.music-countup-pic img {width:100%; height: auto; float: none;}
	.music-countup .oneCol-top {display: inline-block; width: 48%; margin: 0 auto;}
	.music-countup .oneCol-hr, .music-countup-pic {display:none !important;}
}
/* Music Sections - Homepage */
.music-section-1 {max-width: 1200px; margin: 0 auto !important; background: #fff; padding: 0 10px;}

/* Music Callout - Homepage */
@media only screen and (min-width: 768px){
	 .music-section-1 .callout .callout-button {display:none !important;}
}
@media only screen and (max-width: 768px){
	.music-section-1 .callout .callout-container img {display:none !important;}
}

/* countup - Number on top - Compontent */
.oneCol-top {margin: -13px 0 0 0; padding: 4px;}
.content-number-top {text-align: center; font-size: 64px; color: #31774f; }
.content-title-top {text-align: center; font-size: 25px; color: #505050; margin: -22px 0 10px 0;}

/* prog blocks */
.prog-col {position: relative; min-height: 1px; padding-left: 5px; padding-right: 5px; float: left;}
.prog-block {position: relative; margin-bottom: 30px;}
.prog-block img {width: 100%; max-width: 100%; margin-bottom: 10px;}
.prog-block a {color:#222; text-decoration: none;}
.prog-block a:hover {color:#31774f;}
.prog-block h2 {margin: 5px 0 0 0; font-size: 1.2rem; padding: 0 5px;}
.prog-block .prog-overlay {position: absolute; top: 0; left: 0; background: rgba(0,0,0,.50); width: 100%; height: 99%; transition: background .2s ease-in-out;}
.prog-block .prog-overlay:hover {background: rgba(0,0,0,0);}
.prog-block a, .prog-block a:visited, .prog-block a:hover {color: #fff; text-decoration: none;}
.prog-block .prog-details {position: absolute; top: 50%; transform: translateY(-50%); left: 0; text-align: center; width: 100%;}
.prog-block h2 {text-transform: uppercase; font-size: 2.25rem; margin: 0 0 10px;}
.prog-block .prog-degrees {width: auto; padding: 3px 0;}

@media only screen and (min-width: 480px){
	.prog-col {width: 50%;}
	.prog-block .prog-overlay {height: 98%;}
	.prog-block img {margin-bottom: -3px;}
}
@media only screen and (max-width: 480px){
	.prog-col {width: 50%;}
	.prog-block .prog-overlay {height: 93%;}
	.prog-block {margin-bottom: 10px; height: 66px; overflow: hidden;}
	.ts-h1 {font-size: 27px; text-align: center;}
	.prog-block .prog-overlay {top: 10px;}
	.prog-col {padding-left: 4px; padding-right: 4px;}
	.prog-block h2 {font-size: 2.15rem;}
}
@media only screen and (min-width: 768px) {
	.prog-col {width: 33.333%; float: left;}
	.prog-block .prog-overlay {height: 98%;}
}
@media only screen and (min-width: 960px){
	.prog-block h2 {font-size: 2.75rem;}
	.prog-col {width: 16.5%;}
}

/* Event Box Component */
.event-box {width: 100%; justify-content: space-between; -webkit-box-pack: justify; display: flex; flex-direction: column;}
.event-picture img {width:100%; border: 2px solid #7c7c7c; box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);}
.event-title {margin: 11px 0 0 0; font-size: 18px; line-height: 23px;}
.event-date {margin: 10px 0; font-size: 15px; font-weight: bold;}
.event-tickets {text-align: center; font-size: 20px; margin: 24px 0 0 0;}
.event-tickets a {text-decoration: none; }
@media (max-width: 1000px){
	.event-box {margin: 8px 8px 8px 7px;}
	.event-title {margin: 10px 0 0 0; font-size: 16px; line-height: 18px;}
	.event-date {font-size: 14px;}
	.event-tickets {text-align: center; font-size: 17px;}
}
@media (max-width: 728px){
	.event-box {float: none; width: 100%; margin: 0 0 5px 0; border-bottom: 1px solid #31774f; padding: 0 0 8px 0;}
	.event-picture img {display: none;}
}

/* BTNs */
.btn-green-white-primary {background: #31774f; color: #fff; border: 1px solid #31774f; text-transform: capitalize; border-radius: 5px; padding: 15px; font-size: 14px; font-size: 1.4rem; line-height: 1.5; font-weight: 700; text-decoration: none; display: inline-block; transition: 0.5s}
.btn-green-white-primary:hover, .btn-green-white-primary:focus, .btn-green-white-primary:active {background: #fff; color: #31774f; border: 1px solid #31774f; text-transform: capitalize; border-radius: 5px; padding: 15px; font-size: 14px; font-size: 1.4rem; line-height: 1.5; font-weight: 700; text-decoration: none; display: inline-block;}
.btn-outline-primary {background: #fff; color: #222; border: 1px solid #31774f; text-transform: capitalize; border-radius: 5px; padding: 15px; font-size: 14px; font-size: 1.4rem; line-height: 1.5; font-weight: 700; text-decoration: none; display: inline-block; transition: 0.5s}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {background: #31774f; color: #fff; border: 1px solid #31774f; text-transform: capitalize; border-radius: 5px; padding: 15px; font-size: 14px; font-size: 1.4rem; line-height: 1.5; font-weight: 700; text-decoration: none; display: inline-block;}
.btn-primary-apply {transition: 0.5s; text-align: center;}

@media (max-width: 700px) {
	.btn-primary-apply, .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active, .btn-outline-primary, .btn-green-white-primary, .btn-green-white-primary:hover, .btn-green-white-primary:focus, .btn-green-white-primary:active {width:100%; display:block; margin: 7px 0;}
}

.green {color: #31774f;}
.green-underline {color: #31774f; border-bottom: 1px solid #ababab; margin: 0; padding: 0 0 7px 0;}

/* card-stack */
.icon-card  {color: #fff; font-size: 40px; background-color: #31774f; padding: 6px 6px 5px 6px;}
.col-card-stack {-webkit-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 47%; display: inline-block; margin: 0 0 19px 14px; }

@media (max-width: 745px) {
.col-card-stack {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    display: block;
    margin: 0 0 19px 0px;
    width: 100%;
    text-align: center;
	}
}
.card { position: relative;
display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; background-color: #fff; border: 0.1rem solid #CCC; }
.card-block { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 0px 14px 0px 15px; }
.card-stack .card:last-child {border-bottom-width: 0.1rem;}

/* Riverhawk news */
.image_right {float: right; margin: 0 0px 11px 11px; border: 2px solid #7c7c7c; box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);}
.image_left {float: left; margin: 0 11px 11px 0px; border: 2px solid #7c7c7c; box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);}
.image_block {margin: 3px; border: 2px solid #7c7c7c; box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);}

/* Image text under */
.article_graphic_right {float: right; margin: 0 0px 11px 11px; border: 2px solid #7c7c7c; box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);}
.article_graphic_left {float: left; margin: 0 11px 11px 0px; border: 2px solid #7c7c7c; box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);}
.article_graphic {width:100%; height:auto;}

/* Photos */
.photo_quarter {padding: 8px; background-color: #f1eadf; margin: 3px; width:25%;}
.photo_half {padding: 8px; background-color: #f1eadf; margin: 3px 2px; width:49%;}
.photo_three_quarter {padding: 8px; background-color: #f1eadf; margin: 3px; width:75%;}
.photo_full {padding: 8px; background-color: #f1eadf; margin: 3px; width:100%;}

/* Accordion  */
.accordion-container ul { margin:0 0 0 0;}
.ac {margin-top: 5px; border: 1px solid #eee; background-color: #fff; box-sizing: border-box;}
.ac .ac-header {margin: 0; padding: 0;}
.ac .ac-trigger {font: bold 16px 'Arial', sans-serif;  color: #111; text-align: left; width: 100%; padding: 10px 30px 10px 10px; display: block; cursor: pointer; background-color: #fbfbfb; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; position: relative; text-decoration: none; margin: 0;  border: 0;}
.ac .ac-trigger::after {content: '+'; text-align: center; width: 15px; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); position: absolute; right: 10px; top: 50%;}
.ac .ac-trigger:focus {color: #8a8a8a;}
.ac .ac-panel {padding: 0 18px; background-color: #fbfbfb;  max-height: 0; overflow: hidden;}
.ac .ac-panel .ac-text {font: 15px/24px 'Arial', sans-serif; color: #111; padding: 10px; margin: 0;}
.ac .active:after {content: "\2212" !important;}

/*   Countup Component */
.Container h2 {font-size: 46px; font-weight: 800; margin: 15px 0; line-height: 50px; text-transform: uppercase; color: #276444; text-align: center;}
.Container {margin: 0 auto; padding: 0px; font-family: "Source Sans Pro", "Verdana", sans-serif;}
.fourCol .Container>*:not(script):not(style):not(link) {display: block; margin: auto;}	
.fourCol {display: flex; justify-content: space-between; margin: 0 0 40px;}
.BlockContents {text-align: center; font-size:18px; color: black;}	
.cPageArea {margin: 0 auto; position: relative; margin: 0px !important; padding: 0px; display:inline-block; vertical-align:top; width:100%;}

/* Tabber fix */
[role="tabpanel"] {border: 1px solid !important; border-top: 1px solid #666; padding: 1.5rem !important; margin: .1rem 0 0 0;}

.page-main .tabbed ul li, .page-main .tabbed ol li {padding-bottom: 0px;}

h2.spotlight_title {font-size: 52px !important; font-family: "DINCondensed-Regular", "Arial", sans-serif !important;
font-weight: 400 !important; text-align: center; padding: 22px; text-transform: uppercase; color: #fff; background: #b9df6c; text-align: center; margin: -17px 0 0px 0;}

/* Content Box - Quick Links (Blue BG) Content Box - Quick Links (NO BG)  */
@media (max-width: 650px){
		.box-blue-new, .box-new {float:none !important; margin: 0 0 18px 0 !important; width:100% !important;}
	}


/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
/*  width: 814px; */
/*  height: 560px; */
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
  margin: 0 auto;
  text-align: center;
}
	
/* 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;
}

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

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

.flip-card-hover {float: left; text-align: left; clear: left;}

@media only screen and (max-width: 1171px){
	.flip-card {width: 100%; height: auto;}
	.flip-card-front, .flip-card-back {position: relative;}
	.flip-card-back {transform: initial;}
	.flip-card:hover .flip-card-inner {transform: initial;}	
	.flip-card-hover {display:none;}
	}

/* New Calendar Events Component */
.cal-description {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
.cal-read-more {
    padding: 0 0 7px 0;
    margin: 3px 0 0 0px !important;
}
.cal-title-lead a {text-decoration: none;}

/* Grad College Quick Links */
.GradCollege-links	{background-color: #fff; border: 1px solid #d7d7d7; padding: 0 0 8px 0;}
.GradCollege-links .titles {font-weight: 400; background: #31774f; color: #fff; padding: 8px 13px; margin: 0;}
.GradCollege-links div div a {color: #222; text-decoration: none; border-bottom: 1px dashed #31774f; }
.GradCollege-links div div {font-size: 1.3rem;  width: 45%; display: inline-block;}
.GradCollege-links div {margin: 0 0 0 12px;}
@media only screen and (max-width: 600px){
	.GradCollege-links div div {width: 100%; display: block;}
}

/* faculty-box for CBT */
.faculty-box {height: 98px; width: 48%; background-color: #fff; padding: 4px; float:left; margin: 0 10px 10px 0; border: 1px solid #ddd;}
.faculty-mug {float:left; margin: 0 8px 0 0;}
.faculty-mug img {height: 88px;}
.faculty-title {font-size: 15px; float:left; margin: 15px 0 0 5px;}
.faculty-title a {font-size: 20px;}
@media only screen and (max-width: 825px){
	.faculty-box {width: 100%; float:none;}
}

/* Staff Member Picture with Name, Title and Green Button (Vertical) */
.staff_block {display: inline-block; text-align: center; vertical-align: top; margin: 0 15px;}
.staff_block img, .staff_block1 img {border: 2px solid #7c7c7c; box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);}
img.photo_graphic {display: block; margin: 0 auto; width: auto; height: auto;}
.btn-primary2 {text-align: center; margin: 14px 0 39px 0;}