@import url('reset.css');

/* General Demo Style */
body{font-family: 'Lato', sans-serif;;font-size:14px;}

p { color: #FFFFFF; 
	font-family: 'Lato', sans-serif;;
	text-shadow: 1px 1px 1px #000000;
	line-height:18px;
	font-size:14px;}

.foottxt{ color: #FFF; font-family: 'Lato', sans-serif; line-height:16px; text-align:left; font-size:12px; }			
#footer a {color: #FFFFFF;}
#footer a:hover {color: #7DD2EC; }

a{color:#000;text-decoration:none;}
.row {width:590px;clear:inherit;height:45px;}
.clr{clear:both;}

h1 {
	margin-bottom:5px;
	font-size:20px;
	text-transform:uppercase;
	color:#000;
	text-shadow: 1px 1px 1px #99BCB4;
	font-family: 'Dosis', sans-serif;
	text-align:left;
	display:block;
}
	
h3 { font-size:20px; color:#CCC; font-family: 'Dosis', sans-serif; text-align:left; }

h5{
	margin-bottom:0px;
	margin-top:10px;
	font-size:25px;
	color:#FFF;
	font-family: 'Dosis', sans-serif;
	text-align:center;
}

h2{
	margin-bottom:0px;
	margin-top:0px;
	font-size:23px;
	padding-left:14px;
	padding-top:3px;
	color:#FFF;
	font-family: 'Dosis', sans-serif;
	height:90px;
	text-transform:uppercase;
	/* background: url(https://www.uphs.upenn.edu/network/images/network_back.png) no-repeat;*/
}

/* Header Style */

.header{
	height:25px;
	line-height:24px;
	font-size:13px;
	background:#222836;
	opacity:0.9;
	text-transform:uppercase;
	z-index:4;
}
.header a{
	padding:5px 10px;
	letter-spacing:1px;
	text-shadow:1px 1px 1px #000;
	color:#ddd;
	text-align:right;
}
.header a:hover{ color:#fff; }
.header a span{ font-weight:bold; }
.header span.right_ab{ position:absolute; right:4px; }

.iconbox_win{
    content: "";
    display: block;
    background: url("https://www.uphs.upenn.edu/network/images/windowslogo.png") no-repeat;
    height: 20px;
    float: left;
    margin: 0 6px 5px 0;
	padding-left:30px;
}

.iconbox_quick{
    content: "";
    display: block;
    background: url("https://www.uphs.upenn.edu/network/images/quickdownload.png") no-repeat;
    height: 20px;
    float: left;
    margin: 0 6px 5px 0;
	padding-left:30px;
}
.iconbox_apple{
    content: "";
    display: block;
    background: url("https://www.uphs.upenn.edu/network/images/appleicon.png") no-repeat;
    height: 20px;
    float: left;
    margin: 0 6px 5px 0;
	padding-left:30px;
}

.iconbox_android{
    content: "";
    display: block;
    background: url("https://www.uphs.upenn.edu/network/images/androidlogo.png") no-repeat;
    height: 20px;
    float: left;
    margin: 0 6px 5px 0;
	padding-left:30px;
}

.iconbox_gprotect{
    content: "";
    display: block;
    background: url("https://www.uphs.upenn.edu/network/images/gprotectlogo.png") no-repeat;
    height: 20px;
    float: left;
    margin: 0 6px 5px 0;
	padding-left:30px;
}
.iconbox_msg{
    content: "";
    display: block;
    background: url("https://www.uphs.upenn.edu/network/images/securemsg.png") no-repeat;
    height: 20px;
    float: left;
    margin: 0 6px 5px 0;
	padding-left:30px;
}
.iconbox_tview{
    content: "";
    display: block;
    background: url("https://www.uphs.upenn.edu/network/images/teamview.png") no-repeat;
    height: 20px;
    float: left;
    margin: 0 6px 5px 0;
	padding-left:30px;
}




    .courses-container {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 0;
}

.course {
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
	display: flex;
	max-width: 100%;
	margin: 20px;
	overflow: hidden;
	width: 700px;
    height: 170px;
}

.course h6 {
	opacity: 0.6;
	margin: 0;
	letter-spacing: 1px;
	text-transform: uppercase;
    
}

.course h2 {
	letter-spacing: 1px;
	margin: 10px 0;
}

.course-preview {

	color: #000;

	max-width: 200px;
}

.course-preview a {
	color: #fff;
	display: inline-block;
	font-size: 12px;
	opacity: 0.6;
	margin-top: 30px;
	text-decoration: none;
}

.course-info {
	padding: 30px;
	position: relative;
	width: 100%;
}

.progress-container {
	position: absolute;
	top: 30px;
	right: 30px;
	text-align: right;
	width: 150px;
}

.progress {
	background-color: #ddd;
	border-radius: 3px;
	height: 5px;
	width: 100%;
}

.progress::after {
	border-radius: 3px;
	background-color: #2A265F;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 5px;
	width: 66%;
}

.progress-text {
	font-size: 10px;
	opacity: 0.6;
	letter-spacing: 1px;
}

.btn {
	background-color: #222836;
	border: 0;
	border-radius: 50px;
	box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
	color: #fff;
	font-size: 16px;
	padding: 12px 25px;
	position: absolute;
	bottom: 30px;
	left: 30px;
	letter-spacing: 1px;
}