*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.clearfix:before,
.clearfix:after {
  content: '';
  display: table;
}

.clearfix:after {
  clear: both;
}

.display-inline * {
  display: inline-block;
}

.aria-hide {
  display: none;
}

#skip a {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

#skip a:focus {
    position:static;
    width:auto;
    height:auto;
}

/* Variables */
:root {
	--primary-color-1: #000000;
	--primary-color-1a: #00000080; /* 50% opacity*/
	--primary-color-2: #c7111f;
	--primary-color-2a: #c7111f33; /* 20% opacity*/
	--primary-color-3: #c7111f;
	--primary-color-4: #666666;
	--highlight-color: #e5e5e5;
	--highlight-color-2: #333333;
	--link-color: #c7111f;
	--link-color-2: #000000;
	--link-hover-color: #996633;
	--link-hover-color-2: #004987;
	--link-hover-color-3: #00adda;
	--top-nav-color: #FFFFFF;
	--top-nav-hover-color: #c7111f;
	--quicklink-hover: #000000;
	
	--button-1: #00adda;
	--button-2: #000000;
	--button-footer: #00adda;
	--btn-primary: #00adda;
	--btn-hover: #005f78;
	--heading-color-2: #FFFFFF;
	
	--dark-font-color: #000000;
	--light-font-color: #fff;
	--dark-grey: #666666;
	--medium-grey: #F0F0F0;
	--light-grey: #F8F8F8; 
	--black: #000000;
	--beige: #F5EFE2;

	--body-font: 'Roboto', sans-serif;
	--font-regular: 400;
	--font-medium: 500;
	--font-semibold: 600;
	--font-bold: 700;
	
	/* 15% opacity */
	--principals-message-15: #88C7E226;
	--clubs-15: #2D95FC26;
	--weekly-update-15: #7A6FE326;
	--performance-15: #AAA3CF26;
	--no-school-15: #E90C8E26;
	--well-being-15: #EC8EAB26;
	--school-council-15: #FF643D26;
	--culture-15: #D8AC5D26;
	--meeting-15: #A8877B26;
	--off-site-activity-15: #6E8E6126;
	--academic-15: #8CC34A26;
	--parent-society-15: #438AA826;
	--athletics-15: #34B1B926;
}

/* background-colors */
.bg-light-grey {
	background: #F8F8F8;
}

.bg-medium-grey {
	background-color: var(--medium-grey);
}

.bg-dark-grey {
	background: #666666;
	color: white;
}

.bg-black {
	background: #000000!important;
	color: white;
}

.bg-blue {
	background: #03ADDB!important;
	color: white;
}

.bg-beige {
	background: var(--beige);
}

.bg-light-blue {
    background-color: #D4E1E4;
}

.bg-light-orange {
    background-color: #F2E1CB;
}

.bg-light-purple {
    background-color: #E5E1E8;
}

.bg-purple {
	background: #64308F!important;
	color: white;
}

.bg-link {
	background: var(--link-color);
	color: white;
}

.bg-primary-1 {
	background: var(--primary-color-1);
	color: white;
}

.bg-primary-1a {
	background: var(--primary-color-1a);
	color: white;
}

.bg-primary-2 {
	background: var(--primary-color-2);
	color: white;
}

.bg-primary-3 {
	background: var(--primary-color-3);
	color: white;
}

.bg-primary-1 h2, 
.bg-primary-2 h2,
.bg-primary-3 h2 {
	color: white!important;
}

.bg-primary-2 a:not(.btn),
.bg-primary-3 a:not(.btn) {
	color: var(--link-color-2)!important;
}

.bg-primary-2 a:not(.btn):hover,
.bg-primary-2 a:not(.btn):focus,
.bg-primary-3 a:not(.btn):hover,
.bg-primary-3 a:not(.btn):focus{
	color: var(--link-hover-color-2)!important;
}

.bg-highlight {
	background: var(--highlight-color);
}

.bg-highlight-2 {
	background: var(--highlight-color-2);
	color: white;
}

.bg-lightblue {
    background-color: #CCE6F5!important;
}

.bg-lightgrey {
    background-color: #EDEEF1!important;
}

.bg-transparent {
    background-color: transparent!important;
}

.bg-navy {
    background-color: #01576E!important;
    color: white;
}

.bg-navy .showcase-button-prev, 
.bg-navy .showcase-button-next {
    background-color: #fff;
}

.bg-navy .showcase-buttons i {
    color: #01576E;
}

.bg-colour {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.less-gap {
    margin-left: -.5rem;
    margin-right: -.5rem;
}

.less-gap > div,
.less-gap > article {
    padding-left: .5rem;
    padding-right: .5rem;
}

/* Borders */
.border-grey {
    border: 2px solid var(--medium-grey);
}
.bborder-green {
    border-bottom: 6px solid #008B46;
}
.bborder-navy {
    border-bottom: 6px solid #004987;
}
.bborder-pink {
    border-bottom: 6px solid #AA258D;
}
.bborder-teal {
    border-bottom: 6px solid #0099A8;
}
.bborder-brown {
    border-bottom: 6px solid #996633;
}
.bborder-blue {
    border-bottom: 6px solid #0AADDB;
}
.bborder-orange {
    border-bottom: 6px solid #F7941D;
}
.bborder-purple {
    border-bottom: 6px solid #64308F;
}

/* Quicklinks colour palette */
.bg-cbeblue {
    background: #00ADDA!important;
}
.bg-denim {
    background: #004987!important;
}
.bg-pride {
    background: #64308F!important;
}
.bg-cosmetology {
    background: #AA258D!important;
}
.bg-graduation {
    background: #990033!important;
}
.bg-fireball {
    background: #C7111F!important;
}
.bg-juicebox {
    background: #F28726!important;
}
.bg-saddle {
    background: #996633!important;
}
.bg-autumn {
    background: #cc9933!important;
}
.bg-schoolbus {
    background: #ffcc00!important;
}
.bg-springbreak {
    background: #AFD622!important;
}
.bg-grassstain {
    background: #008846!important;
}

.bg-cbeblue .quicklink-icon  {
    color: #00ADDA!important;
}
.bg-denim .quicklink-icon {
    color: #004987!important;
}
.bg-pride .quicklink-icon {
    color: #64308F!important;
}
.bg-cosmetology .quicklink-icon {
    color: #AA258D!important;
}
.bg-graduation .quicklink-icon {
    color: #990033!important;
}
.bg-fireball .quicklink-icon {
    color: #C7111F!important;
}
.bg-juicebox .quicklink-icon {
    color: #F28726!important;
}
.bg-saddle .quicklink-icon {
    color: #996633!important;
}
.bg-autumn .quicklink-icon {
    color: #cc9933!important;
}
.bg-schoolbus .quicklink-icon {
    color: #ffcc00!important;
}
.bg-springbreak .quicklink-icon {
    color: #AFD622!important;
}
.bg-grassstain .quicklink-icon {
    color: #008846!important;
}
.bg-black .quicklink-icon{
	color: #000000!important;
}

/* Text Colour */
.primary-2 {
	color: var(--primary-color-2);
}

.link-color {
	color: var(--link-color);
}

/* TYPOGRAPHY
Using the Perfect Fifth factor from https://www.gridlover.net/try
*/
html {
  font-size: 16px;
  line-height: 21px;
  scroll-behavior: smooth;
}

@media (min-width: 99em){
	html {
	  font-size: calc(12px + 0.390625vw);
	}
}

@media (min-width: 125em){
	html {
	  font-size: calc(15px + 0.390625vw);
	}
}

@media (min-width: 2560px){
	html {
	  font-size: 25px;
	}
}

body {
  max-width: 2560px;
  padding: 0;
  margin: 0 auto;  
  font-family: var(--body-font);
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--dark-font-color);
}


h1, .h1 {
  font-weight: var(--font-bold);
  font-style: normal; 
  font-size: 3.25rem;
  margin-top: 1.3125rem;
  margin-bottom: 2.625rem;
}


h2, .h2{
  font-size: 2rem;
  margin-top: 1.3125rem;
  margin-bottom: 1.3125rem;
}

h3, .h3{
  font-size: 1.375rem;
  margin-top: 1rem;
  margin-bottom: 0.75rem;
}

.page-content h3 {
	font-size: 1.5rem;
}

h4, .h4 {
  font-size: 1.2rem;
  margin-top: 1.3125rem;
  margin-bottom: 0.75rem;
}

h5, .h5 {
  font-size: 1.1rem;
  margin-top: 1.3125rem;
  margin-bottom: 0.75rem;
}

.text-large {
	font-size: 1.1rem;
}

@media all and (max-width: 62em){
	h1, .h1 {
		font-size: 2rem;
	}
	
	h2, .h2 {
		font-size: 1.5rem;
		margin: 1rem 0;
	}
	
	h3, .h3, .page-content h3 {
		font-size: 1.375rem;
		margin: 1rem 0;
	}
}

.editor-text-italic {
	font-size: 1rem;
}

/* Font size within main content */
.resize-text h1 {
  font-size: 3.25em;
}

.resize-text h2 {
  font-size: 2em;
}

.resize-text h3 {
  font-size: 1.375em;
}

.resize-text h4 {
    font-size: 1.2em;
}

.resize-text h5{
  font-size: 1.1em;
}

@media all and (max-width: 62em){
	.resize-text h1 {
		font-size: 2em;
	}
	
	.resize-text h2 {
		font-size: 1.5em;
	}
}

p, ul, ol, pre, blockquote {
  margin-top: 0rem;
  margin-bottom: 1.3125rem;
}

ul ul, ol ol, ul ol, ol ul {
  margin-top: 0rem;
  margin-bottom: 0rem;
}

h1 + h2 {
  margin-top: 0;
}

p {
	line-height: 1.5;
}

hr {
	border: 0;
    height: 1px;
    background-color: #e6e6e6;
	margin: 2rem 0;	
	clear: both;
}

img {
	height: auto;
	max-width: 100%;	
	object-fit: cover;
	display: block;
}	

a {
  text-decoration: none;
}

blockquote {
	background: var(--light-grey);
    border-left: 5px solid var(--primary-color-2);
	padding: 2rem; 
	margin:2.5rem;
    position: relative;
    font-weight: 300;
}

blockquote p:last-of-type {
	margin-bottom: 0;
}

ul {
	padding-left: 0;
	list-style: none;
}

svg {
	margin-top: -1px;
}

strong {
	font-weight: var(--font-bold);
}

section {
	margin-bottom: 2rem;
}

figcaption {
    font-weight: var(--font-medium);
    font-size: .85rem;
    color: var(--dark-grey);
    text-align: left;
}

figure {
	margin-left: 0;
	margin-right: 0;
}

.allow-newlines {
  white-space: pre-wrap;
}

.no-padding {
  padding: 0;
}

.no-margin {
	margin: 0;
}

.mt0 {
	margin-top: 0!important;
}

.mb0 {
	margin-bottom: 0!important;
}

.auto-margin {
	margin: auto;
}

.flex-row {
	display: flex;
	align-items: center;
	gap: .5rem;
}

.flex-row-between {
    display: flex;
	flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.flex-column-center {
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.flex-column-between {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}

.content-inner ul,
.content ul {
	padding-left: 1.2rem;
	list-style: unset;
}

.content {
	width: 100%;
}

.wrapper {
	display: block;
	width: 100%;
}

.content-wrapper {
	position: relative;
	width: 100%;
}

.font-bold {
	font-weight: var(--font-bold);
}

.font-medium {
	font-weight: var(--font-medium);
}

.align-right {
	margin-left: auto;
}

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

.text-shadow {
	text-shadow: 0px 3px 6px #00000029;
}

.box-shadow {
	box-shadow: 0px 3px 15px #00000029;
}

.block-center {
	margin-left: auto;
	margin-right: auto;
	width: fit-content;
}

@media all and (min-width: 75em){
	.wrapper {
		display: flex;
		width: 100%;
	}
	
	.full-container {
		padding: 0 2rem;
	}
	

	blockquote {
	 	padding: 2rem
	}
}


/* Layout */
.content-container,
.container.pad-side {
	padding: 0 1rem;
}

.container.pad-side {
	margin: 0 1rem;
}

@media all and (min-width: 48em){
	.content-container,
	.container.pad-side {
		padding: 0 5%;
		width: auto;
	}
}

@media all and (min-width: 62em){
	.content-container,
	.container.pad-side {
		padding: 0 10%;
	}
	
	/*.page-template.content-container {
		padding: 0 10%;
	}*/
	
	.container.pad-side {
		margin-top: 3rem;
	}
}

/* Search Results */
.container.pad-side > .row > h1 {
	width: 100%;
}
.search-results {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.search-result {
	border: 1px dashed #c3c3c3;
	padding: 1rem 1rem 0;
	flex-basis: 100%;
	max-width: 100%;
}

.search-result a {
	display: flex;
	column-gap: 1rem;	
	color: var(--dark-font-color);
}

.search-description strong {
	color: var(--accent-1)
}

.error-page-container .input-buttons {
	margin: auto;
}

/* show and hide on different screen sizes */
.mobile-only {
	display: block;
}

.desktop-only {
	display: none;
}

@media all and (min-width: 75em){
	.desktop-only {
		display: block;
	}
	.mobile-only {
		display: none;
	}
}

/* BUTTON & LINKS */
a {
  	transition: all .3s ease-in-out; 
	color: var(--link-color);
}

a:hover,
a:focus {
	color: var(--link-hover-color);
}

.link-hover-2:hover,
.link-hover-2:focus {
	color: var(--link-hover-color-2);
}

.link-hover-3:hover,
.link-hover-3:focus {
	color: var(--link-hover-color-3);
}


.btn {
	background: var(--link-color);
    color: var(--light-font-color);
    padding: 0.65rem 1.5rem;
    font-weight: var(--font-medium);
    font-size: 1rem;
    border-radius: 5px;
    margin-top: 1rem;
    display: block;
    width: fit-content;
    transition: all .3s ease-in-out;
}

.btn.smaller {
	font-size: .85rem;
    padding: 0.5rem 1rem;
}

.btn-primary {
    background: var(--primary-color-1);
	color: white!important;
}

.btn-secondary {
    background: var(--primary-color-2);
	color: white!important;
}

.btn-link-color {
    background: var(--link-color);
	color: white!important;
}

.btn-black {
	background: #000000;
	color: white!important;
}

.btn-red {
	background: #9A0235;
	color: white!important;
}

.btn-footer {
	background: var(--button-footer);
	color: white!important;
}

.btn-link {
	padding: 0;
	font-weight: var(--font-semibold);
}

.btn-center {
    margin-left: auto;
    margin-right: auto;
}

.btn-link-secondary {
	color: #fff;
}

.btn-1 {
    background: var(--button-1);
	color: white!important;
}

.btn-2 {
    background: var(--button-2);
	color: white!important;
}

.btn:hover,
.btn:focus {
	box-shadow: inset 0 0 0 5em rgba(255, 255, 255, 0.3)!important
}

@media (min-width: 99em){
	.btn {
		font-size: .9rem;
	}
}

/* Google Translate*/
#google_translate_element {
	margin-top: 2rem;
}

#google_translate_element img {
	display: inline-block;
}

.goog-te-gadget .goog-te-combo {
	margin: 0 0 1rem!important;
	padding: 0.75rem;
    border: none;
	border-right: 0.5rem solid #fff;
    font-weight: var(--font-medium);
	width: 100%;
}

.goog-te-gadget,
.VIpgJd-ZVi9od-l4eHX-hSRGPd,
.VIpgJd-ZVi9od-l4eHX-hSRGPd:visited {
    color: white!important;
}

/* INPUT FIELDS */
input:-webkit-autofill,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:focus {
  border: none;
  -webkit-text-fill-color: none;
  -webkit-box-shadow: 0 0 0px 1000px #fff inset;
}

.input-field input[type="text"], .input-field input[type="password"], 
.input-field input[type="date"], .input-field input[type="tel"], 
.input-field input[type="email"], 
textarea {
    width: 100%;
    box-sizing: border-box;
    border: solid 1px #e4e4e4;
    transition: 0.5s;
	padding: .5rem;
}

textarea {
	min-height: 200px;
}

input[type="submit"] {
    font-weight: bold;
    background: var(--btn-primary);
    color: white;
	border-radius: 5px;
    border: 0;
    cursor: pointer;
    padding: .5rem 1.5rem;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

input[type="submit"]:hover,
input[type="submit"]:focus {
	color: var(--btn-hover);
}

.input-field {
	margin-bottom: 1rem;
}

.input-field label {
    margin-bottom: .5rem;
    display: block;
}

.input-buttons {
    font-weight: var(--font-bold);
    margin-top: 1rem;
    display: block;
	width: fit-content;	
	color: var(--light-font-color);
    background: var(--accent-1);
}

/* Alerts */
.banner-alert-wrapper {
	top: var(--main-top-xs);
	font-size: 1rem;
}

.alert-btn {
    margin: auto;
}

.popupContent .btn {
    margin: auto;
}

#popup-container .row {
    row-gap: 1.5rem;
}

@media (min-width: 75em){
	.banner-alert-wrapper {
		top: var(--main-top-lg);
	}
}

/* Table Styles */
.editor-table-wrapper {
	width: 100%;
	overflow-x: auto;
}

.table,
.editor-table {
  margin: 0 0 2rem;
  overflow-x: auto;
  box-shadow: 0px 5px 10px rgb(0 0 0 / 10%);
}

.table thead th a {
	color: white;
}

.table th a:hover,
.table th a:focus,
.editor-table th a:hover,
.editor-table th a:focus{
	text-decoration: underline;
}

.table.bell-schedule {
	box-shadow: none;
}

.table table,
.editor-table {
  border-radius: 5px;
  font-weight: normal;
  border: none;
  border-collapse: collapse;
  width: 100%;
  max-width: 100%;
  white-space: normal;
  background-color: white;
}

.table table td, 
.table table th,
.editor-table td,
.editor-table th {
  padding: 10px 15px;
	width: auto!important;
}

.table table td,
.editor-table td {
  border-right: 1px solid #F7F6F4;
	width: auto!important;
}

.table table td:last-of-type,
.editor-table td:last-of-type{
  border-right: 0;
}

.table table thead th {
  color: #ffffff;
  background: var(--primary-color-2);
}

.table table thead th > * {
  color: #ffffff;
}

.table table thead th:nth-child(even) {
  color: #ffffff;
  background: var(--primary-color-1);
}

.table table tr:nth-child(odd) {
  background: #f5f5f5;
}

.table h3,
.editor-table h3 {
	margin: .5rem 0;
}

.table img,
.editor-table img {
	width: auto;
}

table td p:last-of-type {
	margin-bottom: 0;
}

/*.editor-table th,
.editor-table th:nth-child(even) {
	color: var(--dark-font-color);
}*/

/*.editor-table th {
	background: var(--primary-color-2)!important;
}

.editor-table th:nth-child(even) {
  background: var(--primary-color-1)!important;
}*/

.editor-tableCell {
	border-color: var(--medium-grey)!important;
}

/* Responsive Iframe for Embed Videos */
.responsive-iframe {
	position: relative;
	width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

.embedly-card-hug {
	position: relative!important;
    padding-bottom: 56.25%!important;
    height: 0;
    max-width: 100%!important;
}

.embedly-card-hug iframe,
.responsive-iframe iframe {
	width: 100%;
    height: 100%;
    border: none;
    position: absolute!important;
    min-height: unset;
}

/* Search bar */
#search-button, 
.search-bar-wrapper label {
	display: none;
}

#search-button {
	display: block;
}

.search-form .input-field,
.search-form-2 .input-field {
	position: relative;
	margin: 0;
}

.search-form {
    position: relative;
}

#search-term, 
.desktop-only .input-field input[type="text"].search-box {
	border: none;
	background: var(--light-grey);
	padding: .65rem .75rem;
    font-size: .9rem;
}

.search-bar-wrapper {
	margin: 0;
}

.search-bar-wrapper i {
	color: var(--dark-font-color);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: .5rem;
}

.search-form .filter-icon {
    color: var(--dark-font-color)!important;
}

.search-button {
    position: absolute;
    left: auto;
    right: .75rem;
	top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: white;
    font-size: 24px;
    appearance: none;
    border: none;
    padding: 0;
    width: 24px;
}

/* Search filters */
.search-bar-wrapper .filter-icon {
    position: absolute;
    left: auto;
    right: 32px;
    cursor: pointer;
    color: white;
    font-size: 24px;
}

.search-bar-wrapper .search-icon {
    position: absolute;
    left: .5rem;
    color: white;
    font-size: 24px;
}

.search-row {
    display: flex;
    align-items: center;
    flex-grow: 1;
    width: 100%;
    margin-bottom: 0;
}

.search-filters {
    display: none;
    padding: 10px;
    position: absolute;
    z-index: 100;
    background: var(--light-grey);
    border-radius: 0 0 5px 5px;
    width: 100%;
}

.search-filter-group {
    margin: 0 0 .5rem;
    display: flex;
    gap: 0.5rem;
}

.filter-group:last-of-type {
    margin: 0;
}

.search-bar-wrapper .search-filters label {
    display: block;
    color: white;
    font-size: .9rem;
}

.search-form .search-filters label {
    color: var(--dark-font-color);
}

#exclude-search-term {
    font-size: .85rem;
    margin-bottom: 0;
    background-color: white;
}


/* Header */
header {
	z-index: 20;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    background: white;
}

.nav-app-wrapper {
    display: flex;
	flex-wrap: wrap;
    justify-content: flex-end;
	align-items: center;
    gap: 1.5rem;
    padding: 0.75rem 2rem;
}

.nav-app-wrapper a {
	color: var(--dark-font-color);
	font-size: .85rem;
}

.district-logo {
	display: block;
    width: auto;
    max-height: 45px;
    object-fit: contain;
}

.district-link {
	display: block;
}

.district-link .district-logo {
	width: 100%;
}

.nav-wrapper {
	position: relative;
    background: var(--primary-color-1);
    color: var(--top-nav-color);
    display: flex;
    align-items: center;
	justify-content: space-between;
	padding: 0 2rem;
	gap: 6rem;
	height: 5.5rem;
}

.nav-apps {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.site-title-wrapper {
    display: flex;
    align-items: center;
	color: white;
}

.site-logo-wrapper {
    margin-right: 1rem;
}

.site-title:hover,
.site-title:focus {
	color: var(--top-nav-hover-color)
}

.site-logo {
	height: 7rem;
	object-fit: contain;
	width:auto;
	position: relative;
    z-index: 10;
}

.site-title {
	color: white;
}

.home .site-title h1,
.site-title h1 {
	font-weight: var(--font-regular);
	line-height: 1.1;
	font-size: 1.5rem;
	margin-bottom: 0.25rem;
}

.school-motto {
	font-size:.8rem; 
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}


.nav-subtitle {
    font-size:.7rem; 
	color:#ccc;
	margin-top:.1rem;
}

.nav-title {
	font-weight: var(--font-medium);
	font-size: 1rem;
}

.nav-subtitle {
	margin-top: .15rem;
	color: white;
	opacity: .9;
}

.nav-primary {
	display: none;
}

.main-nav-ul {
    display: flex;
    gap: 1.5rem;
	margin-bottom: 0;
	height: 100%;
}

.main-nav-ul a {
	color: var(--top-nav-color);
	text-align: center;
}

.main-nav-ul a:hover,
.main-nav-ul a:focus {
	filter: none;
	color: var(--top-nav-hover-color);
}

.main-dropdown > .nav-link {
	align-items: flex-start;
}

/* Sticky header */
/* .nav-wrapper, */
.nav-title,
.nav-subtitle,
.site-logo {
	transition: all .2s;
}

.home .site-title h1, 
.site-title h1{
	transition: font-size .2s;
}

header.sticky-active .nav-title {
	font-size: .9rem;
}

header.sticky-active .nav-subtitle {
	font-size: .65rem;
}

header.sticky-active .home .site-title h1,
header.sticky-active .site-title h1 {
	font-size: 1.1rem;
}

/*header.sticky-active .nav-wrapper {
	height: 5rem;
}*/

header.sticky-active .site-logo {
	height: 3.5rem;
}

@media(min-width: 62em){
	.site-logo {
		height: 8rem;
	}
	
	.nav-close {
		display: none;
	}
}

@media (min-width: 75em){
	.nav-wrapper {
		padding: 0 3rem;
		justify-content: flex-start;
	}
	
	.nav-primary {
		display: block!important;
		height: 100%;
	}
	
	.nav-hamburger,
	.nav-link-icon {
		display: none;
	}
	
	.site-title-wrapper {
		position: relative;
	}
	
	.site-logo-wrapper {
		z-index: 12;
	}
}

@media (min-width: 75em) and (max-width: 1320px) {
	.nav-wrapper {
		gap: 2rem;
	}
}

@media (min-width: 75em) and (max-width: 1350px) {
	.nav-wrapper {
		height: 6rem;
	}
	
	.site-logo {
		height: 9rem;
	}

}

@media (min-width: 75em) and (max-width: 1670px) {
	.home .site-title h1, .site-title h1 {
		font-size: 1.2rem;
	}
	
	.site-title-wrapper {
		max-width: 30%;
	}
}

@media (min-width: 1400px){
	header.sticky-active .nav-wrapper {
		gap: 10rem;
	}
}

/* Mega Menu */
.subpage-ul {
    position: absolute;
    background: #f1f1f1;
    color: var(--dark-font-color);
    width: 100%;
    left: 0;
    right: 0;
    z-index: 11;
    top: 100%;
}

.subpage-ul > .content-container {
	padding: 1rem 15%;
	/*columns: 4;
    column-fill: balance;*/
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	border-bottom:2px solid var(--primary-color-1);
	/*border-top-width: 5px;
  	border-top-style: solid;
	border-image: linear-gradient(95deg, #FF4F00 0%, var(--primary-color-2) 50%, #FF4F00 100%) 1;*/
}

.subpage-ul a {
	display: block;
    color: var(--dark-font-color);
    text-align: left;
	padding: 3px 0;
	font-size: .9rem;
}

.subpage-ul a:hover,
.subpage-ul a:focus {
    color: var(--link-hover-color);
}

.subpage-container.two-col .subpage-ul a {
	display: inline-block;
}


/*.subpage-ul .landing-link {
	font-weight: var(--font-medium);
}*/

.subpage-container {
    display: flex;
    gap: .5rem;
	margin-bottom: 1.5rem;
	/*-webkit-column-break-inside: avoid;
	break-inside: avoid;*/
	width: calc(25% - 0.75rem);
}

.subpage-container:last-of-type {
	margin-bottom: 0;
}

.subpage-icon {
    width: 2rem;
}

.subpage-icon i {
	font-size: 1.4rem;
	color: var(--primary-color-2);
	margin-top: 0.2rem;
	width: 2rem;
}

@media(max-width: 1199px){
	.nav-wrapper {
		position: unset;
		padding: 0.5rem 1rem;
    	height: auto;
		gap: 1rem;
	}
	
	.site-logo {
    	height: auto;
		width: 4.5rem;
	}
	
	.nav-primary {
        display: none; 
		position: fixed;
		background: var(--light-grey);
		left: 0;
		right: 0;
		top: 0;
		z-index: 11;
		height: 100dvh;
	}
	
	.nav-primary a {
		color: var(--dark-font-color);
	}
	
	.main-nav-ul {
		flex-direction: column;
		padding: 0 1rem;
		gap: 1rem;
		overflow: auto;
		height: calc(100dvh - 56px - 58.4px - 76.99px);
	}
	
	.main-nav-ul a {
		color: var(--dark-font-color);
		text-align: left;
	}
	
	.main-dropdown > .nav-link {
		justify-content: space-between;
		background: #eefbff; /*var(--beige)*/
    	padding: 0.75rem;
	}
	
	.nav-link-icon {
		color: var(--dark-font-color);
		text-align: right;
    	flex-grow: 1;
	}
	
	.nav-close {
		color: var(--dark-font-color);
		width: fit-content;
		margin: 0 0 0 auto;
		display: block;
	}
	
	.subpage-ul {
		display: none;
		position: static;
		background: #eefbff; /*var(--beige)*/
		padding: 0 .75rem;
		border-top: 1px solid var(--primary-color-2);
	}

	.subpage-ul a {
		padding: 6px 0;
	}
	
	.subpage-ul > .content-container {
		border: none;
		display: block;
		padding: 1rem 0;
	}
	
	.subpage-container {
		width: 100%;
	}
	
	.search-bar-wrapper.desktop-only ,
	.district-logo.desktop-only,
	.cm-edit.desktop-only {
		display: none;
	}
	
	.nav-app-wrapper {
		justify-content: center;
        gap: 0;
	}
	
	.nav-top.mobile-only {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 1rem;
	}
	
	.nav-top .cm-logo {
		width: 24px;
		height: auto;
	}
	
	.nav-header {
		padding: 0 1rem 1rem;
	}
	
	#search-term, .input-field input[type="text"].search-box {
		background: #eaeaea;
		padding: 0.75rem;
		border-radius: 5px;
		padding-left: 2rem;
	}

    .search-filters {
        background: #eaeaea;
    }
	
	.nav-subtitle {
		color: var(--dark-font-color);
	}
	
	.nav-footer {
		background: var(--link-color);
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0.75rem; /*1rem*/ 
	}
	
	.nav-footer a {
		color: var(--light-font-color); /*var(--dark-font-color)*/
		font-size: 1rem; /*.8rem*/
	}
	
	.nav-footer-links {
		display: flex;
		flex-direction: column;
		gap: 0.5rem; /*0.25rem*/
	}
	
	.nav-footer-links i {
		font-size: 1rem;
	}
	
	.nav-footer-district {
		display: block;
		width: 50%;
	}
	
	.nav-footer-district .district-logo {
		margin-left: auto;
	}
	
	.subpage-ul > .subpage-wrapper {
		height: auto!important;
	}
	
	.grid-sizer{
	  width: 100%;
	}
	
	.grid-item {
		position: static!important;
		margin-bottom: 1rem; /*.5rem*/
	}
	
	.subpage-container {
		width: 100%;
	}

	.subpage-links {
		width: 100%;
	}
	
	.subpage-link.active {
		font-weight: var(--font-bold);
	}

	.subpage-link-row {
		justify-content: space-between;
	}

	.sublevel-links {
		margin-left: 1rem;
		display: none;
	}

	.submenu-toggle {
		font-size: 1.2rem;
		flex-grow: 1;
        text-align: right;
	}
}

@media (max-width: 48em) {
	.nav-app-wrapper span {
		display: none;
	}
	
	.school-motto {
		display: none;
	}
}

@media (max-width: 400px) {
	.home .site-title h1, .site-title h1 {
		font-size: 1rem;
	}
	.nav-footer {
		padding: 1rem;
	}
	.nav-footer a {
		font-size: 0.8rem;
	}
}

@media(min-width: 75em){
	.subpage-ul {
		display: block!important;
		transition: all .3s ease-in-out;
		transition-delay: .2s;
		transform: scaleY(0);
		transform-origin: top;
		opacity: 0;
		max-height: 70vh;
    	overflow: auto;
	}
	
	.main-dropdown:hover .subpage-ul,
	.subpage-ul:hover {
		transform: scaleY(1);
		opacity: 1;
	}
	
	.search-icon {
		display: none;
	}
	
	.subpage-container.two-col {
		width: calc(50% - .75rem);
	}
	
	.subpage-container.two-col .subpage-links {
		columns: 2;
		width: 100%;
	}

	.subpage-ul a:first-of-type {
		padding-top: 0;
		margin-top: 4px;
	}

	.subpage-ul a:last-of-type {
		padding-bottom: 0;
	}
	
	/*.subpage-ul > .content-container {
		display: block; 
		column-count: 4;
	}*/
	
	/*.subpage-container {
		break-inside: avoid;
		page-break-inside: avoid;
    	-webkit-column-break-inside: avoid;
		width: 100%; 
	}*/
	
	/*.subpage-container:nth-of-type(n+4) {
	  break-before: column;
	}*/
	
	.subpage-ul > .subpage-wrapper {
		display: grid;
	}
	
	.grid-sizer{
	  width: 25%;
	}
	
	.grid-item {
		float: left;
		width: 25%;
		max-width: 12.5rem;
		margin-bottom: 1rem;
	}
	
	.subpage-container {
		width: 100%;
	}
	
	.subpage-ul a {
		font-size: .85rem;
	}
}

/* Footer */
footer {
    background: #000000;
    color: white;
	line-height: 1.6;
	padding: 1rem 0;
}

footer h4 {
	margin-top: 0;
}

footer ul {
	margin-bottom: 0;
}

footer hr {
	background: rgba(175, 175, 175, .52);
}

footer .row {
	row-gap: 1.5rem;
}

address {
	font-style: normal;
}

.footer-top a {
	color: white;
}

.footer-top a:hover,
.footer-top a:focus {
    color: #00adda;
}

.footer-bottom {
	font-size: .9rem;
}

.footer-bottom .district-logo {
	margin-bottom: 1rem;
	max-height: 3rem;
}

.schools-select {
	margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.schools-select input[type="submit"]{
	background: var(--button-footer);
    border-radius: 5px;
    padding: 0.5rem 0.75rem;
    font-weight: var(--font-medium);
	margin: 0;
}

.schools-select input[type="submit"]:hover,
.schools-select input[type="submit"]:focus {
	color: var(--link-hover-color);
}

#schools-dropdown {
	position:relative;
	padding: .55rem;
	cursor: pointer;
	border-radius: 5px;
	border: none;
    font-size: .85rem;
	background-color: #C7C7C7;
	max-width: 12rem;
	appearance: none;
	-webkit-appearance: none;
}
.custom-select {
	position: relative;
}
.custom-select::after {
	position: absolute;
	right: .5rem;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f078";
	top: 50%;
	transform: translateY(-50%);
	font-size: .6rem;
    color: var(--dark-font-color);
	pointer-events: none;
}


@media (min-width: 62em){
	footer {
		padding: 2rem 0;
		line-height: 1.8;
	}
	footer .policy {
		text-align: right;
	}
	
	footer .copyright {
		text-align: center;
	}
	
	footer .copyright-line {
		margin-bottom: .5rem;
	}
	
	#schools-dropdown {
		border-right: .5rem solid #C7C7C7;
	}
	
	.footer-top .col {
		height: fit-content;
	}
}

@media (min-width: 75em){
	footer {
		padding: 3rem 0 2rem;
	}
	
}

/* Home - Banner */
.home h2 {
	margin-top: 0;
	margin-bottom: 1.25rem;
}
.banner-news {
	margin-bottom: 0;
}

.news-grid {
	display: grid;
}

.banner-item a {
	display: block;
	position: relative;
	color: white;
	background: var(--medium-grey);
    height: 100%;
}

.banner-item a:hover,
.banner-item a:focus {
	color: white!important;
}

.banner-item a::after {
	content: "";
	background: transparent linear-gradient(180deg, #00000000 0%, #000000 100%) 0% 0% no-repeat padding-box;
	background: transparent linear-gradient(180deg, #0000 55%, #000 85%) 0% 0% no-repeat padding-box;
	opacity: 0.8;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	transition: all .2s ease-in-out;
}

.banner-item a:hover::after {
	opacity: .3;
}

.banner-img {
	width: 100%;
	height: 100%;
	aspect-ratio: 16/9;
}

.banner-img img {
	width: 100%;
	height: 100%;
	aspect-ratio: 3/2;
}

.banner-item .banner-text {
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	width: 90%;
	z-index: 9;
}

.banner-item h3 {
	font-weight: var(--font-medium);
	font-size: 1.2rem;
	overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.banner-item:nth-of-type(1) h3 {
	font-weight: var(--font-bold);
	font-size: 1.2rem;
}

.news-tag {
	font-size: .875rem;
    background: var(--medium-grey);
    border-radius: 5px;
    padding: 6px 8px;
    text-transform: capitalize;
    margin-bottom: 1rem;
    display: inline-block;
}

.banner-item .cover-logo {
	margin: 0 1rem 0 auto;
    opacity: .5;
    width: 30%;
    padding-top: 1rem;
	height: auto;
	aspect-ratio: unset;
}

@media (min-width: 62em){
    .banner-item:nth-of-type(1) h3 {
        font-size: 1.5rem;
    }

	.news-grid {
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(2, 1fr);
		grid-column-gap: 1px;
		grid-row-gap: 1px;
		height: calc(1 / 3 * 100vw);
	}

	.banner-item:nth-of-type(1) { grid-area: 1 / 1 / 3 / 3; }
	.banner-item:nth-of-type(2) { grid-area: 1 / 3 / 2 / 4; }
	.banner-item:nth-of-type(3) { grid-area: 1 / 4 / 2 / 5; }
	.banner-item:nth-of-type(4) { grid-area: 2 / 3 / 3 / 4; }
	.banner-item:nth-of-type(5) { grid-area: 2 / 4 / 3 / 5; }
	
	.banner-item:nth-of-type(1) .banner-text {
		bottom: 2rem;
		left: 3rem;
	}
	
	.banner-img {
		aspect-ratio: unset;
	}
	
	.banner-item:nth-of-type(1) h3 {
		width: 90%;
	}
	
	/* Adjust layout based on number of news articles in banner section */
	.news-grid-1 .banner-item-1 { grid-area: 1 / 1 / 4 / 5; }
	
	.news-grid-2 .banner-item-2 {grid-area: 1 / 3 / 3 / 5; }
	
	.news-grid-3 .banner-item-2 { grid-area: 1 / 3 / 3 / 4; }
	.news-grid-3 .banner-item-3 { grid-area: 1 / 4 / 3 / 5; }
	
	.news-grid-4 .banner-item-2 { grid-area: 1 / 3 / 3 / 4; }
	.news-grid-4 .banner-item-3 { grid-area: 1 / 4 / 2 / 5; }
	.news-grid-4 .banner-item-4 { grid-area: 2 / 4 / 3 / 5; }

}

@media (min-width: 75em){
	.banner-item:nth-of-type(1) h3 {
		font-size: 2rem;
	}
}

@media (min-width: 99em){
	.news-tag {
		font-size: .75rem;
	}
}

/* Home - Quicklinks */
/*.links-swiper .swiper-wrapper {
	justify-content: center;
}*/

.links-swiper .swiper-wrapper {
    height: auto;
}
.quicklinks {
	position: relative;
    background: var(--highlight-color);
    padding: 2rem 3rem;
	margin-bottom: 0;
}

.quicklink {
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.75rem;
    text-align: center;
    border-radius: 5px;
    aspect-ratio: 1/1;
	padding: 0.5rem;
}

.quicklink i {
	color: var(--primary-color-4);
	font-size: 2rem;
}

.quicklink-label {
	color: var(--primary-color-2);
	font-size: 16px;
    font-weight: var(--font-medium);
	transition: all .3s ease-in-out;
	min-height: 40.31px;
}

.quicklink:hover .quicklink-label, 
.quicklink:focus .quicklink-label {
	color: var(--link-hover-color)
}

.swiper-button-next:after,
.swiper-button-prev:after {
    content: '';
}

.links-button-prev, 
.links-button-next {
	background: var(--primary-color-1);
	color: white;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
}

.links-button-prev {
	left: .5rem;
}

.links-button-next {
	right: .5rem;
}
@media (min-width: 48em){
	.quicklink-label {
		min-height: 44.8px;
	}
} 
@media (min-width: 75em){
	.quicklinks {
		background: var(--highlight-color);
		padding: 2rem 5%;
	}
	
	.links-button-prev {
		left: 1rem;
		width: 2.5rem;
    	height: 2.5rem;
	}

	.links-button-next {
		right: 1rem;
		width: 2.5rem;
    	height: 2.5rem;
	}
}

/* Home - Events */
.home-events-wrapper {
	row-gap: 1rem;
}

.format-event-time {
    font-size: .8rem;
    font-weight: var(--font-regular);
}

.event-item {
    display: flex;
    align-items: center;
    color: var(--dark-font-color);
    font-weight: var(--font-medium);
    margin-bottom: 1rem;
	border-radius: 5px;
	height: 100%;
}

.event-date-wrapper {
    background: var(--dark-grey);
    color: var(--light-font-color);
    text-align: center;
	font-weight: var(--font-medium);
    padding: 0.5rem 1rem;
    line-height: 1.2;
	border-radius: 5px 0 0 5px;
	width: 5rem;
	height: 100%;
}

.event-date-wrapper .month {
    text-transform: uppercase;
	font-size: .8rem;
}

.event-date-wrapper .day {
    font-size: 1.1rem;
}

.event-date-wrapper .week {
	text-transform: uppercase;
    font-size: .7rem;
}

.event-name {
    padding: 0 1.5rem;
	border: 3px solid #EAEAEA;
	border-radius: 0 5px 5px 0;
	border-left: none;
	width: calc(100% - 80px);
	height: 100%;
}

.--CBE-International .event-date-wrapper,
.--CBE-International .event-name {
	height: 4.5rem;
}

.--CBE-International .event-item,
.--CBE-International .home-events-wrapper {
	height: auto;
}

.event-name .card-description {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

.home .calendar-title-row h2 {
	margin-bottom: 0;
}

.calendar-title-row {
	margin-bottom: 1.25rem;
	flex-wrap: wrap;
}

.calendar-legend {
    color: #02ADDB;
    font-size: .9rem;
	position: relative;
	padding: .5rem 0;
}

.legend-wrapper {
    visibility: hidden;
	opacity: 0;
    position: absolute;
    background: white;
    top: 100%;
    right: 0;
    padding: 16px;
	min-width: 240px;
    border-radius: 5px;
	box-shadow: 0px 3px 15px #0000000D;
	transition: all .3s ease-in-out;
}

.legend-wrapper .news-post-tag {
    margin-bottom: 4px;
	font-size: 14px;
}

.legend-wrapper .news-post-tag:last-of-type {
	margin-bottom: 0;
}

.calendar-legend:hover .legend-wrapper, 
.calendar-legend:focus .legend-wrapper {
	opacity: 1;
    visibility: visible;
}

.alternative-home.news {
    background: #e7e7e7;
}

@media (min-width: 62em){
    .home-news, .home-events-wrapper {
        height: 88%;
    }

    .alternative-home .home-news,
    .alternative-home .home-events-wrapper {
        height: auto;
    }

    .sc-events-news .home-news, 
    .sc-events-news .home-events-wrapper {
        height: auto;
    }

	.--CBE-International .home-events-wrapper {
		height: 82%;
	}
}

/* @media (min-width: 75em){
    .event-item-wrapper {
        padding: 0 .5rem;
    }
} */

/* Home News */
.news {
	padding: 2rem 0 3rem;
	margin-bottom: 0;
}

.news-events {
	margin-bottom: 0;
	padding-bottom: 2rem;
}

.news-events .news {
	padding: 2rem 1rem 3rem;
}

.home-news {
    display: flex;
    flex-wrap: wrap;
	gap: 1rem;
}

.home-news .news-item {
	width: 100%;
}

.news-item > a,
.news-item > div {
    background: white;
    border-radius: 5px;
    display: flex;
	height: 100%;
	box-shadow: 0px 3px 15px #0000000D;
}

.news-text {
	width: 65%;
	padding: 1.2rem;
    color: var(--dark-font-color);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.news-title {
	font-size: 1.2rem;
    margin-bottom: 0.5rem;
	font-weight: var(--font-medium);
	overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.page-content .news-title {
	font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.news-text .news-tag {
	color: white;
    margin-bottom: 0.25rem;
    font-size: .75rem;
}

.news-img {
	width: 35%;
	background: #e1e1e1;
	border-radius: 0 5px 5px 0;
	aspect-ratio: 3/2;
}

.news-img img {
	border-radius: 0 5px 5px 0;
	height: 100%;
	aspect-ratio: 3/2;
}

.news-img .cover-logo {
	object-fit: contain;
    padding: 0 0.5rem;
	width: 100%;
	max-width: 200px;
    margin: auto;
}

.news-date {
    font-size: .8rem;
	margin-bottom: 0.35rem
}

@media (max-width: 500px) {
    .home .news-item > a, 
    .home .news-item > div {
        flex-wrap: wrap;
    }

    .home .news-text, 
    .home .news-img {
        width: 100%;
    }

    .home .news-text {
        padding: 1rem;
    }

    .home .news-img img {
        border-radius: 0 0 5px 5px;
    }

    .home .news-title {
        font-size: 1rem;
    }
}

@media (min-width: 501px) and (max-width: 767px) {
    .home .news-text {
		width: 55%;
	}
	
	.home .news-img {
		width: 45%;
	}
}

@media (min-width: 48em){
	.home-news .news-item {
		width: calc((100% - 1rem) / 2);
	}
	
	.home-news .news-item.one-col {
		width: 100%;
	}
	
	.news {
		padding: 2.5rem 0;
	}
	
	.news-events .news {
		padding: 2.5rem 1rem;
	}
	
	.news-events .events {
		padding: 2.5rem 1rem;
	}
	
	.news-img .cover-logo {
		padding: 0 1rem;
	}
	
	.news-text {
		width: 70%;
	}
	
	.news-img {
		width: 30%;
	}

    .alternative-home .news-text {
        width: 70%;
    }

    .alternative-home .news-img {
        width: 30%;
    }
}

@media (min-width: 993px) and (max-width: 1583px) {
    .home .news-text {
		width: 55%;
	}
	
	.home .news-img {
		width: 45%;
	}
}

/* Home - Programs */
.programs-content {
    background: var(--primary-color-3);
    color: white;
    padding: 2rem 1rem;
}

.programs-text h4 {
	margin: 0 0 .5rem;
}

.program-item {
    line-height: 1.6;
}

.programs-img img {
	width: 100%;
	height: 100%;
	aspect-ratio: 16/9;
}

.programs-info {
	font-weight: var(--font-bold);
}

@media (min-width: 48em){
	
	.programs-row {
		display: flex;
		align-items: center;
	}
	
	.programs-img, .programs-content {
		width: 50%;
		height: auto;
		align-self: stretch;
	}
	
	.programs-content {
		padding: 2rem;
	}

}

@media (min-width: 75em){
	.programs-content {
		padding: 3% 5%;
	}
}
	
/* Home - Showcase */
.showcase-item {
    display: block;
    position: relative;
    aspect-ratio: 3/2;
}

.showcase-item::after {
	content: "";
	position: absolute;
    top: 0;
    left: 0;
	width: 100%;
	height: 100%;
	background: transparent linear-gradient(180deg, #00000000 0%, #0000001A 56%, #000000 100%) 0% 0% no-repeat padding-box;
	opacity: 0.6;
}

.showcase-img {
	width: 100%;
	aspect-ratio: 3/2;
}

.showcase-title {
    position: absolute;
    color: white;
    bottom: .5rem;
    left: .5rem;
    width: 90%;
	z-index: 5;
	font-weight: var(--font-medium);
}

.showcase-buttons,
.social-buttons {
    display: flex;
    align-items: center;
}

.showcase-button-prev,
.showcase-button-next,
.social-button-prev,
.social-button-next {
	position: static;
	background: var(--primary-color-2);
	color: white;
	width: 3rem;
	height: 2.75rem;
	margin-top: 0;
}

.showcase-button-prev,
.social-button-prev {
	border-radius: 5px 0 0 5px;
}

.showcase-button-next,
.social-button-next {
	border-radius: 0 5px 5px 0;
}

.showcase .flex-row-between {
	margin-top: 1rem;
	row-gap: 1rem;
}

.showcase .btn {
	margin-top: 0;
}

@media (min-width:62em){
	.showcase-title {
		bottom: 1rem;
		left: 1rem;
	}
}

/* Home - About */
.about-info {
	padding: 3rem 0 4rem;
	/*background: transparent linear-gradient(180deg, #4A4A4A 0%, #333333 100%) 0% 0% no-repeat padding-box;*/
}

.about-info.no-bg {
	background: none;
}

.about-info .row {
	row-gap: 2rem;
}

.about-bg {
	width: 100%;
    height: 100%;
	aspect-ratio: 4/1;
}

.home .about-bg {
    height: auto;
}

.about-block {
    background: var(--primary-color-3);
    padding: 1rem;
    border-radius: 5px;
	margin-top: -5rem;
}

.about-block h3 {
	margin-bottom: .5rem;
}

.circle-icon {
    background: var(--primary-color-2);
	color: white;
    padding: 0.5rem;
    border-radius: 50%;
	aspect-ratio: 1/1;
	font-size: 1rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 2.25rem;
    height: 2.25rem;
    text-align: center;
}

.schoolinfo-block {
	display: flex;
	gap: 1rem;
}

.schoolinfo-block a {
	color: white;
	word-break: break-word;
}

.schoolinfo-block .editor a {
    color: var(--link-color);
}

.schoolinfo-block .btn {
	box-shadow: 0px 3px 15px #00000029;
}

.schoolinfo-block h4 {
	margin: 0 0 .5rem;
	font-size: 1.2rem;
	text-shadow: 0px 3px 6px #00000029;
}

.schoolinfo-text i {
	font-size: .7rem;
}

.schoolinfo-text {
	line-height: 1.5;
}

.schoolinfo-content {
	font-size: 16px;
}

.schoolinfo-block.leadership {
	margin-top: 1.5rem;
}

.schoolinfo-text.leadership {
	width: calc(100% - 3.35rem);
}

.leadership-row {
    display: flex;
	flex-wrap: wrap;
	gap: 1rem;
    width: 100%;
}

.leadership-item {
	width: 100%;
}

.leadership-label {
    font-size: 14px;
	font-weight: var(--font-medium);
}

.leadership-name {
    font-size: 16px;
}

.school-leadership {
	margin-bottom: 1rem;
}

.sidebar-template .schoolinfo-block,
.sidebar-template .schoolinfo-text{
	width: calc(100% - 2rem);
}

@media (min-width: 48em){
	.leadership-item {
		width: calc((100% - 2rem) / 3);
		border-right: 1px dashed #707070;
		padding: 0 0.75rem;
	}

    .leadership-item:nth-of-type(3n+1){
		padding-left: 0;
	}

    .leadership-item:nth-of-type(3n){
		border-right: none;
	}
	
	.two-by-two .leadership-item {
		width: calc((100% - 1rem) / 3);
		padding-left: 0;
	}
	
	.two-by-two .leadership-item:nth-of-type(2n){
		border-right: none;
		padding-right: 0;
		padding-left: 2rem;
	}

    .two-by-two .leadership-item:nth-of-type(3n){
		border-right: 1px dashed #707070;
	}

	.leadership-item:last-of-type {
		border-right: none;
		padding-right: 0;
	}
	
	.leadership-item:first-of-type {
		padding-left: 0;
	}
	
	.multi-location .two-by-two .leadership-item {
		width: calc((100% - 1rem) / 2);
		padding-left: 0;
	}
	
}

@media (min-width: 62em){
	.about-block {
		padding: 2rem;
		margin-top: -6rem;
	}
	
	.schoolinfo-block.leadership {
		margin-top: 2.5rem;
	}
	
	.schoolinfo-block.leadership .btn {
		margin-top: 1.5rem;
	}
	
	.about-col {
		padding-right: 2rem;
	}
	
	.contact-col {
		padding-left: 2rem;
	}
}

@media (min-width: 99em){
	.leadership-label {
		font-size: .75rem;
	}
	.schoolinfo-content,
	.leadership-name,
	.schoolinfo-block .btn {
		font-size: .85rem;
	}
}

/* Home - Social Media */
.social-media {
	padding: 2rem 0;
}

.social-media h2 {
	margin: 0;
}

.social-media .news-text {
	width: 75%;
}

.social-media .news-text.no-img {
    width: 100%;
}

.social-media .news-item {
	position: relative;
	height: 100%;
}

.social-img {
    width: 25%;
    border-radius: 5px 0 0 5px;
}

.social-media .news-item .fb-icon {
	position: absolute;
	top: -.75rem;
	left: -.75rem;
	background: #4267B2;
	color: white;
	border-radius: 50%;
	width: 2rem;
    height: 2rem;
    text-align: center;
}

.social-swiper {
	margin-left: -.75rem;
}

.social-swiper .swiper-slide {
	height: auto;
	padding: .75rem 0 0 .75rem;
}

.social-buttons {
	margin-top: 1.5rem;
}

.social-media .link-row {
	margin-top: 2rem;
	font-weight: var(--font-medium);
}

.follow-link {
	font-size: .8rem;
	font-weight: var(--font-medium);
}

.social-title-row {
	margin-bottom: 1rem;
	row-gap: .5rem;
}

.social-media.inactive .social-title-row {
	justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
	margin-bottom: 0;
}

.social-media.inactive .social-title-row h2 {
	width: 100%;
}

.social-icon {
    border: 1.5px solid var(--primary-color-2);
    color: var(--primary-color-2);
    border-radius: 50%;
    padding: 0.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
	color: white;
	background: var(--primary-color-2);
}

.social-icon:hover {
	color: var(--primary-color-2)!important;
	border: 1.5px solid var(--primary-color-2);
	background: none;
}

@media (min-width: 62em){
	.social-media .news-text {
		padding: 1.5rem;
	}
}

/* Custom List Styles */
.page-content ul,
.page-content .square-list,
.square-list {
	list-style-type: none!important;
	list-style: none;
	margin-left:2rem;
	padding: 0;
}

.page-content ul li,
.page-content ol li,
.square-list li {
	padding-left: 1.25rem;
	position: relative;
	margin-bottom: 0.5rem;
}

.editor-nested-listitem::marker {
    content: none
}

.page-content ul li::before,
.square-list li::before {
	background: var(--primary-color-2);
    content: "";
    width: 6px;
    height: 6px;
    position: absolute;
    left: 0;
	top: .5rem;
}

li.editor-listitem.editor-nested-listitem::before {
    content: none;
}

/* Anchor link offset */
.editor [id]::before {
  content: '';
  display: block;
  height: 140px;
  margin-top: -140px;
  visibility: hidden;
}

/* Subpage Template */
.main-content {
	width: auto;
}

/*.sidebar-template .main-content {
	width: calc(70% - 2rem);
}*/

a[href="javascript:void(0)"] {
  cursor: default; 
  pointer-events: none; 
}

.main-content a:hover,
.main-content a:focus {
	text-decoration: underline;
}

.main-content .btn:hover,
.main-content .btn:focus {
	text-decoration: none;
}

.sidebar {
	padding: 0 1rem;
	width: 100%;
}

.no-sidebar {
	display: none;
}

@media (min-width: 62em){
	.sidebar {
		width: 30%;
		max-width: 550px;
		margin-left: 2rem;
	}
}

.page-content ol {
	padding-left: 1rem;
	margin-left:2rem;
}

.page-content .editor-heading-h2 {
	color: var(--primary-color-2);
}

.editor p {
	margin-bottom: .75rem;
}

.page-header,
.school-news-header.page-header {
	position: relative;
	text-align: center;
	color: white;
	background: linear-gradient(95deg, #FF4F00 0%, var(--primary-color-2) 50%, #FF4F00 100%);
	background: var(--primary-color-2);
	padding:1.65rem 1rem;
	margin-bottom: 0;
}

.page-header::after,
.school-news-header.page-header::after {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: transparent linear-gradient(95deg, #000000 0%, var(--primary-color-2) 50%, #000000 100%) 0% 0% no-repeat padding-box;
	opacity: 0.3;
}

.page-header h1 {
	position: relative;
    z-index: 10;
	font-size: 2.2rem;
}

.related-wrapper {
    background: var(--highlight-color);
	margin-bottom: 1.5rem;
}

.related-wrapper.calendar {
    margin-top: 2rem;
}

.related-title {
	background: var(--primary-color-1);
	padding: .75rem 1rem;
}

.page-content .related-title h3 {
	color: white;
	font-size: 1.2rem;
    margin: 0;
}

.page-content .related-list {
	padding: 1rem;
}

.related-list a {
	word-break: break-word;
}

.quicklinks-wrapper {
	row-gap: 1.5rem;
	margin-bottom: 1.5rem;
}

.quicklink-item {
	display: flex;
    /*width: calc(50% - 0.8rem);*/
    border-radius: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
	aspect-ratio: 1/1;
	font-weight: var(--font-medium);
}

.quicklink-item i {
	font-size: 2.5rem;
}

.quicklink-item span {
	font-size: .85rem;
	text-align: center;
	word-break: break-word;
	white-space: normal;
    overflow-wrap: anywhere;
}

.sidebar-template .quicklink-item span {
	word-break: unset;
}

.quicklink-item img {
	display: block;
	height: 2rem;
	width: 100%;
	object-fit: contain;
}

.images-wrapper figure {
	margin: 0 0 1rem;
}

.images-wrapper img {
	display: block;
	width: 100%;
	aspect-ratio: 3/2;
}

/*.page-header:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(95deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.5) 100%);
}*/

@media (min-width: 500px) and (max-width: 991px) {
	.quicklink-col {
		max-width: calc(100% / 3);
		flex-basis: calc(100% / 3);
	}
}

@media (min-width: 62em) {
	.quicklink-item i {
		font-size: 1rem;
	}
	
	/*.page-content .ck-editor {
		width: 90%;
	}*/
}

/* Collapsible box - rich text editor */
.collapsible-box {
	width: 100%;
	margin-bottom: 1rem;
}

.collapsible-box .material-icons {
	color: var(--primary-color-2);
}

.collapsible-box-description { 
	display: none;
	margin: 1rem 0.5rem;
}

.collapsible-box-title {
    background-color: var(--light-grey);
    display: flex;
    align-items: center;
    padding: .5rem;
	margin: 0;
	cursor: pointer;
}

.collapsible-box-title i {
	margin-right: .5rem;
}

.collapsible-bottom-icon {
	cursor: pointer;
}

/* Collapsible boxes - lexical rte */
.editor details summary {
    background-color: var(--light-grey);
    display: flex;
    align-items: center;
    padding: 0.5rem;
	margin: 0;
	cursor: pointer;
    transition: all .3s ease-in-out;
}

.editor details summary i {
    color: var(--primary-color-2);
    margin-right: .5rem;
}

.editor details {
    margin-bottom: 1rem;
    transition: all .3s ease-in-out;
}

.editor div[data-lexical-collapsible-content]{
    padding: 1rem;
}

/* Secondary Navigation */
.secondary-nav {
    background: #F0F0F0;
}

.secondary-nav-ul {
    display: flex;
    row-gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
	margin-bottom: 0;
}

.secondary-nav-item {
	padding: .75rem 1rem;
	position: relative;
	border-bottom: 2px solid #F0F0F0;
}

.secondary-nav-item a {
	display: inline-block;
	color: var(--black);
	font-weight: var(--font-medium);
}

.secondary-nav-item.active {
	background: #FAFAFA;
	border-color: var(--primary-color-2);
}

 .secondary-nav-item:before {
 position:absolute;
 transform: translateY(-50%);
 top: 50%;
 width:1px;
 height:16px;
 content:"";
 background:var(--primary-color-2);
 right:0
}

.secondary-nav-item:hover {
	filter: brightness(.95);
	border-bottom: 2px solid var(--primary-color-1);
}

.secondary-nav-item.active::after {
    content: '';
    margin: auto;
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 10px solid var(--primary-color-2);
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
}

.secondary-nav-item.active a {
	font-weight: var(--font-bold);
}

.vertical-bar {
	height: 16px;
    width: 1px;
    background: var(--primary-color-2);
    display: inline-block;
    vertical-align: middle;
    margin: auto 0;
}

.breadcrumbs {
    display: flex;
	flex-wrap: wrap;
    gap: 0.25rem;
	text-transform: uppercase;
	align-items: center;
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}

.breadcrumbs-home {
	gap: .25rem;
}

.breadcrumbs a {
	color: var(--primary-color-2);
	font-size: .75rem;
}

.breadcrumbs a:hover,
.breadcrumbs a:focus {
	color: var(--link-hover-color);
}

.breadcrumbs a.active {
	color: var(--black);
	font-size: .75rem;
}

.breadcrumbs-home i {
	font-size: .65rem;
	margin-bottom: 2px;
}

.current-page,
.cookie {
	display: none;
}

@media(max-width: 62em){
	.current-page {
		display: flex;
		margin: 1.5rem 1rem 0;
		background: var(--light-grey);
		padding: 0.75rem;
		justify-content: space-between;
		font-weight: var(--font-medium);
	}
	
	.cookie {
		display: block;
	}
	
	.cookie a {
		display: flex;
		align-items: center;
		color: var(--dark-font-color);
		font-weight: var(--font-medium);
		padding: 0 0.75rem;
	}
	
	.secondary-nav {
		display: none;
		margin: 0 1rem;
	}
	
	.secondary-nav-ul {
		flex-direction: column;
		row-gap: .75rem;
		padding: 1rem 0;
	}
	
	.secondary-nav-item:before,
	.secondary-nav-item:after,
	.secondary-nav-item.active::after {
		content: none;
	}
	
	.secondary-nav-item {
		padding: 0 1rem;
	}
	
	.secondary-nav-item.active {
		background: #F0F0F0;
		border: none;
	}
	
	.secondary-nav-item:hover {
		border: none;
		filter: none;
	}
	
	.vertical-bar {
		display: none;
	}
}

@media(min-width: 62em){
	.secondary-nav {
		display: block!important;
	}
}

/* News Centre */
.news-centre {
	position: relative;
	margin-bottom: 0;
}

.news-centre .breadcrumbs {
	margin-top: 0;
	margin-bottom: 0;
}

.news-container,
.calendar-container {
	padding: 0 1rem;
}

.news-container .row {
	row-gap: 1.5rem;
}

.filter-sidebar {
	width: 100%;
	padding: 0 1rem;
	background: var(--medium-grey);
	margin-bottom: 1.5rem; 
}

.filter-wrapper {
	padding: 2rem 1rem;
}

.filter-wrapper h3 {
	margin: 0 0 .5rem;
}

.filter-tags {
	margin-bottom: 2rem;
}

.news-post-img,
.news-post-img img {
    aspect-ratio: 16/9;
    background: #e1e1e1;
    border-radius: 5px 5px 0 0;
    display: block;
	width: 100%;
}

.news-post-img .cover-logo {
	padding: 1rem;
	width: 200px;
    object-fit: contain;
}

.news-post {
    background: var(--medium-grey);
    display: block;
    border-radius: 5px;
	height: 100%;
}

.main-content .news-post:hover,
.main-content .news-post:focus {
	text-decoration: none;
}

.news-post-text {
	color: var(--dark-font-color);
	padding: 1rem;
}

.news-centre .news-title {
	font-size: 1.2rem;
	transition: .2s;
	overflow: hidden;
	display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.news-post:hover h3.news-title {
	color: var(--link-hover-color);
}

.news-post-date {
	font-size: .8rem;
	margin-bottom: 0.5rem;
}

.news-post-tags {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.news-post-tag {
	color: #333;
	font-size: .8rem;
	text-transform: uppercase;
}

.banner-news .news-post-tags {
	margin-top: .25rem;
}

.banner-news .news-post-tag {
	color: white;
}

.news-post-tag::before {
	content: "";
	width: 0.5rem;
    height: 0.5rem;
	border-radius: 50%;
	margin-right: 5px;
	display: inline-block;
}

.filter-group {
	padding: 0.25rem 0.75rem;
    border-radius: 5px;
    margin-bottom: 0.75rem;
	color: white;
	background: var(--dark-grey);
}

.filter-group label {
	text-transform: capitalize;
	margin-left: .25rem;
	font-size: .8rem;
}

.filter-title {
	align-items: baseline;
}

.filter-title h3,
.filter-date h3 {
	color: var(--dark-font-color)
}

/*.news-article {
	display: none;
}*/

.pagination-select {
    text-align: right;
	margin-bottom: 1rem;
}

#loadMore {
	color: white;
	margin: 2rem auto;
}

#loadMore:hover,
#loadMore:focus {
	text-decoration: none;
}

#reset {
	cursor: pointer;
	color: var(--button-1);
	font-size: .8rem;
}

.date-picker label {
	display: block;
	font-weight: var(--font-medium);
}

.date-picker input[type="text"] {
	border-radius: 5px;
	border: none;
}

.date-picker .date-input {
	position: relative;
}

.date-picker .date-input button {
	position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
	appearance: none;
    border: none;
    background: none;
}

.date-picker .date-input button::after {
	display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font: var(--fa-font-solid);
    content: "\f073";
    color: var(--button-1);
}

#date-apply {
	border: none;
}

/*#news-show-number {
	border: none;
    border-bottom: 1px solid var(--link-color);
    color: var(--link-color);
}*/

/* Search bar on news centre and calendar */
.news-search label,
.events-search label {
	display: none;
}

.news-search i,
.events-search i {
	position: absolute;
	left: 8px;
	top: 50%;
    transform: translateY(-50%);
}

.news-search,
.events-search {
	position: relative;
	background: var(--medium-grey);
	border-radius: 5px;
	width: fit-content;
	margin-bottom: 0;
}

.search {
	border: none;	
	background: var(--medium-grey);
	padding: 0.5rem 0.5rem 0.5rem 36px;
	border-radius: 5px;
}

.search::placeholder {
    font-size: .85rem;
	color: var(--black);
}
.search-row,
.news-centre .search-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}

@media (min-width: 62em){
	.news-container,
	.calendar-container {
		padding: 1.5rem 10% 0 2rem;
		border-top: 2px solid var(--medium-grey);
	}
	
	.filter-sidebar {
		width: 20%;
		padding: 0;
		margin-bottom: 0;
	}
	
	.filter-wrapper {
		padding: 2rem;
	}
}

/* Contact Template */
.contact-template .row {
	row-gap: 1.5rem;
}

.contact-template .about-info {
	padding: 3rem 0;
}

.contact-template .multiboxes-row {
	padding-bottom: 0;
}

/*.contact-template .about-info.no-bg {
	padding: 0;
}*/

.contact-template .btn {
	font-size: .85rem;
    padding: 0.5rem 1rem;
}

.contact-template .school-map {
	max-width: 100%;
    list-style: none;
    transition: none;
    overflow: hidden;
    aspect-ratio: 3/1;
    width: 100%;
	margin-top: -3rem;
	margin-bottom: 2rem;
	box-shadow: 0px 3px 15px #00000029;
}

.contact-template .school-map img {
	width: 100%;
    height: 100%;
}

.contact-template .map-col img {
	width: 100%;
    aspect-ratio: 3/1;
}

#gmap-canvas,
.gmap-canvas {
	height:100%; 
	width:100%;
	max-width:100%;
}

#gmap-canvas img,
.gmap-canvas img {
	max-width:none!important;
	background:none!important;
	font-size: inherit;
	font-weight:inherit;
}

.multiboxes-row {
	padding: 0;
	margin-bottom: 2rem;
}

.multiboxes-row .box {
	padding: 1.5rem;
}

.multiboxes-row .box-2 {
	color: var(--dark-font-color)
}

.multiboxes-row .box-3 {
	background-color: #EBEBEB;
}

.team-label {
	margin-bottom: .2rem;
	font-size: .85rem;
}

.school-msgs {
    padding: 2rem 1rem;
}

.school-msgs h3 {
	text-shadow: 0px 3px 6px #00000029;
}

.school-msgs .btn {
	margin: auto;
	box-shadow: 0px 3px 15px #00000029;
}

.school-info-wrapper {
    padding: 1rem 1rem 0;
	align-items: flex-start;
	gap: 1rem;
}

.school-info-wrapper h4 {
	margin-top: 0;
}

.school-info-row {
    display: flex;
	flex-wrap: wrap;
	row-gap: 1rem;
    column-gap: 1rem;
    width: 100%;
	margin-bottom: 2rem;
}

.school-info p {
	margin: 0;
	/*font-weight: var(--font-bold);*/
}

.school-info .title {
	color: var(--primary-color-2);
}

.school-info p.title {
	color: var(--primary-color-2);
	font-weight: var(--font-bold);
}

.location-col {
	display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.location-col-content {
	flex-grow: 1;
}

.location-col-inner {
    background: var(--dark-grey);
    height: 100%;
}

.location-title,
.location-info {
    padding: 1rem;
}

.location-title h3 {
    font-size: 1.2rem;
}

.location-info .schoolinfo-block {
	margin-bottom: 1rem;
}

.location-info .schoolinfo-block p {
	margin-bottom: 1rem;
}

.location-info .schoolinfo-block:last-of-type {
	margin-bottom: 0;
}

.location-info .schoolinfo-block h4 {
	font-size: 1.1rem;
}

.multi-maps img {
	width: 100%;
	aspect-ratio: 3/1;
}

@media (min-width: 48em){
	.multiboxes-row .box {
		padding: 1.5rem 5%;
	}
	
	.school-info-wrapper {
		padding: 2rem 5% 0.5rem;
	}
}

@media (min-width: 75em){
	.contact-template .js-officehours {
		min-height: 9rem
	}
	.contact-template .school-map {
		margin-top: -8rem;
		margin-left: auto;
		width: calc(75% - 1rem);
		aspect-ratio: 4/1;
	}

	.multiboxes-row {
		display: flex;
		width: 100%;
	}
	
	.multiboxes-row .box {
		padding: 2rem;
		width: calc(100% / 3);
	}
	
	.school-msgs {
		padding: 2rem 15%;
	}
	
	.school-msgs h3 {
		font-size: 1.75rem;
	}
	
	.school-info-wrapper {
		margin-left: 10vw;
		padding: 3rem 0;
	}
	
	.school-info-wrapper .school-info-text {
		width: calc(100% - 5rem);
	}
	
	.school-info-row {
		width: 80%;
		column-gap: 0;
		justify-content: space-between;
	}
	
	.multi-location .school-info-row {
		column-gap: 2rem;
	}
	
}

/* Staff Template */
.staff-tools-wrapper {
	padding: 2rem 0;
}

.staff-tools-wrapper .tool-link p {
	transition: all .2s ease-in-out;
}

.staff-tools-wrapper .tool-link:hover p,
.staff-tools-wrapper .tool-link:focus p{
	color: var(--link-hover-color)
}

.main-content .tool-link {
    align-items: flex-start;
    gap: 1rem;
	color: var(--dark-font-color)
}

.main-content .tool-link:hover,
.main-content .tool-link:focus {
	text-decoration: none;
}

.tools-intro h2 {
	margin-bottom: .5rem;
}

.tool-icon .circle-icon {
	color: var(--primary-color-2);
	background: var(--primary-color-2a);
}

.retired-staff {
	margin-bottom: 1rem;
}

.retired-staff-text,
.former-staff-text {
    padding: 1rem;
}

@media (min-width: 48em){
	.retired-staff-text,
	.former-staff-text {
		padding: 1rem 5%;
	}
}

@media (min-width: 62em){
	.retired-former {
		display: flex;
		gap: 1rem;
	}
	
	.retired-staff,
	.former-staff {
		width: calc(50% - 0.5rem);
		margin: 0;
	}
	
	.retired-staff-text,
	.former-staff-text {
		padding: 3rem 5rem;
	}
}

/* School Council Template */
.cta-container .row {
	row-gap: 2rem;
}
.cta-box {
	padding: 1rem;
}

.cta-box a {
	color: var(--link-color-2);
}

.cta-box a:hover,
.cta-box a:focus {
	color: var(--link-hover-color-2);
}

.sc-events-news {
    padding: 2rem 0;
	display: none;
}

.sc-events-news .event-name {
    border: none;
    background: white;
	padding: 0 1rem;
}

.sc-events-news .event-name .card-description {
    -webkit-line-clamp: 2;
    line-height: 1.2;
    font-size: .9rem;
    margin-bottom: 0.25rem;
}

.sc-events-news .event-title {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

.sc-events-news .event-item-wrapper {
	padding: 0;
}

.sc-events-news .btn {
	margin-left: auto;
}
.sc-events-news .news-title {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.home-events-wrapper.sc {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	padding: 0;
}

.sc-news {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	row-gap: 1rem;
}

.page-content .agenda-list li {
	padding-left: 0;
	margin-bottom: .5rem;
	break-inside: avoid;
}
.page-content .agenda-list li::before {
	content: none;
}

.page-content .agenda-list {
    margin-left: 0;
}

.agenda-link {
    word-break: break-word;
}

.sc-col > div {
	padding: 1.5rem 1rem;
}

.sc-col > .about-sc,
.sc-col > .contact-sc {
	margin-bottom: 1rem;
}

.sc-col > .contact-sc > .flex-row,
.sc-col > .members-sc > .flex-row {
	align-items: flex-start;
}

.page-content .about-sc ul li::before{
    background: white;
}

.showcase.bg-light-grey {
	position: relative;
	padding: 2rem 0;
}

.tagged-events {
	display: none
}

@media (min-width: 48em){ 
	.agenda-list {
		column-count: 2;
	}
	
	.sc-col > .contact-sc > .flex-row,
	.sc-col > .members-sc > .flex-row {
		gap: .75rem;
	}
	
	.sc-events-news > .content-container {
		padding: 0 2rem;
	}
}

@media (min-width: 62em){
	.cta-box {
		padding: 2rem;
	}
	
	.home-events-wrapper.sc {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		column-gap: .5rem;
	}
	
	.home-events-wrapper.sc.full-width {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
	
	.sc-news {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		row-gap: 1rem;
	}
	
	.sc-news.full-width {
		grid-template-columns: 1fr 1fr;
		column-gap: 1rem;
	}
	
	.sc-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;
		height: 100%;
		align-items: stretch;
	}
	
	.sc-col {
		width: calc(50% - 0.5rem);
		height: auto;
		align-self: stretch;
		flex-grow: 1;
	}
	
	.sc-col > div {
		padding: 2rem 1.5rem;
	}
	
	.sc-col > .about-sc {
		margin-bottom: 0;
		height: 100%;
		padding: 2rem 2.5rem 2rem 2rem;
	}
	
	.showcase.bg-light-grey {
		padding: 2.5rem 0;
	}

    /* .sc-col > .contact-sc {
       height: calc(40% - 1rem);
    }

    .sc-col > .members-sc {
        height: 60%;
    } */
}

/* Program, Focus & Approach */
.program-heading,
.focus-heading, 
.program-content {
    padding: 2rem 0;
}

.program-content .row,
.focus-content .row {
	row-gap: 1.5rem;
}

.program-card .flex-row {
	gap: .75rem;
	align-items: flex-start;
}

.flex-row.program-card-inner {
    background: white;
    padding: 2rem 1.5rem;
    box-shadow: 0px 3px 6px #00000029;
	height: 100%;
}

@media (min-width: 62em){
	.program-heading,
	.focus-heading, 
	.program-content {
		padding: 3rem 0;
	}
}

/* Registration */
.program-wrapper {
	display: none
}

.designation-block {
	height: 100%;
	padding: 2rem;
	font-weight: var(--font-medium);
}

.designation-block h4 {
	margin: 1rem 0;
	font-size: 1.1rem;
}

.program-tagline {
	margin-bottom: 0.5rem;
    display: block;
	text-transform: uppercase;
}

.program-img {
	position: relative;
}

.program-img img {
	aspect-ratio: 730/451;
	width: 100%;
}

.program1.row,
.program2.row,
.program3.row {
	row-gap: 1.5rem;
}

.program1 .colour-block {
	width: 80%;
	height: 100%;
	position: absolute;
	top: 70px;
	right: 0;
	z-index: -1;
}

.program-text h4 {
	font-size: 1.1rem;
	font-weight: var(--font-medium);
}

.program-section {
	overflow: hidden;
	padding-bottom: 70px;
	margin-top: 3rem;
}

.program2-section > .content-container {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}

.program3-section {
	padding-top: 5%;
	padding-bottom: 5%;
}

.program3 .colour-block-1 {
	position: absolute;
    width: 25%;
    height: 120%;
    top: -10%;
    left: 25%;
    z-index: -1;
}

.program3 .colour-block-2 {
	position: absolute;
    width: 40%;
    height: 130%;
    top: -15%;
    left: 50%;
    z-index: -1;
}

.program3 .program-img {
	margin-top: 10%;
}

.ready-register {
	padding: 2rem 0;
	margin-top: 4rem;
	margin-bottom: 0;
}

.ready-register.editable h2 {
    margin-bottom: .5rem;
}

.ready-register .subtitle {
    font-weight: var(--font-medium);
}

.reg-step {
    width: 5.5rem;
    height: 5.5rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    text-align: center;
	font-size: 2rem;
    font-weight: var(--font-bold);
}

.register-steps {
	margin-top: 2rem;
	row-gap: 1.5rem;
}

.register-steps .square-list {
	margin-left: auto;
}

.register-steps .btn {
	margin-bottom: 1rem;
}

.cbe-transfer {
	margin-bottom: 0;
}

.cbe-transfer .text-block {
    padding: 2rem 1rem;
}

.cbe-transfer .contact-block {
	position: relative;
}

.contact-inner-block {
	position: relative;
	background: white;
    margin: 3rem 2rem;
    padding: 2rem;
	box-shadow: 0px 3px 50px #00000029;
	z-index: 4;
}

.cbe-transfer .contact-block .colour-block {
    position: absolute;
    width: 50%;
    height: calc(100% - 3rem);
    z-index: 3;
    right: 1rem;
}

.cbe-transfer .contact-info {
    margin-bottom: 1.5rem;
}

.cbe-transfer .contact-line {
	margin-bottom: 5px;
}

.cbe-transfer .contact-line a {
	color: var(--link-color);
}
.cbe-transfer .contact-line a:hover,
.cbe-transfer .contact-line a:focus {
	color: var(--link-hover-color);
}

@media (min-width: 48em){
	.program1 .colour-block {
		width: calc(100% - 5vw);
		right: calc(-5vw + 1rem);
	}
	
	.cbe-transfer .text-block {
		padding: 2rem 5vw;
	}
	
	.contact-inner-block {
		margin: 3rem 5vw;
	}
}

@media (min-width: 62em){
	.program1 .colour-block {
		width: 100%;
		right: calc(-10vw + 1rem);
	}
	
	.program2-section {
		margin-right: 10vw;
	}
	
	.program2-section > .content-container {
		padding-right: 0;
		padding-top: 2rem;
		padding-bottom: 2rem;
	}
	
	.program2.row {
		flex-direction: row-reverse;
	}
	
	.program2 .program-img {
		margin-top: -15rem;
	}
	
	.program2 .program-text-inner {
		width: 90%;
		margin: auto;
	}
	
	.program2-section {
		margin-top: 3rem;
	}
	
	.program3 .program-img {
		margin-top: 0;
	}
	
	.ready-register {
		margin-top: 0;
	}
	
	.cbe-transfer {
		display: flex;
		align-items: flex-start;
	}
	
	.cbe-transfer .text-block {
		padding: 4rem 5vw 4rem 10vw;
		width: 60%;
	}
	
	.cbe-transfer .contact-block {
		width: 40%;
		align-self: stretch;
	}
	
	.cbe-transfer .contact-block .bg-light-grey {
		height: 100%;
	}
	
	.contact-inner-block {
		margin: 4rem 5rem 4rem 3rem;
	}
	
	.cbe-transfer .contact-block .colour-block {
		right: 3rem;
    	width: 30%;;
		height: calc(100% - 4rem);
	}
}

@media (min-width: 75em) {
	.program2 .program-img {
		margin-top: -10rem;
	}
	
	.program2-section {
		margin-top: 5rem;
	}
	
	.cbe-transfer .text-block {
		width: 70%;
	}
	
	.cbe-transfer .contact-block {
		width: 30%;
	}
}

@media (min-width: 99em) {
	.program2 .program-img {
		margin-top: -5rem;
	}
	
	.program2-section {
		margin-top: 3rem;
	}
}

/* Article Template */
.article-template .cover-image {
	width: 100%;
}

.article-template .news-post-date,
.article-template .news-content {
	margin-top: 1rem;
}

.article-template .news-post-date {
	color: var(--dark-grey)
}

.article-template .back-link {
	margin: 1rem 0;
	gap: 0;
}

.article-template .date-wrapper {
	margin-bottom: 1rem;
	color: var(--dark-grey);
    font-size: .9rem;
}

.article-template .date-wrapper i {
	font-size: 1rem;
}

.article-template .back-link:hover {
	text-decoration: none;
	color: var(--link-hover-color);
}

.article-template.content-container .content-container {
	padding: 0;
}

.article-template .main-content {
	margin-top: 2rem;
}

/* Quicklinks template */
.quicklinks-template .quicklink-item {
	display: block;
	color: white;
	border: 1px solid var(--medium-grey);
    padding: 0;
	aspect-ratio: auto;
	height: 100%;
	background: var(--primary-color-2)
}

.quicklinks-template .quicklink-item:hover,
.quicklinks-template .quicklink-item:focus {
	color: var(--quicklink-hover);
}

.quicklinks-template .quicklink-item img {
	object-fit: contain;
    padding: .5rem;
    height: auto;
    aspect-ratio: 3/2;
	background: white;
	border-radius: 8px 8px 0 0;
}

.quicklinks-template .quicklink-icon {
	object-fit: contain;
    padding: 0.5rem;
    height: auto;
    aspect-ratio: 3/2;
    background: white;
    border-radius: 8px 8px 0 0;
    color: var(--primary-color-2);
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.quicklinks-template .quicklink-label {
	padding: 1rem;
	color: white;
	transition: all .2s ease-in-out;
}

.quicklinks-template.sidebar-template .quicklink-label {
	padding: .5rem;
}

.main-content .quicklink-item:hover,
.main-content .quicklink-item:focus{
	text-decoration: none;
}

.quicklink-item:hover .quicklink-label,
.quicklink-item:focus .quicklink-label{
	text-decoration: none;
	color: var(--link-hover-color);
}

@media only screen and (min-width: 99em){
	.quicklink-col.col-xl-2 {
		-ms-flex-preferred-size: calc(100% / 6);
		flex-basis: calc(100% / 6);
		max-width: calc(100% / 6);
	}
}

.modal-wrapper {
    display: none;
    position: fixed;
    z-index: 500;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.7);
    margin: 0!important;
}

.modal-info {
	margin: 0 auto;
    width: 90%;
    position: absolute;
    top: 20%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    padding: 1rem;
	max-height: 90vh;
}

.modal-wrapper .close-icon {
    font-size: 1.5rem;
	color: white;
    cursor: pointer;
	position: absolute;
    top: 1rem;
    right: 1rem;
    left: auto;
    cursor: pointer;
    z-index: 200;
}

@media (min-width: 62em){
	.modal-info {
		width: 40%;
		top: 50%;
	}
	
	.translate-modal .modal-info {
		top: 35%;
	}
}

.pswp__custom-caption {
    /* text-align: center; */
    font-size: 16px;
    color: #fff;
    width: fit-content;
    max-width: 800px;
    padding: 0.5rem 1rem;
    position: absolute;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
}


table.editor-table {
	overflow-x: auto !important;
}

.our-staff table img {
	max-width: 12rem;
}

/* same table column width for "Our Staff" page */
.our-staff table {
    table-layout: fixed; 
}

.ww_cond, .ww_source, .ww_name {
    display: none!important;
}

#ww_71372c7ff2842 .ww_icon {
    order: -1;
    margin-top: 0!important;
    margin-bottom: 2%!important;
}


.last-modified {
    margin: 2rem 0;
    text-align: center;
    color: #666666;
    font-size: .8rem;
}

.hours-item {
    margin-bottom: .5rem;
}

.hours h5 {
    margin-bottom: .15rem;
}

h2.minus-margin {
    margin-top: -.35rem!important;
}

/* Weather Widget */
.weather-wrapper iframe #wxlink .mainDiv {
    border: none!important;
    background-color: none!important;
    color: white!important;
}

@media (max-width: 1300px) {
    .weather-wrapper iframe {
        max-width: 100%;
    }
}

@media (max-width: 400px) {
    .weather-wrapper iframe {
        height: 214px;
    }
}

@media (min-width: 1000px) and (max-width: 1300px) {
    .weather-wrapper iframe {
        height: 300px;
    }
}

/* corporate site styling (mainly for new story) */
.title-row {
    margin-bottom: 1rem;
}

.corporate-news-story.page-header {
    background-color: transparent;
    text-align: left;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.page-header-no-image::after {
    content: none;
}

.page-header-no-image {
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 1.5rem;
}

.corporate-news-story .breadcrumbs {
    text-transform: none;
    font-weight: var(--font-medium);
    color: var(--primary-color-1);
}

.article-header .breadcrumbs {
    margin-bottom: 0;
}

.corporate-news-story .news-banner {
    display: flex;
    flex-wrap: wrap;
}

.corporate-news-story .news-banner-text {
    background-color: var(--primary-color-2);
    color: white;
    padding: 1rem;
}

.corporate-news-story .news-banner-text p {
    margin-bottom: 2rem;
}

.corporate-news-story .news-banner-text p::after {
    content: "";
    width: 80px;
    height: 2px;
    background: #CCE6F5;
    display: block;
    margin-top: 2rem;
}

.corporate-news-story .news-banner-img {
    width: 100%;
    aspect-ratio: 16 / 9;
}

.corporate-news-story .news-banner-img img {
    height: 100%;
    aspect-ratio: 16 / 9;
}

.corporate-news-story .news-banner-text h1 {
    line-height: 1.1;
    margin: 0 0 1.5rem;
    font-size: 2.2rem;
}

.documents-wrapper {
    background-color: var(--primary-color-1);
    border-radius: 5px;
    padding: 1rem;
}

.documents-wrapper ul {
    margin-left: 0;
    margin-bottom: 0;
    color: white;
}

.documents-wrapper ul li {
    padding: 0;
    align-items: baseline;
}

.documents-wrapper ul li:last-of-type {
    margin-bottom: 0;
}

.documents-wrapper ul li::before {
    content: none
}

.documents-wrapper a {
    color: white;
}

.article-share, .article-categories {
    margin-bottom: 2rem;
}

.share-icons {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.article-tags {
    display: flex;
    flex-wrap: wrap;
    row-gap: .25rem;
}

.article-tag {
    text-transform: capitalize;
    padding-right: .5rem;
}

.article-tag::after {
    content: '|';
    color: #CCCCCC;
    padding-left: .5rem;
}

.article-tag:last-of-type::after {
    content: none;
}

.related-events {
    row-gap: 1.5rem;
}

.related-event {
    border-radius: 5px;
    background: #FCFCFC;
    box-shadow: 0px 3px 7.5px 0px rgba(0, 0, 0, 0.05);
	border: 2px solid var(--medium-grey);
    height: 100%;
    display: flex;
    gap: 1rem;
}

.related-event .event-date-wrapper {
    border-radius: 5px 0 0 5px;
    width: 5rem;
    height: 100%;
    text-align: center;
    font-weight: var(--font-medium);
    line-height: 1.2;
	justify-content: space-between;
}

.related-event .event-date-wrapper:hover,
.related-event .event-date-wrapper:focus {
    text-decoration: none;
    color: white;
}

.related-event .month {
    text-transform: uppercase;
}

.related-event .day {
    font-size: 1.5rem;
}

.related-event .week {
    text-transform: uppercase;
    font-size: .8rem;
}

.related-event-details {
    padding: 1rem 0;
    width: calc(100% - 7rem);
	display: flex;
    flex-direction: column;
    justify-content: center;
}

.related-event-tag {
    text-transform: uppercase;
    margin-bottom: .5rem;
    display: block;
    font-size: .8rem;
    color: var(--dark-font-color);
}

.related-event-title {
    display: block;
    font-weight: var(--font-bold);
    margin-bottom: .25rem;
    font-size: 1.1rem;
	color: var(--dark-font-color);
	line-height: 1.3;
}

.related-event .event-date-line {
	color: var(--dark-grey);
}

.event-start-date {
	height: 100%;
    padding: 1rem;
	display: flex;
    flex-direction: column;
    justify-content: center;
}

.related-event-info {
    margin-top: .5rem;
}

.news-main-content .related-event-time-row div {
	display: inline;
}

.related-event-time-row .event-time-only {
	font-weight: var(--font-medium);
}

.related-event-info .card-description {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-height: 1.6;
}

.event-multiday {
    backdrop-filter: brightness(0.5);
    border-radius: 0 0 0 5px;
    font-size: .8rem;
    text-transform: uppercase;
    padding: .25rem;
}

.separate-dot {
    color: var(--primary-color-1);
}

.related-event-type {
    font-weight: var(--font-medium);
}

.related-location-date-wrapper {
	margin-top: .5rem;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.related-event-location,
.related-event-date {
    font-size: .8rem;
    border-radius: 20px;
    background: #EAEAEA;
    width: fit-content;
    padding: .25rem .75rem;
}

.main-content-2 {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.showcase-zone.news-article {
    color: white;
}

.cards-wrapper {
    row-gap: 1rem;
    margin-bottom: 2rem;
}

.card-wrapper {
    border-radius: 5px;
    border: 5px solid #EDEEF1;
    height: 100%;
	background-color: white;
}

.card-wrapper img {
    aspect-ratio: 2.5/1;
    border-radius: 5px 5px 0px 0px;
    width: 100%;
}

.card-text {
    padding: 1.25rem 1rem;
}

.card-wrapper .btn {
    margin-left: auto;
    margin-right: auto;
    filter: drop-shadow(0px 3px 7.5px rgba(0, 0, 0, 0.16));
}

.card-wrapper p {
    margin-bottom: 1rem;
}

.corporate-news-story .quicklink-item {
    flex-direction: row;
    justify-content: flex-start;
    padding: 0;
    aspect-ratio: unset;
    gap: 0;
    height: 100%;
    border: 2px solid #F0F0F0;;
}

.corporate-news-story .quicklink-label-wrapper {
    color: white;
    flex-grow: 1;
    padding: 1rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.corporate-news-story .quicklink-label-wrapper span {
    font-size: .9rem;
}

.corporate-news-story .quicklink-label-wrapper .quicklink-desc {
    color: #707070;
    font-weight: var(--font-regular);
}

.corporate-news-story .quicklink-item img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px 0 0 10px;
    padding: 1rem;
}

.corporate-news-story .quicklink-img-wrapper {
    width: 35%;
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    border-radius: 10px 0 0 10px;
}

.corporate-news-story .quicklink-img-wrapper i {
    color: currentColor;
    font-size: 2rem;
    text-align: center;
    display: block;
}

.text-link {
    text-align: center;
    border-style: solid;
    border-width: 2px;
    background-color: white!important;
    border-color: #00ADDA;
    transition: all .3s ease-in-out;
}

.text-link .quicklink-label-wrapper {
    color: #00ADDA;
    transition: all .3s ease-in-out;
}

.text-link:hover, .text-link:focus {
    border-color: var(--link-hover-color);
}

.text-link:hover .quicklink-label-wrapper, .text-link:focus .quicklink-label-wrapper {
    color: var(--link-hover-color);
}

.image-link span {
    text-align: left;
}

.image-link .quicklink-label-wrapper {
    background-color: #00ADDA;
    border-radius: 0 10px 10px 0;
    transition: all .3s ease-in-out;
    width: 65%;
}

.image-link .quicklink-label-wrapper .quicklink-desc {
    color: white;
}

.image-link:hover .quicklink-label-wrapper, .image-link:focus .quicklink-label-wrapper {
    background-color: var(--link-hover-color);
}



/* sidebar quicklinks */
.corporate-news-story .quicklinks-wrapper {
	margin-top: 1.5rem;
}
.quicklink-vertical {
	display: flex;
    border-radius: 10px;
    align-items: center;
    font-weight: var(--font-medium);
    flex-direction: column;
	border: 2px solid #F0F0F0;
    justify-content: flex-start;
    padding: 0;
    aspect-ratio: unset;
    gap: 0;
    height: 100%;
}

.quicklink-vertical .quicklink-img-wrapper,
.quicklink-vertical.image-link .quicklink-label-wrapper{
    width: 100%;
}

.quicklink-vertical .quicklink-img-wrapper {
    border-radius: 10px 10px 0 0;
    padding: .5rem;
    height: 85px;
}

.quicklink-vertical.image-link .quicklink-label-wrapper {
    border-radius: 0 0 10px 10px;
    text-align: center;
    justify-content: flex-start;
    height: auto;
}

.quicklink-vertical.image-link .quicklink-label-wrapper span {
    text-align: center;
}

.corporate-news-story ul {
    margin-left: .5rem;
}

.showcase {
    position: relative;
	margin-top: 1.5rem;
}

.showcase-zone {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.showcase .flex-row-between {
    margin: 0;
}

.corporate-news-story .showcase-swiper .swiper-wrapper {
	height: auto;
}

.corporate-news-story .showcase-button-prev, 
.corporate-news-story .showcase-button-next {
	position: absolute;
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    top: 50%;
    transform: translateY(-50%);
}

.corporate-news-story .news-item > a, 
.corporate-news-story .news-item > div {
    display: block;
    box-shadow: 0px 3px 7.5px 0px rgba(0, 0, 0, 0.05);
}

/* Side Navigation */
.sidebar-nav {
    order: -1;
}

.corporate-news-story .nav-secondary-wrapper {
    margin-top: 0;
    margin-bottom: 2rem;
}

.corporate-news-story .nav-secondary-ul {
    margin: 0;
    list-style: none;
}

.corporate-news-story  .nav-secondary-ul li::before {
    content: none
}

.corporate-news-story .secondary-nav-item::after, 
.corporate-news-story .secondary-nav-item.active::after  {
    content: none;
}

.corporate-news-story  .secondary-nav-item, 
.corporate-news-story  .secondary-nav-item.active {
    background-color: transparent;
    padding: .75rem 0;
    margin-bottom: 0;
    border-bottom: 1px solid #ccc;
}

.contact-zone {
    background-color: #CCE6F5;
    border-radius: 5px;
    padding: 2rem;
}
 
.contact-zone .circle-icon {
    background: rgba(0, 0, 0, 0.1975);
    color: var(--dark-font-color);
}

.corporate-news-story .contact-row {
    margin-bottom: 1rem;
}

.corporate-news-story .contact-row:last-of-type {
    margin-bottom: 0;
}

.corporate-news-story .contact-row a {
    color: var(--dark-font-color);
}

.corporate-news-story .contact-title {
    margin-bottom: 1rem;
}

.corporate-news-story .contact-title h2 {
    text-align: center;
}

.corporate-news-story .contact-col {
    margin-bottom: 2rem;
}

@media (min-width: 48em) {
    .text-left .news-banner-text,
    .text-right .news-banner-text {
        padding: 2rem 5% 2rem 5%;
    }
}

@media (min-width: 62em) {
    .news-banner-img, .news-banner-text {
        flex-basis: 50%;
        max-width: 50%;
    }

	.no-news-banner-img .news-banner-text {
        flex-basis: 100%;
        max-width: 100%;
    }

    .text-left .news-banner-text,
    .corporate-news-story .news-banner-text {
        padding: 2rem 5% 2rem 10%;
    }

    .text-right .news-banner-text {
        padding: 2rem 10% 2rem 5%;
    }

    .text-right .news-banner-img {
        order: -1;
    }

    .event-card {
        padding: 2rem;
    }

    .location-contact-zone svg {
        right: 2rem;
    }

    .location-contact-section .bg-colour-filter {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

	.corporate-news-story .showcase-button-next {
        right: calc((10vw - 3rem) / 2);
    }

    .corporate-news-story .showcase-button-prev {
        left: calc((10vw - 3rem) / 2);
    }
}

/* About Us Template */
.about_template .about-bg {
	aspect-ratio: 253/60;
	height: auto;
}

.about_template .row {
	row-gap: 2rem;
}

.about_template .about-profile {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin: 2rem 0;
}

.about-contact-info {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.about-contact-info a {
	color: var(--dark-font-color);
}

.about-contact-info a:hover,
.about-contact-info a:focus {
	color: var(--link-color);
}

.about-program {
	border-radius: 5px;
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
	padding: 1rem;
	position: relative;
}

.about-program h2 {
	margin-bottom: .75rem;
}

.about-program .multi-grades,
.about-program .js-enrollment-multi {
	font-size: 1.2rem;
}

.about-school-info-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
}

.about-program-text {
	margin-bottom: .5rem;
}

.about-profile-label {
	margin-bottom: .5rem;
	font-size: 1.1rem;
}

.grade-enrollment-item {
	font-size: 1.1rem;
	margin-bottom: .5rem;
}

.about-profile-number {
	margin: 0;
	font-size: 2rem;
}

.about_template-multiple .about-profile-number {
	font-size: 1.1rem;
}

.js-grade-enrolment span {
	font-weight: var(--font-medium);
}

.js-grade-enrolment {
	column-gap: .75rem;
	column-count: 2;
    display: block;
}

.about-location {
	margin-top: -5rem;
}

.about-location .content-container {
	padding-top: 6rem;
	padding-bottom: 3rem;
}

.about_template-multiple .about-location-content {
    background: white;
    color: var(--dark-font-color);
    text-align: center;
    padding: 1rem;
}

.about_template-multiple .about-location-text {
	margin-top: .5rem;
}

.about_template-multiple .about-location-link {
    margin: 0 auto;
    width: 100%;
    text-align: center;
    display: block;
    color: white;
    background: var(--primary-color-2);
    padding: .5rem 1rem;
}

.about_template-multiple .location-card {
	height: 100%;
	background-color: white;
}

.about_template-multiple .location-card-content {
	height: 100%;
}

.about-map img {
	width: 100%;
	aspect-ratio: 4/1;
}

.about-notice, .about-leadership {
	padding-top: 2rem;
	padding-bottom: 2rem;
}

.about-notice-left h3 {
	color: #9A0235;
}

.about-notice .fa-flag {
	color: #9A0235;
	margin-right: .5rem;
}

.about-notice .editor ul li::before {
    background: var(--link-color);
}

.about-notice .editor ul {
	margin-left: 0;
}

.about-notice .editor details summary {
	background-color: var(--link-color);
	color: white;
	filter: drop-shadow(0px 3px 7.5px rgba(0, 0, 0, 0.16));
	border-radius: 5px;
}

.about-notice .editor details summary * {
	color: white;
}

.about-notice .editor details summary h3 {
	font-weight: var(--font-medium);
	font-size: 1rem;
	margin: 0;
}
.about-leadership .row {
	row-gap: 1rem;
}

.about-leadership .team-label {
	text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.16);
}

.about-leadership .team-name {
	text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.16);
	font-weight: var(--font-bold);
}

.leadership-img {
	order: 2;
	max-width: 50%;
	margin: auto;
}

.system-leadership {
	order: 1;
}

.about-hours img {
	width: 100%;
	box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.16);
	aspect-ratio: 1920/600;
}

.about-hours-row {
    background: white;
	border-radius: 5px;
	border: 1px solid #dedede;
	box-shadow: 0px 3px 7.5px 0px rgba(0, 0, 0, 0.05);
	width: 90%;
    margin: -4rem auto 0;
	row-gap: 1rem;
}

.about-hours-left {
	background-color: white;
	padding: 1rem 1rem 0;
	border-radius: 5px 5px 0 0;
}

.about-hours-left .btn {
	margin: auto;
}

.about-hours-left h3 {
	color: var(--link-color);
}

.about-hours-left p {
	font-weight: var(--font-semibold);
}

.about-hours-right {
	background-color: var(--link-color);
	padding: 1rem;
	border-radius: 0 0 5px 5px;
}

.about-hours-right p {
	color: white;
}

.about-current-hours .row {
	row-gap: 0;
}

.about-highlights {
	position: relative;
	margin: 2rem auto;
}

.about-highlights-left {
	position: relative;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.about-highlights-left img {
	width: 100%;
	box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.16);
	aspect-ratio: 870 / 450;
}

.about-highlights-right .subtitle {
	margin-bottom: .5rem;
}

.about-highlights-right h2 {
	margin-bottom: .5rem;
	color: var(--primary-color-2);
}

.about-highlights .colour-block {
    width: 40%;
    height: 100%;
    position: absolute;
    top: 0;
	left: -3%;
    z-index: -1;
}

.about_template .news h2 {
	margin-bottom: 1.25rem;
}

.about-news-event {
	margin-bottom: 2rem;
}

.about-news-event > .row {
	row-gap: 0;
}

.about-news-event .home-events-wrapper {
	row-gap: 1rem;
}

.about-news-event a:hover,
.about-news-event a:focus {
	text-decoration: none;
}

.about-explore .cta {
	padding: 1rem;
	box-shadow: 0px 3px 25px 0px rgba(0, 0, 0, 0.16);
	height: 100%;
}

.about-navigation {
	padding: 1rem;
	height: 100%;
}

.about-navigation ul {
	margin-bottom: 0;
	margin-left: 0;
}

.about-navigation ul li::before {
    content: none;
}

.about-navigation ul li {
	list-style: none;
	padding-left: 0;
	padding-bottom: .75rem;
	margin-bottom: .75rem;
	border-bottom: 1px solid #ccc;
}

.about-navigation ul li:last-of-type {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: none;
}

.about-navigation ul li a {
	color: var(--dark-font-color);
	font-weight: var(--font-medium);
}

.program-divider {
	margin-bottom: 0;
}

@media (min-width: 62em) {
	.program-divider {
		display: none;
	}
	.about-school-info {
		width: calc((100% - 4rem) / 3);
	}

	.about_template-multiple .about-school-info {
		width: calc((100% - 2rem) / 2);
	}

	.about_template-multiple .about-school-info.grades {
		width: 100%;
	}

	.about-profile-number {
		font-size: 3rem;
	}

	.about-program {
		padding: 2rem;
	}

	.about-program-right {
		border-left: 1px solid #EAEAEA;
	}

	.about-program-left {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.about-location .content-container {
		padding-top: 8rem;
	}

	.about-notice-left,
	.about-notice-right {
		flex-basis: calc(100% * 5 / 12);
        max-width: calc(100% * 5 / 12);
	}

	.about-notice-img {
		background-image: url('/images/a10661a5-8bec-49c2-ba39-d6bb051c1b7d');
		background-repeat: no-repeat;
		background-size: contain;
		flex-basis: calc(100% * 1 / 6);
        max-width: calc(100% * 1 / 6);
	}

	.about-leadership .system-leadership {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		order: 3;
	}

	.leadership-img {
		max-width: unset;
	}

	.text-inner {
		text-align: left;
	}

	.about-hours-row {
		margin-top: -5rem;
		width: 100%;
	}

	.about-hours img {
		aspect-ratio: 1920/450;
	}

	.about-hours-left {
		border-radius: 5px 0 0 5px;
		padding: 2rem;
	}

	.about-hours-right {
		border-radius: 0 5px 5px 0;
		padding: 2rem;
	}

	.about-highlights {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}

	.about-highlights-left {
		position: static;
		padding-top: 0;
		padding-bottom: 0;
	}

	.about-highlights .content-container {
		padding-left: 3%;
	}

	.about-highlights-right {
		padding-left: calc(1rem + 3%);
	}

	.about-highlights .colour-block {
		width: 20%;
	}

	.about-explore .cta, .about-navigation {
		padding: 2rem;
	}
}

/* Individual Notice */
.notice-banner {
	background-color: #ECF0F3;
	justify-content: space-between;
}
.notice-banner .news-banner-text{
	background-color: #ECF0F3;
	color: var(--dark-font-color);
	width: 100%;
}

.notice-banner .article-tags {
	gap: .5rem;
	margin-bottom: 1.5rem;
}

.notice-banner .article-tag::after {
	content: none;
}

.notice-banner .article-tag {
	background-color: #F28725;
	color: white;
	padding: 5px;
	text-transform: uppercase;
    font-size: 14px;
}


.notice-banner h1::after {
	content: '';
	width: 80px;
	height: 2px;
	background: #00ADDA;
	display: block;
    margin-top: 1.5rem;
}

.notice-banner .format-date-news {
	font-weight: var(--font-medium);
}

.notice-main-content .documents-wrapper {
	margin-bottom: 1.5rem;
	background-color: #00adda;
}

.notice-main-content .circle-icon,
.notice-main-content .info-card-container .bts-col::after {
	background-color: #F28725;
}
.notice-main-content .info-card-container .bts-col .btn-arrow::after {
	color: #F28725;
}

.notice-main-content .info-card-container .bts-col .btn-arrow::after, 
.notice-main-content .info-card-container .bts-col .btn-arrow:hover, 
.notice-main-content .info-card-container .bts-col .btn-arrow:focus {
    color: #F28725;
}

.info-card-container .content-card {
	gap: 1rem;
}

.related-school-list {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.all-notices .row {
	row-gap: 1.5rem;
}

.notice-intro {
	background-color: #00adda;
	color: white;
	padding: 1rem;
	height: 100%;
}

.notice-table th {
    background-color: #00adda !important;
    color: white!important;
	text-align: left;
}

.notice-table {
    box-shadow: none;
	border: 1px solid #CCC;
	margin-bottom: 0;
}

.notice-table tr:nth-child(odd) {
    background: #E5F7FB;
}

.notice-table p:last-of-type {
    margin-bottom: 0;
}

.notice-table-tag {
	text-transform: capitalize;
}

.notice-table .notice-table-date,
.notice-table .notice-table-tag {
	min-width: 150px;
}

.explore-nav {
    background-color: #F0F0F0;
    padding: 2rem;
    border-radius: 5px;
	height: 100%;
}

.explore-nav .secondary-nav-item:last-of-type {
    border-bottom: none;
}

.off-campus-program .contact-zone {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contact-section >.row {
    row-gap: 1rem;
}

@media (min-width: 62em) {
	.notice-banner .news-banner-img,
	.notice-banner .news-banner-img img {
		aspect-ratio: 580 / 525;
	}

    .notice-banner .news-banner-img {
        flex-basis: calc(30% + 2rem);
        max-width: calc(30% + 2rem);
    }

	.notice-banner .news-banner-text {
		flex-grow: 1;
	}

	.no-news-banner-img .news-banner-text {
		flex-basis: 100%;
		max-width: 100%;
	}

	.notice-intro {
		padding: 2rem;
	}
}