.intro {
  padding-left: var(--page-margin) !important;
  padding-right: var(--page-margin) !important;
  position: relative;
  margin-bottom: 4rem;
}

.arrow-left::before {
  rotate: 180deg;
  left: -1.3em !important;
}

.top-image {
  margin-left: auto;
  margin-right: auto;
  position:relative;
  min-height: 360px;
  margin-bottom: 50px;
}

.top-image img {
	position: absolute;
	top: 0;
	right: 0;
	aspect-ratio: 1/1;
	width: 90%;
	object-fit: cover;
}

.top-image div {
	position: absolute;
	background-color: #7cb8cf;
	color: white;
	aspect-ratio: 1/1;
	width: 70%;
	font-weight: bold;
	top: 9%;
	left: 0;
	padding: 30px;
}

.top-image div h1 {
	position: absolute;
	font-size: 1.4em;
	top: 20px;
	left: 20px;
	right: 20px;
	color: white;
	margin: 0;
	margin-top:0;
	margin-bottom: 0;
}

.top-image div h2 {
	color: white;
	font-size: 1em;
	position: absolute;
	bottom: 20px;
	left: 20px;
	right: 20px;
	text-align: right;
	margin: 0;
	margin-top: 0;
	margin-bottom: 0;
}

.promo-image-grid {
	display: grid;
	gap: 40px;
	margin-top: 50px;
	margin-bottom: 50px;
	grid-template-columns: 1fr;
}

.promo-image-grid .top-image {
	margin-left: unset;
	margin-right: unset;
	min-height: 350px;
}

.promo-image-grid h1 {
	font-size: 1.5em;
}

.promo-image-grid p {
	font-size: 0.8em;
	color: white;
	position: absolute;
	bottom : 40px;
	right: 20px;
	left: 20px;
	font-weight: normal;
}

.promo-image-grid a::before {
	background-image: unset !important;
}

.promo-image-grid a {
	text-decoration-thickness: unset !important;
  	text-underline-offset: unset !important;
  	display: inline-block;
  	padding-left: unset;
  	white-space: normal;
  	cursor: pointer;
	font-size: 1em !important;
	color: white !important;
	position: absolute !important;
	bottom: 20px;
	right: 20px;
	left: 20px;
	text-align: right;
	font-weight: normal;
}



.navigation-grid {
	display: grid;
	gap: 5px;
  	grid-template-columns: 1fr;
}

.navigation-grid a {
	display: block;
	padding: 5px 10px;
	width: 100%;
	text-align: center;
	vertical-align: middle;
	background-color: #efefef;
  	font-size: 1.2em;
  	color: rgb(76, 76, 76);
}

.navigation-grid a:hover, .navigation-grid a.active {
	background-color: rgb(63, 93, 187);
	color: white;
}

.person-profile {
	display: grid;
	position: relative;
	gap: 15px;
        grid-template-columns: 30% 70%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	margin-bottom: 30px;
	width: 90%;
}

.person-profile img {
	aspect-ratio: 1/1;
	border-radius: 50%;
	width: 100%;
	object-fit: cover;
}

.person-profile>div {
	display: flex;
	position: relative;
	align-items: center;
	flex-direction: row;
	height: 100%;
}

.person-profile div h1 {
	font-size: 1.2em;
	margin: 0;
	margin-top: 0;
	margin-bottom: 0;
	width: 100%;
}

.person-profile div p {
	font-size: 1.1em;
	color: #364153;
	width: 100%;
	margin-top:0 !important;
	margin-bottom:0;
}

.module-list {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	border: 1px solid #efefef;
	flex-wrap: wrap;
}

.module-list .module {
	display: flex;
	min-width: 160px;
	flex: 1 1 0px;
	flex-direction: column;
}

.module-list .module:not(last-child) {
	border-right: 1px solid #fff;
}

.module-list .title {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 120px;
	padding: 10px;
}

.title h1 {
	color: white;
	margin-top: 0;
	margin-bottom: 0;
}

.title h4 {
	text-transform: uppercase;
	margin-top: 5px;
	text-align: center;
	margin-bottom: 0;
	font-size: 14px;
	font-weight: bold;
}

.module-list .lecturers {
	display: flex;
	flex-direction: column;
	align-items: top;
	padding: 10px;
	height: calc(100% - 120px);
}

.lecturers p {
	margin-top: 0px !important;
	margin-bottom: 0px !important;
	text-align: center;
}

.lecturers p:not(first-child) {
	margin-top: 5px !important;
}

.lecturers p:not(last-child) {
        margin-bottom: 0 !important;
}


.color-1 {
	background-color: #102b3f;
	color: white;
}

.color-2 {
	background-color: #008a9a;
	color: white;
}

.color-3 {
	background-color: #00a6d6;
	color: white;
}

.color-4 {
	background-color: #e6ae4a;
	color: white;
}

.color-1-soft {
	background-color: #edf2f5 !important;
}

.color-2-soft {
        background-color: #e6f4f5 !important;
}

.color-3-soft {
        background-color: #eaf5fa !important;
}

.color-4-soft {
        background-color: #fff4dc !important;
}

.module-title {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	border: 1px solid #efefef;
	margin-top: 30px;
 	margin-bottom: 15px;
}

.module-title .module {
	display: flex;
	width: 80px;
	font-size: 42px;
	font-weight: bold;
	text-align: center;
	justify-content: center;
  	align-items: center;
	padding: 15px;
}

.module-title .details {
	width: calc(100%-60px);
	padding: 10px 15px;
	display: flex;
	flex-direction: column;
}

.module-title .details h4 {
	font-size: 0.8em;
	text-transform: uppercase;
	font-weight: bold;
	color: #008a9a;
	margin-top: 5px;
	margin-bottom: 5px;
}

.module-title .details h1 {
	font-size: 1.2em;
	margin-top: 0;
	margin-bottom: 0;
}

.module-title .details h2 {
	font-size: 0.9em;
	margin-top: 6px;
	margin-bottom: 0;
	font-weight: normal;
	color: #737f89;
}

.person-card {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	border: 1px solid #efefef;
	margin-bottom: 20px;
	flex-wrap: wrap;
}

.person-card .border {
	display: none;
	width: 12px;
}

.person-card.color-1-soft .border {
	background-color: #102b3f !important;
}

.person-card.color-2-soft .border {
        background-color: #008a9a !important;
}

.person-card.color-3-soft .border {
        background-color: #00a6d6 !important;
}

.person-card.color-4-soft .border {
        background-color: #e6ae4a !important;
}

.person-card .picture {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px 10px;
	width:100%;
}

.person-card .picture img {
	aspect-ratio: 3/4;
        border-radius: 8px;
        width: 200px;
	height: 250px;
	margin: auto;
        object-fit: cover;
}

.person-card .description {
	display: flex;
	padding: 15px 12px;
	flex-direction: column;
	width: 100%;
}

.person-card h4 {
	font-weight: bold;
        color: #008a9a;
        margin-top: 5px;
        margin-bottom: 5px;
}

.person-card h1 {
	font-weight: bold;
	font-size: 1.4em;
	margin-top: 0;
	margin-bottom: 0px;
}

.person-card .box {
	border: 1px solid #ccc;
	padding: 6px 5px;
	margin: 5px;
	border-radius: 5px;
	background-color: rgba(0,0,0,0.05);
}

.person-card .box strong {
	font-weight: bold;
        color: #008a9a;
}

table:not(.table) {
	border: 1px solid #ccc;
}

table:not(.table) td {
	padding: 5px 15px;
	vertical-align: top;
	border-color: #ccc;
}

table p {
	margin: 0;
}

.note {
	padding: 15px;
	border-left: 12px solid #ccc;
	background-color: #efefef;
}

.note h4 {
	font-weight: bold;
        color: #008a9a;
}

.note.color-1-soft {
	border-left: 12px solid #102b3f;
}

.note.color-2-soft {
        border-left: 12px solid #008a9a;
}

.note.color-3-soft {
        border-left: 12px solid #00a6d6;
}

.note.color-4-soft {
        border-left: 12px solid #e6ae4a;
}

#map {
	position: relative;
	width: 100%;
	aspect-ratio: 1/1;
    	border: 1px solid #ddd;
    	#filter: grayscale(100%) contrast(1.05);
}

.maplibregl-ctrl-attrib.maplibregl-compact details:not([open]) .maplibre-ctrl-attrib-inner {
    display: none !important;
}
 
/* custom marker */
.pin {
	width: 14px;
	height: 14px;
	background: #7cb8cf;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
}


@media (min-width: 768px) {
.module-title .details h4 {
	font-size: 1em;
}

.module-title .details h1 {
        font-size: 36px;
}

.module-title .details h2 {
        font-size: 1em;
        margin-top: 6px;
        margin-bottom: 0;
}

.person-card .border {
	display: block;
}

.person-card .picture {
        width:220px;
}

.person-card .description {
        width: calc(100% - 240px);
}

.person-card h1 {
        font-size: 32px;
}

.top-image {
  min-height: 600px;
}

.top-image img {
        width: 70%;
}

.top-image div {
        width: 58%;
        top: 8.4%;
        left: 0;
}

.top-image div h1 {
	font-size: 42px;
}

.top-image div h2 {
	font-size: 1.625rem;
        bottom: 30px;
        left: 20px;
        right: 30px;
}

.promo-image-grid {
        grid-template-columns: repeat(2,1fr);
}

.promo-image-grid .top-image {
        min-height: 420px;
}

.promo-image-grid h1 {
        font-size: 1.5em;
}

.promo-image-grid p {
        font-size: 1.2em;
        top: 30%;
        bottom : 30%;
}

.promo-image-grid a {
        font-size: 1.2em !important;
}

.person-profile {
        grid-template-columns: 40% 60%;
        width: 400px;
}

.navigation-grid {
        gap: 15px;
        grid-template-columns: repeat(3, 1fr);
}

.promo-image-grid h1 {
        font-size: 1.5em !important;
}


}