:root {
	
	--pcdBg1: #512e7e;
	--pcdBg2: #5e3f87;
	--pcdBg3: #6b4f8f;
	--pcdBg4: #7a6099;
	--pcdBg5: #8771a4;
	--pcdBlack: #231f20;
	--pcdWhite: #ffffff;
}

body { font-family: "Poppins", sans-serif; }
a { text-decoration: none; }

/*
#wpadminbar {
	
	display: none;
}
*/

html {
	
	margin-top: 0!important;
}

/*
html:not([data-scroll="0"]) #pcd-head .content {
	
	height: 9rem;
	transition: height 0.3s ease-out;
}
*/

html:not([data-scroll="0"]) #header-socials {
	
	margin-bottom: 2rem;
	transition: margin 0.3s ease-out;
}


#pcd-head img {
	
	transition: height 0.3s ease-out;
}

#pcd-head #pcd-logo a {
	
	display: inline-block;
}

html:not([data-scroll="0"]) #pcd-head #pcd-logo .pcd-logo {
	
	height: 6.75rem;
}

html:not([data-scroll="0"]) #pcd-head #pcd-logo .pcoll-logo {
	
	height: 4.86rem;
}

#pcd-head #pcd-logo .pcd-logo {
	
	height: 4.5rem;
	margin: 1rem 0 1rem 1rem;
}

#pcd-head #pcd-logo .pcoll-logo {
	
	height: 3.24rem;
	margin: 1rem;
}

html:not([data-scroll="0"]) #header-socials {
	
	margin-bottom: 2rem;
	transition: margin 0.3s ease-out;
}

/* Accounts for the 3rem that disappears from the sticky header when we scroll by removing 3rem of height from the bottom of the page wrapper when we're not scrolled */
html:not([data-scroll="0"]) #wrapper {
	
	margin-bottom: -3rem;
	transition: margin 0.3s ease-out;
}

#wrapper {
	
	position: relative;
	margin-bottom: 0;
	transition: margin 0.3s ease-out;
}

#pcd-apply {
	
	position: absolute;
	top: 0;
	right: 3.125rem;
	color: var(--pcdWhite);
	height: 3rem;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 3rem;
	padding: 0 1.375rem 0 1.375rem;
	
	transition: background-color 0.2s ease-in-out;
}

#pcd-apply:hover {
	
	background-color: var(--pcdBlack);
	transition: background-color 0.2s ease-in-out;
}

#pcd-marquee-scroll {
	
	position: absolute;
	white-space: nowrap;
}

#pcd-pageContent {
	
	background-color: var(--pcdBlack);
}

#pcd-head {
	
	display: block;
	position: sticky;
	top: 0;
	z-index: 101;
	background-color: var(--pcdWhite);
}

#pcd-head .content {
	
	position: relative;
	display: block;
	/* height: 6rem; */
	margin: auto;
	max-width: 87.5rem;
	transition: height 0.3s ease-out;
}

#pcd-head .logo-socials {
	
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	height: 100%;
}

#pcd-logo {
	
	margin: 0 1rem 0 1rem;
	/*height: 75%;*/
	width: auto;
	align-self: center;
}

#pcd-logo img {
	
	/*height: 100%;*/
	width: auto;
	object-fit: contain; /* Need to hold Apple's hand the entire time when doing anything on Safari */
	pointer-events: none; /* Hide "visual search" thing on Edge */
}

#header-nav, #header-socials {

	list-style-type: none;
	padding: 0;
}

#header-nav {
	
	margin: 0;
}

#header-nav a:hover, .pcd-welcome .button:hover h3 {
	
	text-shadow:    	 0 	   0.2px 0.707px #ffffff, /* Fake extra bold hover for already-bold-text */
					-0.2px  	   0 0.707px #ffffff,
						 0 	  -0.2px 0.707px #ffffff,
				     0.2px         0 0.707px #ffffff,
				  0.1414px  0.1414px 0.707px #ffffff,
				  0.1414px -0.1414px 0.707px #ffffff,
				 -0.1414px -0.1414px 0.707px #ffffff,
				 -0.1414px  0.1414px 0.707px #ffffff;
				 
	letter-spacing: 0.707px;
	
	transition: letter-spacing 0.3s ease-in-out;
}

#header-nav a, .pcd-welcome .button h3 { /* Unhover */
	
	text-shadow: none;
	letter-spacing: normal;
	transition: letter-spacing 0.3s ease-in-out;
}

#header-socials {
	
	align-self: flex-end;
	margin: 0 3.125rem 0.5rem 0;
	transition: margin 0.3s ease-out;
}

#header-socials li {
	
	display: inline-block;
	margin-right: 0.5rem;
}

#header-socials a {
	
	display: inline-block;
	width: 2rem;
	height: 2rem;
	background-color: var(--pcdBlack);
	border-radius: 100%;
	text-align: center;
	line-height: 2rem;
	color: var(--pcdWhite);
	transition: color 0.2s ease-in-out;
}

#header-socials a:hover, .pcd-welcome .button:hover p {
	
	font-weight: bold;
	transition: all 0.3s;
}

#header-socials a, .pcd-welcome .button p {
	
	font-weight: normal;
	transition: all 0.3s ease-in-out;
}

#header-nav {
	
	
	width: 100%;
	display: flex;
	flex-flow: row nowrap;
	height: 3.4375rem;
}

#header-nav li {
	
	display: inline-block;
	width: 100%;
	text-align: center;
}

#header-nav li a {
	
	width: 100%;
	height: 100%;
	margin: 0;
	color: var(--pcdWhite);
	display: inline-block;
	font-size: 2.3vw;
	line-height: 3.4375rem;
	font-weight: 700;
}

/* Poor implementation of max-font-size: 1.125rem; 2.3vw = 1.125rem at 48.9375rem viewport */
@media(min-width: 48.9375rem) {
	
	#header-nav li a {
	
		font-size: 1.125rem
	}
}

#pcd-pageHolder {
	
	position: relative;
	margin-top: -2px;
}

#pcd-marquee {

	line-height: 1.71875rem;
	width: 100%;
	height: 3.4375rem;
	
	margin: 0 0 8rem 0;

	overflow: hidden;
}

#pcd-marquee a {
	
	position: relative;
	display: block;
	padding: 1em 0 2.7em 0;
	text-align: center;
}

#pcd-marquee span {
	
	color: var(--pcdWhite);
	font-weight: bold;
	font-size: 1.5rem;
}

.pcd-infoImage {
	
	text-align: center;
	overflow: visible;
}

.pcd-infoImage:not(.flip) {
	
	text-align: left;
}

.pcd-infoImage.flip {
	
	text-align: right;
}

.pcd-infoImage .content {
	
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	max-width: 87.5rem;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
	height: 100%;
}

.pcd-infoImage:not(.flip) .content {
	
	justify-content: left;
}

.pcd-infoImage.flip .content {
	
	justify-content: right;
}

.pcd-infoImage.flip .info {
	
	direction: rtl;
}

.pcd-infoImage.flip .info h2, .pcd-infoImage.flip .info p {
	
	direction: ltr;
}

.pcd-infoImage img {
	
	height: 52.5rem;
	width: 40.6rem;
	max-width: 40vw;
	object-fit: cover;
	margin-top: -3.75rem;
}

.pcd-infoImage .info {
	
	min-width: 50%;
}

.pcd-infoImage img, .pcd-infoImage .info {
	
	display: inline-block;
	color: var(--pcdWhite);
}

.pcd-infoImage .info {
	
	margin: 4rem 2rem 4rem 2rem;
}

.pcd-infoImage .info h2 {
	
	font-size: 2.5rem;
}

.pcd-infoImage .info p {
	
	font-size: 1.5rem;
}

.pcd-infoBlock {
	
	margin-top: 8rem;
	text-align: center;
}

.pcd-infoBlock .content {
	
	direction: rtl;
	max-width: 87.5rem;
	display: inline-flex;
	flex-flow: row nowrap;
	height: 100%;
	width: 100%;
}

.pcd-infoBlock .content * {
	
	margin: 0;
}

.pcd-infoBlock img {
	
	display: inline-block;
	object-fit: cover;
	width: 50%;
	height: auto;
}

.pcd-infoBlock .blocks {
	
	display: inline-block;
	width: 50%;
	height: 100%;
}

.pcd-infoBlock .topText, .pcd-infoBlock .bottomText {
	
	width: 100%;
	height: 50%;
	
	display: flex;
	justify-content: space-around;
	align-items: center;
	
	font-size: 2rem;
	font-weight: 700;
	
	padding: 1em 0.6em 1em 0.6em;
	
	direction: ltr;
}

.pcd-infoBlock .topText {
	
	background-color: var(--pcdBg1);
	color: var(--pcdWhite);
}

.pcd-infoBlock .bottomText {
	
	background-color: var(--pcdWhite);
	color: var(--pcdBlack);
}

.pcd-welcome {
	
	text-align: center;
	margin-bottom: 20rem;
}

.pcd-welcome .content {
	
	display: inline-block;
	text-align: left;
	
	max-width: 87.5rem;
	width: 100%;
	background-color: var(--pcdWhite);
	color: var(--pcdBlack);
	margin-top: 8rem;
	padding: 1.5rem 0 24rem 0;
}

.pcd-welcome h2 {
	
	font-size: 2rem;
	font-weight: 700;
}

.pcd-welcome p {
	
	font-size: 1.5rem;
}

.pcd-welcome h2, .pcd-welcome p {

	margin-left: 2rem;
	margin-right: 2rem;
}

.pcd-welcome .buttons {
	
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	align-items: flex-start;
	margin-top: 3rem;
	overflow: visible;
}

.pcd-welcome .buttons .button {
	
	height: 0;
	width: 24rem;
	overflow: visible;
	margin: 0 1rem 0 1rem;
}

.pcd-welcome .buttons .button img {
	
	width: 100%;
	aspect-ratio: 1/1;
	object-fit: cover;
}

.pcd-welcome .buttons .button {
	
	background-color: var(--pcdBg1);
	text-align: center;
}

.pcd-welcome .buttons .button a {
	
	color: var(--pcdWhite);
}

.pcd-welcome .buttons .button .info {
	
	padding: 1rem;
	background-color: var(--pcdBg1);
}

.pcd-welcome .buttons .button h3 {
	
	font-variant: small-caps;
	font-size: 2rem;
}

.pcd-post {
	
	text-align: center;
}

.pcd-post .content {
	
	max-width: 87.5rem;
	width: 100%;
	
	padding: 0.5rem 1rem 0.5rem 1rem;
	
	display: inline-block;
	background-color: var(--pcdBg1);
	color: var(--pcdWhite);
	text-align: center;
	font-size: 1.25rem;
	
	margin-top: 0;
}

#pcd-banner, #pcd-banner video, #pcd-banner img { /* 21:9 for desktop, 3:4 for mobile */
	
	width: 100%;
	object-fit: cover;
	vertical-align: middle;
}

#pcd-banner video {
	
	height: 42.857142vw;
	margin-top: -1px; /* Gets rid of a 1px white line (at certain resolutions) that probably now shows up somewhere else */
}

#pcd-banner img { /* Image version of banner is 3:1 instead */
	
	height: 33.3vw;
}

.pcd-associations {
	
	margin: auto;
	max-width: 100%;
	width: 87.5rem;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-items: center;
	
	padding: 0.5rem 0 0.5rem 0;
}

.pcd-associations img {
	
	max-width: 90vw;
}

.pcd-associations div {
	
	margin: 0.5rem 1rem 0.5rem 1rem;
}

.pcd-associations .matrix {
	
	margin: 0rem 0.5rem 0rem 0.5rem;
}

#siteFooter {
	
	border-top: 0.125rem solid var(--pcdBg1);
}

.searchBlock.courses, #pageHolder aside#sidebar .courseCareerSearch .searchBlock.careers:before {
		
	background-color: var(--pcdBg5)!important;
}

.searchBlock.careers, #sidebar .qLink .linkName {
	
	background-color: var(--pcdBg1)!important;
}

.courseCareerSearch .searchBTN {
	
	background-color: var(--pcdBlack)!important;
	color: var(--pcdWhite)!important;
}

.mobilePageSearch #tab-1, .mobilePageSearch ul.tabs li:first-child a {
		
	background-color: var(--pcdBg5)!important;
}

.mobilePageSearch #tab-2, .mobileSidebar .qLink .linkName, .mobilePageSearch ul.tabs li a {
	
	background-color: var(--pcdBg1)!important;
}

.mobilePageSearch .searchBTN {
	
	background-color: var(--pcdBlack)!important;
	color: var(--pcdWhite)!important;
}

.pcd-bg-1 { background-color: var(--pcdBg1); }
.pcd-bg-2 { background-color: var(--pcdBg2); }
.pcd-bg-3 { background-color: var(--pcdBg3); }
.pcd-bg-4 { background-color: var(--pcdBg4); }
.pcd-bg-5 { background-color: var(--pcdBg5); }

.pcd-bg-1.override { background-color: var(--pcdBg1)!important; }
.pcd-bg-2.override { background-color: var(--pcdBg2)!important; }
.pcd-bg-3.override { background-color: var(--pcdBg3)!important; }
.pcd-bg-4.override { background-color: var(--pcdBg4)!important; }
.pcd-bg-5.override { background-color: var(--pcdBg5)!important; }

.topBar, .lowerFooter, #sideMenu, .cc-window.cc-floating { background-color: var(--pcdBg1)!important; }
.associations { border-color: var(--pcdBg1)!important; }
#pageContent h1 { color: var(--pcdBg1)!important; }

/* Break long words at high zooms/low resolution */
.pcd-infoImage h2, .pcd-infoImage p, .pcd-infoBlock p {
	
	overflow-wrap: break-word;
}

.pcd-infoBlock p {
	
	width: 100%;
}

/* Override interference from the main stylesheet */
header#masthead {
	
	height: auto!important;
	display: block!important;
	position: relative!important;
}

#wrapper {
	
	overflow:visible!important;
}

/* Accessibility toolbar recolour */
#pojo-a11y-toolbar .pojo-a11y-toolbar-overlay, #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a,
#pojo-a11y-toolbar .pojo-a11y-toolbar-overlay ul.pojo-a11y-toolbar-items.pojo-a11y-links {
	
	background-color: var(--pcdBg1);
	border-color: var(--pcdBg1);
}

/* Cookie Consent recolour */
.cky-btn-revisit-wrapper {
	
	background-color: var(--pcdBg1)!important;
	box-shadow: 0 0 0.5rem #00000040;
}

.cky-btn-accept {
	
	background-color: var(--pcdBg1)!important;
    border-color: var(--pcdBg1)!important;
}

.cky-btn-preferences, .cky-btn-reject {
	
	color: var(--pcdBg1)!important;
    border-color: var(--pcdBg1)!important;
}

/* Stackable unrecolourable buttons recolour */
.stk-link.stk-button {
	
	background-color: var(--pcdBg1)!important;
}

/* Disable sticky header thing if we don't have room */
@media(max-height: 40rem) {
	
	#pcd-head {
		
		position: relative!important;
	}
	
	/*
	#pcd-head .content {
		
		height: 9rem!important;
	}
	*/
	
	#pcd-head #pcd-logo .pcd-logo {
		
		height: 6.75rem!important;
	}

	#pcd-head #pcd-logo .pcoll-logo {
		
		height: 4.86rem!important;
	}
	
	#header-socials {
		
		margin: 0 3.125rem 2rem 0!important;
	}
}

/* Phone design */
@media(max-aspect-ratio: 10/16) {
	
	#header-nav li a {
	
		font-size: 5vw;
		padding: 0.7rem 1rem 0.7rem 1rem;
		line-height: 0.5em;
	}
	
	#header-nav li {
		
		max-height: 13.3vw;
	}
	
	#header-nav li {
		
		width: 75%;
		text-align: left;
	}
	
	#pcd-banner, #pcd-banner video, #pcd-banner img {
		
		height: 133vw;
	}
	
	/*
	#pcd-logo {
		
		height: 60%;
		width: auto;
	}
	*/
	
	#pcd-head #pcd-logo {
		
		margin-top: 2.3rem;
	}
	
	#pcd-head #pcd-logo img {
		
		margin: 0.5rem!important;
	}
	
	#pcd-head #pcd-logo .pcd-logo {
		
		height: 3.86rem!important;
	}

	#pcd-head #pcd-logo .pcoll-logo {
		
		height: 2.78rem!important;
	}
	
	#pcd-apply {
		
		position: relative;
		display: inline-block;
		right: auto;
		left: 3.125em;
	}
	
	#pcd-head .content {
		
		height: 12rem!important;
	}
	
	#pcd-head {
		
		position: relative!important;
	}
	
	.logo-socials {
		
		height: 7rem!important;
	}
	
	#header-nav {
		
		flex-flow: column nowrap;
		align-items: center;
		position: relative;
		height: 0;
		overflow: visible;
		top: 66vw;
	}
	
	#header-socials {
		
		align-self: center;
		margin: 0 1em 0 0!important;
	}
	
	#header-socials a {
		
		margin-bottom: 0.2em;
	}
	
	.pcd-info {
		
		max-width: 100vw;
		overflow: hidden;
	}
	
	/* Somehow get the header above the image on mobile without changing the DOM or having two duplicate headers */
	.pcd-infoImage .info h2 {
		
		position: relative;
		width: 190%;
		padding-inline-end: 1em;
		z-index: 1;
		background-color: var(--pcdBlack);
		padding-right: 0.5em;
	}
	
	.pcd-infoImage .content {
		
		align-items: flex-start;
	}
	
	.pcd-infoImage .info p {
		
		font-size: 1.25rem;
	}
	
	.pcd-infoImage img {
		
		margin-top: 0;
	}
	
	.pcd-infoImage .info, .pcd-infoImage .info h2 {
		
		margin-top: 0;
		margin-bottom: 0;
	}
	
	.pcd-infoImage .info h2 {
		
		padding-bottom: 0.5em;
	}
	
	.pcd-infoImage .content {
		
		margin-bottom: 4rem;
	}
	
	.pcd-infoBlock {
		
		height: max-content;
	}
	
	.pcd-infoBlock .content {
		
		flex-flow: column nowrap;
	}
	
	.pcd-infoBlock img {
		
		margin-top: 0;
	}
	
	.pcd-infoBlock img, .pcd-infoBlock .blocks {
		
		width: 100%;
	}
	
	.pcd-welcome {
		
		margin-bottom: 6rem;
	}
}

/* Another poor implementation of max-font-size for mobile navigation */
@media(min-width: 22.5rem) and (max-aspect-ratio: 10/16) {
	
	#header-nav li a {
	
		font-size: 1.125rem;
	}
}

/* The "Welcome to Preston College" buttons need to collapse on desktop as well as phone */
@media(max-width: 46.875rem) {
	
	.pcd-welcome, .pcd-infoBlock {
		
		margin-left: 2rem;
		margin-right: 2rem;
	}
	
	.pcd-welcome .content {
		
		padding: 1.5rem 0 0 0;
	}
	
	.pcd-welcome .buttons {
		
		flex-flow: column nowrap;
	}
	
	.pcd-welcome .buttons .button {
		
		width: 100%;
		height: max-content;
		margin: 0;
	}
	
	.pcd-welcome .buttons .button .info {
		
		padding-bottom: 0;
	}
	
	.pcd-welcome .buttons .button img {
		
		aspect-ratio: 2/1;
	}
}