/* Department CSS Document */
/*For mobile first adaptive design place styles for mobile and up in the mobile and up area.
Place styles for tablet and up inside the media query in the tablet and up area.
Place styles for desktop only inside the media query in the desktop only area.

For questions or media query training contact Web Development Services.
*/
/* ====================== Mobile and Up ========================== */

.align-self-center { align-self: center;}

.page-header {
	margin: 0;
	padding: 40px;
}
.slim-header {
	background-color: #185C33;
	border-bottom: 12px solid #C5D97A;
	color: #fff;
	padding-top: 30px;
	padding-bottom: 30px;
}

.slim-header-row {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-between;
}


.slim-header-title {
	display: inline-grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: 1fr ;
	align-items: center;
}
.slim-header-title .section-title {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	color: #185c33;
	background-color: #C4DA79;
	padding: 5px 12px;
	font-family: "Stratum", "Rajdhani", sans-serif;
	font-size: 38px;
	display: inline-block;
	margin-right: 25px;
}

.slim-header-title .page-title {
	grid-column: 2 / 3;
	grid-row: 1 / 2;
	font-size: 32px;
	color: #fff;
	font-weight: bold;
	margin-top: 0px;
}

.slim-header-title h1 span {
	color: #C4DA79;
	font-size: 40px;
	font-weight: bold;
}

.tall-header {
	background-color: #275E38;
	background: linear-gradient(180deg,rgba(39, 94, 56, 1) 0%, rgba(39, 94, 56, 1) 75%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 1) 100%);
	padding: 100px 100px 40px 100px;
}

.tall-header-row {
	display: flex;
   flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.tall-header-row .section-title {
	display: grid;
	grid-template-rows: 2fr 1fr;
}

.tall-header .section-title h1, .program-header .section-title h1 {
	font-family: "Stratum", "Rajdhani", sans-serif;
	color: #fff;
	font-size: 70px;
	font-weight: bold;
	margin-top" 0px;"
}

.tall-header .section-title h1 span, .program-header .section-title h1 span {	
background-color: #C4DA79;
    color: #185C33;
    font-size: 58px;
    padding: 15px 20px;
    display: inline-block;
	font-weight: 600;
}

.tall-header .section-subtitle {
}

.tall-header .section-link {
	display: flex;
	justify-content: end;
	align-items: center;
}


/* Grid and Flex Helpers */
.display-grid {display: grid;}
.justify-space-between { justify-content: space-between;}
.justify-space-evenly { justify-content: space-evenly;}

/* End Grid and Flex Helpers */

/* Backgrounds and Text */
.bg-mint {	background-color: #EEF1F0; }
.bg-grey-stripe {	background-image: url(/school-of-ed/images/elements/bg-repeat-light-grey-lines.png);}
.bg-map {
	background: url(/school-of-ed/images/elements/bg-repeat-map.png) rgba(238, 241, 240, 1);
  	background-blend-mode: multiply;
}
.bg-dark-green {background-color: #154734;}
.text-meadow {color: #C5D97A;}
.bg-meadow {background-color: #C5D97A;}
.bg-wolverine-green {background-color: #008A40;}
.text-wolverine-green {color: #008A40;}
.text-108 {font-size: 108px;}

/* End Backgrounds */

/* Buttons */
a.icon-button, a.icon-button-invert {
	border-radius: 8px;    
    font-family: "Stratum", "Rajdhani", sans-serif;
    font-size: 16px;
    font-weight: 600;
    padding: 10px;
	display: inline-block;
	margin: 5px;
	border: 2px solid #185c33;
}

a.icon-button:after, a.icon-button-invert:after, a.icon-link:after {
	font-family: 'Font Awesome 5 Pro';
    position: relative;
    right: -10px;
    width: 25px;
    display: inline-block;
}

a.icon-button.right-arrow:after, a.icon-button-invert.right-arrow:after, a.icon-link.right-arrow:after {
	content: "\f061";
}

a.icon-button.down-arrow:after, a.icon-button-invert.down-arrow:after, a.icon-link.down-arrow:after {
	content: "\f063";
}

a.icon-button.external-arrow:after, a.icon-button-invert.external-arrow:after, a.icon-link.external-link:after {
	content: "\f08e";
}

a.icon-button.map-icon:after, a.icon-button-invert.map-icon:after, a.icon-link.map-icon:after {
	content: "\f279";
}

a.icon-button.edit-icon:after, a.icon-button-invert.edit-icon:after, a.icon-link.edit-icon:after {
	content: "\f044";
}

a.icon-button.gift-icon:after, a.icon-button-invert.gift-icon:after, a.icon-link.gift-icon:after {
	content: "\f06b";
}
a.icon-button.profile-icon:after, a.icon-button-invert.profile-icon:after, a.icon-link.profile-icon:after {
	content: "\f2c2";
}

a.icon-button.info-icon:after, a.icon-button-invert.info-icon:after, a.icon-link.info-icon:after {
	content: "\f05a";
}

a.icon-button.book-icon:after, a.icon-button-invert.book-icon:after, a.icon-link.book-icon:after {
	content: "\f02d";
}

a.icon-button, a.icon-button-invert:hover {
	background-color: #fff;
	 color: #185c33;
}
a.icon-button:hover, a.icon-button-invert {
	background-color: #185c33;
	color: #fff;
}

a.icon-link {
	font-family: "Stratum", "Rajdhani", sans-serif;
	font-size: 20px;
	font-weight: 600;
	margin-right: 20px;
}

p.button-overlap {
	display: inline-block;
	top: -20px;
	width: 100%;
	position: relative;
	z-index: 20;
}

a.depts-centers-button {
	background-color: #185C33;
	padding: 20px;
	border-radius: 8px;
	color: #C5D97A;
	font-size: 32px;
	font-family: "Rajdhani", "Stratum", sans-serif;
	font-weight: bold;
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	box-shadow: #cdcdcd 0 3px 6px;
}

a.depts-centers-button:hover {
	text-decoration: none;
	color: #fff;
}

/* End Buttons */

/* Lists */
ul.arrow-list {
	list-style-type: none;
    width: 80%;
	padding-left: 0px;
}

ul.arrow-list li a {	
    font-family: "Stratum", "Rajdhani", sans-serif;
    color: #185C33;
    font-weight: bold;
    font-size: 24px;	

}

ul.arrow-list li {
	border-bottom: 2px solid #d3d3d3;
}

ul.arrow-list li a:after {
    content: "\f061";
    font-family: 'Font Awesome 5 Pro';
    position: absolute;
    right: 0;
    width: 20px;
    display: inline-block;
    font-size: 16px;
}

ul.soe-secondary-nav {
	 list-style-type: none;
    padding: 10px 10px 0px 10px;
    margin: 0px;
	padding: 0px;
}

ul.soe-secondary-nav li {
   display: inline-flex;
	padding-right: 25px;
	margin-right: 20px;
	justify-content: center;
}

ul.soe-secondary-nav li a:after {
	 content: "\f061";
    font-family: 'Font Awesome 5 Pro';
    width: 16px;
    display: inline-block;
    font-size: 14px;
	align-self: center;
	position: absolute;
	right: 0px;
	
}

ul.soe-secondary-nav li a {
	color: #fff;
	font-family: "Stratum", "Rajdhani", sans-serif;
	font-size: 18px;
	border-bottom: 2px solid #154734;
}

ul.soe-secondary-nav li a:hover {
	text-decoration: none;
	color: #C5D97A;
	border-bottom: 2px solid #C5D97A;
}

ul.strategic-planning {
	list-style-type: none;
    padding-left: 0;
}

ul.strategic-planning li {
	background-color: #fff;
    display: inline-block;
    padding: 10px;
    border-radius: 8px;
    border-left: 15px solid green;
    font-family: "Stratum", "Rajdhani", sans-serif;
    font-weight: 600;
    font-size: 24px;
	box-shadow: #cdcdcd 0 3px 6px;
}

ul.ul-left-border {
	list-style-type: none;
	padding-left: 0px;
	position: relative;
}

ul.ul-left-border li {
	padding-left: 14px;
}

ul.ul-left-border li:before {
	content: '';
	width: 6px;
	height: 100%;
	position: absolute;
	background-color: #008A40;
	display: block;
	left: 0;
	top: 0;
}

ul.info-request-list {
	list-style-type: none;
	padding-left: 0px;
}

ul.info-request-list li {
	border-bottom: 4px solid #C4D6C1;
	font-family: "Rajdhani", "Stratum", sans-serif;
	font-size: 24px;
	color: #000;
}

ul.info-request-list li a {
	color: #275D38;	
}


/* Borders */
.border-repeat-meadow-lines {
	border-top: 12px solid transparent;
	border-image-source: url(/school-of-ed/images/elements/bg-repeat-meadow-lines.png);
	border-image-repeat: repeat-x;
}
.offset-border-v1:before {
	content: '';
    width: 100%;
    height: 100%;
    border: 2px solid #008A40;
    border-radius: 8px;
    display: block;
    position: absolute;
    left: 3px;
    top: -5px;
	z-index: 5;
}

.offset-border-v1:after {
	content: '';
    width: 100%;
    height: 100%;
    border: 2px solid #C5D97A;
    border-radius: 8px;
    position: absolute;
    display: block;
    left: -5px;
    top: 3px;
	z-index: 10;
}

.offset-border-v1, .offset-border-v2 {
	position: relative;
}

.offset-border-v2:before {
	content: '';
    width: 100%;
    height: 100%;
    border: 2px solid #C5D97A;
    border-radius: 8px;
    display: block;
    position: absolute;
    left: 3px;
    top: 0px;
	z-index: 5;
}

.offset-border-v2:after {
	content: '';
    width: 100%;
    height: 100%;
    border: 2px solid #008A40;
    border-radius: 8px;
    position: absolute;
    display: block;
    left: -5px;
    top: -8px;
	z-index: 10;
}

/*.img-multi-border:before {
	content: '';
    background-image: url(/school-of-ed/images/elements/bg-repeat-wolverine-box.png);
    width: 45%;
    height: 55%;
    position: absolute;
    top: 2%;
    right: 1%;
    display: block;
    z-index: 1;
    background-size: cover;
}

.img-multi-border:after {
	content: '';
    background-image: url(/school-of-ed/images/elements/bg-repeat-meadow-box.png);
    width: 45%;
    height: 55%;
    position: absolute;
    top: 41%;
    right: 54%;
    display: block;
    z-index: 2;
    background-size: cover;
}

.img-multi-border img, .img-meadow-border img {
	z-index: 10;
    position: relative;
    width: 100%;
}

.img-meadow-border:before {
	content: '';
    background-image: url(/school-of-ed/images/elements/bg-repeat-meadow-box.png);
    width: 45%;
    height: 55%;
    position: absolute;
    top: 1%;
    right: 1%;
    display: block;
    z-index: 1;
    background-size: cover;
}*/



/* End Borders */



/* Headers */
h2 {font-family: "Rajdhani", sans-serif; font-size: 48px; font-weight: 600;}
/* End Headers */

/* Homepage Sections */
.home-header {
	grid-template-columns: 1fr;
}
.home-header h1 { color: #fff; font-weight: 600; font-size: 70px; }
h1 span.header-highlight {
	background-color: #c5d97a;
	padding: 20px;
	color: #185c33;
	font-size: 58px;
	margin-bottom: 20px;
	display: inline-block;
}

.home-announcements {
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
}


.announcement-card {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 1fr;
	align-items: center;
	padding: 10px;
	border-radius: 8px;
	background-color: #fff;
	box-shadow: #cdcdcd 0 3px 6px;
	position: relative;
}
.announcement-card:before {
	font-family: "Fontawesome";
	content: '\f061';
    color: #185c33;
    width: 15px;
    height: 16px;
    font-size: 16px;
    display: inline-block;
    position: absolute;
    bottom: 10px;
    right: 10px;
}


.announcement-img img {
	border-radius: 8px;
}
.announcement-content {
	padding: 12px;
	font-family: "Stratum", "Rajdhani", sans-serif; font-size: 15px; font-weight: 800; color: #000; text-align: center;
}

a.announcement-card-link:hover .announcement-date {text-decoration: none;}

.announcement-card .announcement-date {	font-family: "Statum", "Rajdhani", sans-serif; font-size: 20px; color: #000; text-align: center; font-weight: bold;}

.announcement-card hr {
	margin-top: 8px;
	margin-bottom: 8px;
}


/* Testimonial Quote Cards */
.quote-card {
	border-radius: 8px;
	background-color: #fff;
	height: 100%;
	display: flex;
	flex-direction: column;
	box-shadow: #cdcdcd 0 3px 6px;
}
.quote-card-icon { padding: 20px; }
.quote-card-quote { padding: 0px 45px 20px 45px; font-size: 18px;}
.quote-card-name { background-color: #185C33; color: #fff; padding: 20px; text-align: center; font-family: "Stratum", "Rajdhani", snas-serif;  border-radius: 0px 0px 8px 8px; margin-top: auto; }
/* End Testimonial Quotes */

/* Degrees Grid */
.degrees-grid {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 10px;
}

/* End Degrees Grid */

/* Resources Section */

.resource-card {background-color: #fff;
    border-radius: 8px;
    box-shadow: #cdcdcd 0 3px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding-bottom: 20px;
}
.resource-card-title h3 {font-family: 'Rajdhani', sans-serif;
    margin-top: 20px;
    margin-bottom: 10px;
    font-weight: bold;
    color: #275d38;
    font-size: 32px;
}
.resource-card-img img {border-radius: 8px 8px 0px 0;}
.resource-card-link {padding: 20px; margin-top: auto;}

/* End resources */


/* End Homepage Sections */

/* About Pages */
.values-card {
	display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
	align-items: flex-start;
}


.values-card h3 {
	background: #185C33;
	font-family: "Stratum", "Rajdhani", sans-serif;
	color: #fff;
	padding: 8px;
	font-size: 24px;
	margin-top: 0px;
	display: inline-block;
}

.values-card img {
	border-radius: 8px;
}

.lecture-card {
	display: flex;
	flex-direction: column;
}

/* Lecture Series */

.lecture-card img {
	border-radius: 8px;
	box-shadow: #cdcdcd 0 3px 6px;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	width: 100%;
}

.lecture-card-title {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.lecture-card-title h3, .lecture-card-title p {
	font-family: "Stratum", "Rajdhani", sans-serif;
	color: #000;
	font-size: 20px;
	margin: 0px 5px;
	font-weight: 600;
}

.lecture-series-modal {
	background-color: #fff;
	color: #000;
	border-radius: 8px;
	padding: 20px;
}

.lecture-series-modal h3 {
	color: #185C33;
	font-size: 48px;
	border-bottom: 5px solid #C5D97A;
	font-weight: bold;
}

.lecture-series-modal h4 {
	color: #185C33;
	font-size: 27px;
	font-weight: bold;
}

.lecture-modal-img img {
	border-radius: 8px;
}


/* End Lecture Series */

/* Maps Card */

.map-card {}

.map-card .map-icon {
	top: 50px;
	right: 70px;
}

.map-card img {
	border-radius: 8px 8px 0 0;
}

.map-card p {
	font-family: "Rajdhani", "Stratum", sans-serif;
	font-size: 18px;
	color: #265D3A;
	font-weight: bold;
}

.map-card a {
	text-decoration: underline;
	color: #265D3A;
}

.map-card a:hover {
	text-decoration: none;
}

/* End Maps Card */

.advising-info-title {
	border-radius: 8px 8px 0 0;
}

/* Anchor Tab Styles */

ul.tabs.soe-tabs {
	list-style-type: none;
	padding-left: 0px;
}

ul.tabs.soe-tabs li {
	    display: inline-block;
    margin: 5px 3px;
    padding: 3px;
}

ul.tabs.soe-tabs li a {
	background-color: #EBEBEB;
	color: #000;
	padding: 5px;
	border-radius: 8px;
}

ul.tabs.soe-tabs li a:hover {
	background-color: #185C33;
	color: #fff;
	text-decoration: none;
}

/* End Anchor Tab */

/* Dept and Program Pages */

.news-story-card a {
	text-decoration: underline;
	color: #185C33;
}

.news-story-card a:hover {
	text-decoration: none;
}



/*End mobile and up styles*/
/* ====================== Tablet and Up (Overrides Mobile Styles) ========================== */
@media only screen and (min-width: 768px) {

.page-header {
	padding: 80px;
}	
	
.slim-header-row {
	flex-direction: row;
	flex-wrap: nowrap;
}
	
.slim-header img {
	max-width: 550px;
}
	
/* Homepage Sections */
.home-header {
	grid-template-columns: 1fr 1fr;
}
	.home-announcements {
	grid-template-rows: 1fr;
	grid-template-columns: 1fr 1fr 1fr;
}
	
/* Degrees Grid */
.degrees-grid {
	width: 80%; 
	margin: 0px auto;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
}

/* End Degrees Grid */

.announcement-card {	
	grid-template-columns: 1.5fr 1fr;
	grid-template-rows: 1fr;
}
	
.announcement-card:before {
    top: 3px;
    right: 5px;
}
	
/* Resources Section */

/* End resources */

/* End Homepage Sections */
	
}

/*end media query*/
/*End tablet and up styles*/
/* ====================== Landscape Tablet and Up (Overrides Mobile Styles) ========================== */
@media only screen and (min-width: 992px) {
	
	
	.lecture-series-modal {	
	padding: 40px;	
	}
	
}

/*end media query*/
/*End landscape tablet and up styles*/
/* ====================== Desktop Only (Overrides Mobile and Tablet Styles) ========================== */
@media only screen and (min-width: 1200px) {
	
	
}

/*end media query*/
/*End desktop only styles*/
/*END OF DOCUMENT*/