/*
 *
 * City University of Hong Kong -- NS
 * ----------------------------
 * Site Specific SCSS
 *
 */

/* ================================================================================ RESET */

html, body, div, span, applet, object, iframe, 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, dialog, figure, menu, video, audio, mark, time, canvas, details, header, footer, nav {
	font-family: 'IBM Plex Sans', sans-serif;
	background: transparent;
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
	background: transparent;
	-webkit-font-smoothing: antialiased;
}
h3 {
	font-size: 1.5rem !important;
}

.remark {
	font-size: 1.1rem;
}
/* RESET - layout */

* {
	scroll-behavior: smooth;
}
*, button:focus { /* remove focus border on Safari and Chrome */
	outline: none;
}
.wait {
	font-weight: bold !important;
	color: var(--lonnpale);
	background-color: var(--lonnorange);
}
.cityu-main {
	padding-top: 8rem;
}
.cityu-main .section {
	padding-top: 0;
	padding-bottom: 0;
}
.cityu-main .section:last-child,
.cityu-main .section:only-of-type,
.cityu-main .section:last-of-type,
.cityu-main .section.full-width,
.cityu-main .section .cityu-main-inner:only-child {
	padding-bottom: 8rem;
}
.stretched-link {
	text-decoration: none !important;
}
.cityu-content {
	font-size: 20px !important;
	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 {
	line-height: 1.6;
	color: var(--lonnshade5);
	background: var(--lonnpale);
	word-wrap: break-word;
}
.cityu-base-style .cityu-content a {
	color: var(--lonnred);
}
header {
	background: var(--lonnpale) !important;
}
main {
	background: var(--lonnpale);
}
* {
	-webkit-border-radius: 0 !important;
	-moz-border-radius: 0 !important;
	border-radius: 0 !important;
}
.display {
	color: var(--lonnshade4);
	font-size: 2.75rem;
	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: 1rem;
}
.cityu-content h2 {
	color: var(--lonnshade3);
	font-size: 3rem;
	font-weight: 700;
	line-height: 1.2;
	background: linear-gradient(225deg, var(--lonnshade2) 0%, var(--lonnshade3) 75%, var(--lonnshade4) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-top: 8rem;
	margin-bottom: 3rem;
}
.cityu-content .section:first-child h2 {
	margin-top: 0;
}
.cityu-content h2 sup {
	background: inherit;
	-webkit-text-fill-color: var(--lonnred) !important;
}
.cityu-content .cityu-sidebar h2:first-child {
	margin-top: 0;
}
.cityu-content h3 {
	margin-top: 6rem;
	margin-bottom: 1.5rem !important;
}
.cityu-content h4 {
	font-size: 1.2rem;
	line-height: 1.4;
}
.helplink h2 {
	color: var(--lonnshade2);
	font-size: 3rem;
	font-weight: 700;
	letter-spacing: .05rem;
	margin-bottom: 3rem;
}
/* RESET - text - retouch hyperlink */

.a {
	color: var(--lonnred) !important;
}
.cityu-content a:not([class^="lonnbtn"]) {
	border-bottom: 1px solid var(--lonnshade5); /* change from dotted */
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	cursor: pointer !important;
}
.cityu-content a:not([class^="lonnbtn"]):hover {
	color: var(--lonnshade5);
	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: 80%;
	padding-left: .25rem;
	vertical-align: -.05rem;
}
.cityu-content p a[href$=".pdf"]::after {
	font-family: bootstrap-icons;
	content: "\f30a";
}

/* RESET - buttons */

.lonnbtn {
	color: var(--lonnshade4) !important;
	font-size: .95rem;
	font-weight: 700;
	letter-spacing: .075rem;
	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: .4rem .4rem .4rem;
	-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(--lonnred) 50%, var(--lonnred) 50%) no-repeat left bottom;
	background-size: 100% 50%;
}
.lonnbtn-filter,
.lonnbtn-filter-light {
	position: relative;
	display: inline-block;
	font-size: 1.2rem;
	font-weight: 700;
	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(--lonnshade5) !important;
	background: linear-gradient(to top, var(--lonnshade5) 50%, var(--lonnshade5) 50%) no-repeat left bottom;
	background-size: 100% 0;
}
.lonnbtn-filter-light {
	color: var(--lonnshade2) !important;
	background: linear-gradient(to top, var(--lonnshade2) 50%, var(--lonnshade2) 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(--lonnshade5);
}
.lonnbtn-filter-light::after {
	background: var(--lonnshade2);
}
.lonnbtn-filter:last-child::after,
.lonnbtn-filter-light:last-child::after {
	width: 100%;
}
.lonnbtn-filter:hover,
.lonnbtn-filter.active {
	color: var(--lonnshade5) !important;
	background: linear-gradient(to top, var(--lonnshade5) 50%, var(--lonnshade5) 50%) no-repeat left bottom;
	background-size: 100% 15%;
}
.lonnbtn-filter-light:hover,
.lonnbtn-filter-light.active {
	color: var(--lonnshade2) !important;
	background: linear-gradient(to top, var(--lonnshade2) 50%, var(--lonnshade2) 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(--lonnshade4) !important;
	background: linear-gradient(to top, var(--lonnshade4) 50%, var(--lonnshade4) 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(--lonnshade4) !important;
	background: linear-gradient(to top, var(--lonnshade4) 50%, var(--lonnshade4) 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(--lonnshade5) !important;
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: .05rem;
	text-transform: uppercase;
	line-height: 1;
	text-decoration: none !important;
	border: 1px solid var(--lonnshade2);
	background-color: var(--lonnshade1);
	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(--lonnshade2) !important;
	background-color: var(--lonnshade5);
}

/* 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.2rem !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: 40%;
	color: var(--lonnshade3) !important;
	margin-left: -1.2rem !important; /* same as padding-left set on li */
	width: 1.2rem !important; /* same as padding-left set on li */
}
.cityu-content ul.basic.finetune li::before {
	margin-top: .5rem;
}
.cityu-content li { /* new v2.1.0 */
	padding-left: .5rem;
}
/* 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(--lonnpale);
	background-color: var(--lonnshade5);
	padding: .25rem .5rem;
}

/* RESET (kinda) - border box */
	/* text */
.borderbox a {
	color: var(--lonnshade5) !important;
	border: none !important;
}
.borderbox a:hover {
	color: var(--lonnshade5) !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 !important;
	display: block;
	font-size: .9rem;
	text-transform: uppercase;
	letter-spacing: .05rem;
	background: var(--lonnpale) !important;
	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(--lonnshade5);
	border: 1px solid var(--lonnshade5);
}
.borderbox-red {
	color: var(--lonnred);
	border: 1px solid var(--lonnred);
}
.borderbox:hover,
.borderbox-red:hover {
	color: var(--lonnpale) !important;
}
.borderbox:hover {
	background-color: var(--lonnshade2) !important;
}
.borderbox-red:hover {
	background-color: var(--lonndarkred) !important;
}
	/* shadow border */
.borderbox::before,
.borderbox-red::before {
	position: absolute !important;
	z-index: -1;
	left: .5rem;
	top: .5rem;
	width: 100%;
	height: 100%;
	content: "";
}
.borderbox::before {
	border: 1px solid var(--lonnshade5);
}
.borderbox-red::before {
	border: 1px solid var(--lonnred);
}
	/* shadow color */
.borderbox::after,
.borderbox-red::after {
	position: absolute !important;
	z-index: -1;
	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(--lonnshade5);
}
.borderbox-red::after {
	background-color: var(--lonnred);
}
.borderbox:hover::after,
.borderbox-red:hover::after {
	position: absolute !important;
	z-index: -1;
	left: .5rem;
	top: .5rem;
	width: 100%;
	height: 100%;
}

	/* programme guidelines */
.edu .guideline .borderbox {
	background: var(--lonnshade2);
	height: 100%;
	line-height: 1.5;
}
.edu .guideline .borderbox > div:first-child {
	display: inline-block;
	width: 40%;
}
.edu .guideline .borderbox > div:last-child {
	display: inline-block;
	float: right;
	width: calc(100% - 40%);
	padding-bottom: 1.5rem;
}
.edu .guideline .borderbox img {
	max-width: 100%;
	height: auto;
	padding-right: 1.5rem;
}
.edu .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(--lonnshade5);
	font-size: .9rem;
	line-height: 1.4;
	border-top: 1px solid var(--lonnshade5);
	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;
}
.imglink-simple {
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.imglink-simple:hover {
	filter: brightness(1.1) opacity(.8);
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
/* 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(--lonnshade2) !important;
	background-color: var(--lonnshade5);
	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;
}
.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-ns {
	display: none !important;
}
.navbar .nav-item .nav-link {
	padding-top: 1.5rem !important;
	padding-bottom: 1.5rem !important;
	padding-right: .75rem;
	font-size: 1rem !important;
	font-weight: 600 !important;
	text-transform: uppercase;
	letter-spacing: .05rem;
	color: var(--lonnpale) !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(21,23,45,.9) !important;
}
.navbar a.scrolled {
	text-decoration: none !important; /* remove logo underline */
}
.navbar,
.navbar .navbar-logo,
.navbar .navbar-logo-ns,
.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-ns.scrolled {
	display: inherit !important;
	height: 30px !important;
}
.navbar .nav-item.scrolled,
.navbar .nav-item.scrolled .nav-link {
	color: var(--lonnpale) !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(--lonnshade4) !important;
	border-top: none !important;
	box-shadow: none !important;
}
.navbar .dropdown-toggle::after,
.navbar .nav-link.dropdown-toggle::after {
	content: inherit !important;
}
.navbar .dropdown-item {
	color: var(--lonnshade2) !important;
	background-color: inherit !important;
	font-size: 1rem !important;
	font-weight: 500 !important;
	letter-spacing: .02rem;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 2px;
	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:hover {
	text-decoration: underline !important;
	text-decoration-color: var(--lonnshade2) !important;
	text-decoration-thickness: 2px !important;
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.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 .dropdown-item[href="#"] {
	opacity: .5;
}
.navbar .dropdown-item[href="#"]:hover {
	color: var(--lonnshade2) !important;
	text-decoration: inherit;
}

/* 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: 50%;
	font-weight: normal;
	color: var(--lonnshade2);
	margin-left: -.3rem; /* same as padding-left set on li */
	width: .3rem; /* same as padding-left set on li */
	margin-top: .7rem;
}

/*
 *
 * Sidebar
 *
 */

.cityu-sidebar {
	font-size: .75rem;
	top: calc(67px + 1rem) !important;
}
.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";
	color: var(--lonnpale) !important;
	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: 1.2rem;
}
.cityu-sidebar h2 {
	background: var(--lonndarkred);
	color: var(--lonnpale);
	-webkit-background-clip: initial;
	-webkit-text-fill-color: initial;
	font-size: 1.5rem;
	letter-spacing: .075rem;
	text-transform: lowercase;
	padding-top: 1rem;
	margin-bottom: 1rem;
}
.cityu-sidebar h2::before {
	display: block;
	content: "More in ";
	text-transform: lowercase;
}
.cityu-sidebar a {
	font-size: .95rem;
	font-weight: 500;
	letter-spacing: .025rem;
	color: var(--lonnpale) !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(--lonnshade2) !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(150deg, rgba(21,23,45,1) 0%, rgba(21,23,45,1) 20%, rgba(1,104,171,.8) 60%, rgba(1,104,171,.8) 80%);
	margin: 0 !important;
	padding: 1.5rem;
	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(50rem / 4 * 2 * .25);
	font-weight: 600;
	letter-spacing: .08rem;
	line-height: 1;
}
.hero-text p {
	display: inline-block;
	font-size: 1.2rem;
	font-weight: 500;
	background-color: var(--lonndarkred);
	margin-bottom: 0;
	padding: .2rem 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;
	}
}
.bg-gradient-dark-a {
	background-color: var(--lonnshade5);
	background-image: linear-gradient(-30deg, rgba(21,23,45,1.00) 0%, rgba(21,23,45,.8) 20%, rgba(26,40,85,1.00) 40%, rgba(107,32,62,.8) 60%, rgba(107,32,62,1.00) 75%, rgba(191,22,94,.8) 85%);
	background-size: 400% 400%;
	animation: gradient 7.5s ease-in-out infinite;
}
.bg-solid-dark-a {
	background: linear-gradient(150deg, #A00505, #CE6E0D);
}
@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;
	padding-top: 0;
}
.cityu-breadcrumb a,
.subpage-breadcrumb a { /* link text */
	color: var(--lonnpale);
	font-size: .9rem;
	font-weight: 500;
	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;
	text-decoration: none;
}
.cityu-breadcrumb a[href="#"], .cityu-breadcrumb a[href="#"]:hover, .cityu-breadcrumb .breadcrumb-item + .breadcrumb-item::before { /* non-link text */
	color: var(--lonnpale) !important;
	opacity: .6;
	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(--lonnpale) !important;
}

/*
 *
 * Date
 *
 *
 */

.date {
	font-size: .9rem;
	color: var(--lonnshade1);
	background: var(--lonnshade4);
	border-top: 1px solid var(--lonnshade3);
}
.date p {
	margin: 0;
	padding: .8rem 0;
}
.date-subpage {
	display: inline-block;
	color: var(--lonnshade4);
	font-size: .8rem;
	border-top: 1px solid var(--lonnshade4);
	margin-top: 3rem;
	margin-bottom: 0;
	padding-top: .4rem;
}

/*
 *
 * Footer & sitemap
 * (cityu-sitemap = footer)
 *
 */

.cityu-sitemap {
	background-image: linear-gradient(var(--lonnshade5), black);
}
.sitemap-color-default,
.sitemap-color-default a {
	color: var(--lonnpale) !important;
	font-weight: 400;
}
.cityu-sitemap a[href="#"], .cityu-sitemap a[href="#"]:hover {
	border-bottom: none;
}
.cityu-footer-bottom {
	line-height: 1.2rem !important;
	text-decoration: none;
}
.cityu-footer-copyright {
	font-size: .875rem;
}
/* Footer & sitemap - reset menu style */
.cityu-sitemap a[data-toggle="dropdown"] {
	color: var(--lonnshade2) !important;
	font-size: 1.2rem !important;
	font-weight: 600;
	letter-spacing: .08rem;
	text-transform: uppercase;
}
.cityu-sitemap-list ul li {
	line-height: 1 !important;
	font-weight: 600;
	letter-spacing: .02rem;
	opacity: 0.9;
}
.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 a:hover,
.cityu-sitemap-list li li li,
.cityu-sitemap-list li li li a,
.cityu-sitemap-list li li li a:hover {
	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 a:hover,
	.cityu-sitemap-list li li li,
	.cityu-sitemap-list li li li a,
	.cityu-sitemap-list li li li a:hover {
		padding-bottom: .25rem;
	}
	.cityu-sitemap a[data-toggle="dropdown"] {
		font-size: 1.2rem !important;
	}
	.sitemap-color-default a {
		font-size: 1rem !important;
	}
}
.cityu-sitemap-list li li a,
.cityu-sitemap-list li li li a {
	border-bottom: 1px solid rgba(255,255,255,.4);
}
.cityu-sitemap-list li li a:hover,
.cityu-sitemap-list li li li a:hover {
	border-bottom-color: var(--lonnyellow);
}
/* 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(--lonnpale);
}
.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-ns {
	height: 28px !important;
	border-left: 1px solid var(--lonnpale);
	padding-left: 1rem;
}

/*
 *
 * Helpful links
 *
 */

.helplink {
	background-color: var(--lonnshade4);
	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(--lonnshade3);
	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(--lonnshade2);
}
.cityu-backtotop .fas {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.cityu-backtotop .fa-chevron-up::before {
	color: var(--lonnpale);
	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(--lonnshade3);
}

/*	INDIVIDUAL PAGE ===============================================================================
	===============================================================================================
	===============================================================================================
	===============================================================================================
	============================================================================================ */

/*
 *
 * Homepage
 *
 */
/* Homepage - hero */
.hp-hero {
	position: relative;
	display: block;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}
.hp-hero .hero-bg-overlay {
	position: absolute;
	display: flex;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	background: url("/neuro/img/homepage/homepage-hero-06.jpg");
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	filter: brightness(50%) contrast(100%);
	align-items: center;
	justify-content: center;
	flex-direction: column;
	object-fit: cover;
	object-position: center;
	animation: ZoomOutHero 20s infinite alternate ease-out;
	animation-fill-mode: both;
}
@keyframes ZoomOutHero {
	0% {
		transform: scale(1.2);
	}
	100% {
		transform: scale(1);
	}
}
/* Homepage - elements */
.hp h1 {
	font-size: 5rem;
	font-weight: 100;
	line-height: 1;
	margin: 0;
}
.hp-button {
	font-size: 1.2rem;
	line-height: 2;
	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(--lonnshade5);
	background-color: var(--lonnshade1);
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 0 var(--lonnshade5);
	-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(--lonnshade5);
	text-decoration: none;
}
/* Homepage - highlight - carousel - slides */
.hp .section-highlight {
	position: absolute;
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	margin-top: 8rem;
	z-index: 3;
	animation: SlideIn 1.5s;
}
@keyframes SlideIn {
	0% {
		transform: translateX(-100vw);
	}
	10% {
		transform: translateX(-100vw);
	}
	100% {
		transform: translateX(0);
	}
}
@media (min-width: 992px) {
	.hp .section-highlight {
		margin-bottom: 8rem;
	}
}
.section-highlight .carousel {
	margin-top: calc(-8rem - 6rem) !important;
	margin-bottom: 0;
	z-index: 1;
}
@media screen and (max-width: 991px) {
	.section-highlight .carousel {
		margin-top: -6rem !important;
		margin-bottom: 3rem;
	}
}
.section-highlight .carousel .carousel-item img {
	object-fit: cover;
	object-position: center;
	height: 30rem;
	overflow: hidden;
}
.section-highlight .carousel .carousel-item .card .news-head {
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.25;
}
.section-highlight .carousel .carousel-item a:hover {
	text-decoration: none;
}
.section-highlight .carousel .carousel-item a p.news-head,
.section-highlight .carousel .carousel-item a p.news-lead {
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.section-highlight .carousel .carousel-item a:hover p.news-head,
.section-highlight .carousel .carousel-item a:hover p.news-lead {
	color: var(--lonnyellow);
}
.section-highlight .carousel .carousel-item .card {
	color: var(--lonnpale);
}
.section-highlight .carousel .carousel-item:nth-of-type(odd) .card {
	background-color: var(--lonndarkred);
}
.section-highlight .carousel .carousel-item:nth-of-type(even) .card {
	background-color: var(--lonnshade4);
}
.section-highlight .carousel .carousel-item .card .news-date {
	font-size: .9rem;
	font-weight: 600;
	letter-spacing: .01rem;
	line-height: 1 !important;
	margin: .5rem 0 2rem;
}
.section-highlight .carousel .carousel-item .card .news-lead {
	display: inline-flex;
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .075rem;
	text-transform: uppercase;
	border-bottom: 2px solid;
}
@media screen and (max-width: 991px) {
	.section-highlight .carousel .carousel-item img {
		height: 12rem;
	}
	.section-highlight .carousel .carousel-item .card .card-body {
		height: 14rem;
	}
	.section-highlight .carousel .carousel-item .card .news-date {
		margin-bottom: 1rem !important;
	}
	.section-highlight .carousel .carousel-item .card .news-head {
		font-size: 1.25rem !important;
	}
}
.section-highlight .carousel .carousel-indicators {
	justify-content: flex-start;
	margin: 0 0 0 1rem;
	padding: 1rem 0;
	right: inherit;
}
.section-highlight .carousel .carousel-indicators button {
	width: 50px;
	height: 4px;
	margin: 0 .25rem 0 0;
	border: none;
}
.section-highlight .carousel .carousel-indicators [data-bs-target] {
	background-color: var(--lonnshade3);
	opacity: 80%;
}
.section-highlight .carousel .carousel-indicators [data-bs-target].active {
	background-color: var(--lonnyellow);
}
.section-highlight .carousel .lonn-carousel-control-group {
	position: absolute;
	right: 1rem;
	margin-top: -2rem;
	font-size: 2rem;
	font-weight: 600;
	line-height: 2;
	z-index: 3;
}
.section-highlight .carousel .lonn-carousel-control-link {
	width: 4rem;
	text-align: center;
	color: var(--lonnshade2);
	background: var(--lonnshade5);
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.section-highlight .carousel .lonn-carousel-control-link:hover {
	color: var(--lonnpale);
	background: var(--lonnshade3);
	text-decoration: none;
}
@media screen and (max-width: 991px) {
	.section-highlight .carousel .lonn-carousel-control-group {
		position: relative;
		right: inherit;
		margin-top: .25rem;
		font-size: 1.5rem;
		line-height: 2;
	}
	.section-highlight .carousel .lonn-carousel-control-link {
		width: 3rem;
	}
}
/* Homepage - event */

.hp .section-event {
	margin-bottom: 4rem;
}
.hp .section-event .event-divider {
	border-bottom: 1px solid var(--lonnshade5);
}
.hp .section-event .event-block {
	font-weight: 400;
	line-height: normal;
	padding-bottom: 1rem;
}
.hp .section-event .event-schedule,
.hp .section-event .event-titlepart,
.hp .section-event .event-detail,
.hp .section-event .event-link {
	padding-top: 1rem;
}
.hp .section-event .event-schedule {
	display: flex;
}
.hp .section-event .event-date1 {
	font-size: 3rem;
	font-weight: 600;
	line-height: .85;
	margin-top: -.25rem;
	padding-right: .25rem;
}
.hp .section-event .event-date2 {
	font-size: .9rem;
	font-weight: 700;
	letter-spacing: .025rem;
	line-height: 1;
	text-transform: uppercase;
}
.hp .section-event .event-date2 p {
	margin-top: .25rem;
}
.hp .section-event .event-type {
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .05rem;
	text-transform: uppercase;
	line-height: 1;
	padding-bottom: .5rem;
}
.hp .section-event .event-title {
	font-size: 1.25rem;
}
.hp .section-event .event-schedule,
.hp .section-event .event-titlepart,
.hp .section-event .event-detail,
.hp .section-event .event-big .event-infocombined {
	padding-right: 0;
}
.hp .section-event .event-detail {
	font-size: 1rem;
	font-weight: 400;
}
.hp .section-event .event-detail > div:not(:last-child) {
	padding-bottom: .5rem;
}
.hp .section-event .event-link .lonnbtn {
	all: inherit;
	display: inline;
	vertical-align: top;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	border-bottom: 2px solid var(--lonnshade5) !important;
	padding: 0 0 1px 0;
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hp .section-event .event-link .lonnbtn:not(:last-child) {
	margin-bottom: 1rem;
}
.hp .section-event .event-link .lonnbtn:hover {
	color: var(--lonnred) !important;
	border-bottom: 2px solid var(--lonnyellow) !important;
}
.hp .section-event .event-big .event-schedule,
.hp .section-event .event-big .event-titlepart,
.hp .section-event .event-big .event-detail {
	margin-bottom: 1rem;
}
.hp .section-event .event-big .event-title {
	font-size: 2.75rem;
	font-weight: 300;
}

/* Homepage - news */
.section-news {
	margin-bottom: 8rem;
}
.section-news .card div {
	color: var(--lonnshade5) !important;
}
.section-news .card .card-title {
	display: -webkit-box;
	-webkit-line-clamp: 7 !important;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.25;
	margin-bottom: 1.5rem !important;
}
.section-news .card .card-date {
	color: var(--lonnshade3);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .025rem;
	text-transform: uppercase;
	margin-bottom: .25rem;
}
.section-news .card .card-text {
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: .9rem;
	line-height: inherit;
	margin-bottom: .5rem;
}
@media screen and (max-width: 991px) {
	.section-news .card .card-text {
		display: none;
	}
}
@media screen and (min-width: 768px) {
	.section-news .card img {
		height: 3rem;
	}
}
.section-news .card .card-img-top {
	object-fit: cover;
	object-position: center;
	height: 14rem !important;
	overflow: hidden;
}
.section-news .card .card-body {
	padding-left: 0;
	padding-right: 0;
	margin-bottom: 1.5rem;
}
.section-news .card .card-body a {
	color: var(--lonnshade5);
	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;
}
.section-news .card .card-body a:hover {
	background-size: 100% 100% !important;
}
.section-news .card img,
.section-news .card .card-title,
.section-news .card .card-date,
.section-news .card .card-text {
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.section-news .card:hover img {
	filter: brightness(50%);
}
.section-news .card:hover .card-title,
.section-news .card:hover .card-date,
.section-news .card:hover .card-text {
	transform: translateY(-.25rem);
	opacity: .5;
}

/* Homepage - programmes */
.hp .section-prog {
	color: var(--lonnpale) !important;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	box-shadow: inset 100vw 100vh rgba(0,0,0,.8);
	font-size: 1.1rem;
	font-weight: 300;
	letter-spacing: .025rem;
	padding: 8rem 0;
}
@media screen and (max-width: 991px) {
	.hp .section-prog {
		padding: 6rem 0;
	}
}
	/* border box */
.hp-borderbox-blue {
	position: relative;
	display: block;
	font-size: 1.8rem;
	font-weight: 600;
	line-height: 1.5;
	border: 1px solid var(--lonnshade3);
	background: var(--lonnshade5);
	padding: 1.5rem;
	cursor: pointer;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hp-borderbox-blue a {
	color: var(--lonnshade2) !important;
	text-decoration: none !important;
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hp-borderbox-blue:hover,
.hp-borderbox-blue a:hover {
	color: var(--lonnshade3) !important;
}
.hp-borderbox-blue a .deg {
	display: inline-block;
	border-bottom: 2px solid var(--lonnshade2);
	margin-bottom: 0;
}
.hp-borderbox-blue a:hover .deg {
	border-bottom: 2px solid var(--lonnshade3);
}
	/* border box - shadow border */
.hp-borderbox-blue::before {
	border: 1px solid var(--lonnshade3);
	position: absolute;
	z-index: -1;
	left: .5rem;
	top: .5rem;
	width: 100%;
	height: 100%;
	content: "";
}
	/* border box - shadow color */
.hp-borderbox-blue::after {
	background-color: var(--lonnshade3);
	position: absolute;
	z-index: -1;
	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-blue:hover::after {
	position: absolute;
	z-index: -1;
	left: .5rem;
	top: .5rem;
	width: 100%;
	height: 100%;
}
/* Homepage - publications */
.hp .section-publ {
	font-size: 1.1rem;
	font-weight: 300;
	letter-spacing: .025rem;
	padding: 6rem 0 12rem;
}
.hp .section-publ .heading {
	margin-bottom: 1.5rem;
}
@media screen and (min-width: 992px) {
	.hp .section-publ {
		padding: 8rem 0;
	}
	.hp .section-publ .heading {
		padding-right: 2rem;
		margin-bottom: 0;
	}
	.hp .section-publ .heading-desc {
		padding: .25rem 0 .25rem 1rem;
		border-left: 1px solid var(--lonnshade5);
	}
}
.hp .section-publ .card {
	height: 100%;
	border: 1px solid var(--lonnshade4);
	background-color: transparent;
	box-shadow: none;
	-webkit-transition: .5s ease-in-out;
	-o-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
}
.hp .section-publ .card:hover {
	border: 1px solid var(--lonnshade3);
	background-color: var(--lonnshade1);
}
.hp .section-publ .card .card-title {
	font-size: 1.2rem;
	font-weight: 800;
	letter-spacing: .015rem;
	line-height: 1.6;
	margin-bottom: 1rem;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .375rem;
}
.hp .section-publ .card:hover .card-title {
	text-decoration-color: var(--lonnshade3);
}
.hp .section-publ .card .card-text {
	font-size: .9rem;
	font-weight: 400;
	line-height: 1.6;
}
.hp .section-publ .card .card-text strong {
	font-weight: 600;
}
.hp .section-publ .card .card-footer {
	font-size: .8rem;
	font-weight: 400;
	letter-spacing: .05rem;
	border-color: var(--lonnshade4);
}
.hp .section-publ .card a {
	color: var(--lonnshade4);
	-webkit-transition: .5s ease-in-out;
	-o-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
}
.hp .section-publ .card a:hover {
	color: var(--lonnshade3);
}

/* Homepage - contact */
.hp .section-contact {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	box-shadow: inset 100vw 100vh rgba(0,0,0,.85);
	font-size: 1.1rem;
	font-weight: 300;
	letter-spacing: .025rem;
	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(--lonnshade1);
	font-size: 1.5rem;
	font-weight: 300;
	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(--lonnshade3);
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hp .section-contact a:hover {
	border-bottom: 1px solid var(--lonnred);
}

/*
 *
 * About NS
 *
 */

.about.ns .section {
	padding-top: 8rem;
}
.about.ns .section.intro {
	padding: 0 !important;
}
.about.ns .section.intro p {
	font-size: 2rem !important;
	font-weight: 300;
}
.about.ns .section p:not(.display) {
	font-size: 1.25rem;
}
.about.ns .section-links {
	background-color: var(--lonnshade5);
	background-image: url('/neuro/img/hero/graphic-01.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	box-shadow: inset 100vw 100vh rgba(35,31,32,.8);
}
.about.ns .section .lonnbtn {
	font-size: 175%;
	background-size: 100% 100%;
}
.about.ns .section .lonnbtn:hover {
	color: var(--lonnpale) !important;
	background-size: 100% 0%;
}
.about.ns .section img {
	width: 100%;
	height: 14rem;
	object-fit: cover;
	object-position: center;
}
@media screen and (min-width: 992px) {
	.about.ns .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;
	}
}

/* Vacancy - remove margin bottom of last element */

@media screen and (min-width: 992px) {
	.vacancylist div div p:last-child {
		margin-bottom: 0;
	}
}

/* Vacancy - borders */

.vacancylist > div {
	padding: 2rem 0;
	border-bottom: 1px solid var(--lonnshade4);
}
.vacancylist > div:first-child {
	border-top: 1px solid var(--lonnshade4);
}

/* Vacancy - text */

	/* miniheading + padding */
.vacancylist > div > :first-child {
	color: var(--lonnred);
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: .05rem;
	line-height: 1.2;
	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) > :not(:first-child) {
	font-size: 1rem;
	color: var(--lonnshade4);
	line-height: 1.1;
}
.vacancylist > div > :nth-child(3) {
	font-size: 1.1rem;
}
.vacancylist h4 {
	font-size: 1.2rem;
	margin: 0;
}
.vacancylist h4:not(:first-child) {
	margin-top: 1.75rem;
}

/*
 *
 * 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-size: 1.4rem;
	font-weight: 700 !important;
	letter-spacing: .04rem;
	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,
.faculty .fac-alpha .block-faculty-name {
	color: var(--lonnshade5);
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1.75;
	background: initial;
	-webkit-background-clip: initial;
	-webkit-text-fill-color: initial;
	margin: 1.5rem 0 !important;
}
.faculty .stretched-link .faculty-name u,
.fac-alpha .block-faculty-name u {
	text-decoration: none;
	padding-bottom: 0 !important;
	border-bottom: 5px solid var(--lonnshade3);
	-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 .block-faculty-name:hover u {
	color: var(--lonnshade3);
	border-bottom: 5px solid var(--lonnshade4);
}
.faculty .card .faculty-name .no-link,
.faculty .fac-alpha .block-faculty-name.no-link {
	color: var(--lonnshade5);
	text-decoration: none;
	padding-bottom: .2rem;
	border-bottom: 5px solid var(--lonnshade2);
}
.faculty .stretched-link.no-link .faculty-name u,
.fac-alpha .block-faculty-name.no-link u {
	border-bottom: 5px solid var(--lonnshade2);
}
.faculty .stretched-link.no-link:hover .faculty-name u {
	color: var(--lonnshade5);
	border-bottom: 5px solid var(--lonnshade2);
}
.fac-alpha .block-faculty-name.no-link:hover u {
	color: var(--lonnshade5);
	border-bottom: 5px solid var(--lonnshade2);
}
.faculty .faculty-item .img-container {
	position: relative;
	overflow: hidden;
	left: 0;
	top: 0;
	box-shadow: 0 0 var(--lonnshade4);
	-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(--lonnshade4);
}
.faculty .faculty-item:hover .img-container.no-link {
	left: 0;
	top: 0;
	box-shadow: 0 0;
}
.faculty h3 {
	font-size: 1rem !important;
	font-weight: 700;
	letter-spacing: .02rem;
	line-height: 1.1;
	margin-top: 0 !important;
	margin-bottom: .5rem !important;
}
.faculty h3 small {
	letter-spacing: normal;
}
.faculty .infobox {
	font-size: .95rem;
	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;
	}
}
@media screen and (min-width: 992px) {
	.fac-alpha .researchinterest,
	.fac-alpha .email,
	.fac-alpha .tel {
		font-size: .95rem;
	}
}

	/* Faculty - Alphabetical - borders */

.fac-alpha .miniheading {
	border: none;
}
.fac-alpha > div:nth-child(2) {
	border-top: 1px solid var(--lonnshade3);
}
.fac-alpha > div {
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--lonnshade3);
}

	/* 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(--lonnshade5);
	font-size: 1.1rem;
	font-weight: 800;
	letter-spacing: .03rem;
	margin-bottom: .2rem;
}
.fac-alpha > div > :nth-child(3) a,
.fac-alpha > div > :nth-child(4) a {
	color: var(--lonnshade5) !important;
	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(--lonnshade5);
}
.fac-alpha > div > :last-child {
	padding-right: 0 !important;
}
.fac-alpha .home-dept {
	font-weight: 500 !important;
	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;
}
.profile.subpage .subpage-top {
	background-color: var(--lonnshade5);
	background-image: linear-gradient(150deg, #15172D, #1A2855, #0168AB);
}
.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(--lonnshade2);
	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(--lonnshade2);
	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(--lonnshade2);
	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(--lonnpale);
}
.news.indivpage .subpage-top-text h1 {
	margin-bottom: 0;
}
.subpage-top-text .pos {
	display: inline-block;
	color: var(--lonnpale);
	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(--lonnpale);
	border-left: 5px solid rgba(235,235,235,0.5);
}

/* Subpage - Bottom */

.profile.subpage .cityu-main {
	padding-top: 6rem;
}
.profile.subpage .subpage-bottom .infobox {
	font-size: 1rem;
}
@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(--lonnshade4);
}
.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(--lonnshade5);
}
.profile.subpage .accordion .accordion-body a:hover {
	border-bottom: 1px solid transparent;
}
.profile.subpage .media {
	margin-bottom: 1.5rem;
}
.profile.subpage .media a {
	border: none;
	width: 100%;
}
.profile.subpage .media a .img-container {
	width: 100px;
	height: 60px;
	margin: 0 1rem 0 0;
}
.profile.subpage .media a .img-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.profile.subpage .media a .media-body h6 {
	color: var(--lonnred);
	font-size: .75rem;
	letter-spacing: .05rem;
	text-transform: uppercase;
	margin-bottom: .15rem;
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.profile.subpage .media a:hover .media-body h6 {
	color: var(--lonnshade4);
}
.profile.subpage .media a .media-body {
	color: var(--lonnshade5);
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.5rem;
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.profile.subpage .media a:hover .media-body {
	color: var(--lonnred);
}
.news.indivpage .cityu-main {
	padding-top: 8rem;
}
.subpage-bottom .list-group a {
	color: var(--lonnshade5);
}
.subpage-bottom .list-group-item:not(:last-child) {
	border-bottom: 1px solid var(--lonnshade2);
}
.subpage-bottom .infobox li {
	padding-left: 3rem !important;
}
.subpage-bottom .list-group-item:before {
	position: absolute;
	color: var(--lonnshade5) !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(--lonnshade4);
	font-size: .9rem;
	border-top: 1px solid var(--lonnshade4);
	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: 1rem;
	margin-bottom: 3rem;
}
.people-indv h3 {
	font-size: 1.5rem !important;
	margin-top: 0;
	margin-bottom: .25rem;
}
.people-indv h3:only-child {
	margin-bottom: 0;
}
.student .people-indv h3,
.research .people-indv h3 {
	margin-bottom: .5rem !important;
}
.people-indv p {
	margin-bottom: .75rem;
}
.research .people-indv p {
	margin-bottom: 0;
}
.people-indv a {
	color: var(--lonnshade5) !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(--lonnshade5);
	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(--lonnshade4);
}
.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: 6rem;
	margin-bottom: 2rem;
	border-top: 1px solid var(--lonnshade4);
}
.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(--lonnshade4);
}
.research.publ .publ-wrap p strong {
	font-weight: 600;
}
.research.publ .publ-wrap a {
	color: var(--lonnshade5);
	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(--lonnshade5);
	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(--lonnpale);
	background-color: var(--lonnshade3);
	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(--lonnshade2);
	background-color: var(--lonnshade5);
}

/*
 *
 * Facilities & Resources . Safety Info
 *
 */

.research.resource h3,
.research.resource h4 {
	font-weight: 900 !important;
	border-bottom: 1px solid;
	padding-bottom: .5rem;
	margin: 3rem 0 1.5rem;
}
.research.resource h4 {
	font-size: 1.2rem;
}
.research.resource h3:first-child,
.research.resource h4:first-child {
	margin-top: 0;
}
.research.resource .section .no-gutters {
	line-height: 1.6;
	margin-bottom: 1rem;
}
.research.resource .section .no-gutters:last-child {
	margin-bottom: 0;
}
.research.resource .section .pdf::before {
	font-family: bootstrap-icons;
	content: "\f640";
}
.research.resource .section .video::before {
	font-family: bootstrap-icons;
	content: "\f3c3";
}
.research.resource .section .word::before {
	font-family: bootstrap-icons;
	content: "\f3bb";
}
.research.resource .section .xls::before {
	font-family: bootstrap-icons;
	content: "\f396";
}
.research.resource .section .ppt::before {
	font-family: bootstrap-icons;
	content: "\f3af";
}
.research.resource .section .img::before {
	font-family: bootstrap-icons;
	content: "\f39b";
}
.research.resource .section .url::before {
	font-family: bootstrap-icons;
	content: "\f470";
}
.research.resource .section .email::before {
	font-family: bootstrap-icons;
	content: "\f32f";
}
.research.resource .section .link {
	font-size: 1.1rem;
	font-weight: 500;
	margin-top: .15rem;
}
.research.resource .section .txt {
	font-size: 1.1rem;
	font-weight: inherit;
}
.research.resource .section .txt li {
	margin-bottom: .5rem;
}
.research.resource .section .link a {
	border: none;
}
.research.resource .section .text-right {
	line-height: 1.2;
}
.research.resource .section .rounded-pill {
	color: var(--lonnpale);
	background-color: var(--lonnshade4);
	font-size: .75rem;
	font-family: monospace;
	text-transform: uppercase;
	letter-spacing: .05rem;
}
.research.resource .section .rounded-pill.new {
	font-size: .75rem;
	color: var(--lonnshade5);
	background-color: var(--lonnyellow);
}

/*
 *
 * Programme
 *
 */

/* Programme - fast fact */

.edu .fastfact {
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.4;
	border-top: 1px solid var(--lonnshade4);
	border-bottom: 1px solid var(--lonnshade4);
	margin-top: 3rem;
	margin-bottom: 3rem;
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}
.edu .fastfact:last-child {
	margin-bottom: 0;
}
.edu .fastfact > div > div {
	margin-bottom: 1.5rem;
}
.edu .fastfact .row {
	margin-bottom: -1.5rem;
}
.edu .fastfact .miniheading {
	color: var(--lonnred);
	margin-top: 1.5rem;
	margin-bottom: .5rem;
}
.edu .fastfact .miniheading:first-child {
	margin-top: inherit;
}
.edu .fastfact li,
.edu .fastfact p {
	margin-bottom: .5rem !important;
}
.edu .fastfact a {
	color: var(--lonnshade5) !important;
	border-bottom: 1px dotted var(--lonnred);
}

/* Programme - accordion */
.edu .accordion {
	margin-top: 6rem;
}
.edu .accordion .accordion-item {
	background-color: transparent;
	border: none;
}
	/* header */
.edu .accordion .accordion-header {
	cursor: pointer;
	margin: 0;
}
.edu .accordion .lonnbtn-accordion {
	position: relative;
	display: flex;
	width: 100%;
	padding: 0;
	text-align: left;
	color: inherit;
	background-color: transparent;
	font-weight: inherit;
	border: none;
}
.edu .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;
}
.edu .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 */
.edu .accordion .accordion-body {
	margin-left: 1.5rem;
	margin-bottom: 1.5rem;
	padding-right: 0 !important;
}
.edu .accordion .accordion-body > div {
	margin: 2rem 0 3rem; /* set margin here instead of parent for smooth expanding */
}
.edu .accordion .accordion-body a {
	color: inherit;
	border-bottom: 1px solid var(--lonnshade5);
}
.edu .accordion .accordion-body a:hover {
	border-bottom: 1px solid transparent;
}

/* Programme - figure */
.edu figure {
	margin: 0 0 1.5rem 0;
	padding: 0;
}
.edu figcaption {
	color: var(--lonnshade4);
	font-size: .9rem;
	margin: .5rem 0 3rem 0;
}
	/* exchange */
.edu.exchange figure:last-of-type {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}
	/* attachment */
.edu .adm .borderbox-nest {
	margin-top: 6rem;
}
.edu .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(--lonnshade5);
	-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(--lonnshade5);
}
.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(--lonnshade4);
	font-size: 1.5rem !important;
	font-weight: 700;
	line-height: 1.25;
	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: 4;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--lonnshade4);
	font-size: 1rem;
}
.news-container a:hover div {
	color: var(--lonndarkred);
}
.news-container a p {
	color: var(--lonnshade4);
	font-size: .8rem;
	border-top: 1px solid var(--lonnshade4);
	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(--lonnshade5);
}
.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: 2rem;
		border-right: 2px solid; /* border color depends on event type */
	}
	.event-container .eventdetail {
		padding-left: 2rem;
	}
}
/* 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, /* year button */
.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 .uevent .eventtype::before {
	content: 'University Event';
}
.event-container .conference > div,
.event-container .conference .eventtype,
.event-container .conference .lonnbtn,
.event-container .uevent > div,
.event-container .uevent .eventtype,
.event-container .uevent .lonnbtn {
	color: var(--lonnpurple) !important;
}
.event-container .conference *,
.event-container .uevent * {
	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 .eventdate > div.pichere::before {
	content: inherit !important;
}
.event-container .eventdate > div.pichere {
	margin-top: 1rem !important;
}
.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(--lonndanger) !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,
.event-container .venue {
	font-size: .95rem;
	font-weight: 500;
}
.event-container .venue {
	margin-bottom: 1rem;
}
.event-container a.lonnbtn {
	white-space: nowrap;
}

/* Define colours */

:root {
	--lonnred: #bf165e;
	--lonndarkred: #6b203e;
	--lonnyellow: #ffc72c;
	--lonnpale: #F7F7F7;
	--lonnshade1: #DEEBF4;
	--lonnshade2: #B7CFD7;
	--lonnshade3: #0168AB;
	--lonnshade4: #1A2855;
	--lonnshade5: #15172D;
	
	--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;}
.lonnshade1 {color: var(--lonnshade1) !important;}
.lonnshade2 {color: var(--lonnshade2) !important;}
.lonnshade3 {color: var(--lonnshade3) !important;}
.lonnshade4 {color: var(--lonnshade4) !important;}
.lonnshade5 {color: var(--lonnshade5) !important;}
.lonndanger {color: var(--lonndanger) !important;}
.lonnorange {color: var(--lonnorange) !important;}
.lonnpurple {color: var(--lonnpurple) !important;}
.lonnteal {color: var(--lonnteal) !important;}
.lonnblue {color: var(--lonnblue) !important;}
.lonngreen {color: var(--lonngreen) !important;}
.lonnolive {color: var(--lonnolive) !important;}
.lonnbrown {color: var(--lonnbrown) !important;}
.bg-lonnred {background-color: var(--lonnred) !important; color: var(--lonnshade2) !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-lonnshade1 {background-color: var(--lonnshade1) !important;}
.bg-lonnshade2 {background-color: var(--lonnshade2) !important;}
.bg-lonnshade3 {background-color: var(--lonnshade3) !important;}
.bg-lonnshade4 {background-color: var(--lonnshade4) !important; color: var(--lonnshade2) !important;}
.bg-lonnshade5 {background-color: var(--lonnshade5) !important; color: var(--lonnshade2) !important;}
