/* --Variables-- */
:root {
	--colour-primary: #26348b;
	--colour-secondary: #009fe3;
	--colour-gradient: linear-gradient(to right, #26348b 0%, #009fe3 100%);
	--colour-border: #CCCCCC;
	--colour-text: #333333;
	--contents-width: 900px;
	--font-english: 'Plus Jakarta Sans', sans-serif;
	--font-english-header: 'Plus Jakarta Sans', sans-serif;
	--font-chinese: 'NotoSansTC';
}

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600&display=swap');

@font-face {
 font-family: 'Noto Sans TC';
 src: url(/fonts/noto_sans_tc/NotoSansTC-Regular.otf);
 font-weight: normal;
 font-style: normal;
}

@font-face {
 font-family: 'Noto Sans TC';
 src: url(/fonts/noto_sans_tc/NotoSansTC-Light.otf);
 font-weight: 300;
 font-style: normal;
}

/* --Scrollbar-- */
/* width */
::-webkit-scrollbar {
  width: 0.4rem;
	height: 0.4rem;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--colour-border);
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: rgb(38, 52, 139, 0.6);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgb(38, 52, 139, 1);
}

/*@font-face {
 font-family: 'Roboto';
 src: url(https://www2.hkma.org.hk/fonts/roboto/Roboto-Light.ttf);
 font-weight: 300;
 font-style: normal;
}

@font-face {
 font-family: 'Roboto';
 src: url(https://www2.hkma.org.hk/fonts/roboto/Roboto-Medium.ttf);
 font-weight: 600;
 font-style: normal;
}

@font-face {
 font-family: 'Noto Sans TC';
 src: url(https://www2.hkma.org.hk/fonts/noto_sans_tc/NotoSansTC-Regular.otf);
 font-weight: normal;
 font-style: normal;
}

@font-face {
 font-family: 'Noto Sans TC';
 src: url(https://www2.hkma.org.hk/fonts/noto_sans_tc/NotoSansTC-Light.otf);
 font-weight: 300;
 font-style: normal;
}

@font-face {
 font-family: 'PT Serif';
 src: url(/fonts/pt_serif/PTSerif-Regular.ttf);
 font-weight: normal;
 font-style: normal;
} */

/* --General-- */

/* Absolute Width and Height for all Elements */
html {
	font-size: 16px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  scroll-behavior: smooth;
}
*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

body {
	margin: 0;
	word-spacing: 4px;
	font-family: 'Plus Jakarta Sans', sans-serif;
}

h3 {
	text-align: center;
	font-size: 1.8rem;
	color: var(--colour-primary);
	font-family: var(--font-english), sans-serif;
	margin: 0.4rem 0;
}

h4 {
	font-size: 1.6rem;
	color: var(--colour-primary);
	font-family: var(--font-english), sans-serif;
	margin: 0.4rem 0;
}

h5 {
	font-size: 1.4rem;
	color: var(--colour-secondary);
	font-family: var(--font-english), sans-serif;
	margin: 0.4rem 0;
	font-weight: 400;
}

p {
	margin-top: 0.4rem;
	margin-bottom: 0.4rem;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.8rem;
	color: var(--colour-text);
}

ol {
	font-size: 20px;
	list-style: upper-roman;
	font-weight: 400;
	margin: 0.4rem 0;
	color: var(--colour-text);
}

ul {
	font-size: 20px;
	list-style-type: square;
	font-weight: 400;
	margin: 0.4rem 0;
	color: var(--colour-text);
}

.ordered-list_formal {
	list-style: upper-roman;
}

ol li, ul li {
	line-height: 2rem;
}

a {
	cursor: pointer;
	text-decoration: none;
	color: var(--colour-text);
}

a:hover {
	color: var(--colour-primary);
	-webkit-transform: .1s ease-in-out;
	-moz-transform: .1s ease-in-out;
	-o-transform: .1s ease-in-out;
	transition: .1s ease-in-out;
}

.text-align_centre {
	text-align: center;
}

/* --Image-- */
.img_fluid {
	width: 100%;
}

.img_horizontally-centre {
	display: block;
	margin-right: auto;
	margin-left: auto;
}

.img_rounded-corners {
	border-radius: 1rem;
}

/* --Indentation-- */
.indentation {
	margin-left: 2.4rem;
}

/* --Flex-- */

/* -Container- */
.flex {
  display: flex;
}

/* Direction */
.flex-direction_row {
  flex-direction: row; /* left to right and then top to bottom, default */
}
.flex-direction_row-reverse {
  flex-direction: row-reverse; /* right to left and then top to bottom */
}
.flex-direction_column {
  flex-direction: column; /* top to bottom  */
}
.flex-direction_column-reverse {
  flex-direction: column-reverse; /* bottom to top */
}

/* Wrap */
.flex-wrap_nowrap {
  flex-wrap: nowrap; /* on one line, default */
}
.flex-wrap_wrap {
  flex-wrap: wrap; /* wrapped onto multiple lines, from top to bottom */
}
.flex-wrap_wrap-reverse {
  flex-wrap: wrap-reverse;  /* wrapped onto multiple lines, from bottom to top */
}

/* Justify-content */
.flex-justify-content_flex-start {
  justify-content: flex-start; /* towards the start of the flex-direction, default */
}
.flex-justify-content_flex-end {
  justify-content: flex-end; /* towards the end of the flex-direction */
}
.flex-justify-content_center {
  justify-content: safe center; /* centred */
}
.flex-justify-content_space-between {
  justify-content: space-between; /* evenly distributed in the line, the first item on the start line and the last on the end line */
}
.flex-justify-content_space-around {
  justify-content: space-around; /* evenly distributed in the line with equal space around all items */
}
.flex-justify-content_space-evenly {
  justify-content: space-evenly; /* distributed in the line so that the spacing between two items is equal */
}

/* Align-items */
.flex-align-items_stretch {
  align-items: stretch; /* stretch to fill the container, default */
}
.flex-align-items_flex-start {
  align-items: flex-start; /* placed at the start of the cross axis */
}
.flex-align-items_flex-end {
  align-items: flex-end; /* placed at the end of the cross axis */
}
.flex-align-items_center {
  align-items: safe center; /* centred in the cross axis */
}
.flex-align-items_baseline {
  align-items: baseline; /* aligned such that items' baselines align */
}

/* Align-content (taking effect only when flex-wrap isn't set to nowrap) */
.flex-align-content_normal {
  align-content: normal; /* default */
}
.flex-align-content_flex-start {
  align-content: flex-start; /* packed to the start of the container */
}
.flex-align-content_flex-end {
  align-content: flex-end; /* packed to the end of the container */
}
.flex-align-content_center {
  align-content: safe center; /* centred in the container */
}

/* -Items- */

/* Order */
.flex-order_0 {
	order: 0; /* default */
}
.flex-order_2 {
	order: 2;
}
.flex-order_4 {
	order: 4;
}
.flex-order_6 {
	order: 6;
}
.flex-order_8 {
	order: 8;
}
.flex-order_10 {
	order: 10;
}

/* Grow */
.flex-grow_0 {
	flex-grow: 0; /* deafult */
}
.flex-grow_1 {
	flex-grow: 1;
}
.flex-grow_2 {
	flex-grow: 2;
}
.flex-grow_3 {
	flex-grow: 3;
}

/* Shrink */
.flex-shrink_1 {
	flex-shrink: 1; /* default */
}
.flex-shrink_2 {
	flex-shrink: 2;
}
.flex-shrink_3 {
	flex-shrink: 3;
}

/* Align-self (overriding the alignment specified by align-items of the container */
.flex-align-self_auto {
	align-self: auto; /* default */
}
.flex-align-self_flex-start {
	align-self: flex-start; /* placed at the start of the cross axis */
}
.flex-align-self_flex-end {
	align-self: flex-end; /* placed at the end of the cross axis */
}
.flex-align-self_center {
	align-self: safe center; /* centred in the cross axis */
}
.flex-align-self_baseline {
	align-self: baseline; /* aligned such that items' baselines align */
}

/* --Row System-- */

/* Container */
.row {
	display: flex;
	flex-wrap: wrap;
	margin: calc(0.5rem * -1);
}
.row > * {
	padding: 0.5rem;
}

/* Regardless of Screen Size */
.col_12 {
	flex-basis: 100%;
	max-width: 100%;
}
.col_6 {
	flex-basis: 50%;
	max-width: 50%;
}
.col_4 {
	flex-basis: 33.33%;
	max-width: 33.33%;
}
.col_3 {
	flex-basis: 25%;
	max-width: 25%;
}
.col_2 {
	flex-basis: 16.67%;
	max-width: 16.67%;
}
.col_auto {
	flex-basis: 0;
	flex-grow: 1;
}

/* Width < 576px */
@media ( max-width: 576px ) {
	.col-xs_12 {
		flex-basis: 100%;
		max-width: 100%;
	}
	.col-xs_6 {
		flex-basis: 50%;
		max-width: 50%;
	}
	.col-xs_4 {
		flex-basis: 33.33%;
		max-width: 33.33%;
	}
	.col-xs_3 {
		flex-basis: 25%;
		max-width: 25%;
	}
	.col-xs_2 {
		flex-basis: 16.67%;
		max-width: 16.67%;
	}
}

/* Width >= 576px */
@media ( min-width: 576px ) {
	.col-sm_12 {
		flex-basis: 100%;
		max-width: 100%;
	}
	.col-sm_6 {
		flex-basis: 50%;
		max-width: 50%;
	}
	.col-sm_4 {
		flex-basis: 33.33%;
		max-width: 33.33%;
	}
	.col-sm_3 {
		flex-basis: 25%;
		max-width: 25%;
	}
	.col-sm_2 {
		flex-basis: 16.67%;
		max-width: 16.67%;
	}
}

/* Width >= 768px */
@media ( min-width: 768px ) {
	.col-md_12 {
		flex-basis: 100%;
		max-width: 100%;
	}
	.col-md_6 {
		flex-basis: 50%;
		max-width: 50%;
	}
	.col-md_4 {
		flex-basis: 33.33%;
		max-width: 33.33%;
	}
	.col-md_3 {
		flex-basis: 25%;
		max-width: 25%;
	}
	.col-md_2 {
		flex-basis: 16.67%;
		max-width: 16.67%;
	}
}

/* Width >= 1024px */
@media ( min-width: 1024px ) {
	.col-lg_12 {
		flex-basis: 100%;
		max-width: 100%;
	}
	.col-lg_6 {
		flex-basis: 50%;
		max-width: 50%;
	}
	.col-lg_4 {
		flex-basis: 33.33%;
		max-width: 33.33%;
	}
	.col-lg_3 {
		flex-basis: 25%;
		max-width: 25%;
	}
	.col-lg_2 {
		flex-basis: 16.67%;
		max-width: 16.67%;
	}
}

/* Width >= 1366px */
@media ( min-width: 1366px ) {
	.col-xl_12 {
		flex-basis: 100%;
		max-width: 100%;
	}
	.col-xl_6 {
		flex-basis: 50%;
		max-width: 50%;
	}
	.col-xl_4 {
		flex-basis: 33.33%;
		max-width: 33.33%;
	}
	.col-xl_3 {
		flex-basis: 25%;
		max-width: 25%;
	}
	.col-xl_2 {
		flex-basis: 16.67%;
		max-width: 16.67%;
	}
}

/* --Header-- */
#header {
	border-bottom: 24px;
	border-bottom-style: solid;
	border-bottom-color: transparent;
	border-image: var(--colour-gradient) 10;
	background-color: #FFFFFF;
	font-family: var(--font-chinese-header), sans-serif;
}

/* --Navigation Menu-- */
#navigation_desktop_menu_container {
	display: grid;
	position: relative;
	font-family: var(--font-english), serif;
	grid-template-columns: 0.6rem auto 0.6rem;
	/* grid-template-rows: 1rem 3rem 3rem auto 0.6rem; */
	grid-template-rows: 1rem 6rem 6rem auto 0.6rem;
	align-items: center;
	margin: auto;
	max-width: var(--contents-width);
	z-index: 6;
}
#navigation_menu_logo {
	height: 120%;
	justify-self: center;
	grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
}
.navigation_desktop_menu_items {
	position: relative;
	justify-self: center;
	align-self: end;
	grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 3;
  grid-row-end: 4;
}
.navigation_desktop_menu_item {
	position: relative;
	margin: 0 1.2rem;
	font-size: 1.4rem;
	font-weight: 500;
	font-family: var(--font-english), sans-serif;
	opacity: 1;
	top: 0;
	-webkit-transform: .1s ease-in-out;
	-moz-transform: .1s ease-in-out;
	-o-transform: .1s ease-in-out;
	transition: .1s ease-in-out;
}
/* .navigation_desktop_menu_item_hidden {
	visibility: hidden;
	opacity: 0;
	-webkit-transform: .1s ease-in-out;
	-moz-transform: .1s ease-in-out;
	-o-transform: .1s ease-in-out;
	transition: .1s ease-in-out !important;
} 
.navigation_desktop_menu_item_active {
	top: -2.2rem;
}*/
.navigation_desktop_menu_item_active::after {
	width: 100% !important;
}
.navigation_desktop_menu_sub_items {
	justify-self: center;
	align-self: center;
	grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 4;
  grid-row-end: 5;
	font-size: 1.4rem;
	padding: 10px;
	display: none;
}
.navigation_desktop_menu_sub_items a {
	font-family: var(--font-english), sans-serif;
	font-size: 1rem;
	padding: 10px;
}
.navigation_desktop_menu_sub_items_active {
	display: initial;
}
.navigation_desktop_menu_sub_items * {
	margin-right: 2rem;
}
/* ----------- 2022/03/15 --------------------*/
/* #navigation_menu_item_about:hover #navigation_menu_item_about_sub_items {
	display: initial !important;
} */

#navigation_menu_item_home, #navigation_menu_item_about, #navigation_menu_item_sponsor, #navigation_menu_item_course, #navigation_menu_item_membership, #navigation_menu_item_contact {
	vertical-align: top;
}
#navigation_menu_item_home::before, #navigation_menu_item_about::before, #navigation_menu_item_sponsor::before, #navigation_menu_item_course::before, #navigation_menu_item_membership::before, #navigation_menu_item_contact::before {
	font-size: 1.8rem;
	position: relative;
	top: 6px;
}
#navigation_menu_item_home::after, #navigation_menu_item_about::after, #navigation_menu_item_sponsor::after, #navigation_menu_item_course::after, #navigation_menu_item_membership::after, #navigation_menu_item_contact::after {
	content: "";
	position: absolute;
	background-color: var(--colour-primary);
	width: 0;
	height: 4px;
	top: 28px;
	left: 0;
	transition: .5s ease-in-out;
}
#navigation_menu_item_home:hover::after, #navigation_menu_item_about:hover::after, #navigation_menu_item_sponsor:hover::after, #navigation_menu_item_course:hover::after, #navigation_menu_item_membership:hover::after, #navigation_menu_item_contact:hover::after {
	width: 100%;
	-webkit-transform: .3s ease-in-out;
	-moz-transform: .3s ease-in-out;
	-o-transform: .3s ease-in-out;
	transition: .3s ease-in-out;
}
/* #navigation_menu_apply {
	font-size: 1.6rem;
	margin-top: 0.6rem;
	justify-self: right;
	align-self: start;
	grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 3;
} */

/* Mobile Menu */
#navigation_mobile_menu_icon {
	display: none;
}
#navigation_mobile_menu_container {
	display: none;
	background-color: #FFFFFF;
	opacity: 0.9;
	position: absolute;
	width: 100%;
	z-index: 5;
	overflow-y: scroll;
	max-height: 100vh;
}
.navigation_mobile_menu_items {
	position: relative;
	text-align: center;
	width: 100%;
	margin: 0;
}
.navigation_mobile_menu_item {
	position: relative;
	font-size: 1.3rem;
	opacity: 1;
	top: 0;
	-webkit-transform: .1s ease-in-out;
	-moz-transform: .1s ease-in-out;
	-o-transform: .1s ease-in-out;
	transition: .1s ease-in-out;
}
/* .navigation_mobile_menu_item::before, .navigation_mobile_menu_item::after {
	content: "-";
}
.navigation_mobile_menu_item:nth-child(1), .navigation_mobile_menu_item:nth-child(9), .navigation_mobile_menu_sub_item:nth-child(5), .navigation_mobile_menu_sub_item:nth-child(8) {
	margin-bottom: 1.4rem;
} */
.navigation_mobile_menu_item {
	margin: 0.8rem 0;
}
@media ( max-width: 1024px ) {
	#navigation_desktop_menu_container {
		grid-template-columns: 0.6rem auto 0.6rem;
		grid-template-rows: 0.6rem 3rem 0.6rem;
	}
	#navigation_menu_logo {
		height: 100%;
		justify-self: center;
		grid-column-start: 2;
		grid-column-end: 3;
		grid-row-start: 2;
		grid-row-end: 3;
	}
	.navigation_desktop_menu_items, .navigation_desktop_menu_sub_items {
		display: none !important;
	}
	/* #navigation_menu_apply {
		align-self: center;
	} */
	#navigation_mobile_menu_icon {
		display: initial;
		justify-self: right;
		grid-column-start: 2;
		grid-column-end: 3;
		grid-row-start: 2;
		grid-row-end: 3;
		-webkit-transition: .5s ease-in-out;
		-moz-transition: .5s ease-in-out;
		-o-transition: .5s ease-in-out;
		transition: .5s ease-in-out;
		cursor: pointer;
	}
	#navigation_mobile_menu_icon span {
		display: block;
		height: 0.3rem;
		width: 2rem;
		margin: 0.3rem;
		background: var(--colour-primary);
		/* border-radius: 1px; */
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: .25s ease-in-out;
		-moz-transition: .25s ease-in-out;
		-o-transition: .25s ease-in-out;
		transition: .25s ease-in-out;
	}
	#navigation_mobile_menu_icon.open span:nth-child(1) {
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg) translateX(8px) translateY(8px);
	}
	#navigation_mobile_menu_icon.open span:nth-child(2) {
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		    transform: rotate(-45deg) translateX(-1px) translateY(1px);
	}
	#navigation_mobile_menu_icon.open span:nth-child(3) {
		width: 0%;
	}
	#navigation_mobile_menu_container.open {
		display: initial;
	}
}

/* --Breadcrumbs-- */
#breadcrumbs_container {
	margin: 1.4rem 0.6rem;
	font-family: var(--font-chinese-header), sans-serif;
}

#breadcrumbs {
	display: inline-block;
	font-family: var(--font-english), sans-serif;
}

.breadcrumbs_link {
	color: var(--colour-text);
	font-weight: 500;
	font-size: 1.2rem;
}

.breadcrumbs_link::after {
	color: var(--colour-text);
	content: "►";
	font-size: 1rem;
}

.breadcrumbs_link_current {
	cursor: default;
	color: var(--colour-secondary);
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Old versions of Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none;
}

.breadcrumbs_link_current::after {
	content: "" !important;
}

/* --Contents-- */

#contents {
	position: relative;
	margin: auto;
	max-width: var(--contents-width);
	min-height: 100vh;
}
.contents_container {
	position: relative;
	margin: 2rem 0.6rem; 
}

/* Image Button */
.image_button_container {
	position: relative;
	margin: 10px 0;
}
.image_button_img {
	width: 100%;
	max-width: 1200px;
	display: block;
	margin: auto;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	border-radius: 1rem;
}

.image_button_overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0.7;
  transition: .5s ease;
  background-color: #FFFFFF;
	border-radius: 1rem;
}

#advisory_board_container:hover #advisory_board_overlay {
	opacity: 0.9;
}

#advisory_board_container:hover #advisory_board_overlay .image_button_text {
	color: var(--colour-primary);
}

#message_container:hover #message_overlay {
	opacity: 0.9;
}

#message_container:hover #message_overlay .image_button_text {
	color: var(--colour-primary);
}

#upcoming_courses_container:hover #upcoming_courses_overlay {
	opacity: 0.9;
}

#upcoming_courses_container:hover #upcoming_courses_overlay .image_button_text {
	color: var(--colour-primary);
}

#past_courses_container:hover #past_courses_overlay {
	opacity: 0.9;
}

#past_courses_container:hover #past_courses_overlay .image_button_text {
	color: var(--colour-primary);
}

.image_button_text {
  color: var(--colour-secondary);
  font-size: 30px;
	font-weight: 600;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
	transition: .5s ease;
}

@media ( max-width: 1024px ) {
	.image_button_text {
		font-size: 24px;
	}
}

/* Advisory Committee */
.board_heading {
	text-align: center;
	font-size: 1.4rem;
	margin-top: 1.2rem;
	margin-bottom: 0.2rem;
}
.board_img {
	display: block;
	margin: auto;
	max-width: 90px;
}
.board_profile {
	text-align: center;
	font-size: 1.2rem;
	padding: 10px 0;
	line-height: 1.2;
	margin-bottom: 1rem;
}
.board_profile_name {
	font-size: 1.2rem;
	color: var(--colour-primary);
}
.board_profile_title {
	font-size: 0.9rem;
}

/* Message */
.message_image {
	width: 100%;
	max-width: 90px;
	display: block;
	margin: auto;
	padding-bottom: 20px;
}
.message_name {
	text-align: center;
	font-size: 18px;
	font-weight: 600;
	color: var(--colour-primary);
}
.message_profile {
	font-size: 16px;
	font-weight: 300;
	color: var(--colour-text);
}
.message_content {
	
}

/* Courses */
.icon-coursedetails {
	margin-right: 10px;
}

.course_upcoming_content, .course_past_content{
  background-color: #fff;
}

.course_upcoming_box, .course_past_box{
  width: 100%;
	max-width: 700px;
	margin: auto;
  padding: 5px;
}

.course_upcoming_university-title, .course_past_university-title {
	background-color: var(--colour-primary);
  padding:10px;
  color:#fff;
  font-size:18px;
  font-weight: 500;
  border-bottom:none;
  font-family: 'Roboto', 'Noto Sans TC', sans-serif !important;
}

.course_upcoming_box-content, .course_past_box-content {
  padding:15px 10px;
  background-color: #fff;
  border:1px solid #ccc;
  font-size:14px;
}

.course_upcoming_box-content::after, .course_past_box-content::after {
  content: "";
  clear: both;
  display: block;
}

.course_upcoming_programme-title, .course_past_programme-title{
  margin-bottom:.5em;
  font-size:18px;
  line-height:1.5;
  font-family: 'Roboto', 'Noto Sans TC', sans-serif !important;
}

.course_upcoming_details-title, .course_past_details-title {
  font-size: 14px;
  font-weight: 300;
  padding-bottom: 2px;
}

.course_upcoming_details-content, .course_past_details-content {
  font-size: 16px;
	font-family: 'Roboto', 'Noto Sans TC', sans-serif !important;
}

.course_upcoming_button, .course_past_button {
	float:right;
  background-color: #fff;
  color: var(--colour-primary);
  text-decoration: none;
  cursor:pointer;
  padding: 12px 32px;
  border:1px solid var(--colour-primary);
  border-radius: 5px;
  display: block;
  text-align: center;
  transition: .5s;
  letter-spacing: 1px;
  text-transform:uppercase;
  font-weight: 400;
	min-width: 200px;
}

.course_upcoming_button:hover, .course_past_button:hover {
  background-color: var(--colour-primary);
  color:#fff;
}

.course_upcoming_code, .course_past_code {
	margin: 50px 0 0 0;
	font-size: 12px;
	text-align: right;
	color: #CCCCCC;
}

/* Swiper */
.swiper-container {
	height: 100%;
	width: 100%;
}
.swiper-slide {
	text-align: center;
	font-size: 1rem;
	background: #fff;

	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}

.swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.swiper-button-prev:after, .swiper-button-next:after {
	color: var(--colour-primary);
}

.swiper-pagination-bullet-active {
	background-color: var(--colour-primary);
}

/* Contact */
#enquiry_table_container {
	max-width: 700px;
	margin: auto;
}
.enquiry_contact_person {
	font-size: 1.2rem;
	color: var(--colour-primary);
}
#enquiry_table {
	border-collapse: collapse;
	width: 100%;
}
#enquiry_table tr td {
	padding: 0.1rem 0.2rem;
	text-align: left;
}
#google_map_location {
	width: 100%;
	max-width: 700px;
	height: 300px;
}

/* --Footer-- */
#footer {
	position: static;
	bottom: 0;
	background-image: var(--colour-gradient);
}
#copyright_container {
	position: relative;
	margin: auto;
	max-width: var(--contents-width);
}
#copyright {
	color: #FFFFFF !important;
	margin: 0;
	padding: 0.6rem;
	font-size: 0.9rem;
}
#copyright a {
	color: #FFFFFF !important;
}
@media ( max-width: 768px ) {
	#copyright {
		font-size: 0.8rem;
		line-height: 1.6;
	}
}