/*
 *
 * City University of Hong Kong
 * ----------------------------
 * Site Specific SCSS
 *
 */

/* ================================================================================ RESET */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, section, article, aside, hgroup, header, footer, nav, dialog, figure, menu, video, audio, mark, time, canvas, details {
	font-family: 'Sora', sans-serif;
	background: transparent;
	-webkit-fhttont-smoothing: antialiased;
}

/* RESET - layout */

* {
	scroll-behavior: smooth;
}
*, button:focus { /* remove focus border on Safari and Chrome */
	outline: none;
}
.cityu-main {
	padding-top: 8rem;
}
.cityu-main .section {
	padding-top: 0;
	padding-bottom: 0;
}
.cityu-main .section:last-child,
.cityu-main .section:last-of-type,
.cityu-main .section.full-width {
	padding-bottom: 8rem;
}
.cityu-content {
	margin: 0 !important;
	padding-bottom: 0 !important;
}
.cityu-content > *:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
}
.cityu-content > *:only-child{
	margin-top: 0;
	padding-top: 0;
}

/* RESET - text */

body {
	font-size: 16px;
	line-height: 1.8;
	background: var(--lonnlight);
	word-wrap: break-word;
}
header {
	background: var(--lonnlight) !important;
}
main {
	background: var(--lonnlight);
}
* {
	-webkit-border-radius: 0 !important;
	-moz-border-radius: 0 !important;
	border-radius: 0 !important;
}
.display {
	color: var(--lonnred);
	font-size: 2.5rem;
	font-weight: 200;
	line-height: 1.4;
}
@media screen and (max-width: 767px) {
	.display {
		font-size: 2rem;
	}
}
.display:only-child {
	padding-bottom: 0;
	margin-bottom: 0;
}
.miniheading {
	color: var(--lonnred);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .05rem;
	text-transform: uppercase;
}
small {
	font-size: .9rem;
}
.cityu-content h2 {
	color: var(--lonnred);
	font-size: 3rem;
	font-weight: 800;
	letter-spacing: 0;
	background: linear-gradient(225deg, var(--lonnred) 0%, var(--lonnred) 75%, var(--lonndarkred) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-top: 8rem;
	margin-bottom: 3rem;
}
.cityu-content h2 sup {
	background: inherit;
	-webkit-text-fill-color: var(--lonnred) !important;
}
.cityu-content h2:first-child {
	margin-top: 0;
}
.cityu-content h3 {
	margin-top: 6rem;
	margin-bottom: 1.5rem;
}
.cityu-content h4 {
	font-size: 1.2rem;
	line-height: 1.4;
}
.helplink h2 {
	color: var(--lonnlight);
	font-size: 3rem;
	font-weight: 800;
	margin-bottom: 3rem;
}
/* RESET - text - retouch hyperlink */

.a {
	color: var(--lonnred) !important;
}
.cityu-content a:not([class^="lonnbtn"]) {
	border-bottom: 1px solid var(--lonndark); /* change from dotted */
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	cursor: pointer;
}
.cityu-content a:not([class^="lonnbtn"]):hover {
	color: var(--lonndark);
	text-decoration: none;
	border-bottom: 1px solid var(--lonnred);
}
.cityu-content p:last-child {
	margin-bottom: 0;
}
.cityu-content p a[target="_blank"]::after {
	font-family: bootstrap-icons;
	content: "\f144";
	font-size: .9rem;
	padding-left: .25rem;
	vertical-align: -.05rem;
}
.cityu-content p a[href$=".pdf"]::after {
	font-family: bootstrap-icons;
	content: "\f30a";
}

/* RESET - buttons */

.lonnbtn {
	color: var(--lonndark) !important;
	font-size: .8rem;
	font-weight: 800;
	letter-spacing: .05rem;
	text-transform: uppercase;
	border: none !important;
	background: linear-gradient(to top, var(--lonnyellow) 50%, var(--lonnyellow) 50%) no-repeat left bottom;
	background-size: 100% 50%;
	text-decoration: none !important;
	margin-right: 20px;
	padding: .3rem;
	-webkit-box-decoration-break: clone;
	-o-box-decoration-break: clone;
	box-decoration-break: clone;
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	cursor: pointer !important;
}
.lonnbtn:hover,
.lonnbtn.active {
	background-size: 100% 100%;
}
.lonnbtn::after {
	display: none;
}
.lonnbtn:last-child {
	margin-right: inherit !important;
}
.lonnbtn-light {
	color: var(--lonnpale) !important;
	background: linear-gradient(to top, var(--lonndark) 50%, var(--lonndark) 50%) no-repeat left bottom;
	background-size: 100% 50%;
}
.lonnbtn-filter,
.lonnbtn-filter-light {
	position: relative;
	display: inline-block;
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: .05rem;
	text-transform: uppercase;
	line-height: 1;
	text-decoration: none !important;
	background-position: 100% 200%;
	border: none !important;
	margin-right: 0;
	padding: 1rem;
	-webkit-box-decoration-break: clone;
	-o-box-decoration-break: clone;
	box-decoration-break: clone;
	-webkit-transition: .15s ease-in-out;
	-o-transition: .15s ease-in-out;
	transition: .15s ease-in-out;
}
.lonnbtn-filter {
	color: var(--lonndark) !important;
	background: linear-gradient(to top, var(--lonndark) 50%, var(--lonndark) 50%) no-repeat left bottom;
	background-size: 100% 0;
}
.lonnbtn-filter-light {
	color: var(--lonnlight) !important;
	background: linear-gradient(to top, var(--lonnlight) 50%, var(--lonnlight) 50%) no-repeat left bottom;
	background-size: 100% 0;
}
.lonnbtn-filter::after,
.lonnbtn-filter-light::after {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 1px;
	width: calc(100% + 25px);
	content: '';
}
.lonnbtn-filter::after {
	background: var(--lonndark);
}
.lonnbtn-filter-light::after {
	background: var(--lonnlight);
}
.lonnbtn-filter:last-child::after,
.lonnbtn-filter-light:last-child::after {
	width: 100%;
}
.lonnbtn-filter:hover,
.lonnbtn-filter.active {
	color: var(--lonndark) !important;
	background: linear-gradient(to top, var(--lonndark) 50%, var(--lonndark) 50%) no-repeat left bottom;
	background-size: 100% 15%;
}
.lonnbtn-filter-light:hover,
.lonnbtn-filter-light.active {
	color: var(--lonnlight) !important;
	background: linear-gradient(to top, var(--lonnlight) 50%, var(--lonnlight) 50%) no-repeat left bottom;
	background-size: 100% 15%;
}
.lonnbtn-filter-small {
	display: inline-block;
	font-size: .8rem;
	font-weight: 800;
	letter-spacing: .025rem;
	text-transform: uppercase;
	line-height: inherit;
	color: var(--lonnmedium) !important;
	background: linear-gradient(to top, var(--lonnmedium) 50%, var(--lonnmedium) 50%) no-repeat left bottom;
	background-size: 0 12%;
	background-position: 0 100%;
	border: none !important;
	text-decoration: none !important;
	padding: 0 .5rem .75rem;
	-webkit-box-decoration-break: clone;
	-o-box-decoration-break: clone;
	box-decoration-break: clone;
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.lonnbtn-filter-small:hover {
	color: var(--lonnmedium) !important;
	background: linear-gradient(to top, var(--lonnmedium) 50%, var(--lonnmedium) 50%) no-repeat left bottom;
	background-size: 100% 12%;
}
.lonnbtn-filter-small.active {
	color: var(--lonndarkred) !important;
	background: linear-gradient(to top, var(--lonndarkred) 50%, var(--lonndarkred) 50%) no-repeat left bottom;
	background-size: 100% 12%;
}
	/* Page number etc. */
.lonnbtn-filter-sub {
	position: relative;
	display: inline-block;
	color: var(--lonndark) !important;
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: .05rem;
	text-transform: uppercase;
	line-height: 1;
	text-decoration: none !important;
	border: 1px solid var(--lonnlight);
	background-color: var(--lonnpale);
	padding: .5rem 1rem;
	-webkit-box-decoration-break: clone;
	-o-box-decoration-break: clone;
	box-decoration-break: clone;
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.lonnbtn-filter-sub:hover,
.lonnbtn-filter-sub.active {
	color: var(--lonnlight) !important;
	background-color: var(--lonndark);
}

/* RESET - ul */

.cityu-content ul.basic {
	list-style: none;
	padding-left: 0;
}
.cityu-content ul.basic:last-child {
	list-style: none;
	padding-left: 0;
	margin-bottom: 0 !important;
}
.cityu-content ul.basic > li {
	position: relative;
	padding-left: 1.5rem !important;
	margin-bottom: 1rem;
}
.cityu-content ul.basic > li:last-child {
	margin-bottom: 0;
}
.cityu-content ul.basic li::before {
	position: absolute;
	font-family: bootstrap-icons;
	content: "\f287";
	font-size: 60%;
	margin-top: .3rem;
	color: var(--lonnred) !important;
	margin-left: -1.5rem !important; /* same as padding-left set on li */
	width: 1.5rem !important; /* same as padding-left set on li */
}

/* RESET - icon */

.fa-info-circle::before {
	font-family: bootstrap-icons;
	content: "\f430";
}

/* RESET - card */

.card {
	box-shadow: 0 .6rem 1.5rem rgba(0,0,0,.1);
	border: none;
}

/* RESET - badge */

.rounded-pill {
	color: var(--lonnlight);
	background-color: var(--lonndark);
	padding: .25rem .5rem;
}

/* RESET (kinda) - border box */
	/* text */
.borderbox a {
	color: var(--lonndark) !important;
	border: none !important;
}
.borderbox a:hover {
	color: var(--lonnpale) !important;
}
.borderbox-red a {
	color: var(--lonnred) !important;
	border: none !important;
}
.borderbox-red a:hover {
	color: var(--lonnpale) !important;
}
	/* box */
.borderbox,
.borderbox-red {
	position: relative;
	display: block;
	transform-style: preserve-3d;
	font-size: .9rem;
	text-transform: uppercase;
	letter-spacing: .05rem;
	background: var(--lonnlight);
	padding: 1.5rem;
	cursor: pointer;
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.borderbox {
	color: var(--lonndark);
	border: 1px solid var(--lonndark);
}
.borderbox-red {
	color: var(--lonnred);
	border: 1px solid var(--lonnred);
}
.borderbox:hover,
.borderbox-red:hover {
	color: var(--lonnpale) !important;
}
.borderbox:hover {
	background-color: var(--lonnmedium);
}
.borderbox-red:hover {
	background-color: var(--lonndarkred);
}
	/* shadow border */
.borderbox::before,
.borderbox-red::before {
	position: absolute;
	left: .5rem;
	top: .5rem;
	width: 100%;
	height: 100%;
	content: "";
	-webkit-transform: translateZ(-1px);
	-moz-transform: translateZ(-1px);
	-ms-transform: translateZ(-1px);
	-o-transform: translateZ(-1px);
	transform: translateZ(-1px);
}
.borderbox::before {
	border: 1px solid var(--lonndark);
}
.borderbox-red::before {
	border: 1px solid var(--lonnred);
}
	/* shadow color */
.borderbox::after,
.borderbox-red::after {
	position: absolute;
	-webkit-transform: translateZ(-.5rem);
	-moz-transform: translateZ(-.5rem);
	-ms-transform: translateZ(-.5rem);
	-o-transform: translateZ(-.5rem);
	transform: translateZ(-.5rem);
	left: calc(100% + .5rem);
	top: calc(100% + .5rem);
	width: 0%;
	height: 0%;
	content: "";
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.borderbox::after {
	background-color: var(--lonndark);
}
.borderbox-red::after {
	background-color: var(--lonnred);
}
.borderbox:hover::after,
.borderbox-red:hover::after {
	left: .5rem;
	top: .5rem;
	width: 100%;
	height: 100%;
}
	/* programme guidelines */
.prog .guideline .borderbox {
	height: 100%;
	line-height: 1.5;
}
.prog .guideline .borderbox > div:first-child {
	display: inline-block;
	width: 40%;
}
.prog .guideline .borderbox > div:last-child {
	display: inline-block;
	float: right;
	width: calc(100% - 40%);
	padding-bottom: 1.5rem;
}
.prog .guideline .borderbox img {
	max-width: 100%;
	height: auto;
	padding-right: 1.5rem;
}
.prog .guideline .borderbox h4 {
	margin-top: 0 !important;
	line-height: 1.4;
}

/* RESET (kinda) - images with links */

.imglink-div {
	margin-bottom: 3rem;
}
.imglink-div a {
	border-bottom: none !important;
}
.imglink {
	position: relative;
	display: block;
	left: 0;
	top: 0;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	box-shadow: 0 0 var(--lonnred);
	border: none !important;
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.imglink:hover {
	left: .5rem;
	top: -.5rem;
	box-shadow: -1rem 1rem var(--lonnred);
}
.imglink-caption {
	display: inline-block;
	color: var(--lonndark);
	font-size: .9rem;
	line-height: 1.4;
	border-top: 1px solid var(--lonndark);
	margin-top: 1rem !important;
	padding-top: .5rem;
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.imglink-caption:hover {
	color: var(--lonnred);
}
a[href$=".pdf"] .imglink-caption::before {
	font-family: bootstrap-icons;
	content: "\f30a";
	padding-right: .5rem;
}
/* Reset (kinda) - card block */
.cardblock > div {
	margin-bottom: 2rem;
	min-height: 200px;
}
.cardblock .card {
	height: 100%;
	box-shadow: none;
}
.cardblock .card-body {
	background-size: cover;
	background-position: center;
}
.cardblock .card-body div {
	color: var(--lonnpale);
	background: linear-gradient(135deg, rgba(35,31,32,.8), rgba(35,31,32,.4));
	font-size: 1.25rem;
	font-weight: 700;
	line-height: normal;
	padding: 1rem;
}
.cardblock .card-body p {
	font-size: .9rem;
	padding-top: .5rem;
}
/* ================================================================================ Structure */

/*
 *
 * Navbar
 *
 */

/* Navbar - retouch menu */

/* Navbar - menu bar on sm & md screen */

.header-smallscreen {
	position: absolute;
	width: 30vmax;
	top: 0;
	left: 0;
	z-index: 2;
	margin: 1rem;
}
.littlemenubar {
	position: fixed;
	display: block;
	color: var(--lonnlight) !important;
	background-color: var(--lonndark);
	opacity: .8;
	font-size: 1.5rem;
	line-height: 48px;
	text-align: center;
	bottom: 80px;
	right: 1rem;
	width: 32px;
	height: calc(32px * 1.5);
	-webkit-transition: .3s ease-in-out !important;
	-o-transition: .3s ease-in-out !important;
	transition: .3s ease-in-out !important;
	z-index: 1016;
	overflow-y: scroll !important;
}
.littlemenubar:hover {
	color: var(--lonnyellow) !important;
	opacity: 1;
}

/* Navbar - menu bar on lg screen */


.cityu-menu {
	animation: FadeInMoveDown 1s;
}
@keyframes FadeInMoveDown {
	0% {
		opacity: 0;
		transform: translateY(-1rem);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
.navbar {
	padding: 0 !important;
}
.navbar > a {
	cursor: pointer !important;
}
.navbar .navbar-logo {
	height: 70px !important;
	margin-top: 1.5rem !important;
	margin-bottom: 1.5rem !important;
}
.navbar .navbar-logo-bms {
	display: none !important;
}
.navbar .nav-item .nav-link {
	padding-top: 1.5rem !important;
	padding-bottom: 1.5rem !important;
	padding-right: .75rem;
	font-size: .95rem !important;
	font-weight: 700 !important;
	text-transform: lowercase;
	letter-spacing: .025rem;
	color: var(--lonnlight) !important;
	background-color: inherit !important;
	cursor: pointer !important;
}
.navbar .nav-item:active,
.navbar .nav-item:active .nav-link,
.navbar .nav-item:hover,
.navbar .nav-item:hover .nav-link {
	color: var(--lonnyellow) !important;
	background-color: inherit !important;
}
.navbar .nav-item:active,
.navbar .nav-item:hover {
	box-shadow: inset 0 -.5rem var(--lonnyellow);
}

/* Navbar - change appearance on scroll */

.navbar.scrolled {
	background-color: rgba(0,0,0,.85) !important;
}
.navbar a.scrolled {
	text-decoration: none !important; /* remove logo underline */
}
.navbar,
.navbar .navbar-logo,
.navbar .navbar-logo-bms,
.navbar .nav-item,
.navbar .nav-link {
	-webkit-transition: .3s ease-in-out !important;
	-o-transition: .3s ease-in-out !important;
	transition: .3s ease-in-out !important;
}
.navbar .navbar-logo.scrolled {
	content: url("//template.cityu.edu.hk/template/v2/logo/CityU/CityU_Mini_Logo.svg") !important;
	height: 40px !important;
	margin: inherit !important;
}
.navbar .navbar-logo-bms.scrolled {
	display: inherit !important;
	height: 30px !important;
}
.navbar .nav-item.scrolled,
.navbar .nav-item.scrolled .nav-link {
	color: var(--lonnlight) !important;
}
.navbar .nav-item.scrolled:active,
.navbar .nav-item.scrolled:active .nav-link,
.navbar .nav-item.scrolled:hover,
.navbar .nav-item.scrolled:hover .nav-link {
	color: var(--lonnyellow) !important;
}

/* Navbar - drop down */

.navbar .dropdown-menu {
	width: 18rem !important;
	background-color: var(--lonnpale) !important;
	box-shadow: none !important;
}
.navbar .dropdown-toggle::after,
.navbar .nav-link.dropdown-toggle::after {
	content: inherit !important;
}
.navbar .dropdown-item {
	color: var(--lonnred) !important;
	font-size: .9rem !important;
	font-weight: 500 !important;
	background-color: inherit !important;
	padding-top: .5rem !important;
	padding-bottom: .5rem !important;
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.navbar .dropdown-item[href="#"] {
	color: var(--lonndark) !important;
}
.navbar .dropdown-item:hover {
	color: var(--lonndark) !important;
}
.navbar .dropdown-item::after {
	position: absolute !important;
	font-family: bootstrap-icons !important;
	font-weight: 500 !important;
	font-size: inherit !important;
	opacity: inherit !important;
	top: .5rem !important;
	right: .75rem !important;
}

/* Navbar - drop down - add icon after */

.navbar .dropdown-item[target="_blank"]::after {
	content: "\f144";
}
.navbar .dropdown-item[data-addicon="forinternaluse"]::after {
	content: "\f47a";
}

/* Navbar - drop down - reset list style type */

.navbar .dropdown-menu > li > ul {
	list-style: none;
	margin-left: .75rem;
	padding-left: 0;
}
.navbar .dropdown-menu > li > ul > li {
	position: relative;
	padding-left: .3rem;
	padding-right: .5rem;
}
.navbar .dropdown-menu > li > ul > li::before {
	position: absolute;
	font-family: bootstrap-icons;
	content: "\f287";
	font-size: 60%;
	font-weight: normal;
	color: var(--lonnred);
	margin-left: -.3rem; /* same as padding-left set on li */
	width: .3rem; /* same as padding-left set on li */
	margin-top: .5rem;
}

/*
 *
 * Sidebar
 *
 */

.cityu-sidebar {
	font-size: .9rem;
	top: calc(67px + 1rem);
}
.cityu-sidebar > ul {
	padding: 0 0 0 1rem;
}
.cityu-sidebar > ul > li {
	padding: 0 1rem;
}
.cityu-sidebar > ul > li > ul {
	list-style: none;
	padding-left: 0;
}
.cityu-sidebar > ul > li > ul > li {
	position: relative;
	padding-left: 1rem !important;
}
.cityu-sidebar > ul > li > ul > li::before {
	position: absolute;
	font-family: bootstrap-icons;
	content: "\f287";
	font-size: 60%;
	margin-left: -2rem !important; /* same as padding-left set on li */
	width: 1rem !important; /* same as padding-left set on li */
	margin-top: 1rem;
}
.cityu-sidebar h2 {
	background: var(--lonnmedium);
	color: var(--lonnlight);
	-webkit-background-clip: initial;
	-webkit-text-fill-color: initial;
	font-size: 1.75rem;
	text-transform: lowercase;
	padding-top: 1rem;
	margin-bottom: 1rem;
}
.cityu-sidebar h2::before {
	display: block;
	content: "More in ";
}
.cityu-sidebar a {
	color: var(--lonnlight) !important;
	border: none !important;
	padding-left: 0 !important;
}
.cityu-sidebar a.active {
	color: var(--lonnyellow) !important;
}
.cityu-sidebar a[href="#"] {
	opacity: .5;
}
.cityu-sidebar a[href="#"]:hover {
	color: inherit !important;
}
.cityu-sidebar a:hover {
	color: var(--lonnred) !important;
}
.cityu-sidebar a::after {
	opacity: 1 !important;
}
.cityu-sidebar a[target="_blank"]::after {
	font-family: bootstrap-icons;
	content: "\f144";
}
.cityu-sidebar a[data-addicon="forinternaluse"]::after {
	display: inline-block;
	position: absolute;
	font-family: bootstrap-icons;
	content: "\f47a";
}
.cityu-sidebar ul ul a[data-addicon="forinternaluse"]::after,
.cityu-sidebar ul ul ul a[data-addicon="forinternaluse"]::after {
	top: .7rem;
	right: 1rem;
}

/*
 *
 * Hero
 *
 */

.hero {
	position: relative;
	width: 100vw;
	height: 100%;
	padding-top: calc(24px + 70px + 80px);
	z-index: -1;
}
.hero-bg {
	height: 40rem; /* image height */
	width: 70%;
	margin-left: 30%;
	margin-bottom: calc(-40rem / 4 * 2);
	background-size: cover; /* image width */
	background-position: center;
	background-repeat: no-repeat;
	animation: SlideUpHeroBg 1s;
}
@keyframes SlideUpHeroBg {
	0% {
		transform: translateY(6rem);
	}
	100% {
		transform: translateY(0);
	}
}
.hero-title {
	min-height: calc(40rem / 4 * 2);
}
.hero-text {
	display: inline-block;
	color: var(--lonnpale);
	background: linear-gradient(120deg, rgba(124,37,124,1) 0%, rgba(124,37,124,1) 20%, rgba(191,22,94,.8) 60%, rgba(191,22,94,.8) 80%);
	margin: 0 !important;
	padding: 1rem;
	animation: FadeinLeftHeroText 1s ease-out;
}
@keyframes FadeinLeftHeroText {
	0% {
		opacity: .5;
		transform: translateX(6rem);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
.hero-text h1 {
	font-size: calc(40rem / 4 * 2 * .275);
	font-weight: 600;
	letter-spacing: .08rem;
}
.hero-text p {
	display: inline-block;
	font-size: 1rem;
	background: rgba(191,22,94,.3);
	padding: .25rem 1rem;
}
@media screen and (max-width: 991px) {
	.hero {
		padding-top: 8rem;
	}
	.hero-bg {
		height: 50vh;
		min-height: 20rem;
		width: 100%;
		margin-left: 0;
	}
	.hero-title {
		padding-top: 6rem;
	}
	.hero-text h1 {
		font-size: 3rem;
	}
}
.gradient-dark01 {
	background-color: var(--lonndark);
	background-image: linear-gradient(150deg, #231557, #44107A, #FF1361, #FFC500);
	background-size: 400% 400%;
	animation: gradient 7.5s ease-in-out infinite;
}
.gradient-dark02 {
	background-color: var(--lonndark);
	background-image: linear-gradient(150deg, #000428, #0A2CC1, #184B7A, #14557b);
	background-size: 400% 400%;
	animation: gradient 7.5s ease-in-out infinite;
}
.gradient-dark03 {
	background-color: var(--lonndark);
	background-image: linear-gradient(150deg, #1e3b70, #29539b, #7f5a83, #0d324d);
	background-size: 400% 400%;
	animation: gradient 7.5s ease-in-out infinite;
}
.gradient-dark04 {
	background-color: var(--lonndark);
	background-image: linear-gradient(150deg, #048D87, #358D99, #6BA821, #438524);
	background-size: 400% 400%;
	animation: gradient 7.5s ease-in-out infinite;
}
.gradient-dark05 {
	background-color: var(--lonndark);
	background-image: linear-gradient(150deg, #000000, #a55c1b, #d58936, #69140e);
	background-size: 400% 400%;
	animation: gradient 7.5s ease-in-out infinite;
}
.dark05 {
	background: linear-gradient(150deg, #a55c1b, #d58936);
}
.gradient-dark06 {
	background-color: var(--lonndark);
	background-image: linear-gradient(150deg, #CE6E0D, #A00505, #D16F05, #9B066E);
	background-size: 400% 400%;
	animation: gradient 7.5s ease-in-out infinite;
}
.dark06 {
	background: linear-gradient(150deg, #A00505, #CE6E0D);
}
.gradient-dark07 {
	background-color: var(--lonndark);
	background-image: linear-gradient(150deg, #7BCEC5, #125379, #A00505, #D58023);
	background-size: 400% 400%;
	animation: gradient 7.5s ease-in-out infinite;
}
@keyframes gradient {
	0% {background-position: 0 50%;}
	50% {background-position: 100% 50%;}
	100% {background-position: 0% 50%;}
}

/*
 *
 * Breadcrumb
 *
 */

/* Breadcrumb - reset home button */
a[href="./"] {
	display: none !important;
}
.cityu-breadcrumb p {
	float: left;
}
/* Breadcrumb - align to bottom */

/* Breadcrumb - text */
.breadcrumb-item,
.subpage-breadcrumb {
	line-height: 1.5 !important;
}
.cityu-breadcrumb a,
.subpage-breadcrumb a { /* link text */
	color: var(--lonnlight);
	font-size: .9rem;
	text-decoration: none;
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.cityu-breadcrumb a:hover,
.subpage-breadcrumb a:hover { /* link text on hover */
	color: var(--lonnyellow) !important;
}
.cityu-breadcrumb a[href="#"], .cityu-breadcrumb a[href="#"]:hover, .cityu-breadcrumb .breadcrumb-item + .breadcrumb-item::before { /* non-link text */
	color: var(--lonnlight) !important;
	background: transparent;
}

/* Breadcrumb - separator */

.cityu-breadcrumb .breadcrumb-item + .breadcrumb-item::before,
.subpage-breadcrumb span::before {
	display: contents;
	font-family: "Font Awesome 5 Free";
	content: "  \f061     ";
	white-space: pre;
	font-size: .6rem;
	color: var(--lonnlight) !important;
}

/*
 *
 * Divider
 *
 *
 */

.dividernew {
	display: inline-block;
	color: var(--lonndark);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .05rem;
	margin: 6rem 0;
	text-transform: uppercase;
}
.dividernew-inner {
	display: inline-flex;
	margin-left: calc(-50% + .8rem / 2);
	white-space: nowrap;
	align-items: center;
	transform: translate(0,100%) rotate(-90deg);
	transform-origin: 0 0;
}
.dividernew-inner:after {
	content: "";
	float: left;
	margin-top: 100%;
}
.dividernew-highlight-text {
	color: var(--lonnred);
}
.dividernew-bar {
	margin-left: 1rem;
	width: 12rem; /* line width */
	height: 1px;
	background-color: var(--lonndarkred);
}

/*
 *
 * Date
 *
 *
 */

.date {
	color: var(--lonnlight);
	font-size: .8rem;
	background: var(--lonnmedium);
	border-top: 1px solid var(--lonnlight);
}
.date p {
	margin: 0;
	padding: .8rem 0;
}
.date-subpage {
	display: inline-block;
	color: var(--lonnmedium);
	font-size: .8rem;
	border-top: 1px solid var(--lonnmedium);
	margin-top: 3rem;
	margin-bottom: 0;
	padding-top: .4rem;
}

/*
 *
 * Footer & sitemap
 * (cityu-sitemap = footer)
 *
 */

.cityu-sitemap {
	background-image: linear-gradient(var(--lonndark), var(--lonndark));
}
.sitemap-color-default,
.sitemap-color-default a {
	color: var(--lonnlight) !important;
	font-size: .8rem !important;
}
.cityu-sitemap a[href="#"], .cityu-sitemap a[href="#"]:hover {
	border-bottom: none;
}

.cityu-footer-bottom {
	line-height: 1.2rem !important;
	text-decoration: none;
}

/* Footer & sitemap - reset menu style */

.cityu-sitemap a[data-toggle="dropdown"] {
	font-size: .95rem !important;
	font-weight: 600;
	letter-spacing: .025rem;
	text-transform: lowercase;
}
.cityu-sitemap-list ul li {
	line-height: 1 !important;
}
.cityu-sitemap-list > ul > li > ul {
	margin-top: 2rem;
}

/* Footer & sitemap - reset dropdown menu style */

.cityu-sitemap-list li li,
.cityu-sitemap-list li li a,
.cityu-sitemap-list li li li,
.cityu-sitemap-list li li li a {
	text-decoration: none;
	line-height: 1.2rem !important;
	padding-bottom: .025rem;
	-webkit-transition: .3s ease-in-out !important;
	-o-transition: .3s ease-in-out !important;
	transition: .3s ease-in-out !important;
}
/* redesigned by Lonn */
@media screen and (max-width: 767px) {
	.cityu-sitemap-list li li,
	.cityu-sitemap-list li li a,
	.cityu-sitemap-list li li li,
	.cityu-sitemap-list li li li a {
		padding-bottom: .25rem;
	}
	.cityu-sitemap a[data-toggle="dropdown"] {
		font-size: 1.2rem !important;
	}
	.sitemap-color-default a {
		font-size: .9rem !important;
	}
}
.cityu-sitemap-list li li a,
.cityu-sitemap-list li li li a {
	border-bottom: 1px solid rgba(255,255,255,.5);
}
.cityu-sitemap-list li li a:hover,
.cityu-sitemap-list li li li a:hover {
	border-bottom-color: rgba(255,255,255,0);
}

/* Footer & sitemap - reset list style type */

.cityu-sitemap-list ul ul ul {
	list-style: none;
}
.cityu-sitemap-list li li li {
	margin-left: 0;
}
.cityu-sitemap-list ul ul ul > li {
	position: relative;
	padding-left: .8rem;
}
.cityu-sitemap-list ul ul ul li::before {
	position: absolute;
	font-family: bootstrap-icons;
	content: "\f287";
	font-size: 60%;
	margin-left: -.8rem; /* same as padding-left set on li */
	width: .8rem; /* same as padding-left set on li */
	margin-top: .05rem;
}

/* Footer & sitemap - retouch logos on small screen */

.cityu-footer-logo {
	color: var(--lonnlight);
}
.cityu-footer-logo a {
	text-decoration: none;
}
.cityu-footer-logo a:hover {
	text-decoration-color: var(--lonnred) !important;
}
.footer-logo-cityu {
	height: 40px !important;
	padding-right: 16px;
}
.footer-logo-bms {
	height: 28px !important;
	border-left: 1px solid var(--lonnlight);
	padding-left: 1rem;
}

/*
 *
 * Helpful links
 *
 */

.helplink {
	background-color: var(--lonnmedium);
	padding: 8rem 0;
}

/*
 *
 * Cookie Area
 *
 */

.cityu-cookie-info {
	display: none !important;
	background-color: rgba(255,255,255,.8) !important;
}
.cityu-cookie-info p, .cityu-cookie-info a {
	font-size: .9rem;
	line-height: 1.3;
}

/*
 *
 * Back to top button
 *
 */

.cityu-backtotop {
	background-color: var(--lonnpale);
	box-shadow: none;
	border-radius: 0 !important;
	bottom: calc(80px + 15px + 40px);
	width: 32px;
	height: calc(32px * 1.5);
}
.cityu-backtotop:hover {
	background-color: var(--lonnpale);
}
.cityu-backtotop .fas {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.cityu-backtotop .fa-chevron-up::before {
	color: var(--lonndark);
	font-family: bootstrap-icons;
	content: "\f148";
	font-weight: 300;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-transition: .3s ease-in-out !important;
	-o-transition: .3s ease-in-out !important;
	transition: .3s ease-in-out !important;
}
.cityu-backtotop .fa-chevron-up:hover::before {
	color: var(--lonnred);
}

/*	INDIVIDUAL PAGE ===============================================================================
	===============================================================================================
	===============================================================================================
	===============================================================================================
	============================================================================================ */

/*
 *
 * Homepage
 *
 */
/* Homepage - hero */
.hp-hero.carousel {
	display: relative;
	width: 100vw;
	height: calc(100vh + 6rem);
	color: var(--lonnlight);
	background-color: var(--lonndark);
}
.hp-hero.carousel img {
	height: calc(100vh + 6rem);
	object-fit: cover;
	object-position: center;
	filter: brightness(75%) contrast(100%);
	overflow: hidden;
	animation: ZoomOutHero 7s infinite alternate ease-out;
	animation-fill-mode: both;
}
@keyframes ZoomOutHero {
	0% {
		transform: scale(1.25);
	}
	100% {
		transform: scale(1);
	}
}
@media screen and (max-width: 991px) {
	.hp-hero.carousel {
		height: calc(100vh);
	}
	.hp-hero.carousel img {
		height: calc(100vh);
	}
}
.hp-hero-tag {
	position: absolute;
	width: 100%;
	height: auto;
	left: 0;
	bottom: calc(6rem + 3rem);
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1;
	text-transform: uppercase;
	text-align: center;
	flex-direction: column;
	justify-content: flex-end;
	z-index: 2;
	animation: FadeInDesc 3s;
	animation-fill-mode: forwards;
	animation-delay: 1s;
	visibility: hidden;
}
@keyframes FadeInDesc {
	0% {
		opacity: 0;
	}
	100% {
		opacity: .75;
		visibility: visible
	}
}
.hp-hero-arrow {
	font-size: 2rem;
	margin-top: 3rem;
	animation: MoveUpDown 2.75s linear infinite;
}
@keyframes MoveUpDown {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-.5rem);
	}
}
.hp-hero-tag a {
	color: var(--lonnpale);
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hp-hero-tag a:hover {
	color: var(--lonnyellow);
}
/* Homepage - elements */
.hp h1 {
	font-size: 5rem;
	font-weight: 100;
	line-height: 1;
	margin: 0;
}
.hp h2 {
	color: var(--lonnred);
	font-size: 4rem;
	font-weight: 100;
	line-height: 1;
	border-bottom: 1px solid var(--lonnred);
	padding-bottom: 3rem;
	margin-bottom: 0;
}
.hp-button {
	position: relative;
	left: 0;
	top: 0;
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hp-button:hover {
	left: .25rem;
	top: -.25rem;
}
.hp-button a::after {
	font-family: "Font Awesome 5 Free";
	content: "\f061";
	padding-left: .5rem;
}
.hp-button a {
	display: inline-block;
	padding: .5rem 1rem;
	color: var(--lonnyellow);
	background-color: var(--lonndark);
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 0 var(--lonnyellow);
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hp-button a:hover {
	box-shadow: -.5rem .5rem var(--lonnyellow);
}
/* Homepage - highlight slides carousel */
.hp-highlight.carousel {
	margin-top: calc(-8rem - 6rem) !important;
	margin-bottom: 4rem;
	z-index: 1;
}
@media screen and (max-width: 991px) {
	.hp-highlight.carousel {
		margin-top: 0 !important;
		margin-bottom: 8rem;
	}
}
.hp-highlight.carousel .carousel-caption {
	text-shadow: 0 0 .5rem var(--lonndark);
	bottom: 2rem;
}
.hp-highlight.carousel .carousel-caption p {
	font-size: .9rem;
	margin-bottom: .5rem;
}
.hp-highlight.carousel .carousel-caption h5 {
	line-height: 1.5;
}
.hp-highlight.carousel .carousel-item img {
	object-fit: cover;
	object-position: center;
	height: 28rem;
	overflow: hidden;
}
@media screen and (max-width: 991px) {
	.hp-highlight.carousel .carousel-item img {
		height: 21rem;
	}
}
.hp-highlight.carousel .carousel-control-prev,
.hp-highlight.carousel .carousel-control-next {
	width: 10%;
	border: none !important;
	opacity: .6;
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hp-highlight.carousel .carousel-control-prev:hover,
.hp-highlight.carousel .carousel-control-next:hover {
	opacity: .9;
}
.hp-highlight.carousel .carousel-control-prev {
	justify-content: flex-start;
}
.hp-highlight.carousel .carousel-control-next {
	justify-content: flex-end;
}
.hp-highlight.carousel .carousel-control-icon-wrap {
	padding: .25rem .75rem;
	margin: 0;
	line-height: 0;
}
.hp-highlight.carousel .carousel-control-icon-wrap,
.hp-highlight.carousel .carousel-control-prev-icon,
.hp-highlight.carousel .carousel-control-next-icon {
	background-color: var(--lonnpale);
}
.hp-highlight.carousel .carousel-control-prev-icon,
.hp-highlight.carousel .carousel-control-next-icon {
	width: 1.5rem;
	height: 6rem;
}
.hp-highlight.carousel .carousel-control-prev-icon {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23bf165e" viewBox="0 0 16 16" class="bi bi-arrow-left"> <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"/></svg>');
}
.hp-highlight.carousel .carousel-control-next-icon {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23bf165e" viewBox="0 0 16 16" class="bi bi-arrow-right"> <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/></svg>');
}
/* Homepage - topics */
.hp .section-topic .left,
.hp .section-topic .right {
	margin-bottom: 8rem;
}
@media screen and (max-width: 991px) {
	.hp .section-topic .right {
		margin-bottom: 6rem;
	}
}
.hp-topic-feature {
	position: relative;
	margin-top: 12rem;
}
.hp-topic-feature::before {
	position: absolute;
	content: "Features";
	color: var(--lonnred); /* style same as h1 */
	font-size: 5rem;
	font-weight: 100;
	line-height: 1;
	text-shadow: 0 0 8px var(--lonnpale);
	left: calc(1rem - 5rem / 2);
	top: calc(1rem - 8rem);
	writing-mode: vertical-lr;
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate1800deg);
	transform: rotate(180deg);
	z-index: 1;
}
@media screen and (max-width: 991px) {
	.hp-topic-feature::before {
		left: 1rem;
		writing-mode: horizontal-tb;
		-webkit-transform: inherit;
		-moz-transform: inherit;
		-ms-transform: inherit;
		-o-transform: inherit;
		transform: inherit;
	}
}
	.hp .section-topic h1 {
		writing-mode: horizontal-tb;
	}
}
.hp .section-topic h1 {
	color: var(--lonnred);
	writing-mode: vertical-lr;
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate1800deg);
	transform: rotate(180deg);
}
@media screen and (max-width: 991px) {
	.hp-topic-head {
		float: inherit;
		margin-top: inherit;
		margin-left: inherit;
		margin-bottom: 3rem;
	}
	.hp .section-topic h1 {
		writing-mode: horizontal-tb;
		-webkit-transform: inherit;
		-moz-transform: inherit;
		-ms-transform: inherit;
		-o-transform: inherit;
		transform: inherit;
	}
}
.hp-topic {
	margin-bottom: 4.5rem;
	overflow: hidden;
}
.hp-topic img {
	height: 24rem;
	object-fit: cover;
	object-position: center;
}
.hp-topic-small img {
	height: 8rem;
}
@media screen and (max-width: 991px) {
	.hp-topic-small img {
		height: 12rem;
	}
}
.hp-topic .hp-topic-img-wrap img {
	-webkit-transition: 1s ease-in-out;
	-o-transition: 1s ease-in-out;
	transition: 1s ease-in-out;
}
.hp-topic:hover .hp-topic-img-wrap img {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
	filter: opacity(.75);
}
.hp-topic a {
	color: var(--lonndark);
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hp-topic a:hover {
	color: var(--lonnmedium);
	text-decoration: none;
}
.hp-topic p {
	font-size: .8rem;
	font-weight: normal;
	margin-bottom: .5rem;
}
.hp-topic h5 {
	font-size: 1.6rem !important;
	font-weight: 700;
	line-height: 1.4;
	margin-bottom: 1rem;
}
.hp-topic-small h5 {
	font-size: 1.2rem !important;
	margin-bottom: 0 !important;
}
.hp-topic div {
	font-size: .9rem;
	margin-top: 1rem;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 7;
	overflow: hidden;
	text-overflow: ellipsis;
}
.hp-topic-small div {
	-webkit-line-clamp: unset !important;
	text-overflow: clip !important;
}
/* Homepage - event */
.hp-event {
	margin-top: 6rem;
}
.hp-event-item {
	border-bottom: 1px solid var(--lonnred);
	margin: 0;
	padding: 2rem 0;
}
.hp-event-item a * { /*backup only */
	color: var(--lonndark);
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hp-event-item a:hover { /*backup only */
	text-decoration: none;
}
.hp-event-item .hp-event-type {
	color: var(--lonndarkred);
	font-size: .8rem;
	font-weight: 900;
	line-height: 1;
	letter-spacing: .05rem;
	text-transform: uppercase;
	padding-bottom: 1rem;
}
.hp-event-item h5 {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.25;
	padding-bottom: .5rem;
}
.hp-event-item h6 {
	font-weight: 800;
	line-height: 1.5;
	padding-bottom: 1rem;
}
.hp-event-item .hp-event-time,
.hp-event-item .hp-event-venue {
	color: var(--lonnmedium);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .025rem;
	line-height: 1.5;
	padding-bottom: .5rem;
	text-transform: uppercase;
}
.hp-event-extraurl {
	padding-top: 1rem;
}
/* Homepage - programmes */
.hp .section-prog {
	color: var(--lonnlight);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	box-shadow: inset 100vw 100vh rgba(0,0,0,.8);
	padding: 12rem 0;
}
@media screen and (max-width: 991px) {
	.hp .section-prog {
		padding: 6rem 0;
	}
}
.hp .section-prog h1 {
	color: var(--lonnyellow);
}
.hp .section-prog p {
	line-height: 2 !important;
	margin: 4rem 0 0 0;
	padding: 0;
}
	/* border box */
.hp-borderbox-yellow {
	position: relative;
	display: block;
	font-size: 1.8rem;
	line-height: 1.5;
	border: 1px solid var(--lonnyellow);
	background: var(--lonndark);
	padding: 1.5rem;
	cursor: pointer;
	transform-style: preserve-3d;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	-webkit-hyphenate-limit-before: 5; /* for Safari */
	-webkit-hyphenate-limit-after: 4; /* for Safari */
	-ms-hyphenate-limit-chars: 6 5 4;
	hyphenate-limit-chars: 6 5 4;
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hp-borderbox-yellow a {
	color: var(--lonnlight) !important;
	text-decoration: none;
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hp-borderbox-yellow:hover,
.hp-borderbox-yellow a:hover {
	color: var(--lonnyellow) !important;
}
.hp-borderbox-yellow a .deg {
	display: inline-block;
	border-bottom: 2px solid var(--lonnlight);
	margin-bottom: .5rem;
}
	/* border box - shadow border */
.hp-borderbox-yellow::before {
	border: 1px solid var(--lonnyellow);
	position: absolute;
	left: .5rem;
	top: .5rem;
	width: 100%;
	height: 100%;
	content: "";
	-webkit-transform: translateZ(-1px);
	-moz-transform: translateZ(-1px);
	-ms-transform: translateZ(-1px);
	-o-transform: translateZ(-1px);
	transform: translateZ(-1px);
}
	/* border box - shadow color */
.hp-borderbox-yellow::after {
	background-color: var(--lonnyellow);
	position: absolute;
	-webkit-transform: translateZ(-.5rem);
	-moz-transform: translateZ(-.5rem);
	-ms-transform: translateZ(-.5rem);
	-o-transform: translateZ(-.5rem);
	transform: translateZ(-.5rem);
	left: calc(100% + .5rem);
	top: calc(100% + .5rem);
	width: 0%;
	height: 0%;
	content: "";
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hp-borderbox-yellow:hover::after {
	left: .5rem;
	top: .5rem;
	width: 100%;
	height: 100%;
}
/* Homepage - publications */
.hp .section-publ {
	padding: 8rem 0 32rem 0;
}
.hp .section-publ .col:first-of-type .hp-publ-item:first-of-type {
	margin-top: calc(5rem * 1.5);
}
.hp .section-publ .hp-publ-desc {
	font-weight: 500;
}
.hp-publ-item:first-of-type {
	border-top: 1px dotted var(--lonnlight);
}
.hp-publ-item {
	padding: 2rem 0;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	border-bottom: 1px dotted var(--lonnlight);
}
.hp-publ-item strong {
	font-weight: 600;
}
.hp-publ-item h4 {
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: .02rem;
	line-height: 1.4;
	margin-bottom: 1rem;
}
.hp-publ-item p {
	font-size: .8rem;
	font-weight: 400;
	letter-spacing: .05rem;
	margin: 1rem 0 0 0;
}
.hp-publ-item a {
	font-size: .85rem;
	color: var(--lonndark);
	text-decoration: none;
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hp-publ-item a:hover {
	color: var(--lonnyellow);
	opacity: .5 !important;
}
.hp .section-publ .hp-button {
	margin-top: 3rem;
}
/* Homepage - researcy stories */
.hp .section-story {
	padding: 12rem 0;
}
.hp-story-topimg {
	margin-top: -30rem;
}
.hp-story-topimg img {
	width: 100%;
	height: 36rem;
	object-fit: cover;
	object-position: center;
	overflow: hidden;
}
@media screen and (max-width: 991px) {
	.hp .section-story {
		padding: 6rem 0 !important;
	}
	.hp-story-topimg img {
		height: 24rem !important;
	}
	.hp .section-story .row > div:nth-child(even) {
		margin-top: 0 !important;
	}
	.hp-story-img {
		height: 14rem !important;
	}
	.hp-story-item .hp-story-img-wrap {
		padding: 0 !important;
	}
	.hp-story-item:hover .hp-story-img-wrap img {
		-webkit-transform: none !important;
		-moz-transform: none !important;
		-ms-transform: none !important;
		-o-transform: none !important;
		transform: none !important;
	}
}
.hp .section-story h1 {
	text-align: center;
	margin-top: -3rem;
	margin-bottom: 12rem;
	text-shadow: 0 0 1rem var(--lonndarkred);
}
.hp .section-story .row > div:nth-child(even) {
	margin-top: 9rem;
}
.hp-story-items-wrap {
	margin-bottom: 6rem;
}
.hp-story-img {
	display: flex;
	position: relative;
	justify-content: center;
	align-items: center;
	height: 28rem;
}
.hp-story-img::before {
	position: absolute;
	content: "";
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: var(--lonndark);
	background-image: url('/bms/img/hero/graphic01.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	box-shadow: inset 100vw 100vh rgba(107,32,62,.75);
}
.hp-story-item .hp-story-img-wrap {
	width: 100%;
	height: 100%;
	padding: 10%;
	z-index: 1;
}
.hp-story-item .hp-story-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	-webkit-transition: .5s ease-in-out;
	-o-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
}
.hp-story-item:hover .hp-story-img-wrap img {
	-webkit-transform: scale(1.25);
	-moz-transform: scale(1.25);
	-ms-transform: scale(1.25);
	-o-transform: scale(1.25);
	transform: scale(1.25);
}
.hp-story-item a {
	color: var(--lonnlight);
	font-size: .8rem;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hp-story-item a p {
	font-size: 1.6rem;
	line-height: 1.4;
	margin: 2rem 0 1rem 0;
}
.hp-story-item a p.source {
	font-size: .8rem;
	line-height: 1.5;
}
.hp-story-item a:hover {
	color: var(--lonnyellow);
}
/* Homepage - contact */
.hp .section-contact {
	padding: 8rem 0;
}
.hp .section-contact .row {
	align-items: center;
}
.hp .section-contact .miniheading {
	margin: 3rem 0 1rem 0;
}
.hp .section-contact .miniheading:first-child {
	margin-top: 0;
}
.hp .section-contact,
.hp .section-contact a {
	color: var(--lonndark);
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.5;
	text-decoration: none;
}
.hp .section-contact p,
.hp .section-contact a p {
	margin-bottom: 0;
	padding-bottom: 1rem;
}
.hp .section-contact p strong {
	font-weight: 600;
}
.hp .section-contact a {
	border-bottom: 1px solid var(--lonnmedium);
}
.hp .section-contact a:hover {
	border-bottom: 1px solid var(--lonnred);
}

/*
 *
 * About BMS
 *
 */

.about.bms .section p:not(.display) {
	font-size: 1.4rem;
}
.about.bms .section-links {
	background-color: var(--lonndark);
	background-image: url('/bms/img/hero/graphic01.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	box-shadow: inset 100vw 100vh rgba(35,31,32,.8);
	padding-top: 3rem;
	padding-bottom: 3rem;
}
.about.bms .section .lonnbtn {
	font-size: 120%;
	background-size: 100% 100%;
}
.about.bms .section .lonnbtn:hover {
	color: var(--lonnlight) !important;
	background-size: 100% 0%;
}
.about.bms .section img {
	width: 100%;
	height: 14rem;
	object-fit: cover;
	object-position: center;
}
@media screen and (min-width: 992px) {
	.about.bms .section img {
		height: 28rem;
	}
}

/*
 *
 * Recruitment
 *
 */

@media screen and (max-width: 991px) {
	.vacancylist > div > div {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.vacancylist div div p:last-child {
		margin-bottom: 1rem;
	}
}

/* Recruitment - remove margin bottom of last element */

@media screen and (min-width: 992px) {
	.vacancylist div div p:last-child {
		margin-bottom: 0;
	}
}

/* Recruitment - borders */

.vacancylist > div {
	padding: 3rem 0;
	border-bottom: 1px solid var(--lonnmedium);
}
.vacancylist > div:first-child {
	border-top: 1px solid var(--lonnmedium);
}

/* Recruitment - text */

	/* miniheading + padding */
.vacancylist > div > :first-child {
	color: var(--lonnred);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .05rem;
	text-transform: uppercase;
	padding-left: 0 !important;
	padding-bottom: 1rem;
}
.vacancylist > div > :nth-child(2) > :first-child {
	font-size: 1.5rem;
	font-weight: 600;
	line-height: normal;
}
.vacancylist > div > :nth-child(2) > :nth-child(2) {
	color: var(--lonnmedium);
}
.vacancylist > div > :last-child {
	padding-right: 0 !important;
}

/*
 *
 * Contact
 *
 */

.about.contact h4 {
	margin-top: 3rem !important;
	margin-bottom: .2rem !important;
}
.about.contact h4:first-child {
	margin-top: 0 !important;
}
.about.contact h6 {
	font-weight: 900 !important;
	margin-top: 0 !important;
	padding-top: 3rem;
}
.about.contact h6:first-child {
	padding-top: 0 !important;
}
.about.contact p {
	line-height: 1.5 !important;
	margin-top: 0;
	margin-bottom: 0 !important;
}
.about .email::before {
	font-family: bootstrap-icons;
	content: "\f32c";
	padding-right: .5rem;
	vertical-align: -.1rem !important;
}
.about .tel::before {
	font-family: bootstrap-icons;
	content: "\f5b4";
	padding-right: .5rem;
	vertical-align: -.1rem !important;
}

/*
 *
 * Faculty
 *
 */

.faculty .col {
	margin-bottom: 6rem;
}
.faculty .card {
	height: 100%;
	font-size: .9rem;
	background: transparent;
	box-shadow: none;
}
.faculty .card .faculty-name {
	color: var(--lonndark);
	font-size: 1.3rem;
	font-weight: 800;
	background: initial;
	-webkit-background-clip: initial;
	-webkit-text-fill-color: initial;
	font-size: 1.3rem;
	line-height: 2;
	letter-spacing: .03rem;
	margin: 1.5rem 0 !important;
}
.faculty .stretched-link .faculty-name u {
	text-decoration: none;
	padding-bottom: .2rem !important;
	border-bottom: 5px solid var(--lonnred);
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.faculty .stretched-link:hover .faculty-name u,
.fac-alpha .stretched-link:hover p u {
	color: var(--lonnred);
	border-bottom: 5px solid var(--lonndarkred);
}
.faculty .faculty-item .img-container {
	position: relative;
	overflow: hidden;
	left: 0;
	top: 0;
	box-shadow: 0 0 var(--lonnred);
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.faculty .faculty-item:hover .img-container {
	left: .5rem;
	top: -.5rem;
	box-shadow: -1rem 1rem var(--lonnred);
}
.faculty h3 {
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: .02rem;
	line-height: 1.3;
	margin-top: 0;
	margin-bottom: .5rem;
}
.faculty h3 small {
	letter-spacing: normal;
}
.faculty .infobox {
	font-size: .9rem;
	line-height: 1.5;
	padding-top: 1rem;
}
.faculty .infobox li {
	position: relative;
	padding: 0 0 .5rem 1.5rem !important;
	background-color: inherit;
	border: none;
}
.faculty .infobox li::before {
	position: absolute;
	margin-left: -1.5rem !important; /* same as padding-left set on li */
	width: 1.5rem !important; /* same as padding-left set on li */
}
.faculty .infobox .tel::before {
	font-family: bootstrap-icons;
	content: "\f5b4";
}
.faculty .infobox .email::before {
	font-family: bootstrap-icons;
	content: "\f32c";
}
.faculty .infobox .researchinterest::before {
	font-family: "Material Icons Round";
	content: "\ea3a";
	font-size: 1.4rem;
	margin-top: -.5rem;
	margin-left: -1.75rem !important;
}
	/* Faculty - disable automatic detection of possible phone numbers */
.faculty .tel a {
	color: inherit !important;
	text-decoration: none !important;
	border-bottom: none !important;
}

/*
 *
 * Faculty - Alphabetical
 *
 */

@media screen and (max-width: 991px) {
	.fac-alpha > div > div {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

	/* Faculty - Alphabetical - borders */

.fac-alpha .miniheading {
	border: none
}
.fac-alpha > div:nth-child(2) {
	border-top: 1px solid var(--lonnmedium);
}
.fac-alpha > div {
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--lonnmedium);
}

	/* Faculty - Alphabetical - text */

.fac-alpha > div:first-child {
	padding-bottom: 3rem;
}
.fac-alpha > div > :first-child {
	padding-left: 0 !important;
}
.fac-alpha > div > :first-child p {
	color: var(--lonndark);
	font-size: 1.1rem;
	font-weight: 800;
	letter-spacing: .03rem;
	margin-bottom: .2rem;
}
.fac-alpha .stretched-link p u {
	text-decoration: none;
	padding-bottom: .2rem !important;
	border-bottom: 4px solid var(--lonnred);
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.fac-alpha > div > :nth-child(3) a,
.fac-alpha > div > :nth-child(4) a {
	color: var(--lonndark);
	border-bottom: 1px solid var(--lonnred);
}
.fac-alpha > div > :nth-child(3) a:hover,
.fac-alpha > div > :nth-child(4) a:hover {
	color: var(--lonnred);
	border-bottom: 1px solid var(--lonndark);
}
.fac-alpha > div > :last-child {
	padding-right: 0 !important;
}
.fac-alpha .home-dept {
	line-height: 1;
	letter-spacing: normal !important;
	margin-top: 1rem;
}
	/* Faculty - Alphabetical - miniheading + padding @ faculty on smaller screen */
@media screen and (max-width: 767px) {
	.fac-alpha .researchinterest::before,
	.fac-alpha .email::before,
	.fac-alpha .tel::before {
		display: block;
		color: var(--lonnred);
		font-size: .75rem;
		font-weight: 600;
		letter-spacing: .05rem;
		text-transform: uppercase;
		padding: 1.5rem 0 0;
	}
	.fac-alpha .researchinterest::before {
		content: "Research Interest";
	}
	.fac-alpha .email::before {
		content: "Email";
	}
	.fac-alpha .tel::before {
		content: "Tel";
	}
}

/*
 *
 * Profile / Subpage
 *
 */

.subpage h2 {
	font-size: 2rem;
}
@media screen and (min-width: 992px) {
	.subpage .cityu-sitemap-inner {
		display: none;
	}
}

/* Subpage - Top */

.subpage-top {
	width: 100vw;
	padding-top: calc(24px + 70px + 6rem);
	padding-bottom: 6rem;
}
.news.indivpage .subpage-top {
	padding-bottom: 8rem;
}
@media screen and (max-width: 575px) {
	.subpage-top {
		padding-bottom: 3rem;
	}
}
@media screen and (max-width: 991px) {
	.subpage-top {
		padding-top: calc(24px + 70px + 3rem);
	}
}
.subpage-top-text h1 {
	display: inline-block;
	font-size: 3rem;
	font-weight: 700;
	color: var(--lonnlight);
	margin-bottom: 2rem;
}
.news.indivpage .subpage-top-backanddate {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.news.indivpage .subpage-top-backanddate div {
	color: var(--lonnlight);
	font-size: .9rem;
	font-weight: 300;
	margin-bottom: 3px;
}
.news.indivpage .subpage-top a i {
	font-size: 1rem;
	vertical-align: 1px;
}
.news.indivpage .subpage-top a {
	color: var(--lonnlight);
	font-size: 1.1rem;
	font-weight: 600;
	text-decoration: none;
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.news.indivpage .subpage-top a:hover {
	color: var(--lonndark);
}
.news.indivpage .subpage-top-text h1 {
	margin-bottom: 0;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	-webkit-hyphenate-limit-before: 5; /* for Safari */
	-webkit-hyphenate-limit-after: 4; /* for Safari */
	-ms-hyphenate-limit-chars: 6 5 4;
	hyphenate-limit-chars: 6 5 4;
}
.subpage-top-text .pos {
	display: inline-block;
	color: var(--lonnlight);
	margin-bottom: 2rem;
}
.subpage-top-text .pos p {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: normal;
}
.subpage-top-text .pos p:not(:last-child) {
	margin-bottom: .5rem;
}
.subpage-top-text > p {
	margin: 0;
	padding-left: calc(1rem - 5px);
	color: var(--lonnlight);
	border-left: 5px solid rgba(235,235,235,0.5);
}

/* Subpage - Bottom */

.profile.subpage .cityu-main {
	padding-top: 6rem;
}
@media screen and (max-width: 575px) {
	.profile.subpage .cityu-main {
		padding-top: 3rem;
	}
}
	/* header */
.profile.subpage .accordion {
	margin-top: 8rem;
}
.profile.subpage .accordion .accordion-header {
	cursor: pointer;
	margin: 0 0 3rem 0;
}
.profile.subpage .accordion .lonnbtn-accordion {
	position: relative;
	width: 100%;
	padding: 0 3rem 0 0;
	text-align: left;
	color: var(--lonndarkred);
	background-color: transparent;
	font-size: 2rem;
	font-weight: 800;
	line-height: 1.5;
	border: none;
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.profile.subpage .accordion .lonnbtn-accordion:hover,
.profile.subpage .accordion .lonnbtn-accordion[aria-expanded="true"]:hover {
	color: var(--lonnred);
}
.profile.subpage .accordion .lonnbtn-accordion[aria-expanded="true"] {
	color: var(--lonndarkred);
}
.profile.subpage .accordion .lonnbtn-accordion::after,
.profile.subpage .accordion .lonnbtn-accordion::before {
	position: absolute;
	display: block;
	top: .625rem; /* icon:text scale */
	right: 0;
	color: var(--lonnred);
	font-family: bootstrap-icons;
	content: "\f63b";
	font-size: 1.5rem;
	line-height: 1;
	visibility: visible;
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.profile.subpage .accordion .lonnbtn-accordion::after {
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
}
.profile.subpage .accordion .lonnbtn-accordion::before {
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
}
.profile.subpage .accordion .lonnbtn-accordion[aria-expanded="true"]::after,
.profile.subpage .accordion .lonnbtn-accordion[aria-expanded="true"]::before,
.profile.subpage .accordion .lonnbtn-accordion:not(.collapsed)::after,
.profile.subpage .accordion .lonnbtn-accordion:not(.collapsed)::before {
	color: var(--lonnmedium);
}
.profile.subpage .accordion .lonnbtn-accordion[aria-expanded="true"]::after,
.profile.subpage .accordion .lonnbtn-accordion:not(.collapsed)::after {
	-webkit-transform: rotate(0);
	-moz-transform: rotate(0);
	-ms-transform: rotate(0);
	-o-transform: rotate(0);
	transform: rotate(0);
	visibility: visible;
}
.profile.subpage .accordion .lonnbtn-accordion[aria-expanded="true"]::before,
.profile.subpage .accordion .lonnbtn-accordion:not(.collapsed)::before {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
	visibility: hidden;
}
	/* body */
.profile.subpage .accordion .accordion-body {
	border: 1px solid transparent; /* for smooth expanding */
}
.profile.subpage .accordion .accordion-body > div {
	margin: 0 0 5rem; /* set margin here instead of parent for smooth expanding */
}
.profile.subpage .accordion .accordion-body a {
	color: inherit;
	border-bottom: 1px solid var(--lonndark);
}
.profile.subpage .accordion .accordion-body a:hover {
	border-bottom: 1px solid transparent;
}
.news.indivpage .cityu-main {
	padding-top: 8rem;
}
.subpage-bottom .list-group a {
	color: var(--lonndark);
}
.subpage-bottom .list-group-item:not(:last-child) {
	border-bottom: 1px solid var(--lonnlight);
}
.subpage-bottom .infobox li {
	padding-left: 3rem !important;
}
.subpage-bottom .list-group-item:before {
	position: absolute;
	color: var(--lonndark) !important;
	margin-left: -2rem !important; /* same as padding-left set on li */
	width: 2rem !important; /* same as padding-left set on li */
}
.subpage-bottom .infobox .office:before {
	font-family: bootstrap-icons;
	content: "\f305";
}
.subpage-bottom .infobox .tel:before {
	font-family: bootstrap-icons;
	content: "\f5b4";
}
.subpage-bottom .infobox .fax:before {
	font-family: bootstrap-icons;
	content: "\f500";
}
.subpage-bottom .infobox .email:before {
	font-family: bootstrap-icons;
	content: "\f32c";
}
.subpage-bottom .infobox .publ:before {
	font-family: bootstrap-icons;
	content: "\f10c";
}
.subpage-bottom .infobox .web:before {
	font-family: bootstrap-icons;
	content: "\f301";
}
.subpage-bottom .infobox .researchinterest:before {
	font-family: "Material Icons Round";
	content: "\ea3a";
	font-size: 1.4rem;
	margin-top: -.4rem;
	margin-left: -2.3rem !important;
}
.news.indivpage .subpage-bottom {
	font-size: 1.1rem;
}
.news.indivpage .subpage-bottom figure img {
	display: block;
	width: 100%;
}
.news.indivpage .subpage-bottom figure:not(:last-child) img:only-child {
	margin-bottom: 3rem;
}
.news.indivpage .subpage-bottom figure:last-child,
.news.indivpage .subpage-bottom figure:last-child img:only-child {
	margin-bottom: 0;
}
.news.indivpage .subpage-bottom figcaption {
	color: var(--lonnmedium);
	font-size: .9rem;
	border-top: 1px solid var(--lonnmedium);
	margin: 1rem 0 3rem 0;
	padding-top: .5rem;
}
.news.indivpage .subpage-bottom .para figure {
	margin-top: 3rem;
}
.news.indivpage .subpage-bottom .para > figure:first-child {
	margin-top: -12rem;
}
@media screen and (max-width: 767px) {
	.news.indivpage .subpage-bottom figure:first-of-type {
		margin-top: 3rem;
	}
}
.subpage-back::before {
	font-family: "Font Awesome 5 Free";
	content: "\f060";
	padding-right: .25rem;
}

/*
 *
 * Individual People
 *
 */

.people-indv {
	font-size: .9rem;
	margin-bottom: 3rem;
}
.people-indv h3 {
	font-size: 1.2rem;
	margin-top: 0;
	margin-bottom: .25rem;
}
.people-indv h3:only-child {
	margin-bottom: 0;
}
.student .people-indv h3,
.graduate .people-indv h3 {
	margin-bottom: .75rem;
}
.people-indv p {
	margin-bottom: .75rem;
}
.people-indv a {
	color: var(--lonndark) !important;
}
.people-indv a:hover {
	color: var(--lonnred) !important;
}
.people-indv ul {
	list-style: none;
	line-height: 1.5;
	margin: 0;
	padding: 0;
}
.people-indv ul li {
	position: relative;
	padding: 0 0 .25rem 1.25rem !important;
	background-color: inherit;
	border: none;
}
.people-indv ul li::before {
	position: absolute;
	margin-left: -1.25rem !important; /* same as padding-left set on li */
	width: 1.25rem !important; /* same as padding-left set on li */
}
.people-indv ul .tel::before {
	font-family: bootstrap-icons;
	content: "\f5b4";
}
.people-indv ul .email::before {
	font-family: bootstrap-icons;
	content: "\f32c";
}
.people-indv ul .office::before {
	font-family: bootstrap-icons;
	content: "\f305";
}
.people-indv ul .spvs::before {
	font-family: bootstrap-icons;
	content: "\f4cf";
}
.people-indv ul .thesis::before {
	font-family: bootstrap-icons;
	content: "\f3b8";
}
.people-indv ul .year::before {
	font-family: "Material Icons Round";
	content: "\e80c";
	font-size: 1rem;
	margin-top: -.1rem;
	margin-left: -1.3rem !important;
}
.people-indv ul .researchinterest::before {
	font-family: "Material Icons Round";
	content: "\ea3a";
	font-size: 1.3rem;
	margin-top: -.4rem;
	margin-left: -1.5rem !important;
}

/*
 *
 * Research Overview
 *
 */

/* Research Overview - Research Focus */
.research.overview .focus .tab-pane {
	overflow: hidden;
}
/* Research Overview - Research Area */
.research.overview .area .nav {
	font-size: .9rem;
}
.research.overview .area .nav div {
	margin: 1rem 0 .5rem;
}
.research.overview .area .nav div:first-child {
	margin-top: 0;
}
.research.overview .area .nav-link {
	color: var(--lonndark);
	border: none;
	padding: 0 0 0 1.5rem;
	-webkit-transition: none;
	-o-transition: none;
	transition: none;
}
.research.overview .area .nav-link::before {
	color: var(--lonnred);
	font-family: bootstrap-icons;
	content: "\f584";
	margin-left: -1.5rem;
	padding-right: .4rem;
}
.research.overview .area .nav-link:hover::before,
.research.overview .area .nav-link.active::before {
	content: "\f26d";
}
.research.overview .area .tab-content {
	font-size: 1.1rem;
}
.research.overview .area .tab-content ul {
	list-style: none;
	padding-left: 0;
}
.research.overview .area .tab-content ul li {
	padding: .5rem 0;
	border-bottom: 1px solid var(--lonnmedium);
}
.research.overview .area .tab-content ul li:first-child {
	padding-top: 0;
}
.research.overview .area .tab-content a {
	border: none;
}

/*
 *
 * Publications
 *
 */

.research.publ .publ-wrap {
	margin-top: 3rem;
	margin-bottom: 2rem;
	border-top: 1px solid var(--lonnmedium);
}
.research.publ .publ-wrap h4 {
	font-weight: 800;
	letter-spacing: .025rem;
	margin-top: 2rem;
	margin-bottom: 0;
}
.research.publ .publ-wrap p {
	font-weight: 300;
	margin: 0;
	padding: 1.5rem 0 2rem;
	border-bottom: 1px solid var(--lonnmedium);
}
.research.publ .publ-wrap p strong {
	font-weight: 600;
}
.research.publ .publ-wrap a {
	color: var(--lonndark);
	border: none;
}
.research.publ .publ-wrap a:hover {
	color: var(--lonnred);
}
/*
 *
 * External Grants
 *
 */

.research.grant .section .col {
	margin-bottom: 3rem;
}
.research.grant .section .col p {
	font-size: 1.2rem;
	line-height: 1.6;
	border-top: 1px solid var(--lonndark);
	padding: .5rem 0 0;
	margin-bottom: 0;
}
.research.grant .section .col p:last-child {
	margin-bottom: 0;
}
.research.grant .section .col a {
	border: none;
}
.research.grant .section .col a .rounded-pill {
	color: var(--lonnlight);
	background-color: var(--lonnred);
	letter-spacing: .05rem;
	padding: .25rem .5rem;
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.research.grant .section .col a .rounded-pill:hover {
	color: var(--lonnred);
	background-color: var(--lonnpale);
}

/*
 *
 * Lab Safety
 *
 */

.research.safety h3,
.research.safety h4 {
	font-weight: 900 !important;
	border-bottom: 1px solid;
	padding-bottom: .5rem;
	margin: 3rem 0 1.5rem;
}
.research.safety h4 {
	font-size: 1rem;
}
.research.safety h3:first-child,
.research.safety h4:first-child {
	margin-top: 0;
}
.research.safety .section .no-gutters {
	line-height: 1.6;
	margin-bottom: 1rem;
}
.research.safety .section .no-gutters:last-child {
	margin-bottom: 0;
}
.research.safety .section .pdf::before {
	font-family: bootstrap-icons;
	content: "\f640";
}
.research.safety .section .video::before {
	font-family: bootstrap-icons;
	content: "\f3c3";
}
.research.safety .section .word::before {
	font-family: bootstrap-icons;
	content: "\f3bb";
}
.research.safety .section .xls::before {
	font-family: bootstrap-icons;
	content: "\f396";
}
.research.safety .section .ppt::before {
	font-family: bootstrap-icons;
	content: "\f3af";
}
.research.safety .section .url::before {
	font-family: bootstrap-icons;
	content: "\f470";
}
.research.safety .section .email::before {
	font-family: bootstrap-icons;
	content: "\f32f";
}
.research.safety .section .link {
	font-size: .9rem;
}
.research.safety .section .link a {
	border: none;
}
.research.safety .section .text-right {
	line-height: 1.2;
}
.research.safety .section .rounded-pill {
	color: var(--lonnpale);
	background-color: var(--lonnmedium);
	font-size: .7rem;
	font-family: monospace;
}
.research.safety .section .rounded-pill.new {
	font-size: .7rem;
	color: var(--lonndark);
	background-color: var(--lonnyellow);
}

/*
 *
 * Programme
 *
 */

/* Programme - fast fact */

.prog .fastfact {
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.4;
	border-top: 1px solid var(--lonnred);
	border-bottom: 1px solid var(--lonnred);
	margin-top: 3rem;
	margin-bottom: 3rem;
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}
.prog .fastfact:last-child {
	margin-bottom: 0;
}
.prog .fastfact > div > div {
	margin-bottom: 1.5rem;
}
.prog .fastfact .row {
	margin-bottom: -1.5rem;
}
.prog .fastfact .miniheading {
	margin-bottom: .5rem;
}
.prog .fastfact li,
.prog .fastfact p {
	margin-bottom: .5rem !important;
}
.prog .fastfact a {
	color: inherit;
	border-bottom: 1px dotted var(--lonnred);
}

/* Programme - career */

.prog .career .row {
	border-bottom: 1px solid var(--lonnmedium);
	padding: 1.5rem 0;
	align-items: center;
}
.prog .career .row > div {
	padding-left: 0;
}
.prog .career .row > div:last-child {
	padding-right: 0;
}
.prog .career .row ul {
	font-size: .9rem;
	list-style: none;
	margin-bottom: 0;
	padding-left: 0;
}
.prog .career .row ul li {
	line-height: normal;
	margin-bottom: .5rem;
}
.prog .career .row ul li:last-child {
	margin-bottom: 0;
}
.prog .career .row div:first-child::before {
	font-family: "Material Icons Outlined";
	font-size: 3rem;
	line-height: normal;
	color: var(--lonnred);
}
.prog .career .row.med div:first-child::before {
	content: "\f109";
}
.prog .career .row.edu div:first-child::before {
	content: "\ea3a";
}
.prog .career .row.mgt div:first-child::before {
	content: "\f233";
}
.prog .career .row.govt div:first-child::before {
	content: "\e0af";
}
.prog .career .row.other div:first-child::before {
	content: "\eb3f";
}
.prog .career h3 {
	font-size: 1.2rem;
	margin: 0;
}
/* Programme - curriculum */
.prog .cur > ul > li {
	margin-bottom: 0;
}
/* Programme - curriculum - accordion */
.prog:not(.award) .accordion {
	border-top: 1px solid var(--lonndark);
}
.prog:not(.award) .accordion .accordion-item {
	border-bottom: 1px solid var(--lonndark);
}
	/* header */
.prog:not(.award) .accordion .accordion-header {
	cursor: pointer;
	margin: 1rem 0;
}
.prog:not(.award) .accordion .lonnbtn-accordion {
	position: relative;
	display: flex;
	width: 100%;
	padding: 0;
	text-align: left;
	color: inherit;
	background-color: transparent;
	font-weight: inherit;
	border: none;
}
.prog:not(.award) .accordion .lonnbtn-accordion::before {
	flex-shrink: 0;
	margin-right: 1rem;
	font-family: bootstrap-icons;
	content: "\f231";
	line-height: 1;
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.prog:not(.award) .accordion .lonnbtn-accordion:not(.collapsed)::before {
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
}
	/* body */
.prog:not(.award) .accordion .accordion-body {
	margin-left: calc(25px + 1rem);
	border: 1px solid transparent; /* for smooth expanding */
}
.prog:not(.award) .accordion .accordion-body > div {
	margin: 2rem 0 3rem; /* set margin here instead of parent for smooth expanding */
}
.prog:not(.award) .accordion .accordion-body a {
	color: inherit;
	border-bottom: 1px solid var(--lonndark);
}
.prog:not(.award) .accordion .accordion-body a:hover {
	border-bottom: 1px solid transparent;
}
/* Programme - award - accordion */
.prog.award .accordion {
	border-top: 1px solid var(--lonnmedium);
}
.prog.award .accordion .accordion-item {
	border-bottom: 1px solid var(--lonnmedium);
}
	/* header */
.prog.award .accordion .accordion-header {
	cursor: pointer;
	margin: 1.5rem 0;
}
.prog.award .accordion .lonnbtn-accordion {
	position: relative;
	width: 100%;
	padding: 0 3rem 0 0;
	text-align: left;
	color: inherit;
	background-color: transparent;
	font-size: 2rem;
	font-weight: 600;
	line-height: 1.5;
	border: none;
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.prog.award .accordion .lonnbtn-accordion:hover {
	color: var(--lonnred);
}
.prog.award .accordion .lonnbtn-accordion[aria-expanded="true"] {
	color: var(--lonnred);
}
.prog.award .accordion .lonnbtn-accordion::after,
.prog.award .accordion .lonnbtn-accordion::before {
	position: absolute;
	display: block;
	top: .625rem; /* icon:text scale */
	right: 0;
	color: var(--lonnred);
	font-family: bootstrap-icons;
	content: "\f63b";
	font-size: 1.5rem;
	line-height: 1;
	visibility: visible;
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.prog.award .accordion .lonnbtn-accordion::after {
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
}
.prog.award .accordion .lonnbtn-accordion::before {
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
}
.prog.award .accordion .lonnbtn-accordion:not(.collapsed)::after,
.prog.award .accordion .lonnbtn-accordion:not(.collapsed)::before {
	color: var(--lonnmedium);
}
.prog.award .accordion .lonnbtn-accordion:not(.collapsed)::after {
	-webkit-transform: rotate(0);
	-moz-transform: rotate(0);
	-ms-transform: rotate(0);
	-o-transform: rotate(0);
	transform: rotate(0);
	visibility: visible;
}
.prog.award .accordion .lonnbtn-accordion:not(.collapsed)::before {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
	visibility: hidden;
}
.prog.award.pg .accordion .accordion-body ul {
	display: flex;
	flex-wrap: wrap;
	padding-left: 0;
	list-style: none;
}
	/* body */
.prog.award .accordion .accordion-body {
	border: 1px solid transparent; /* for smooth expanding */
}
.prog.award .accordion .accordion-body > div {
	margin: 2rem 0 3rem; /* set margin here instead of parent for smooth expanding */
}
.prog.award .accordion .accordion-body a {
	color: inherit;
	border-bottom: 1px solid var(--lonndark);
}
.prog.award .accordion .accordion-body a:hover {
	border-bottom: 1px solid transparent;
}
.prog.award .accordion table tr th {
	padding-top: 1rem !important;
}
.prog.award .accordion table tr td:nth-of-type(1) {
	width: 55%;
}
.prog.award .accordion table tr td:nth-of-type(2) {
	width: 30%;
}
.prog.award .accordion table tr td:nth-of-type(3) {
	width: 15%;
}
.prog.award .accordion ul.basic {
	margin-left: 1rem !important;
	margin-bottom: 0 !important;
}
.prog.award .accordion ul.basic > li::before {
	color: var(--lonndark) !important;
}

/* Programme - figure */
.prog figure {
	margin: 0 0 1.5rem 0;
	padding: 0;
}
.prog figcaption {
	color: var(--lonnmedium);
	font-size: .9rem;
	border-top: 1px solid var(--lonnmedium);
	margin: 1rem 0 3rem 0;
	padding-top: .5rem;
}
	/* exchange */
.prog.exchange figure:last-of-type {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}
	/* attachment */
.prog .adm .borderbox-nest {
	margin-top: 6rem;
}
.prog .adm .borderbox-nest .icon {
	display: block;
	font-size: 4.5rem;
}

/*
 *
 * News
 *
 */

.broadcast.news .tab-content,
.broadcast.news .lonnbtn-filter-container {
	margin-top: 6rem;
}
.news-container > div {
	margin-bottom: 6rem;
}
.news-container {
	margin-bottom: -6rem !important;
}
.news-container a * {
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.news-container a .img-container {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 250px;
	left: 0;
	top: 0;
	box-shadow: 0 0 var(--lonnred);
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.news-container a:hover .img-container {
	left: .5rem;
	top: -.5rem;
	box-shadow: -1rem 1rem var(--lonnred);
}
.news-container a .img-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.news-container a .img-container .source {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background: rgba(115,112,113,.8);
}
.news-container a .img-container .source p {
	color: var(--lonnpale);
	border: none;
	margin: 0;
	padding: .5rem;
}
.news-container a h3 {
	color: var(--lonndark);
	line-height: 1.4;
	margin: 1.5rem 0;
}
.news-container a:hover h3 {
	color: var(--lonnred);
}
.news-container a div {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--lonnmedium);
	font-size: .9rem;
}
.news-container a:hover div {
	color: var(--lonndarkred);
}
.news-container a p {
	color: var(--lonnmedium);
	font-size: .8rem;
	border-top: 1px solid var(--lonnmedium);
	margin-top: 1rem;
	padding-top: .5rem;
}
.news-container a:hover p {
	color: var(--lonndarkred);
	border-top: 1px solid var(--lonndarkred);
}

/*
 *
 * Events
 *
 */

.broadcast.event .tab-content {
	margin-top: 3rem;
}
.event-container > div {
	margin-bottom: 4.5rem;
}
.event-container {
	margin-bottom: -3rem !important;
}
.event-container > div > div > * {
	color: var(--lonndark);
}
.event-container .eventtype {
	line-height: 1;
}
@media screen and (max-width: 767px) {
	.event-container .eventtype {
		margin-top: 1.5rem;
	}
	.event-container .eventdetail {
		padding-bottom: 3rem;
		border-bottom: 2px solid; /* border color depends on event type */
	}
}
@media screen and (min-width: 768px) {
	.event-container .eventdate {
		padding-right: 1rem;
		border-right: 2px solid; /* border color depends on event type */
	}
}
/* Events - event type colors*/
.event-container .seminar .eventtype::before {
	content: 'Seminar';
}
.event-container .lecture .eventtype::before {
	content: 'Lecture';
}
.event-container .seminar > div,
.event-container .seminar .eventtype,
.event-container .seminar .lonnbtn,
.event-container .lecture > div,
.event-container .lecture .eventtype,
.event-container .lecture .lonnbtn {
	color: var(--lonnteal) !important;
}
.event-container .seminar *,
.event-container .lecture * {
	border-color: var(--lonnteal);
}
.event-container .seminar .lonnbtn:hover,
.event-container .lecture .lonnbtn:hover {
	background-size: 100% 100%;
}
.event-container .workshop .eventtype::before {
	content: 'Workshop';
}
.event-container .workshop > div,
.event-container .workshop .eventtype,
.event-container .workshop .lonnbtn {
	color: var(--lonnbrown) !important;
}
.event-container .workshop * {
	border-color: var(--lonnbrown);
}
.event-container .symposium .eventtype::before {
	content: 'Symposium';
}
.event-container .symposium > div,
.event-container .symposium .eventtype,
.event-container .symposium .lonnbtn {
	color: var(--lonngreen) !important;
}
.event-container .symposium * {
	border-color: var(--lonngreen);
}
.event-container .conference .eventtype::before {
	content: 'Conference';
}
.event-container .conference > div,
.event-container .conference .eventtype,
.event-container .conference .lonnbtn {
	color: var(--lonnpurple) !important;
}
.event-container .conference * {
	border-color: var(--lonnpurple);
}
.event-container .gala .eventtype::before {
	content: 'Research Gala';
}
.event-container .gala > div,
.event-container .gala .eventtype,
.event-container .gala .lonnbtn {
	color: var(--lonnred) !important;
}
.event-container .gala * {
	border-color: var(--lonnred);
}
.event-container .eventdate {
}
.event-container .eventdate > div {
	display: flex;
	align-items: center;
}
.event-container .eventdate > div:nth-child(2)::before {
	content: '\2014';
	font-size: 1.2rem;
	font-weight: 700;
	padding: 0 1rem;
}
.event-container .caution,
.event-container .eventdate > div > div:nth-child(1) {
	font-size: 4rem;
	font-weight: 700;
	line-height: 1;
	padding-right: .5rem;
}
.event-container .caution {
	color: var(--danger) !important;
	margin: 0 0 1rem 1rem;
	padding: 0;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}
.event-container .eventdate > div > div:nth-child(2) {
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.5;
}
.event-container h4 {
	margin: .5rem 0 1rem;
	font-size: 150%;
	line-height: 1.4;
}
.event-container h5 {
	margin: 0 0 1rem;
	font-size: 120%;
}
.event-container .speaker {
	margin-bottom: 1rem;
	font-weight: 700;
	line-height: 1.5;
}
.event-container .time {
	font-weight: 500;
}
.event-container .venue {
	font-weight: 500;
	margin-bottom: 1rem;
}
.event-container a.lonnbtn {
	font-size: 100%;
	white-space: nowrap;
}

/* Define colours */

:root {
	--lonnred: #bf165e;
	--lonndarkred: #6b203e;
	--lonnyellow: #ffc72c;
	--lonnpale: #fafafa;
	--lonnlight: #ebebeb;
	--lonnmedium: #737071;
	--lonndark: #231F20;
	
	--lonndanger: #C8003F;
	--lonnorange: #E47000;
	--lonnpurple: #7c0378;
	--lonnteal: #008FA3;
	--lonnblue: #004179;
	--lonngreen: #009858;
	--lonnolive: #A2AF3B;
	--lonnbrown: #AA8E6B;
	
}

.lonnred {color: var(--lonnred) !important;}
.lonndarkred {color: var(--lonndarkred) !important;}
.lonnyellow {color: var(--lonnyellow) !important;}
.lonnpale {color: var(--lonnpale) !important;}
.lonnlight {color: var(--lonnlight) !important;}
.lonnmedium {color: var(--lonnmedium) !important;}
.lonndark {color: var(--lonndark) !important;}
.bg-lonnred {background-color: var(--lonnred) !important; color: var(--lonnlight) !important;}
.bg-lonndarkred {background-color: var(--lonndarkred) !important; color: var(--lonnyellow);}
.bg-lonnyellow {background-color: var(--lonnyellow) !important;}
.bg-lonnpale {background-color: var(--lonnpale) !important;}
.bg-lonnlight {background-color: var(--lonnlight) !important;}
.bg-lonnmedium {background-color: var(--lonnmedium) !important; color: var(--lonnlight) !important;}
.bg-lonndark {background-color: var(--lonndark) !important; color: var(--lonnlight) !important;}