/* ========================================

            MODAL

======================================== */
#modalWrap {
	z-index: 100;
	display: none;
	position: absolute;
	top: 40px;
	width: 100%;
	font-family: 'Arial', Helvetica, sans-serif;
}
#modal {
	display: block;
	position: relative;
	margin: 0 auto;
	padding: 12px;
	width: 100%;
	max-width: 560px;	
	background-color: #FFF;
	box-shadow: 0 0 12px #CCC;
	box-sizing: border-box;
}
@media only screen and (max-width: 560px) { 
	#modalWrap { top: 0; height: 100%; }
	#modal { min-height: 100%; } 
}
/* modal close button */
.close-modal {
	position: absolute;
	top: -32px;
	right: 0;
	width: 32px;
	height: 32px;
	font-size: 28px;
	font-weight: bold;
	color: #CCC;
	background-color: transparent;
	border: 0;
	outline: 0;

}
@media only screen and (max-width: 560px) {
	.close-modal { top: 0; font-size: 12px; color: #CCC; }
}
/* Header
*/
.modal-head {
	display: -webkit-box;
	display: -moz-box;
	display: box;

	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flexbox;
	display: flex;

	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;

	-webkit-justify-content: center;
	-moz-justify-content: center;
	-ms-justify-content: center;
	justify-content: center;

	-webkit-align-items: center;
	-moz-align-items: center;
	-ms-align-items: center;
	align-items: center;

	-webkit-flex-direction: column;
	flex-direction: column;
	text-align: center;
	box-sizing: border-box;
}
.modal-head > span { display: block; padding: 0px 12px; box-sizing: border-box; }
@media only screen and (min-width: 561px) {
	.modal-head {
		-webkit-flex-direction: row;
		flex-direction: row;
	}
	.modal-head > *:first-child { border-right: 1px solid #000; }
}
/* logo image */
.logo-img { 
	width: 40%; 
	overflow: hidden;
}
.logo-img > img { 
	display: block;
	width: 100%;
	max-width: 100%;
}
/* funder line */
.funder-line {
	width: 60%;
	font-size: 0.85rem;
}
.funder-line > p {
	margin: 0;
	padding: 12px 8px;
	min-height: 40px;
	font-family: inherit;
	font-size: 0.65em;
	background-color: #E2F3F3;
	height: 100%;
}
/* page title */
.title-txt { 
	margin-top: 20px; 
	width: 100%; 
	font-size: 1.75em;
	font-weight: bold;
}
@media only screen and (max-width: 560px) {
.logo-img {  width: 224px; order: 1; }
.funder-line { order: 3; width: 100%; border: 1px solid #409DA3; }
.funder-line > p { color: #6E7A82; background-color: transparent; }
.title-txt { padding: 24px 0; color: #FFF; background-color: #409DA3; order: 2; }
}
/* Content
*/
.modal-content {
	margin-top: 12px;
	font-size: 0.85rem;
}
.tbl-row { 
	display: -webkit-box;
	display: -moz-box;
	display: box;

	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flexbox;
	display: flex;

	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;

	-webkit-flex-direction: row;
	flex-direction: row;

	margin: 0;
	padding: 8px 0;

	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	text-align: center;
}
/* table header */
.tbl-row.header {
	font-size: 0.8em;
	font-weight: bold;
	text-transform: uppercase;
	color: #609395;
	background-color: #E3F2F5;
}
/* table rows */
.tbl-row:nth-child(n+2) {
	padding-bottom: 12px;
	border-bottom: 1px solid #CCC;
}
/* table columns */
.tbl-col { 
	display: block;
	margin: 0;
	padding: 0 4px;
	width: 100%;
	overflow: hidden; 
	box-sizing: border-box;
}
.col-faculty { max-width: 20%; }
.person-profile { display: block; margin: 0 auto; width: 60%; }
.person-image { display: block; max-width: 100%; }
.person-name { display: block; font-weight: bold; text-align: left; text-transform: capitalize; }

.col-course { text-align: left; }
.col-course > a { color: inherit; text-decoration: none; }
.col-course > a:hover { text-decoration: underline; }

.col-completed { max-width: 22%; }