/* 
This is the section css for
Commencement 
*/




/************GLOBAL USE AROUND SITE************/

/*  CRUCIAL COMPONENT FOR OMNI */
/* publish this to LIVE production - COMMENT OUT FOR PRODUCTION */
.hdnLink{
	position:absolute;
	left:-10000px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}

/* publish this to production - COMMENT OUT FOR LIVE */
/* .hdnLink{
	display: block;
} */


#home-content .horizontalMenu ul a:visited{
	color: #fff;
}
#home-content .horizontalMenu ul a:hover{
	color: rgb(255, 189, 7);
}
.pageWrapper{
	padding-bottom: 0;
}
#home-content h2{
	margin-top: 20px;
	color: #441F49;
	font-size: 2.7em;
	line-height: 1.2em;
	text-transform: uppercase;
}
#home-content h2.leftPad{
	padding-left: 20px;
}
#home-content h3{
	color: #441F49;
	font-size: 2em;
	border-bottom: none;
}
#home-content h3:after{
	background: none;
}
#home-content #accordion h3{
	font-size: 1.3em;
}
#ugHP img{
	width: 100%;
}
.topHPSection{
	float: left;
	width: 100%;
	padding: 0px 60px;
}
#home-content .topHPSection .grid3{
	padding: 0px 10px;
}
#home-content .topHPSection .grid4{
	padding: 0px 10px;
}
.midHPSection{
	float: left;
	width: 100%;
	padding: 0px 60px;
}
#home-content .midHPSection .grid4 .row-responsive{
	margin: 0;
}
#home-content .midHPSection .grid4 span{
	display: block;
	text-align: center;
	font-weight: bold;
}
#home-content .midHPSection .grid4, #home-content .midHPSection .grid6, #home-content .midHPSection .grid8{
	padding: 0px 10px;
}
.ugFooter{
	background-color: #441F49;
	float: left;
	width: 100%;
	padding: 40px 60px;
}
#home-content .ugFooter .grid4{
	padding: 10px;
}


/*********** BLOCK BTNS FOR ALL PAGES ************/
.ugBtn{
	padding: 20px;
	color: #fff;
	width: 100%;
	display: block;
	text-align: center;
	text-decoration: none;
}
#home-content .ugBtn:visited{
	color: #fff;
}
.topHPSection .matchBtn{
	padding: 70px 10px;
}
.matchBtn{
	font-size: 2em;
	line-height: 1em;
	font-weight: bold;
	transition: all .2s ease-in-out;
}
.matchBtn:hover{
	transform: scale(1.02);
}
.matchImg{
	font-size: 2.4em;
	line-height: 1em;
	font-weight: bold;
	position: relative;
	transition: all .2s ease-in-out;
}
.matchImg:hover{
	transform: scale(1.02);
}
.matchImg .vertBtn{
	position: relative;
	top: 35%;
	-webkit-transform: translateY(-35%);
	-ms-transform: translateY(-35%);
	transform: translateY(-35%);
}
.matchImg .vertBtn span{
	font-size: 2em;
	line-height: 1em;
}
.lastMidSection .matchImg .vertBtn{
	position: relative;
	top: 25%;
	-webkit-transform: translateY(-25%);
	-ms-transform: translateY(-25%);
	transform: translateY(-25%);
}
.matchImg .vb1{
	top: 33%;
}
.lastMidSection .matchImg .vb2{
	top: 35%;
	font-size: 1.2em;
}
.purpleBtn{
	background-color: #441F49;
}
.orangeBtn{
	background-color: #F67519;
}
.blueBtn{
	background-color: #3873AB;
}
.greenBtn{
	background-color: #ACBA2F;
}
.yellowBtn{
	background-color: #FFBD07;
}
.lightGrayBtn{
	background-color: #5F5F5F;
}
.darkGrayBtn{
	background-color: #3B3B3B;
}
.ugFooter .purpleBtn{
	background-color: #441F49;
	border: solid 3px #fff;
	box-sizing: border-box;
}
.ugFooter .purpleBtn:hover{
	color: #FFBD07 !important;
}
#home-content #tileSection{
	padding: 20px 80px 30px 80px;
}
#home-content #tileSection .grid3{
	padding: 0px 20px;
}
#home-content #tileSection .grid4{
	padding: 0px 20px;
}
#home-content #tileSection .tile{
	display: block;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	background-color: #441F49;
	padding: 60px 10px 60px 10px;
	color: #fff;
	font-size: 2.5em;
	font-weight: bold;
	line-height: 1.2em;
}
#home-content #tileSection .tile:hover{
	color: #D9AA2A;
}


/*******	FACULTY PAGE	*******/
#facultyPage .topHPSection{
	padding: 0px 30px;
}
#facultyPage .midHPSection{
	padding: 0px 30px;
}
#topGraySection{
	background-color: #eee;
	padding: 0px 30px;
	float: left;
}
#home-content #topGraySection .grid7{
	padding-left: 20px;
}
.twitterSection{
	overflow-y: scroll;
}


/*******	COMMENCEMENT PAGE	*******/
#commencementPage{
	position: relative;
}
#home-content #commencementPage img:first-of-type{
	width: 100%;
}
#imageHolder{
	position: relative;
}
#scheduleNav{
	position: absolute;
	bottom: 10%;
	text-align: center;
	width: 100%;
}
#home-content #scheduleNav a{
	display: inline-block;
	text-align: center;
	padding: 20px 40px;;
	background: rgba(255,255,255, 0.7);
	color: #441F49;
	text-decoration: none;
	font-weight: bold;
	font-size: 2em;
	line-height: 1.2em;
}
#home-content #scheduleNav .grid6{
	padding: 0px 10px;
}
#home-content #scheduleNav .grid6:first-of-type a{
	float: right;
}
#home-content #scheduleNav .grid6:last-of-type a{
	float: left;
}
#home-content #scheduleNav a::after {
    content: '';
    display: block;
    width: 0;
    height: 4px;
	margin-top: 5px;
    background: #FFBD07;
    transition: width .3s;
}
#home-content #scheduleNav a:hover::after {
    width: 100%;
    transition: width .3s;
}
#home-content .emphasizedText{
	margin-top: -10px;
	font-size: 1.5em;
	font-weight: bold;
}
#scheduleArea{
	width: 100%;
	text-align: center;
}
#byChronological{
	display: inline-block;
	margin: 0 auto;
	text-align: left;
}
#byCollege{
	text-align: left;
}


/*	CARD SECTION FOR COMMENCMENT PAGE	*/
.card{
	padding: 20px;
	border: 3px solid #eee;
}
#artsHumanitiesGrid .card{
	border-top: 5px solid #441F49;
}
#scienceMathematicsGrid .card{
	border-top: 5px solid #3873AB;
}
#cbpmGrid .card{
	border-top: 5px solid #F67519;
}
#educationSocialWorkGrid .card{
	border-top: 5px solid #ACBA2F;
}
#graduateGrid .card{
	border-top: 5px solid #FFBD07;
}
#healthSciencesGrid .card{
	border-top: 5px solid #5F5F5F;
}
#universityCollegeGrid .card{
	border-top: 5px solid #3B3B3B;
}
#wellsMusicGrid .card{
	border-top: 5px solid #700C0C;
}
#phillyCampusGrid .card{
	border-top: 5px solid #D9D9D9;
}

#home-content .cardTitle{
	font-size: 1.2em;
	font-weight: bold;
}
#home-content #artsHumanitiesGrid .card .cardTitle, #home-content #artsHumanitiesGrid .card .dateTime{
	color: #441F49;
}
#home-content #scienceMathematicsGrid .card .cardTitle, #home-content #scienceMathematicsGrid .card .dateTime{
	color: #3873AB;
}
#home-content #cbpmGrid .card .cardTitle, #home-content #cbpmGrid .card .dateTime{
	color: #F67519;
}
#home-content #educationSocialWorkGrid .card .cardTitle, #home-content #educationSocialWorkGrid .card .dateTime{
	color: #ACBA2F;
}
#home-content #graduateGrid .card .cardTitle, #home-content #graduateGrid .card .dateTime{
	color: #FFBD07;
}
#home-content #healthSciencesGrid .card .cardTitle, #home-content #healthSciencesGrid .card .dateTime{
	color: #5F5F5F;
}
#home-content #universityCollegeGrid .card .cardTitle, #home-content #universityCollegeGrid .card .dateTime{
	color: #3B3B3B;
}
#home-content #wellsMusicGrid .card .cardTitle, #home-content #wellsMusicGrid .card .dateTime{
	color: #441F49;
}

#home-content .cardTitle span{
	font-size: .7em;
	color: #474747;
	margin-top: 10px;
}
#home-content .dateTime{
	font-weight: bold;
}
#home-content tr:first-of-type .tableLeft p{
	color: #fff;
}

/* New Grad Commencement */
#home-content .midHPSection .grid9 .grid6{
	padding-left: 0px;
	padding-right: 20px;
}



@media only screen and (max-width:1400px){
	.matchImg .vb1{
		top: 15%;
	}
}

@media only screen and (max-width:1366px){
	#home-content #tileSection{
		padding: 0px 60px 20px 60px;
	}
}

@media only screen and (max-width:1280px){
	.matchBtn{
		font-size: 1.8em;
	}
	.matchImg{
		font-size: 2em;
	}
	#home-content #tileSection .grid3{
		padding: 0px 10px;
	}
	.matchImg .vb1{
		top: 25%;
	}
	#home-content .topHPSection{
		padding: 0px 30px;
	}
	#home-content .midHPSection{
		padding: 0px 30px;
	}
}

@media only screen and (max-width:1120px){
	.matchBtn{
		font-size: 1.4em;
	}
	.matchImg .vb1{
		top: 15%;
	}
}

@media only screen and (max-width:1024px){
	.ugFooter .matchBtn{
		padding: 10px 5px;
	}
	#home-content #tileSection{
		padding: 0px 40px 20px 40px;
		font-size: 1.5em;
	}
	#home-content #tileSection .grid3{
		padding: 10px;
		width: 50%;
	}
	.matchImg .vb1{
		top: 5%;
	}
	.lastMidSection .matchImg .vb2{
		top: 25%;
	}
}

@media only screen and (max-width:910px){
	.topHPSection .matchBtn{
		padding: 40px 10px;
	}
	#home-content .topHPSection{
		padding: 0px 20px;
	}
	#home-content .topHPSection .grid3{
		padding: 0px 5px;
	}
	.midHPSection{
		padding: 0px 20px;
	}
	#home-content #tileSection{
		font-size: 1.3em;
	}
}

@media only screen and (max-width:768px){
	.ugFooter .matchBtn{
		padding: 20px 20px;
	}
	.ugFooter{
		padding: 20px 10px;
	}
	.matchBtn{
		font-size: 2em;
	}
	.matchImg{
		font-size: 2em;
	}
	.btnSection{
		display: none;
	}
	#home-content h2{
		padding: 10px 40px 10px 20px;
	}
	#tileSection{
		display: none;
	}
	.matchImg .vertBtn span{
		font-size: 2em;
		line-height: 1em;
	}
	#home-content .hpImage{
		margin-bottom: 20px;
	}
	#home-content .midHPSection{
		padding: 0px 20px;
	}
	#home-content .midHPSection .ugBtn, #home-content .midHPSection .grid4, #home-content .midHPSection .grid6, #home-content .topHPSection .grid3, #home-content .midHPSection .grid8{
		padding-left: 0;
		padding-right: 0;
	}
	/* publish this to production - COMMENT OUT FOR LIVE */
	#home-content .hdnLink{
		display: block;
	}
}

@media only screen and (max-width:640px){
	.ugFooter .matchBtn{
		font-size: 1.6em;
	}
	#home-content .hpImage{
		display: none;
	}
	.matchImg{
		font-size: 1.4em;
	}
}

/*******	STUDENT PAGE	*******/

#studentPage .playBtn {display: none;}
#studentPage #accordion h3{
	font-size: 16px;
}

#studentPage #accordion{
	padding-right: 20px;
}

#studentPage #graduateChecklistBtn{
	font-size: 18px;
}

#studentPage #graduateBtnContainer{
	width: 40%;
}

@media only screen and (max-width:1280px){
	#studentPage #graduateBtnContainer{
		width: 50%;
	}
}


@media only screen and (max-width:1024px){
	#studentPage #graduateBtnContainer{
		width: 70%;
	}
}

@media only screen and (max-width:768px){
	#studentPage #graduateBtnContainer{
		width: 70%;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	#scheduleNav{
		display: none;
	}
	#byCollege{
		display: none;
	}
	#byChronological{
		display: block;
		height: auto;
	}
	.hdnLink{
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		display: block;
		height: auto;
	}
}

/*******	FAQ PAGE	*******/

#faqPage #accordion h3{
	font-size: 16px;
}

#faqPage #accordion{
	padding-right: 20px;
}


/*******	PARKING PAGE	*******/
#parkingPage h2, #parkingPage h3{
	margin: 5px 0px;
}




#faqPage .headerImage img{
	width: 100%;
}

@media only screen and (max-width:768px){
	#faqPage .headerImage img{
		display: none;
	}
}

/*******	TICKET PAGE	*******/
#ticketsPage .headerImage img{
	width: 100%;
}

@media only screen and (max-width:768px){
	#ticketsPage .headerImage img{
		display: none;
	}
}











#home-content .linkWrapper a img{
	width:100%;
}

#home-content #phillyCampus span.panelTitle{
	width: 100% !important;
}
#phillyCampus{
	padding-right: 10px;
}

#home-content #homePage .grid6, #home-content #homePage .grid12 {
	padding: 0px 5px;
}