/* 
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;
}
#home-content .bronzeFont{
	color: #D4A129;
}
#home-content .greenFont{
	color: #00660C;
}
/* publish this to production - COMMENT OUT FOR LIVE */
/* .hdnLink{
display: block;
}  */

.horizontalMenu ul li a{
	color: #6e3061 !important;
}

.covidMessage{
	padding: 40px;
	padding-left: 50px;
	background-color: #fff;
	float: left;
	width: 100%;
}
.insideMessage{
	padding-left: 20px;
	border-left: 5px solid #FF0000;
}
.top-no-play svg{
	display: none;
}


#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 h3{
	color: #382140;
	font-size: 2em;
}
#home-content #accordion h3, #home-content .accordion h3{
	font-size: 1.3em;
}
#ugHP img{
	width: 100%;
}
#home-content .grid3{
	padding-right: 20px;
}
.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;
}
.midHPSectionSchedule{
	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;
}
#home-content .midHPSectionSchedule .grid4 .row-responsive{
	margin: 0;
}
#home-content .midHPSectionSchedule .grid4 span{
	display: block;
	text-align: center;
	font-weight: bold;
}
#home-content .midHPSectionSchedule .grid4, #home-content .midHPSectionSchedule .grid6, #home-content .midHPSectionSchedule .grid8{
	padding: 0px 10px;
}
.ugFooter{
	background-color: #382140;
	float: left;
	width: 100%;
	padding: 40px 60px;
}
#home-content .ugFooter .grid4{
	padding: 10px;
}
#home-content .imgLeft{
	float: left;
	margin: 0px 10px 10px 0px;
}
#home-content .imgRight{
	float: right;
	margin: 0px 0px 20px 20px;
}
#home-content .requestTickets{
	text-align: center;
}
#home-content p.purpleContent{
	font-weight: bold;
	text-transform: uppercase;
	font-size: 1.5em;
	background: #382140;
	padding: 10px;
	color: #FFF;
	line-height: 1.5em;
}
#home-content .gridLeft{
	padding-right: 10px;
}
#home-content .btnFull{
	width: 100%;
}
#home-content .btnRight{
	float: right;
	margin-left: 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;
}
#home-content .rainDateLarge{
	display: none;
}
#home-content .grid12 #commencementHP .grid2{
	padding-right:10px;
}
#home-content .fullImage{
	width: 100%;
	padding: 0px 10px;
	margin: 30px 0px;
}
.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: #382140;
}
.orangeBtn{
	background-color: #923C07;
}
.blueBtn{
	background-color: #3873AB;
}
.greenBtn{
	background-color: #575D18;
}
.yellowBtn{
	background-color: #FFE800;
}
.lightGrayBtn{
	background-color: #5F5F5F;
}
.darkGrayBtn{
	background-color: #3B3B3B;
}
.ugFooter .purpleBtn{
	background-color: #382140;
	border: solid 3px #fff;
	box-sizing: border-box;
}
.ugFooter .purpleBtn:hover{
	color: #FFE800 !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: #382140;
	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;
	width: 100%;
}
#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;
	margin-top: -10px;
}
#home-content #imageHolder h2{
	position: absolute;
	top: 28%;
	text-align: center;
	color: #fff;
	width: 100%;
	font-size: 3em;
	font-weight: normal;
}
#home-content #imageHolder h2 span{
	color: #FFE800;
	font-weight: bold;
}
#scheduleNav{
	/* 	position: absolute;
	bottom: 10%; */
	text-align: center;
	width: 100%;
	margin-bottom: 50px;
	display: block;
	float: left;
}
#home-content #scheduleNav a{
	display: inline-block;
	text-align: center;
	padding: 20px 40px;;
	background: rgba(255,255,255, 0.7);
	color: #382140;
	text-decoration: none;
	font-weight: bold;
	font-size: 2em;
	line-height: 1.2em;
}
#home-content #scheduleNav .grid4, #home-content #scheduleNav .grid6{
	padding: 0px 10px;
}
/* #home-content #scheduleNav .grid4:first-of-type a{
float: right;
}
#home-content #scheduleNav .grid4:last-of-type a{
float: left;
} */
#home-content #scheduleNav a::after {
	content: '';
	display: block;
	width: 0;
	height: 4px;
	margin-top: 5px;
	background: #FFE800;
	transition: width .3s;
}
#home-content #scheduleNav a:hover::after {
	width: 100%;
	transition: width .3s;
}
#home-content .emphasizedText{
	margin-top: -10px;
	font-size: 1.7em;
	font-weight: bold;
}
#scheduleArea{
	width: 100%;
	text-align: center;
}
#byChronological{
	display: inline-block;
	margin: 0 auto;
	text-align: left;
}
#byCollege{
	text-align: left;
}
#home-content .centerText{
	margin: 40px 0px 30px 0px;
}

/*	CARD SECTION FOR COMMENCMENT PAGE	*/
.card{
	padding: 20px;
	border: 3px solid #eee;
}
#artsHumanitiesGrid .card{
	border-top: 5px solid #382140;
}
#kenteGrid .card{
	border-top: 5px solid #6e3061;
}
#scienceMathematicsGrid .card{
	border-top: 5px solid #3873AB;
}
#cbpmGrid .card{
	border-top: 5px solid #923C07;
}
#educationSocialWorkGrid .card{
	border-top: 5px solid #575D18;
}
#kenteGrid .card{
	border-top: 5px solid #9a0000;
}
#graduateGrid .card{
	border-top: 5px solid #7A4B00;
}
#healthSciencesGrid .card{
	border-top: 5px solid #5F5F5F;
}
#universityCollegeGrid .card{
	border-top: 5px solid #3B3B3B;
}
#wellsMusicGrid .card{
	border-top: 5px solid #700C0C;
}
#phillyCampusGrid .card, #hcGrid .card{
	border-top: 5px solid #D9D9D9;
}
#honorsGrid .card{
	border-top: 5px solid #F33;
}
#ucGrid .card{
	border-top: 5px solid #6e3061;
}
#hcGrid .card{
	border-top: 5px solid #ffe800;
}

#home-content .cardTitle{
	font-size: 1.4em;
	font-weight: bold;
	margin-bottom: 5px;
}
#home-content #artsHumanitiesGrid .card .cardTitle, #home-content #artsHumanitiesGrid .card .dateTime{
	color: #382140;
}
#home-content #scienceMathematicsGrid .card .cardTitle, #home-content #scienceMathematicsGrid .card .dateTime{
	color: #3873AB;
}
#home-content #cbpmGrid .card .cardTitle, #home-content #cbpmGrid .card .dateTime{
	color: #923C07;
}
#home-content #educationSocialWorkGrid .card .cardTitle, #home-content #educationSocialWorkGrid .card .dateTime,{
	color: #575D18;
}
#home-content #kenteGrid .card .cardTitle, #home-content #kenteGrid .card .dateTime{
	color: #800000;
}
#home-content #honorsGrid .card .cardTitle, #home-content #honorsGrid .card .dateTime{
	color: #F33;
}
#home-content #graduateGrid .card .cardTitle, #home-content #graduateGrid .card .dateTime{
	color: #7A4B00;
}
#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: #382140;
}

#home-content .cardTitle span{
	font-size: .7em;
	color: #474747;
	margin-top: 10px;
}
#home-content .dateTime{
	font-weight: bold;
	font-size: 1.1em;
	margin-bottom: 0px;
}
#home-content .schools{
	font-size: .9em;
	/* 	margin-top: -10px; */
	margin-bottom: 30px;
}
#home-content .locationBottom{
	font-size: .8em;
	font-weight: bold;
	color: #575757;
	margin-top: 0px;
	margin-bottom: 20px;
}
#home-content tr:first-of-type .tableLeft p{
	color: #fff;
}

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

/** commencement students **/
#home-content .commencementStudents .grid6{
	padding: 0 20px;
}

/*	COMMENCEMENT ARCHIVE	*/

#home-content #commencementArchive .grid2{
	padding-right: 20px;
}
#home-content .schedTime{
	font-size: 1.3em;
	color: #382140;
}
#home-content .responsiveTable td, #home-content .responsiveTable th {
	padding: 10px;
}
#home-content #ticketsPage .grid4{
	padding-right: 30px;
}
#home-content #ticketsPage .grid4 p{
	padding-top: 30px;
	padding-bottom: 10px;
	padding-left: 10px;
	border-bottom: 3px solid #eee;
}
#ticketsPage .headerImage{
	margin-top: -10px;
}
#home-content .celDiv{
	padding: 30px;
	border-bottom: 4px solid #eee;
	float: left;
	width: 100%;
}
#home-content .celDiv .last-of-type{
	border-bottom: none;
}
#home-content .instagramStories img{
	display: block;
	margin: 0 auto;
	padding: 0 10px;
}
#home-content .containImg{
	max-width: 200px;
}
#home-content .containImgII{
	max-width: 300px;
}
#home-content .recordBtn{
	text-decoration: none;
	display: inline-block;
	padding: 10px 20px;
	color: #fff;
	background-color: #3873AB;
	font-size: 1.4em;
	font-weight: bold;
	margin-top: 10px;
	transition: all .2s ease-in-out;
}
#home-content .recordBtn:hover{
	transition: all .2s ease-in-out;
	transform: scale(1.02);
}

#home-content .ticketBtn{
	text-decoration: none;
	display: inline-block;
	padding: 20px 20px;
	color: #fff;
	background-color: #2e8540;
	font-size: 1.4em;
	font-weight: bold;
	margin: 10px 0px 0px 10px;
	transition: all .2s ease-in-out;
}
#home-content .ticketBtn:hover{
	transition: all .2s ease-in-out;
	transform: scale(1.02);
}
#home-content .lsBtn{
	background-color: #6e3061;
}
#home-content .celebrateBtn{
	background-color: #fff;
	border: 2px solid #6e3061;
	color: #6e3061;
}
#home-content .ticketBtn .fa{
	font-size: 1.5em;
	margin-right: 5px;
	padding-bottom: 5px;
}
#home-content .responsiveTable tr th.tableLeft{
	text-align: center;
}

#home-content .lsPage .grid3{
	padding: 10px;
}
#home-content .lsPage .grid3 img{
	display: block;
	margin: 0 auto;
}
#home-content p.recordingSessionTitle{
	text-align: center;
}

/******** PROGRAM BOOKS *********/
#home-content .programBooks h3{
	text-align: center;
}


@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;
	}
	#home-content .midHPSectionSchedule{
		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;
	}
	.midHPSectionSchedule{
		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;
	}
	#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 .midHPSectionSchedule{
		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;
	}
	#home-content .midHPSectionSchedule .ugBtn, #home-content .midHPSectionSchedule .grid4, #home-content .midHPSectionSchedule .grid6, #home-content .topHPSectionSchedule .grid3, #home-content .midHPSectionSchedule .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	*******/

#home-content #studentPage #topGraySection .grid8{
	padding-right: 50px;
}
#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;
	}
}

#home-content #studentPage img:first-of-type {
	width: 100%;
}

#home-content #celebrating20 .grid6, #home-content #celebrating20 .grid9, #home-content #celebrating20 .grid8{
	padding-right: 20px;
}
#home-content #celebrating20 img{
	display: block;
	margin: 0 auto;
}
#home-content #celebrating20 img:last-of-type{
	margin-top: 20px;
}
#home-content #celebrating20 .playBtn{
	display: none;
}

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

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

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


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

#home-content #ctp{
	padding: 10px 30px;
}
#home-content #ctp li{
	list-style-type: none;
}
#home-content #ctp .accordion .btnMain{
	margin-top: -5px;
}


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

@media only screen and (max-width:1000px){
	#home-content #imageHolder h2{
		top: 10%;
	}
	#home-content #scheduleNav a {
		padding: 20px 40px;
		font-weight: bold;
		font-size: 1.5em;
		line-height: 1.2em;
	}
}
@media only screen and (max-width:768px){
	#faqPage .headerImage img{
		display: none;
	}
	#home-content #commencementPage img:first-of-type{
		display: none;
	}
	#imageHolder{
		position: relative;
		margin-top: 10px;
	}
	#home-content #imageHolder h2{
		position: relative;
		display: block;
		/* 		top: 5%; */
		color: #382140;
		width: 100%;
		font-size: 2em;
	}
	#home-content #imageHolder h2 span{
		color: #382140
	}
	#home-content .ticketBtn{
		font-size: 1.1em;
	}
	#home-content #commencementPage h3{
		font-size: 1.5em;
		line-height: 1.1em;
	}
	#home-content .emphasizedText{
		font-size: 1.6em;
		line-height: 1.1em;
	}
	#home-content .rainDateLarge{
		display: block;
		background-color: #382140;
		color: #fff;
		font-size: 2em;
		font-weight: bold;
		margin-top: 40px;
		padding: 20px;
	}
}

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

@media only screen and (max-width:768px){
	#home-content .gridLeft{
		padding-right: 0;
	}
	#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;
}

@media only screen and (min-width:768px){
	.custom-grid .grid2{
		width: 20%;
		padding: 0px 10px;
	}
	.custom-grid .grid2 img{
		width: 100%;
	}
	.custom-grid .grid4{
		padding-right: 50px;
	}
	.custom-grid .grid8{
		padding-left: 30px;
	}
}



/********************************/
/*		REBRAND - 5/5/25		*/
/********************************/

.intro-section, .block-button-section{
	float: left;
	width: 100%;
}
.intro-section .centerContent{
	padding-bottom: 0px;
}
.block-button-section{
	padding: 1.5% 5%;
}
.block-button-section .wcuTileBtn span{
	font-size: .75em;
}
.centerContent:last-of-type{
	padding-top: 0px;
}
#home-content .fy-page-top{
	padding-top: 0px;
}
.fy-image{
	width: 100%;
}
/*	GENERAL	*/
.centerH2{
	text-align: center;
}

@media only screen and (max-width:900px){
	.block-button-section .wcuTileBtn span{
		font-size: .5em;
	}
}
@media only screen and (max-width:768px){
	.block-button-section .wcuTileBtn span{
		font-size: 1em;
	}
	#home-content .block-button-section .tileBuilderSnippet > div.grid3{
		width: 100%;
	}
}