/* FONTS */
@import url("https://fast.fonts.net/t/1.css?apiType=css&projectid=1e4ef672-67ba-49ad-acb4-a6674c899ced");
@font-face{
	font-family:"Harmonia Sans W05 Light";
	src:url("Fonts/f383cc8d-7628-4315-b8e3-d0e785de99df.woff2") format("woff2"),url("Fonts/f1244e87-8d9c-4c7c-92d3-93d4a34b3a31.woff") format("woff");
}
@font-face{
	font-family:"Harmonia Sans W05 Regular";
	src:url("Fonts/3d59eba6-b147-4754-97cc-4aa65849c612.woff2") format("woff2"),url("Fonts/0444a82c-3efc-4d47-97cc-100769d06036.woff") format("woff");
}
@font-face{
	font-family:"Harmonia Sans W05 Semi Bold";
	src:url("Fonts/ac2570d4-84e4-4c61-98fe-d5d4c20ae9ca.woff2") format("woff2"),url("Fonts/e849c21f-55fd-43b8-bf97-77659aa015c2.woff") format("woff");
}
@font-face{
	font-family:"Harmonia Sans W05 Bold";
	src:url("Fonts/750a0634-4f8f-4e4d-b1cb-194c73c997b5.woff2") format("woff2"),url("Fonts/e8129a45-3013-4082-b52a-69febba99875.woff") format("woff");
}
@font-face{
	font-family:"Harmonia Sans W01 Black";
	src:url("Fonts/f3c62500-01e6-4a03-8a06-25b06efac7ed.woff2") format("woff2"),url("Fonts/240140b7-957c-4f94-98e1-34bbcf41b451.woff") format("woff");
}
@font-face {
	font-family: 'Barlow Light';
	src: url("Fonts/Barlow-Light.ttf") format('truetype');
}
@font-face {
	font-family: 'Barlow Regular';
	src: url("Fonts/Barlow-Regular.ttf") format('truetype');
}
@font-face {
	font-family: 'Barlow Medium';
	src: url("Fonts/Barlow-Medium") format('truetype');
}
@font-face {
	font-family: 'Barlow Bold';
	src: url("Fonts/Barlow-Bold.ttf") format('truetype');
}
@font-face {
	font-family: 'Fredoka One';
	src: url("Fonts/FredokaOne-Regular.ttf") format('truetype');
}


/* SCHOOL COLOURS */
:root {
    --lht-primary-colour: #006592;
    --lht-secondary-colour: #4e96bc; /* #444444 */
    --lht-accent-colour: #D99E0A;
    --bcs-primary-colour: #4A93B7;
    --bea-primary-colour: #006592;
    --cas-primary-colour: #165729;
    --ced-primary-colour: #303687;
    --hum-primary-colour: #747cbb;
    --jud-primary-colour: #c10601;
    --mar-primary-colour: #303687;
    --sjn-primary-colour: #233043;
    --tns-primary-colour: #292f62;
    --bls-primary-colour: #008340;
    --bro-primary-colour: #585158;
    --hal-primary-colour: #be1622;
    --hig-primary-colour: #007734;
    --riv-primary-colour: #0090d1;
    --block-spacing: 12px 0;
}

.let-colours {
    --school-primary: var(--lht-primary-colour);
    --school-secondary: var(--lht-secondary-colour);
    --school-accent: var(--lht-accent-colour);
}

.lht-primary-bg { background-color: var(--lht-primary-colour); }
.lht-primary-font { color: var(--lht-primary-colour) !important; }
.lht-secondary-bg { background-color: var(--lht-secondary-colour); }
.lht-secondary-font { color: var(--lht-secondary-colour) !important; }
.bcs-primary-bg { background-color: var(--bcs-primary-colour); }
.bcs-primary-font { color: var(--bcs-primary-colour) !important; }
.bea-primary-bg { background-color: var(--bea-primary-colour); }
.bea-primary-font { color: var(--bea-primary-colour) !important; }
.cas-primary-bg { background-color: var(--cas-primary-colour); }
.cas-primary-font { color: var(--cas-primary-colour) !important; }
.ced-primary-bg { background-color: var(--ced-primary-colour); }
.ced-primary-font { color: var(--ced-primary-colour) !important; }
.hum-primary-bg { background-color: var(--hum-primary-colour); }
.hum-primary-font { color: var(--hum-primary-colour) !important; }
.jud-primary-bg { background-color: var(--jud-primary-colour); }
.jud-primary-font { color: var(--jud-primary-colour) !important; }
.mar-primary-bg { background-color: var(--mar-primary-colour); }
.mar-primary-font { color: var(--mar-primary-colour) !important; }
.sjn-primary-bg { background-color: var(--sjn-primary-colour); }
.sjn-primary-font { color: var(--sjn-primary-colour) !important; }
.tns-primary-bg { background-color: var(--tns-primary-colour); }
.tns-primary-font { color: var(--tns-primary-colour) !important; }
.bro-primary-bg { background-color: var(--bro-primary-colour); }
.bro-primary-font { color: var(--bro-primary-colour) !important; }
.blp-primary-bg { background-color: var(--blp-primary-colour); }
.blp-primary-font { color: var(--blp-primary-colour) !important; }
.hal-primary-bg { background-color: var(--hal-primary-colour); }
.hal-primary-font { color: var(--hal-primary-colour) !important; }
.hig-primary-bg { background-color: var(--hig-primary-colour); }
.hig-primary-font { color: var(--hig-primary-colour) !important; }
.riv-primary-bg { background-color: var(--riv-primary-colour); }
.riv-primary-font { color: var(--riv-primary-colour) !important; }
.doe-primary-bg { background-color: var(--doe-primary-colour); }
.doe-primary-font { color: var(--doe-primary-colour) !important; }
.pio-primary-bg { background-color: var(--pio-primary-colour); }
.pio-primary-font { color: var(--pio-primary-colour) !important; }
.school-primary-bg { background-color: var(--school-primary) !important; }
.school-primary-font { color: var(--school-primary) !important; }
.school-secondary-bg { background-color: var(--school-secondary) !important; }
.school-secondary-font { color: var(--school-secondary) !important; }
.school-accent-bg { background-color: var(--school-accent) !important; }
.school-accent-font { color: var(--school-accent) !important; }
.beehive-bg { background: linear-gradient(140deg,#ffa000 50%,#ffee56 100%); }
.white-bg { background-color: #fff !important; }
.white-font { color: #fff !important; }

.school-primary-bg { 
    background-color: var(--school-primary) !important;
}
.school-secondary-bg {
    background-color: var(--school-secondary) !important;
}
.school-accent-bg {
    background-color: var(--school-accent) !important;
}

.lat-bg-colour {
    background-color: var(--lht-primary-colour) !important;
}
.bcs-bg-colour {
    background-color: var(--bcs-primary-colour) !important;
}
.bea-bg-colour {
    background-color: var(--bea-primary-colour) !important;
}
.cas-bg-colour {
    background-color: var(--cas-primary-colour) !important;
}
.ced-bg-colour {
    background-color: var(--ced-primary-colour) !important;
}
.hum-bg-colour {
    background-color: var(--hum-primary-colour) !important;
}
.jud-bg-colour {
    background-color: var(--jud-primary-colour) !important;
}
.mar-bg-colour {
    background-color: var(--mar-primary-colour) !important;
}
.tns-bg-colour {
    background-color: var(--tns-primary-colour) !important;
}
.sjn-bg-colour {
    background-color: var(--sjn-primary-colour) !important;
}
.bls-bg-colour {
    background-color: var(--bls-primary-colour) !important;
}
.bro-bg-colour {
    background-color: var(--bro-primary-colour) !important;
}
.hal-bg-colour {
    background-color: var(--hal-primary-colour) !important;
}
.hig-bg-colour {
    background-color: var(--hig-primary-colour) !important;
}
.riv-bg-colour {
    background-color: var(--riv-primary-colour) !important;
}


/* BACKGROUND IMAGES */
.bcs-bg-image::after {
    background-image: url('../icons/SchoolIcons/bcs.svg')
}
.bea-bg-image::after {
    background-image: url('../icons/SchoolIcons/bea.svg')
}
.cas-bg-image::after {
    background-image: url('../icons/SchoolIcons/cas.svg');
}
.ced-bg-image::after {
    background-image: url('../icons/SchoolIcons/ced.svg');
}
.hum-bg-image::after {
    background-image: url('../icons/SchoolIcons/hum.svg');
}
.jud-bg-image::after {
    background-image: url('../icons/SchoolIcons/jud.svg');
}
.mar-bg-image::after {
    background-image: url('../icons/SchoolIcons/mar.svg');
}
.sjn-bg-image::after {
    background-image: url('../icons/SchoolIcons/sjn.svg');
}
.tns-bg-image::after {
    background-image: url('../icons/SchoolIcons/tns.svg');
}
.bls-bg-image::after {
    background-image: url('../icons/SchoolIcons/bls.svg');
}
.bro-bg-image::after {
    background-image: url('../icons/SchoolIcons/bro.svg');
}
.hal-bg-image::after {
    background-image: url('../icons/SchoolIcons/hal.svg');
}
.hig-bg-image::after {
    background-image: url('../icons/SchoolIcons/hig.svg');
}
.riv-bg-image::after {
    background-image: url('../icons/SchoolIcons/riv.svg');
}
.lat-bg-image::after {
    background-image: url('../icons/SchoolIcons/lht.svg');
}


/* GENERAL STYLINGS */
* {
    box-sizing: border-box;
}
html, body {
    height: 100%;
}
body {
	margin: 0;
	padding: 0;
	display: flex;
	flex-flow: column nowrap;
	min-height: 100vh;
}
body * {
    max-width: 100%;
}
p, td, li {
    font-family: 'Barlow Regular';
    font-size: 16px;
    color: #333;
    line-height: normal;
}
a {
    font-family: 'Barlow Regular';
    font-size: inherit;
    color: inherit;
    line-height: inherit;
}
h1, h2, h3, h4, h5, h6 {
	text-transform: uppercase;
	font-family: "Harmonia Sans W05 Bold";
	margin: 0;
	padding: 0;
	color: var(--school-primary);
}
h1 {
    font-size: 32px;
    margin: 16px 0 8px 0;
}
h2 {
  font-size: 28px;
}
h3 {
  font-size: 24px;
}
h4 {
  font-size: 20px;
}
h5 {
  font-size: 16px;
}
main > section {
    width: 100%;
}
table {
    border-collapse: collapse;
}
th {
	font-family: 'Harmonia Sans W05 Semi Bold';
	font-size: 16px;
	color: #333;
	text-transform: uppercase;
	text-align: left;
}
th > p {
    color: white;
    margin: 4px;
}
td > p {
  margin: 0;
}
a {
  text-decoration: none;
  color: var(--school-primary);
}
a:hover {
    color: var(--school-accent) !important;
}
th {
  background-color: var(--school-primary);
  color: #fff;
}
tr, td, th {
    border: 1px solid #FFF;
	border-collapse: collapse;
	width: 960px;
	padding: 8px;
}
tr:nth-child(even) {
  background-color: #eee;
}
tr:nth-child(odd) {
  background-color: #d8d8d8;
}
button {
    border: 0;
}


/* CURSOR CLASSES */
.pointer {
    cursor: pointer;
}


/* BLOCKGRID CLASSES */
.umb-block-grid__layout-item .block-wrapper > * {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
.block-wrapper {
    /*height: 100%;*/
}
.umb-block-grid__layout-item {
    position: absolute;
    height: 100%;
}
.umb-block-grid__layout-item .section-header {
    margin: 8px;
}
.umb-block-grid__layout-container {
    grid-column-gap: 12px !important;
    grid-auto-rows: auto !important;
    height: 100%;
}
.umb-block-grid__area {
    /* padding: calc(var(--umb-block-grid--grid-columns) * 4px); */
    padding: 12px !important;
}


/* SPACING AND ALIGNMENT CLASSES */
.flex {
    display: flex;
}
.row {
    flex-flow: row nowrap;
}
.column {
    flex-flow: column nowrap;
}
.pad-right {
    margin-right: auto;
}
.pad-left {
    margin-left: auto;
}
.align-left {
	text-align: left;
	align-items: flex-start !important;
}
.align-center {
	text-align: center;
	align-items: center !important;
}
.align-right {
	text-align: right;
	align-items: flex-end !important;
}
.justify-left {
	text-align: left;
	justify-content: flex-start !important;
}
.justify-center {
	text-align: center;
	justify-content: center !important;
}
.justify-right {
	text-align: right;
	justify-content: flex-end !important;
}
.rtf-top {
    justify-content: flex-start;
}
.rtf-centre {
    justify-content: center;
}
.rtf-bottom {
    justify-content: flex-end;
}


/* DISPLAY CLASSES */
.hidden {
    opacity: 0
}
.no-display {
    display: none;
}


/* FONT CLASSES */
.section-header {
    text-transform: uppercase;
    font-family: "Harmonia Sans W01 Black";
    font-size: 20px;
    color: var(--school-primary);
}
.sub-header {
    text-transform: uppercase;
    font-family: "Harmonia Sans W01 Black";
    font-size: 16px;
    color: var(--school-primary);
}
.quotation {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    font-size: 20px;
    padding: 16px 20px 16px 20px;
    color: #005981;
    background: linear-gradient(to right, var(--quotecolour) 2px, transparent 2px) 0 100%, linear-gradient(to left, var(--quotecolour) 2px, transparent 2px) 100% 0, linear-gradient(to bottom, var(--quotecolour) 2px, transparent 2px) 100% 0, linear-gradient(to top, var(--quotecolour) 2px, transparent 2px) 0 100%;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    max-width: 900px !important;
    --quotecolour: #005981;
}
.quotation::before {
    content: "\f10d";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 8px;
    position: absolute;
    top: -8px;
    left: -4px;
    font-size: 16px;
    color: var(--quotecolour);
}
.quotation::after {
    content: "\f10e";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 8px;
    position: absolute;
    bottom: -8px;
    right: -12px;
    font-size: 16px;
    color: var(--quotecolour);
}
.logoprefixed-header,
.logoprefixed-header-single {
    position: relative;
    display: inline-block;
}
.logoprefixed-header::before {
    content: '';
    background: url('/media/lecn0bwb/titlebefore.png') no-repeat center center/cover;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 14px;
    height: 100%;
    max-height: 50px;
    margin-left: -24px;
}
.logoprefixed-header-single::before {
    content: '';
    background: url('/media/azdeicv3/titlebeforesingle.png') no-repeat center center/cover;
    position: absolute;
    top: 2px;
    bottom: 0;
    left: -3px;
    width: 20px;
    height: 20px;
    max-height: 50px;
    margin-left: -24px;
}


/* BUTTON CLASSES */
.button {
    outline: 0;
    border-radius: 4px;
    text-decoration: none;
    text-transform: uppercase;
    font-family: "Harmonia Sans W05 Bold";
    color: black;
    margin: 4px;
    display: inline-block;
    width: fit-content;
    transition: 0.3s;
    cursor: pointer;
}
.button:hover {
    color: var(--school-accent) !important;
}
.button-small {
    padding: 8px 12px;
    font-size: 12px;
}
.button-medium {
    padding: 8px 16px;
    font-size: 16px;
}
.button-large {
    padding: 12px 32px;
    font-size: 20px;
}
.button-massive {
    padding: 16px 36px;
    font-size: 24px;
}
.border-button {
    border: 2px solid white;
}
.border-button:hover {
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--school-primary) !important;
}
.button.school-primary-bg {
    color: white;
}


/* BACKGROUND CLASSES */
.fixed-background {
    width: 100%;
    background-size: 70rem;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


/* RTE CLASSES */
.media-left {
    float: left;
    margin: 8px 12px 0 0
}
.media-right {
    float: right;
    margin: 8px 0 0 12px;
}
.grey-rte-bg {
    background-color: #D3D3D3;
    padding: 4px;
}
.let-primary-rte-bg {
    background-color: var(--lht-primary-colour);
    padding: 4px;
}
.let-secondary-rte-bg {
    background-color: var(--lht-secondary-colour);
    padding: 4px;
}
.rtf-wrapper {
    margin: var(--block-spacing);
}


/* PAGE INTRODUCTION CLASSES */
.page-introduction {
    width: 100%;
    position: relative;
}
.page-introduction > img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    object-position: center 25%;
}
.page-introduction + section {
  padding-top: 24px;
}


/* OVERLAY CLASSES */
.tint {
    background-color: rgba(29, 29, 29, 0.5);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.white-tint {
    background-color: rgba(255, 255, 255, 0.5);
}


/* STAFF PROFILE CLASSES */
.su-container {
    position: relative;
    cursor: pointer;
    margin: var(--block-spacing);
}
.su-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.7);
    overflow: hidden;
    width: 100%;
    height: 15%;
    transition: .5s ease;
}
.su-text {
    color: black;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -20%);
    transition: .5s ease;
    width: 100%;
    padding: 0 8px;
    box-sizing: border-box;
}
.su-container:hover .su-overlay {
    height: 100%;
}
.su-container:hover .su-text {
	transform: translate(-50%, -50%);
    transition: .5s ease;
}


/* MENU CLASSES */
nav {
    --menu-height: 84px;
    width: 100%;
    height: var(--menu-height);
    display: flex;
    align-items: stretch;
    justify-content: center;
    z-index: 100;
    top: 0;
    background-color: var(--school-primary);
    color: white;
    flex-shrink: 0;
    flex-grow: 0;
}
.menubar {
    display: flex;
    align-items: stretch;
    padding: 0;
    margin: 0 160px;
    flex-flow: row nowrap;
    flex-grow: 1;
    justify-content: center;
}
.menubar > li, .contact {
    cursor: pointer;
    display: flex;
    align-items: center;
}
.menubar * {
    text-decoration: none;
    list-style: none;
}
.menu-logo {
    width: 170px;
    padding: 0 8px;
}
.menubar > li > span, 
.menubar > li > a, 
.contact > a {
    font-family: "Harmonia Sans W01 Black";
    text-transform: uppercase;
    font-size: 16px;
    text-align: center;
    padding: 0 12px 0 12px;
    text-decoration: none;
    color: white;
}
.menubar > li > .burgermenu-icon {
    display: none;
}
.dropdown-menu > span > i {
    font-weight: 900;
    padding-left: 4px;
}
.dropdown {
    display: block;
    position: absolute;
    background-color: var(--school-primary);
    z-index: 10;
    top: var(--menu-height);
    left: auto;
    width: auto;
    min-width: 235px;
    overflow: hidden;
    text-align: center;
    max-height: 0;
    transition: max-height 0s ease;
}
.dropdown-menu.active > .dropdown {
    transition: max-height 1s ease;
    max-height: 500px;
    overflow: visible;
    animation: 1s delay-overflow;
}
.dropdown-content,
.section-links {
    display: flex;
    padding: 16px 0 0 0;
    width: 100%;
    flex-flow: column wrap;
    align-content: flex-start;
}
.dropdown-content > li,
.section-links > li {
    padding: 0 20px 16px 20px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
}
.dropdown-content a,
.dropdown-content span {
    text-decoration: none;
    color: white;
    margin-bottom: 4px;
    font-family: 'Barlow Regular';
    font-size: 16px;
    font-weight: 900;
    display: block;
    width: 100%;
    text-align: left;
    position: relative;
}
.dropdown-content span::after {
    position: absolute;
    right: 0;
    font-family: "Font Awesome 5 Free";
    content: '\f054';
}
.dropdown-menu {
    background-color: var(--school-primary);
}
.dropdown-menu:hover,
.dropdown-menu.active {
  filter: brightness(0.9);
}
.section-links {
    visibility: hidden;
    opacity: 0;
    min-width: 220px;
    background-color: var(--school-primary);
    position: absolute;
    transition: 200ms;
    transition-delay: 200ms;
    top: -16px;
    left: 100%;
    transform: translate(0);
    margin-left: 1px;
}
.dropdown-content li:hover > .section-links {
    opacity: 1;
    visibility: visible;
}
.mobile-menu-sidebar {
    display: none;
}
#trust-mobile-logo {
    display: none;
}


/* SEARCH FORM CLASSES */
.search-form {
    visibility: hidden;
    position: absolute;
    z-index: 25;
    top: 96px;
    right: 8px;
    padding: 12px 20px 12px 20px;
    background: rgba(0,0,0,.7);
    border-radius: 4px;
    opacity: 0;
}
.search-form.form-show {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s, opacity 0.3s linear;
}
.search-form > form {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}
.search-form input[type="text"] {
    width: 240px;
    color: #333;
    border-radius: 4px;
    border: 1px solid var(--school-primary);
    font-size: 16px;
    font-family: 'Barlow Regular';
    padding: 4px 8px;
}


/* SEARCH PAGE CLASSES */
.search-form {
    visibility: hidden;
    position: absolute;
    z-index: 25;
    top: 95px;
    right: 8px;
    padding: 12px 20px 12px 20px;
    background: rgba(0,0,0,.7);
    border-radius: 4px;
    opacity: 0;
}
.search-content {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}
.search-content > form {
    display: flex;
    flex-flow: column nowrap;
    margin: 28px 0 14px 0;
    align-items: center;
}
.search-content > * {
    width: 960px;
}
.search-content > form > input[type="text"] {
  font-family: 'Barlow Regular';
  border: none;
  border-bottom: 1px solid var(--school-primary);
  padding: 8px 4px 8px 4px;
  color: #333;
  font-size: 16px;
  width: 100%;
}
.search-results {
    display: flex;
    flex-flow: column nowrap;
}
.search-header {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}
.search-results > .result {
    box-shadow: 16px 16px 16px -16px rgba(0,0,0,.15);
    border: 1px solid #e7e7e8;
    margin: 8px 0 8px 0;
    padding: 24px;
    border-radius: 4px;
    transition: .1s;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
}
.search-results > .result > a {
    text-decoration: none;
    text-transform: uppercase;
    font-family: "Harmonia Sans W05 Bold";
    color: var(--school-primary);
}
.search-results > .result > * {
    max-width: fit-content;
}
.search-results > .result > .button {
    margin: 16px 0 0 0;
}
.search-results > .pagination {
    align-self: center;
    margin: 24px 0 24px 0;
}
.search-results > .pagination > a {
    color: var(--school-primary);
    padding: 8px 12px 8px 12px;
    text-decoration: none;
    border: 1px solid var(--school-primary);
    font-family: "Harmonia Sans W05 Bold";
    border-radius: 4px;
    font-size: 16px;
}
.search-results > .pagination > a.active {
    background-color: var(--school-primary);
    color: rgba(255,255,255,.8);
    border: 1px solid var(--school-primary);
}
.page-count {
    white-space: nowrap;
}


/* BREADCRUMB CLASSES */
ul.breadcrumbs {
    display: flex;
    list-style-type: none;
}
ul.breadcrumbs li {
    font-size: 16px;
    margin-right: 4px;
}
ul.breadcrumbs li::after {
    content: '\f054';
    font-family: "Font Awesome 5 Free";
    padding: 4px;
    font-weight: 700;
    font-size: 12px;
}
ul.breadcrumbs li:last-child::after {
    content: '';
    padding: 0;
}


/* FOOTER CLASSES */
footer {
    width: 100%;
    border-top: solid #999 1px;
    margin-top: 48px;
}
footer .footer-main {
    background: #ffffff;
}
footer > section {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
footer > section > div {
    width: 950px;
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
}
footer .footer-main > div {
    margin: 16px 0 16px 0;
}
.school-logos {
    display: flex;
    flex-flow: row;
    width: 90%;
    justify-content: space-evenly;
}
footer .footer-main a {
    color: #444;
}
footer a {
    text-decoration: none;
}
footer p, footer a {
    margin: 4px 0 4px 0;
    font-family: 'Barlow Regular';
    letter-spacing: -0.8px;
    font-size: 16px;
}
.school-logos > a > img {
    height: 80px;
    cursor: pointer;
}
.school-logos > a > img:hover {
    transition: .3s;
    transform: scale(1.2);
}
footer .footer-legal {
    background: #333333;
    height: 32px;
    align-items: center;
}
footer .footer-legal > div {
    display: flex;
    justify-content: space-between;
}
footer .footer-legal * {
    color: #999;
}
.footer-legal p, .footer-legal a {
    font-size: 12px;
}
.footer-legal ul {
    display: flex;
    margin: 0;
}
footer li {
    list-style: none;
}
.footer-legal ul li:not(:last-child)::after {
    content: "|";
    margin: 8px;
}
footer .footer-partners {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    padding: 16px;
    /*border-top: solid #999 1px;*/
}
.footer-partners img {
    max-height: 100px;
    padding: 0 12px 0 12px;
}


/* SECTION PAGES */
.trust-section {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-around;
    min-height: 175px;
    background-size: 800px;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
#directory-page ~ footer {
    margin-top: 0;
}
.trust-section h3 {
    text-align: center;
    margin: 12px;
    padding-bottom: 4px;
}
.trust-section a h3 {
    position: relative;
    text-decoration: none;
}
.trust-section a h3::before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 3px;
    bottom: 0;
    left: 0;
    background-color: var(--school-primary);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}
.trust-section a h3:hover::before {
    transform: scaleX(1);
}




/* I DON'T KNOW */
.caption {
    position: absolute;
    bottom: 8px;
    background-color: rgba(255, 255, 255, 0.7);
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}
.caption > h5 {
    color: black;
    font-family: Harmonia Sans W05 Regular;
    letter-spacing: 1px;
    text-transform: none;
    font-size: 18px;
}


/* HOME PAGE CLASSES */
.landing-video {
    object-fit: cover;
    max-width: 100%;
    height: 680px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.recent-news-images {
    position: absolute;
    right: 0;
    bottom: -4%;
    padding-right: 12px;
    display: flex;
    width: auto !important;
    height: 33%;
}
@media screen and (min-width: 2000px) {
    .recent-news-images {
        height: 33%;
    }
}
.recent-news-images > a {
    height: 100%;
    aspect-ratio: 1;
    margin: 0 8px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.recent-news-images img {
    height: 100%;
    object-fit: cover;
    position: absolute;
}
.recent-news-images h4 {
    color: white;
    z-index: 1;
    padding: 0 8px;
    text-align: center;
}
.recent-news-images > h3 {
    position: absolute;
    bottom: 8px;
    width: 100%;
    background: rgba(0, 89, 129, 0.8);
    text-align: right;
    padding: 4px 40px 4px 40px;
    box-sizing: border-box;
    color: white;
    font-size: 28px;
    text-align: left;
}
.home-content {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}
.home-content > section {
    width: 80%;
    margin: 16px 0;
}
.home-content > section > * {
    width: 100%;
}
.home-content > .intro-content {
    margin: 48px 0;
}
.home-content .umb-block-grid__layout-item .block-wrapper > * {
    max-width: 1354px;
}
.home-content > .landing {
  width: 100%;
  margin: 0;
  position: relative;
  display: flex;
  height: 680px;
  align-items: center;
  justify-content: center;
}
.landing-video-content {
  z-index: 10;
  width: 80% !important;
}
.landing-video-content * {
  color: white;
}
.landing-video-content > h1 {
    font-size: 40px;
}
.landing-video-content > p {
    font-size: 24px;
    width: 900px;
}


/* LEGACY HOME NEWS FEED CLASSES */
.home-news,
.home-events {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.home-events .button {
    width: 100px;
}
.home-news .button {
    width: 75px;
}
.home-news > div,
.home-events > div {
    display: flex;
    flex-flow: row nowrap;
}
.home-article {
    margin: 0 8px;
    box-shadow: 0 0 10px 0 rgba(0,0,0,.15);
    border-radius: 2px;
}
.home-article img {
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}
.home-article a > p:last-child {
    font-weight: bold;
}
.home-article a > p:last-child::after {
    font-family: "Font Awesome 5 Free";
    content: '\f054';
    margin-left: 12px;
}
.home-news .button {
    margin-top: 8px;
}
.home-event {
    position: relative;
    width: 25%;
    padding: 16px 24px;
    margin: 32px auto;
    background: var(--school-secondary); /* #007CB4 */
}
.home-event * {
    color: white;
}
.home-event:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-width: 0 20px 20px 0;
    border-style: solid;
    border-color: #3b7692 #fff;
}
.home-event h5 {
    margin: 0 0 8px 0;
}
.home-event > p {
    margin: 0;
}


/* SCHOOL PROFILE CLASSES */
.school-profile {
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    margin: var(--block-spacing);
    background-color: var(--school-secondary);
    border-top-right-radius: 48px;
    border-bottom-right-radius: 48px;
}
.school-profile > .sp-image {
    max-width: 33%;
    position: relative;
    flex-basis: 30%;
}
.school-profile > div {
    display: flex;
    flex-flow: column nowrap;
    flex-basis: 70%;
}
.school-profile > div > h3 {
    color: white;
    margin: 16px;
}
.sp-content {
    background-color: white;
    border-top-right-radius: 48px;
    border-bottom-right-radius: 48px;
    flex-grow: 1;
    margin: 0 12px 12px 0;
    padding: 0 40px 8px 12px;
    position: relative;
}
.sp-contact > p {
    margin: 0;
}
.sp-sm {
    position: absolute;
    right: 16px;
    bottom: 8px;
    display: flex;
    flex-flow: row nowrap;
}
.sp-sm img {
    width: 40px;
    margin: 0 4px;
}
.sp-image {
    cursor: pointer;
}
.sp-image > img {
    height: 100%;
    object-fit: cover;
}
.sp-image > .tint img {
    width: 125px;
    margin: 8px 8px;
}
.sp-image > .tint {
    transition: 0.3s;
}
.sp-image:hover > .tint {
    opacity: 1;
    transition: 0.3s;
}
.sp-image .sp-overlay {
    position: absolute;
    bottom: 4px;
    width: 150px;
    right: 4px;
}


/* DIVIDER CLASSES */
.divider {
    margin: var(--block-spacing);
    height: 1.5px;
    border: none;
}


/* HEADLINE CLASSES */
.headline-wrapper {
    margin: var(--block-spacing);
}


/* BG IMAGE CLASSES */
.image-wrapper {
    margin: var(--block-spacing);
}


/*  MODAL CLASSES */
.modal-cover {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
	visibility: hidden;
	opacity: 0;
	background: rgba( 0, 0, 0, 0.5 );
}
.modal-active .modal-cover {
	visibility: visible;
	opacity: 1;
}
.modal-popup {
	box-sizing: border-box;
	position: absolute;
	left: 50%;
	top: 50%;
	width: 380px;
	height: 220px;
	margin: -130px 0 0 -190px;
	visibility: hidden;
	opacity: 0;
	z-index: 10;
	padding: 20px;
	box-shadow: 0px 0px 20px rgba( 0, 0, 0, 0.5 );
	border-radius: 3px;
	transform: scale( 0.8 );
    background-color: white;
}
.modal-popup.angled {
	border-radius: 0;
	width: 600px;
	height: 300px;
	margin: -170px 0 0 -300px;
	border-top-left-radius: 50px;
	border-bottom-right-radius: 50px;
}
.modal-active .modal-popup-animate {
	visibility: visible;
	opacity: 1;
	transform: scale( 1.1 );
}
.modal-popup.stack {
	transform: scale( 1.5 );
}
.modal-active .modal-popup.stack {
	transform: scale( 1.1 );
}
.modal-ready .modal-popup,
.modal-ready .modal-cover {
	transform-origin: 50% 50%;
	transition: 0.2s all linear;
}
.modal-ready .modal-popup.no-transition {
	transition: none;
}
.modal-popup.master {
    position: fixed;
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.modal-popup.master::-webkit-scrollbar {
    display: none;
}


/* STAFF PROFILE STYLINGS */
.staff-profile {
    height: 300px;
}
.staff-profile > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    border-radius: 2px;
}
.staff-profile h5 {
    color: black;
    margin: 8px 0;
    font-family: Harmonia Sans W05 Regular;
    letter-spacing: 0.6px;
}
.staff-popup {
    display: flex;
    flex-flow: row nowrap;
}
.staff-popup .modal-close {
    position: sticky;
    top: 0;
    right: 0;
    color: var(--school-primary);
    font-size: 24px;
    cursor: pointer;
    margin: 0 0 0 auto;
}
.staff-popup > img {
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;
    height: 100%;
}
.staff-popup > div {
    margin: 0 16px;
}
.staff-popup p {
    font-size: 13px;
    line-height: 16px;
}


/* IMAGE BUTTON CLASSES */
.image-button {
    display: flex;
    width: 100%;
    overflow: hidden;
    position: relative;
    container: imagebutton / inline-size;
    border-radius: 2px;
    margin: var(--block-spacing);
}
.image-button > img {
    width: 100%;
    transition: transform .2s;
}
.image-button:hover > img {
    transform: scale(1.2);
    transition: transform .2s;
}
.image-button, .image-button p {
    color: white;
    font-family: "Harmonia Sans W05 Semi Bold";
}
.image-button.section-page {
    max-width: 350px;
}
@container imagebutton (min-width: 400px) {
    span {
        font-size: 44px;
    }
    p {
        font-size: 24px;
    }
}
@container imagebutton (max-width: 300px) {
    span {
        font-size: 32px;
    }
    p {
        font-size: 20px;
    }
}
@container imagebutton (max-width: 250px) {
    span {
        font-size: 24px;
    }
    p {
        font-size: 16px;
    }
}


/* NEWS PAGE CLASSES */
.article-list {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    margin-top: 75px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
.news-banner {
    position: relative;
    width: 1280px;
    height: 350px;
    overflow: hidden;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 4px;
    margin-left: auto;
    margin-right: auto;
}
.news-banner > img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.listed-article {
    width: 220px;
    margin: 8px 8px;
    position: relative;
}
.listed-article a {
    display: flex;
    flex-flow: column nowrap;
    position: relative;
    height: 100%;
}
.listed-article .article-text {
    background: rgba(0, 89, 129, 0.5);
}
.listed-article p {
    margin: 0;
}
.article-text {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    padding: 8px;
    text-align: center;
    min-height: 85px;
    flex-grow: 1;
}
.article-text p {
    color: white;
}
.article-image {
    height: 225px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-top-right-radius: 50px;
    position: absolute;
}
.article-image .tint {
    border-top-right-radius: 50px;
}
.article-image h4 {
    z-index: 100;
    color: white;
    padding: 0 12px;
}
.article-text > p:nth-child(1) {
    font-size: 12px;
}
.article-text > p:nth-child(2) {
    font-weight: 400;
}
.news-article-container {
    width: 1080px;
    margin: 16px auto 0 auto;
}
.article-date {
    font-family: 'Barlow Regular';
    color: #333;
    line-height: 1.4rem;
    font-size: 12px;
    font-weight: 700;
}


/* EVENT TILE CLASSES */
.event-tile-wrapper {
    margin: var(--block-spacing);
}
.event-tile {
    height: 200px;
    width: 200px;
    display: flex;
    flex-flow: column nowrap;
    border-radius: 24px;
    align-items: center;
    box-sizing: border-box;
    padding: 12px;
    cursor: pointer;
    user-select: none;
    position: relative;
}
.event-tile::after {
    content: "";
    opacity: 0.2;
    top: 0;
    left: 45px;
    bottom: 0;
    right: 0;
    position: absolute;
    background-size: cover;
    news
}
.event-tile > * {
    color: white;
    text-align: center;
}
.event-tile > div {
    height: 75px;
    width: 75px;
    background-color: white;
    align-self: flex-start;
    border-radius: 8px;
    margin-top: auto;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    padding: 4px;
    box-sizing: border-box;
}
.event-tile > div p {
    margin: 0;
    user-select: none;
}
.event-tile > div p:first-of-type {
    font-weight: bold;
    color: darkred;
    margin: 2px 0 2px 0;
    font-size: 12px;
}
.event-tile > div p:nth-of-type(2) {
    font-weight: bold;
    color: black;
    font-size: 20px;
}
.event-popup {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
}
.event-popup > img {
    width: 85px;
}
.event-popup > div:not([class]) {
    width: 100%;
    margin-left: 20px;
}
.event-popup > div * {
    color: white;
}
.event-popup .button {
    margin: 0;
}


/* INFORMATION TILE CLASSES */
.info-tile {
    background-color: var(--school-primary);
    position: relative;
    height: 200px;
    width: 200px;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 12px;
    cursor: pointer;
    text-align: center;
    position: relative;
    border-radius: 4px;
    user-select: none;
    margin: var(--block-spacing);
}
.info-tile * {
    color: white;
}
.info-tile h3 {
    font-size: 72px;
}
.info-tile .tooltiptext {
    visibility: hidden;
    width: 400px;
    background-color: var(--school-secondary);
    color: #fff;
    text-align: center;
    padding: 12px;
    position: absolute;
    z-index: 1;
    top: 205px;
    left: 50%;
    margin-left: 0px;
    max-width: none !important;
    border-radius: 0;
    border-top-right-radius: 50px;
    border-bottom-left-radius: 50px;
}
.info-tile .show {
    visibility: visible;
    animation: fadeIn 0.5s;
}
.info-popup {
    width: 500px !important;
    height: 250px !important;
    margin: -145px 0 0 -250px !important;
}
.info-popup,
.info-popup p {
    color: white;
}
.info-popup .modal-close {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 24px;
    cursor: pointer;
}


/* IMAGE WITH CONTENT CLASSES */
.iwc-text {
    box-sizing: border-box;
    padding: 12px;
}


/* CALENDAR LIST CLASSES */
.cel-date {
    position: relative;
    display: inline-block;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    border: 1px solid #cccccc;
    box-shadow: 0px 1px 0px 0px #bbbbbb;
    background-color: #ffffff;
    text-align: center;
    line-height: 1;
    font-size: 12px;
}
.cel-date span:first-child {
    border-radius: 8px 8px 0px 0px;
    padding: 2px 0 2px 0;
    background-color: var(--school-primary);
    color: #EEEEEE;
    font-size: 16px;
    font-weight: bold;
    position: relative;
    display: block;
}
.cel-date span:nth-child(2) {
    font-size: 16px;
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    color: #555555;
}
.cel-date span:last-child {
    font-size: 16px;
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    color: #555555;
}
.cel-close {
    position: sticky;
    top: 0;
    right: 0;
    cursor: pointer;
    font-size: 16px;
}


/* TIMELINE CLASSES */
section.timeline {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    margin-bottom: 80px;
}
.tl-event {
    position: relative;
    width: 600px;
}
.tl-event:nth-child(odd) {
    padding: 11px 0 11px 15px
}
.tl-event:nth-child(odd) img {
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
    margin-right: 20px;
}
.tl-event:nth-child(even) {
    padding: 15px 15px 15px 0;
}
.tl-event:nth-child(even) img {
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    margin-left: 20px;
}
.tl-event:first-child .tl-event-info > img {
    border-top-left-radius: 4px;
}
.tl-event:last-child:nth-child(odd) .tl-event-info > img {
    border-bottom-left-radius: 4px;
}
.tl-event:last-child:nth-child(even) .tl-event-info > img {
    border-bottom-right-radius: 4px;
}
.tl-event::before {
    content: "";
    position: absolute;
    width: 50%;
    border: solid var(--school-primary);
}
.tl-event:nth-child(odd)::before {
    left: 0px;
    top: -4.5px;
    bottom: -4.5px;
    border-width: 5px 0 5px 5px;
    border-radius: 50px 0 0 50px;
}
.tl-event:nth-child(even)::before {
    right: 0;
    top: 0;
    bottom: 0;
    border-width: 5px 5px 5px 0;
    border-radius: 0 50px 50px 0;
}
.tl-event:first-child::before {
    border-top: 0;
    border-top-left-radius: 0;
}
.tl-event:last-child:nth-child(odd)::before {
    border-bottom: 0;
    border-bottom-left-radius: 0;
}
.tl-event:last-child:nth-child(even)::before {
    border-bottom: 0;
    border-bottom-right-radius: 0;
}
.tl-event-info {
    display: flex;
    flex-direction: column;
    color: white;
    border-radius: 4px;
}
.tl-event-info > img {
    border-radius: 4px;
    height: 250px;
    object-fit: cover;
}
.tl-event-info > .blurb {
    background-color: var(--school-primary);
    border-radius: 50%;
    height: 100px;
    width: 100px;
    box-sizing: border-box;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    padding: 8px;
    position: absolute;
    cursor: pointer;
    top: calc(50% - 50px);
    text-align: center;
}
.tl-event-info > .blurb > * {
    color: white;
}
.tl-event-info > .blurb > h4 {
    margin-bottom: 4px;
}
.tl-event-info > .blurb > p {
    font-size: 12px;
    margin: 0;
    line-height: 1;
}
.tl-event:nth-child(even) .blurb {
    right: -50px;
}
.tl-event:nth-child(odd) .blurb {
    left: -50px;
}
.tl-event:first-child .blurb {
    height: 125px;
    width: 125px;
    left: -62px;
    top: 25%;
}
.tl-icons {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-evenly;
    width: 100%;
    max-height: 35px;
}
.tl-icons > img {
    margin: 1px !important;
    min-height: 30px;
}
.tl-event > .tooltiptext {
    visibility: hidden;
    position: absolute;
    width: 300px;
    top: 50%;
    box-sizing: border-box;
    padding: 12px;
    background-color: var(--school-secondary);
}
.tl-event > .tooltiptext * {
    color: white;
}
.tl-event:nth-child(odd) > .tooltiptext {
    left: -365px;
    border-bottom-right-radius: 50px;
    border-top-left-radius: 50px;
    text-align: right;
    padding-right: 20px;
}
.tl-event:nth-child(even) > .tooltiptext {
    right: -365px;
    border-bottom-left-radius: 50px;
    border-top-right-radius: 50px;
    text-align: left;
    padding-left: 20px;
}
.tl-event:first-child > .tooltiptext {
    left: -375px;
}
.tl-event:nth-child(even) > .tooltiptext::after {
    content: "";
    position: absolute;
    top: 0;
    left: -9px;
    border-width: 10px 0 0 10px;
    border-style: solid;
    border-color: var(--school-secondary) var(--school-secondary) transparent transparent;
}
.tl-event:nth-child(odd) > .tooltiptext::after {
    content: "";
    position: absolute;
    top: 0;
    right: -9px;
    border-width: 10px 10px 0 0;
    border-style: solid;
    border-color: var(--school-secondary) transparent transparent;
}
.tl-event .show {
    visibility: visible;
    animation: fadeIn 0.5s;
}
.tl-event-info h5 {
    font-size: 14px;
    margin-bottom: 4px;
}
.tl-event:first-child h5 {
    font-size: 16px;
}


/* SVG TIMELINE CLASSES */
.svg-timeline {
    width: 95%;
    height: 95vh;
    min-height: 95vh;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
}
.svg-timeline .background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    opacity: 0;
    line-height: 200px;
    text-align: center;
}
.timeline-content {
    position: relative;
    text-align: center;
    overflow: auto;
    height: 100%;
    -ms-overflow-style: none;
    scrollbar-width: none;
    width: 80%;
    margin: 0 auto 0 auto;
}
.timeline-content:-webkit-scrollbar {
	display: none;
}



/* TRUST EVENTS PAGE CLASSES */
section.calendars-alt {
    display: flex;
    flex-flow: row wrap;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    justify-content: center;
    align-items: center;
}
section.calendars-alt > div:not(.modal-popup) {
    flex-basis: 20%;
}
section.calendars-alt .event-tile-wrapper {
    display: flex;
    justify-content: center;
}
section.calendars {
    display: flex;
    flex-flow: row nowrap;
    width: 90%;
    margin: 0 auto 40px auto;
}
section.calendars table,
section.calendars h3 {
    margin: 0 8px;
}
section.calendars .context-date {
    opacity: 0.5;
}
section.calendars table {
    width: 100%;
}
section.calendars td {
    height: 75px;
}
section.calendars td > div {
    height: 100%;
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    position: relative;
}
section.calendars td > div > span {
    position: absolute;
}
section.calendars td > div h5 {
    font-weight: 300;
}
section.calendars th {
    width: 14%;
}
section.calendars > div {
    box-sizing: border-box;
    padding: 8px;
}
section.calendars .fas.fa-info-circle {
    color: var(--school-accent);
    margin-left: 2px;
    display: inline;
}
section.calendars td p {
    font-weight: bold;
    user-select: none;
    cursor: pointer;
    text-indent: 20px;
    margin-top: 4px;
}
.events-modal {
    display: flex;
    flex-flow: column nowrap;
    width: 600px !important;
    height: 400px !important;
    margin: -220px 0 0 -300px !important;
    padding: 16px !important;
}
.events-modal > div > div {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}
.events-modal .active {
    display: flex;
    flex-flow: column nowrap;
}
.events-modal-control {
    cursor: pointer;
    display: flex;
    flex-flow: row nowrap;
    justify-content: end;
}
.events-modal-control.hidden {
    display: none;
}
.events-modal-control a {
    margin: 0 4px;
    font-size: 20px;
}
.event-modal-button {
    bottom: 8px;
    position: absolute;
}
.event-title {
    font-size: 12px;
    line-height: 14px;
    margin: 0;
}
.event-title span:nth-child(2) {
    padding-left: 8px;
    box-decoration-break: clone;
    font-size: 14px
}
.event-slide > span {
    font-family: 'Barlow Regular';
    font-size: 14px;
}


/* GALLERY CLASSES */
.page-gallery, .page-gallery * {
    max-height: none !important;
}
.grid-sizer,
.grid-item {
    width: 30%;
}
.grid-image {
    opacity: 0;
    transition: opacity .6s ease-in-out;
    display: block;
    width: 100%;
    height: auto !important;
    cursor: pointer;
    padding: 4px;
}


/* ACCORDION CLASSES */
.accordion-wrapper {
    display: flex;
    flex-flow: row nowrap;
    margin: var(--block-spacing);
}
.accordion-wrapper .accordion-master-icon {
    flex-basis: 25%;
    flex-grow: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.accordion-header {
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    transition: 0.4s;
    display: flex;
    padding: 4px;
    align-items: center;
    min-height: 60px;
    background-color: transparent;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    border-bottom: white 1px solid;
}
.accordion-header::after {
    content: "\f107";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 16px;
}
.accordion-header.active::after {
    content: "\f106";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 16px;
}
.accordion .accordion-header:last-of-type {
    margin-bottom: 8px;
}
.accordion-header > h5 {
    flex-grow: 1;
    font-size: 16px;
    margin-left: 8px;
    align-self: center;
    color: white;
}
.accordion-content {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: transparent;
}
.accordion-content * {
    color: white;
}
.accordion-header > img {
    height: 45px;
}
.accordion-header > .accordion-main-icon {
    height: 55px;
    margin-left: 16px;
    margin-right: 8px;
}


/* VIDEO HEADER CLASSES */
.page-introduction .blockgrid-image,
.page-introduction iframe {
    width: 100%;
    height: 350px;
    object-fit: cover;
}
.video-background {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 350px;
    margin-bottom: 4px;
}
.video-background iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 350px;
    transform: translate(-50%, -50%);
}
@media (min-aspect-ratio: 16/9) {
    .video-background iframe {
        /* height = 100 * (9 / 16) = 56.25 */
        height: 56.25vw;
    }
}
@media (max-aspect-ratio: 16/9) {
    .video-background iframe {
        /* width = 100 / (9 / 16) = 177.777777 */
        width: 177.78vh;
    }
}


/* ANIMATED HEADER CLASSES */
.animated-header-container {
    position: relative;
    width: 100%;
    height: 350px;
    background: radial-gradient(ellipse at center, rgba(149, 192, 215, 1) 0%, rgba(149, 192, 215, 1) 25%, #005981 100%);
    overflow: hidden;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
}
.animated-header-container .ahc-inner {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    width: 1280px;
}
.ocean {
    height: 5%;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #4b94bb;
}
.wave {
    background: url(/media/fn3jmd5p/wave8.svg) repeat-x;
    position: absolute;
    top: -198px;
    width: 6400px;
    height: 198px;
    animation: wave 24s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
    transform: translate3d(0, 0, 0);
    max-width: none !important;
}
.wave:nth-of-type(2) {
    top: -175px;
    animation: wave 24s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -1s infinite, swell 24s ease -1.25s infinite;
    opacity: 1;
}
.animated-header-image-container {
    position: relative;
    animation: slideInFromRight 0.5s ease-out 0s 1;
    z-index: 10;
}

.animated-header-image-container .main-image {
    height: 300px;
    width: 300px;
    object-fit: cover;
}
.animated-header-image-container .second-image {
    height: 175px;
    width: 175px;
    object-fit: cover;
    position: absolute;
    left: -125px;
    bottom: 16px;
}


.animated-header-text {
    position: relative;
    color: white;
    width: 400px;
    animation: fadeIn 1.75s;
    padding: 12px;
}
.animated-header-text.no-image {
    /*margin-left: 275px;*/
    padding: 12px 0px !important;
    width: 100% !important;
}
.animated-header-text * {
    color: white;
}
.animated-header-text .section-header {
    margin: 0 !important;
}
.animated-header-text:last-child {
    padding: 12px 40px;
    width: 600px;
}


/* SLIDESHOW CLASSES */
.slideshow,
.slideshow * {
    box-sizing: border-box
}
.slideshow {
    max-width: 100% !important;
    position: relative;
    margin: var(--block-spacing);
    margin-right: auto;
    margin-left: auto;
    width: 720px !important;
}
.slideshow-slide {
    display: none;
    position: relative;
    animation-name: slideshow-fade;
    animation-duration: 1.5s;
}
.slideshow-prev, 
.slideshow-next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}
.slideshow-next {
    right: 0;
    border-radius: 3px 0 0 3px;
}
.slideshow-prev:hover,
.slideshow-next:hover {
    background-color: rgba(0,0,0,0.8);
}
.slideshow-slide > span {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
    font-family: 'Barlow Regular';
    background-color: rgba(9,9,9,.5);
    font-weight: 700;
}
.slideshow-slide img {
    vertical-align: bottom;
}
.slideshow-dots {
    text-align: center;
    margin-top: 8px;
}
.slideshow-dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}
.slideshow-active,
.slideshow-dot:hover {
    background-color: #717171;
}
.slideshow-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: rgba(9, 9, 9, 0.5);
}
.slideshow-slide:hover .slideshow-overlay {
    opacity: 1;
}
.slideshow-overlay > p {
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}


/* BLOG CLASSES */
.blog {
    margin: 20px auto;
    padding: 0;
    display: flex;
    flex-flow: column nowrap;
    flex-grow: 1;
    align-items: center;
}
.blog > section:not(.page-introduction) {
    width: 80%;
}
.blog-featured {
    display: grid;
    grid-gap: 48px;
    grid-template-columns: 1.5fr 1fr;
    background-color: #fff;
    color: #444;
    grid-template-rows: 300px 300px;
}
.blog-featured * {
    max-height: 100%;
}
.blog-featured > article {
    display: flex;
    flex-flow: column nowrap;
    overflow: clip;
}
.blog-featured > article#latest {
    grid-column: 1;
    grid-row: 1 / span 2;
}
.blog-featured > article#latest img {
    height: 500px;
}
.blog-featured > article#two {
    grid-column: 2;
    grid-row: 1;
}
.blog-featured > article#third {
	grid-column: 2;
	grid-row: 2;
}
.blog-featured > article img {
    border-radius: 4px;
    max-height: 70%;
    width: 100%;
    object-fit: cover;
    object-position: 50% 25%;
}
.blog-featured > article p {
    margin: 0;
}
.blog-featured > div {
    display: flex;
    flex-flow: column nowrap;
	grid-column: 2;
	grid-row: 2;
}
.blog-featured span,
.blog-recent span {
    text-decoration: none;
    font-size: 16px;
}
.blog-featured *:hover,
.blog-recent *:hover {
    color: var(--school-primary) !important;
}
.blog-featured h3 {
    font-size: 20px;
}
.blog-recent {
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
    margin-top: 36px;
}
.blog-recent > article {
    flex-basis: 30%;
}
.blog-recent > article img {
    border-radius: 4px;
}
.blog-recent > article p {
    margin: 0;
}
.blog-listpage {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
.blog-title {
    display: inline-block;
    margin: 120px 20px 0px 20px;
    text-align: right
}
.blog-title h1 {
    font-size: 36px;
    margin: 0;
    padding: 0;
    line-height: 1;
    color: #444444;
}
.blog-title h2 {
    font-size: 16px;
    margin: 12px 0 0 0;
    padding: 0;
    line-height: 1;
    color: #444444;
}
.blog-external-links {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    position: absolute;
    left: 10px;
    margin: 15px;
    bottom: 30px;
    right: 40px;
}
.blog-external-link {
    padding: 8px;
    box-sizing: border-box;
    font-size: 28px;
    color: #444444;
}
.blog-side {
    width: 30%;
    max-width: 350px;
    height: 100%;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
}
.blog-side-spacer {
    display: block;
}
.blog-side-content {
    position: fixed;
    height: 100%;
    width: 30%;
    max-width: 350px;
    top: 0;
    text-align: right;
    background-size: cover;
    background-repeat: repeat-y;
    background-color: #f5f5fa;
}
.blog-posts {
    margin: 12px 24px;
    flex-grow: 1;
}
.blog-post-listitem {
    padding: 30px 2% 50px 8%;
    cursor: pointer;
    display: flex;
    flex-flow: row nowrap;
}
.blog-post-listitem:hover {
    background-color: #f5f5fa;
}
.blog-post-listitem span {
  font-family: 'Barlow Regular';
}
.blog-listitem-date {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid #cccccc;
    box-shadow: 0px 1px 0px 0px #bbbbbb;
    background-color: #ffffff;
    text-align: center;
    line-height: 1;
    font-size: 12px;
}
.blog-listitem-date span:first-child {
    border-radius: 8px 8px 0px 0px;
    padding: 1px 0 1px 0;
    background-color: var(--school-primary);
    color: #EEEEEE;
    font-size: 12px;
    font-weight: bold;
    position: relative;
    display: block;
}
.blog-listitem-date span:nth-child(2) {
    font-size: 12px;
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    color: #555555;
}
.blog-listitem-date span:last-child {
    font-size: 12px;
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    color: #555555;
}
.blog-listitem-content {
    display: flex;
    flex-flow: column nowrap;
    padding: 0 0 0 12px;
    width: 100%;
}
.blog-thumbnail {
    float: left;
    margin: 0px 12px 0px 0px;
}
.blog-listitem-content h3 {
    margin-bottom: 8px;
}
.blog-listitem-content p {
    margin: 0;
}
.blog-listitem-info {
    opacity: 0.7;
    margin-top: 8px;
    font-size: 12px;
}
.blog-listitem-info p {
    margin: 0;
}
.blog-article {
    padding: 30px 0 0 90px;
}
.blog-article > article > span {
    font-family: 'Barlow Regular';
    font-size: 16px;
    color: #333;
    line-height: 1.4rem;
}
.blog-article-info {
    display: flex;
    flex-flow: row nowrap;
    background-color: #f5f5fa;
    box-sizing: border-box;
    padding: 12px;
    width: 75%;
}
.blog-article-info > div {
    display: flex;
    flex-flow: row nowrap;
}
.blog-article-info p {
    margin: 12px 20px;
    max-width: 80%;
}
.blog-article-info i {
    font-size: 32px;
    margin: 0 4px;
}
.blog-article-content p {
    max-width: 80%;
}
.blog-article hr {
    max-width: 80%;
    margin: 8px 0;
    color: #d0d0d0;
}
.blog-article-content img {
    max-width: 1024px;
    max-height: 512px;
    padding: 8px 0;
}
.blog .additional-page-content {
    padding-bottom: 24px;
}


/* NEWSLETTER CLASSES */
.newsletter-list {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    margin-top: 25px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
.newsletter {
    display: flex;
    flex-flow: column nowrap;
    max-width: 240px;
    margin: 8px 0;
    cursor: pointer;
    user-select: none;
}
.newsletter img {
    max-width: 100%;
    height: 225px;
    object-fit: cover;
    border-radius: 4px 4px 0 0;
    vertical-align: bottom;
}
.newsletter div {
    background: var(--school-secondary);
    box-sizing: border-box;
    padding: 8px;
    border-radius: 0 0 4px 4px;
    position: relative;
}
.newsletter div > * {
    color: white;
}
.newsletter h4 {
    font-size: 16px;
    margin: 4px 0 12px 0;
}
.newsletter div > p {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
}
.newsletter-blurb {
    max-height: 4px;
    overflow: hidden;
    padding: 0 !important;
    margin: 8px;
}
.newsletter:hover .newsletter-blurb {
    max-height: 175px;
    animation: .8s wipe-in-down;
}
.newsletter:hover .newsletter-blurb p {
    /*animation: .8s counter-size-font;*/
}
.newsletter .fa-stack {
    position: absolute;
    top: -14px;
    left: 50%;
    visibility: hidden;
    opacity: 0;
    transform: translate(-50%, 0%);
    transition: visibility 0s, opacity 0.3s linear;
}
.newsletter:hover .fa-stack {
    visibility: visible;
    opacity: 1;
}
.newsletter .fa-book-open {
    color: var(--school-primary);
}
.issuu-newsletter {
    width: 1280px;
    margin-left: auto;
    margin-right: auto;
}


/* JIGSAW CLASSES */
.jigsaw-grid {
    --cutout: #ffffff;
    --pieceSize: 100%;
    --tabSize: 36px;
    --tabPostition: calc((var(--pieceSize)/2) - (var(--tabSize)/2));
    --tabOutcropping: calc(var(--tabSize) * -1); /* *0.8 */
    display: grid;
    grid-auto-rows: minmax(100px, auto);
    column-gap: 2px;
    row-gap: 2px;
    width: 1024px !important;
    margin: var(--block-spacing);
}
.jigsaw-grid .jigsaw {
    width: var(--pieceSize);
    height: var(--pieceSize);
    position: relative;
    border-radius: 8px;
    border: solid 1px transparent;
    background-color: var(--colour);
}
.jigsaw-piece-content {
    width: 100%;
    height: 100%;
    z-index: 2;
    position: inherit;
    border-radius: 8px;
    padding: var(--tabSize);
    box-sizing: border-box;
    background-color: var(--colour);
}
.jigsaw-piece-content li {
    color: white;
}
.jigsaw .tab {
    position: absolute;
    border-radius: 50%;
    width: var(--tabSize);
    height: var(--tabSize);
    background-color: var(--colour);
    border: solid 1px transparent;
}
.jigsaw .tab::before {
    content: '';
    position: absolute;
    height: calc(var(--tabSize) - 8px);
    width: calc(var(--tabSize) - 8px);
    background-color: var(--colour);
    border: solid 1px transparent;
    z-index: 1;
}
.jigsaw .top-tab {
    top: var(--tabOutcropping);
    left: var(--tabPostition);
}
.jigsaw .top-tab::before {
    left: 3px;
    bottom: -22px;
    border-top: none;
}
.jigsaw .right-tab {
    top: var(--tabPostition);
    right: var(--tabOutcropping);
}
.jigsaw .right-tab::before {
    top: 3px;
    left: -22px;
    border-right: none;
}
.jigsaw .bottom-tab {
    bottom: var(--tabOutcropping);
    left: var(--tabPostition);
}
.jigsaw .bottom-tab::before {
    top: -22px;
    left: 3px;
    border-bottom: none;
}
.jigsaw .left-tab {
    top: var(--tabPostition);
    left: var(--tabOutcropping);
}
.jigsaw .left-tab::before {
    top: 4px;
    right: -22px;
    border-left: none;
}


/* FORM CLASSES */
.contact-form {
    margin: var(--block-spacing);
}
.form-outer,
.form-inner {
    list-style-type: none;
    padding: 0;
}
.form-outer {
    max-width: 800px;
}
.form-outer li,
.form-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.form-inner {
    padding: 0 8px;
    justify-content: space-between;
}
.form-outer > li:not(:last-child) {
    margin-bottom: 12px;
}
.form-outer > li > label,
.form-outer > li > p {
    padding: 8px;
    font-family: "Harmonia Sans W05 Bold";
    font-size: 16px;
}
.form-outer > li > label,
.form-outer li p {
    flex: 1 0;
    max-width: 140px;
}
.form-outer > li > label + *:not([type="checkbox"]),
.form-inner {
    flex: 1 0 220px;
}
.form-outer li input[type="checkbox"] {
    margin: 12px 8px;
}
.form-outer li p {
    margin: 0;
}
.form-outer li input:not([type='checkbox']),
.form-outer li textarea {
    padding: 12px;
    margin: 0;
}
.form-outer li select {
    padding: 8px;
    align-self: center;
}
.form-outer li button {
    margin-left: auto;
    padding: 8px 16px;
    border: none;
    background: #333;
    color: #f2f2f2;
    text-transform: uppercase;
    letter-spacing: .09em;
    border-radius: 2px;
}
.form-inner li {
    width: 100px;
    padding: 8px 0;
    align-items: center;
}
.form-inner label {
    margin-left: 8px;
}
.form-error {
    font-family: "Harmonia Sans W05 Bold";
    color: firebrick;
}


/* COLOURED PANEL CLASSES */
.coloured-panel {
    padding: 12px;
    border-radius: 2px;
    margin: var(--block-spacing);
    display: flex;
}
.coloured-panel p {
    margin: 0;
}


/* IMAGE WITH CONTENT CLASSES */
.image-with-content {
    display: flex;
    flex-flow: column nowrap;
    gap: 8px;
    height: 100%;
    margin: var(--block-spacing);
}
.image-with-content > div {
    flex-grow: 1;
}


/* CALENDAR EVENT LIST CLASSES */
.calendar-event-list {
    margin: var(--block-spacing);
}
.calendar-event-listitem {
    list-style-type: none;
    padding: 0;
    margin: 0;
    border-radius: 12px;
}
.calendar-event-listitem > div {
    display: flex;
    flex-flow: row nowrap;
    margin: 4px;
    padding: 8px;
    align-items: center;
}
.calendar-event-listitem > div > span {
    margin: 0 12px;
    font-weight: bold;
}


/* Tippy Classes */
.tippy-box[data-theme~='lionheart'] {
    background-color: var(--school-secondary);
    color: white;
    padding: 20px;
    min-width: 520px;
    border-top-right-radius: 50px;
    border-bottom-left-radius: 50px;
}
.tippy-box[data-theme~='lionheart'] * {
    color: white;
}
.tippy-container {
    display: flex;
    flex-flow: column nowrap;
}


/* CLIP CLASSES */
.clip-circle {
    clip-path: circle(50% at 50% 50%);
}
.clip-leftchevron {
    clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
}
.clip-rightchevron {
    clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
}
.clip-leftparallelogram {
    clip-path: polygon(0 0, 75% 0, 100% 100%, 25% 100%);
}
.clip-rightparallelogram {
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
.clip-rhombus {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.clip-message {
    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}


/* ANIMATION CLASSES */
.animation-pulse {
    animation-name: pulse;
    animation-duration: 1.25s;
}
.animation-bounceIn {
    animation-name: bounceIn;
    animation-duration: 1.25s;
}
.animation-fadeIn {
    animation-name: fadeIn;
    animation-duration: 1.25s;
}
.animation-fadeInDown {
    animation-name: fadeInDown;
    animation-duration: 1.25s;
}
.animation-fadeInLeft {
    animation-name: fadeInLeft;
    animation-duration: 1.25s;
}
.animation-fadeInUp {
    animation-name: fadeInUp;
    animation-duration: 1.25s;
}
.animation-flipInX {
    animation-name: flipInX;
    animation-duration: 1.25s;
}
.animation-zoomIn {
    animation-name: zoomIn;
    animation-duration: 1.25s;
}
.animation-slideInDown {
    animation-name: slideInDown;
    animation-duration: 1.25s;
}
.animation-slideInLeft {
    animation-name: slideInLeft;
    animation-duration: 1.25s;
}
.animation-slideInRight {
    animation-name: slideInRight;
    animation-duration: 1.25s;
}
.animation-slideInUp {
    animation-name: slideInUp;
    animation-duration: 1.25s;
}
.animation-wipeUp {
    animation-name: wipe-up;
    animation-duration: 1.25s;
}


/* KEYFRAMES */
@keyframes wipe-up {
    0% {
        transform: scale(0, .025);
    }
    50% {
        transform: scale(1, .025);
    }
}
@keyframes slideshow-fade {
    from {
        opacity: 0.6
    }
    to {
        opacity: 1
    }
}
@keyframes delay-overflow {
    from {
        overflow: hidden;
    }
}
@keyframes wave {
    0% {
        margin-left: 0;
    }
    100% {
        margin-left: -1600px;
    }
}
@keyframes swell {
    0%, 100% {
        transform: translate3d(0,-25px,0);
    }
    50% {
        transform: translate3d(0,5px,0);
    }
}
@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}
@keyframes slideInFromRight {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0);
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes wipe-in-down {
    0% {
        transform-origin: top center;
        transform: scale(0, 0.01);
        background-color: white;
        max-height: 90px;
    }

    33% {
        transform-origin: top center;
        transform: scale(1, 0.01);
        background-color: white;
        max-height: 175px;
    }

    34% {
        background-color: inherit;
        max-height: 175px;
    }

    100% {
        transform-origin: top center;
        transform: scale(1, 1);
        max-height: 175px;
    }
}
@keyframes counter-size-font {
    0% {
        transform-origin: top center;
        transform: scale(1, 2);
    }

    33% {
        transform-origin: top center;
        transform: scale(1, 2);
    }

    100% {
        transform-origin: top center;
        transform: scale(1, 1);
    }
}


/* MOBILE CLASSES */
@media screen and (max-width: 600px) {


    /* GENERAL STYLINGS MOBILE */
    main > section {
        width: 95%;
        margin: 0 auto;
    }
    .umb-block-grid__area {
        padding: calc(var(--umb-block-grid--grid-columns) * 2px) !important;
    }
    .umb-block-grid__area-container, .umb-block-grid__block--view::part(area-container) {
        grid-template-columns: 1fr !important;
    }


    /* RTF CLASSES MOBILE */
    .logoprefixed-header::before,
    .logoprefixed-header-single::before {
        left: 3px;
    }


    /* FOOTER CLASSES MOBILE */
    .footer-main > .school-logos {
        flex-flow: row wrap;
        margin: 0;
    }
    footer .footer-main a {
        width: 30%;
        display: flex;
        justify-content: center;
        margin: 12px 4px;
    }
    footer .footer-main {
        box-sizing: border-box;
        padding: 16px 0;
    }
    footer .footer-legal {
        height: auto;
    }


    /* HOME PAGE CLASSES MOBILE */
    .landing-video-content > p {
        font-size: 20px;
    }
    .home-content > .intro-content {
        padding: 0 20px;
        width: 100%;
    }
    .home-content > .landing {
        flex-flow: column nowrap;
    }
    .recent-news-images {
        display: flex;
        z-index: 1;
        justify-content: center;
        align-content: center;
        position: relative;
        padding: 0;
        height: auto;
        right: auto;
        bottom: auto;
        margin: auto 0 8px 0;
        width: 100% !important;
    }
    .recent-news-images > a {
        height: auto;
        margin: 0 4px;
        width: 31%;
    }
    .recent-news-images > a > h4,
    .recent-news-images > a > .tint {
      display: none;
    }


    /* LEGACY HOME NEWS FEED CLASSES MOBILE */
    .home-news > div,
    .home-events > div {
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
    }
    .home-article,
    .home-event {
        margin: 0px 4px;
    }
    .home-article:first-child,
    .home-event:first-child {
        margin: 0px 8px 16px 8px;
    }
    .home-article:not(:first-child),
    .home-event:not(:first-child) {
        width: 45%;
    }
    .home-article:not(:first-child) > a > p,
    .home-event:not(:first-child) > a > p {
        display: none;
    }
    .home-article:first-child > a > p:last-child,
    .home-event:first-child > a > p:last-child {
        display: none;
    }
    .home-news *,
    .home-events * {
        text-align: left;
    }
    .home-news h3,
    .home-events h3 {
        padding: 0 8px;
        display: flex;
        flex-flow: row;
        align-content: center;
    }
    .home-news h3::after,
    .home-events h3::after {
        margin-left: 12px;
        font-size: 16px;
        font-family: "Font Awesome 5 Free";
        content: '\f054';
    }
    .home-news > a.button,
    .home-events > a.button {
        display: none;
    }
    .home-news > p,
    .home-events > p {
        padding: 0 8px;
    }
    .home-article:first-child > a > p,
    .home-event:first-child > a > p {
        margin: 0;
    }
    .home-news {
        margin: 0 0 32px 0 !important;
    }


    /* MENU CLASSES MOBILE */
    nav {
        height: 80px;
    }
    .menubar {
        margin: 0 12px;
        justify-content: space-between;
        padding: 0 12px;
    }
    .menubar > li > .burgermenu-icon {
        display: block;
        padding: 8px 20px;
        background-color: var(--lht-primary-colour);
        position: fixed;
        border-radius: 2px;
    }
    .menubar > li {
        min-width: 25%;
        justify-content: center;
    }
    .menubar > li:not(:first-child):not(:nth-child(2)):not(:last-child) {
        display: none;
    }
    #trust-mobile-logo {
        display: flex;
        height: 40px;
        width: 40px;
    }
    .mobile-menu-sidebar {
        display: flex;
        flex-flow: column nowrap;
        left: 0;
        transform: translateX(-100%);
        width: 360px;
        transition: all .3s cubic-bezier(.79,.14,.15,.86);
        padding: 0;
        position: fixed;
        max-width: 100%;
        top: 0;
        z-index: 100;
        visibility: hidden;
        height: 100vh;
        background-color: white;
        overflow: scroll;
    }
    .mobile-menu-open .mobile-menu-sidebar {
        visibility: visible;
        transform: translate3d(0, 0, 0);
        left: 0;
    }
    .mobile-main-menulist {
        margin: 40px 0 40px 0;
    }
    .mobile-menu-sidebar ul {
        list-style-type: none;
        padding-left: 24px;
        display: none;
    }
    .mobile-menu-sidebar ul.show {
        display: block;
    }
    .mobile-menu-sidebar .section-title.show::after {
        margin-left: 12px;
        font-size: 16px;
        font-family: "Font Awesome 5 Free";
        content: "\f106";
        font-weight: 900;
    }
    .mobile-menu-sidebar .section-title::after {
        margin-left: 12px;
        font-size: 16px;
        font-family: "Font Awesome 5 Free";
        content: "\f107";
        font-weight: 900;
    }
    .mobile-menu-sidebar p:not(.section-title):hover {
        color: var(--lht-accent-colour) !important;
    }
    p[data-nestlevel] {
        color: var(--lht-primary-colour);
    }
    .mobile-main-menulist p {
        margin: 4px 0;
    }
    #mobile-menu-close {
        background-color: var(--lht-primary-colour);
        width: fit-content;
        border-radius: 2px;
        position: absolute;
        box-sizing: border-box;
        padding: 8px 20px;
        cursor: pointer;
        top: 24px;
        right: 20px;
    }
    #mobile-menu-close:hover {
        color: var(--lht-accent-colour) !important;
    }


    /* SEARCH FORM CLASSES MOBILE */
    .search-form {
        top: 84px;
        right: 8px;
        left: 8px;
    }
    .section-title {
        display: inline-block;
        position: relative;
    }
    .section-title::before {
        content: '';
        position: absolute;
        width: 100%;
        transform: scaleX(0);
        height: 2px;
        bottom: 0;
        left: 0;
        background-color: var(--lht-primary-colour);
        transform-origin: bottom left;
        transition: transform 0.25s ease-out;
    }
    .section-title:hover::before {
        transform: scaleX(1);
        transform-origin: bottom left;
    }


    /* SECTION PAGES MOBILE */
    main > section.trust-section {
        flex-flow: row wrap;
    }
    .trust-section h2 {
        font-size: 20px;
    }
    .trust-section img {
        height: 100%;
        aspect-ratio: 1;
    }


    /* ANIMATED HEADER CLASSES MOBILE */
    .animated-header-container {
        height: 500px;
        box-sizing: border-box;
        padding: 8px;
    }
    .animated-header-container .ahc-inner {
        flex-flow: row wrap;
    }


    /* BREADCRUMB CLASSES MOBILE */
    ul.breadcrumbs {
        display: flex;
        list-style-type: none;
        padding: 0 12px;
        justify-content: center;
    }


    /* BLOCKGRID CLASSES MOBILE */
    .umb-block-grid__layout-item .section-header {
        margin-left: 0;
    }


    /* IMAGE BUTTON CLASSES MOBILE */
    .image-button.section-page {
        max-width: 40%;
        max-height: 140px;
    }
    .image-button span {
        font-size: 32px;
    }


    /* STAFF PROFILE STYLINGS MOBILE */
    .staff-popup {
        flex-flow: column nowrap;
    }
    .modal-popup.angled {
        border-radius: 0;
        border-top-left-radius: 0px;
        border-bottom-right-radius: 0px;
        border-top-left-radius: 0;
        border-bottom-right-radius: 0;
        margin: 0 0 0 0 auto;
    }
    .staff-popup[style] {
        width: 340px !important;
        height: auto !important;
        margin: auto !important;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-height: 90%;
        overflow-y: scroll;
        z-index: 100;
    }
    .modal-popup {
        left: 0;
        top: 20%;
    }
    .staff-popup > img {
        margin-bottom: 12px
    }
    .staff-popup > img {
        height: auto;
    }
    .search-content {
        margin: 0 16px;
    }
    .staff-popup .modal-close {
        display: none !important;
    }


    /* NEWS PAGE CLASSES MOBILE */
    .article-list {
        margin-top: 24px;
        justify-content: space-around;
    }
    .listed-article {
        width: 140px;
        margin: 8px 4px;
    }
    .article-image {
        height: 144px;
    }
    .article-text > p:nth-child(2) {
        display: none;
    }
    .article-text > p:nth-child(1) {
        font-size: 14px;
    }
    .article-image img {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }
    .article-image .tint {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }
    .listed-article .article-text {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }


    /* TIMELINE CLASSES OLD MOBILE */
    .tl-event:nth-child(2n) .blurb {
        right: 0px;
    }
    .tl-event:nth-child(2n+1) .blurb {
        left: -1px;
    }
    .tl-event-info > .blurb {
        top: 0;
        z-index: 99;
    }
    .tl-event:first-child .blurb {
        height: 100px;
        width: 100px;
        top: 0;
    }
    .tl-event:nth-child(2n+1) > .tooltiptext {
        text-align: center;
        padding-right: 12px;
        left: 4px;
        border-radius: 46px;
    }
    .tl-event:nth-child(2n+1) > .tooltiptext::after {
        top: 0;
        right: 0;
        border-width: 0;
        border-style: none;
    }
    .tl-event:nth-child(2n) > .tooltiptext {
        top: 4px;
        right: 4px;
        text-align: center;
        padding-left: 12px;
        border-radius: 46px;
    }
    .tl-event:nth-child(2n) > .tooltiptext::after {
        left: 0;
        border-width: 0;
        border-style: none;
    }
    .tl-event > .tooltiptext {
        width: 316px;
        top: 0px;
        z-index: 98;
        height: 274px;
    }
    .tl-event:first-child > .tooltiptext {
        left: 4px;
        border-top-left-radius: 4px;
    }
    .tl-event > .tooltiptext * {
        font-size: 15px;
        line-height: 1.5;
    }
    .img-cutout {
        width: 100px;
        height: 100px;
    }
    .tl-event:nth-child(2n) .img-cutout {
        float: right;
        shape-outside: circle(50% at 65px 35px);
        position: relative;
        top: 0;
        right: 0;
    }
    .tl-event:nth-child(2n+1) .img-cutout {
        float: left;
        shape-outside: circle(50% at 34px 38px);
        position: relative;
        top: 0;
        left: 0;
    }


    /* TIMELINE CLASSES MOBILE */
    .timeline-content {
        width: 200%;
        max-width: 200%;
        margin: 12px auto 0 auto;
    }
    .svg-timeline {
        width: 100%;
        max-width: 100%;
        overflow: auto;
    }
    .svg-timeline .background-image {
        width: 200%;
        max-width: 200%;
    }


    /* HEADER CLASSES MOBILE */
    .animated-header-text.no-image {
        margin: 0;
    }
    .animated-header-image-container {
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }
    .animated-header-image-container .second-image {
        left: -4px;
    }


    /* ACCORDION CLASSES MOBILE */
    .accordion-master-icon {
        display: none !important;
    }
    .accordion .accordion-header:last-of-type {
        margin-bottom: 0;
    }


    /* JIGSAW CLASSES MOBILE */
    .jigsaw-grid {
        width: 95% !important;
        grid-template-columns: repeat(1, 1fr) !important;
    }
    .jigsaw .right-tab {
        display: none !important;
    }
    .jigsaw-piece-content {
        padding: 16px 8px 8px 8px;
    }

    /* TIPPY CLASSES MOBILE */
    .tippy-box {
        max-width: 400px !important;
        min-width: 100px !important;
    }

    /* EVENTS CLASSES MOBILE */
    section.calendars {
        flex-flow: column nowrap;
    }
    section.calendars th span {
        display: block;
        font-size: 0;
    }
    section.calendars th span::first-letter {
        font-size: 16px;
    }
    .event-title {
        font-size: 0;
        margin-top: 12px !important;
    }
    .event-title i {
        font-size: 20px;
    }
    .modal-active .modal-popup-animate {
        transform: none;
    }
    .events-modal {
        margin: 0 !important;
    }
    .events-modal > div > div {
        width: 90%;
    }

    /* INFO TILE CLASSES MOBILE */
    .info-popup {
        margin: 0 !important;
    }

    /* BLOG CLASSES MOBILE */
    .blog {
        width: 95%;
    }
    .blog-featured {
        grid-gap: 20px;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: unset;
    }
    .blog-featured > article#latest {
        grid-column: 1 / span 2;
        grid-row: 1;
    }
    .blog-featured > article#two {
        grid-column: 1;
        grid-row: 2;
    }
    .blog-featured > article#three {
        grid-column: 2;
        grid-row: 2;
    }
    .blog-recent > article {
        flex-basis: 47%;
        margin-bottom: 36px;
    }
}