body,p,input,select {font-family: var(--body-font); font-weight: 400;}
h1,h2,h3,h4,h5 {font-family: var(--heading-font);}
h1 {font-size: calc(2rem + 1.5vw);}
h6,.detail-text,.icon-label,.navbar-toggler:before,.btn-close::before,.mfp-close::before,.offcanvas .dropdown-header,.emergency,.anchor-links li a,a.more-link,th,label,.btn,.newsletter-list li,.notice p:last-child,.footer-copyright p,cite,.media-controls,.mfp-bottom-bar {font-family: var(--detail-font); text-transform: uppercase; letter-spacing: 2px; font-size: 0.8rem;}
h6 {font-size: 0.8rem;}

.icon-label {display: inline-block; font-size: 0.6rem; margin-right: 0.6rem;}
.btn-close::before,.mfp-close::before {content: 'Close'; display: inline-block; margin-right: 0.6rem; font-size: 0.6rem;position: absolute; right: 22px; top: 5px;}
.mfp-close::before {top: -1px;}
.modal-header .btn-close {position: relative;}
.modal-header .btn-close::before {top: 9px;}
.news-image-holder {margin-bottom: 1rem;}

ul {list-style-type: none; margin: 0; padding: 0;}
.newsletter-article ul {list-style-type: square; margin: 1rem;}
.table {text-align: left; vertical-align: baseline;}
.table>:not(caption)>*>* {color: inherit;}
.table-striped>tbody>tr:nth-of-type(odd)>* {--bs-table-color-type: var(--bs-table-colour);}

a {color: var(--primary); text-decoration: none;}
.newsletter-article a {text-decoration: underline;}
a:hover {text-decoration: underline;}
.btn {font-size: 0.8rem;}

.section ul li {font-weight: 600; margin-bottom: 0.5rem;}

.banner {position: relative; height: 100dvh; padding-top: 2rem; display: flex; flex-direction: column; justify-content: space-between; background-color: var(--primary); color: white; background-size: cover;}
.banner::after {content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.6) 100%);}
.banner-content {text-align: center; color: white; display: flex; justify-content: flex-end; align-items: center; flex-direction: column; flex: 1;}
.banner-main {width: 100%;}
.banner-top {display: grid; width: 100%; grid-template-columns: 1fr 1fr 1fr;}
.main-logo {grid-column: 2;}
.main-logo img {height: 60px;}
.banner>* {z-index: 1;}
.banner-title img {height: 20vh;}

.navbar.fixed-top {background: rgba(255,255,255,0.9); transition: 0.1s;}
.navbar.fixed-top.opaque {background: white;}
.navbar {justify-content: flex-end; align-self: start;}
.navbar-toggler:before {content: 'Menu'; margin-right: 0.6rem; font-size: 0.6rem;}

.offcanvas {background: var(--primary); color: white; z-index: 1050;}
.offcanvas.offcanvas-end {width: 100%; padding-top: 2rem;}
.offcanvas-body {display: flex; justify-content: flex-end; text-align: right;}
.offcanvas-body ul {text-align: right; margin-top: 2rem;}
.offcanvas-body .dropdown-toggle::before,.offcanvas-body .dropdown-toggle::after {display: none;}
.offcanvas-body ul.dropdown-menu {background: var(--secondary); text-align: left; margin-bottom: 1rem;}
.offcanvas-body ul.dropdown-menu .dropdown-item:hover {text-decoration: none;}
.offcanvas .dropdown-header {font-size: 0.6rem; margin: 0.5rem 0;}
.offcanvas .nav-link {display: inline-block; font-family: var(--heading-font); font-size: 1.2rem;}
.offcanvas .nav-link:hover {text-decoration: none; color: white;}
.offcanvas .nav-item.dropdown {display: flex; flex-direction: column; align-items: flex-end;}

.emergency {background: #d13438; color: white; font-size: 0.8rem; text-align: center; margin: 2rem 0 1rem 0; padding: 10px 10px; position: relative; z-index: 1; border-radius: 10px;}
.emergency p {margin: 0;}
.emergency a {color: white; text-decoration: underline;}

.notices {background-color: var(--primary); padding: 1.5rem; text-align: center; color: white;}
#notices_carousel .notice {max-width: calc(100% - 80px); margin: 0 auto;}
.notice h4 {font-family: var(--body-font); font-size: 1.2rem; margin-bottom: 0;}
.notice p {margin: 20px 0 0 0;}
.notice a {display: block; color: white; transition: 0.2s;}
.notice a:hover {text-decoration: none; transform: scale(1.05);}
.carousel-control-next, .carousel-control-prev {width: auto; color: var(--primary); font-size: 1.5rem;}
.carousel-control-next:focus, .carousel-control-prev:focus,.carousel-control-next:hover, .carousel-control-prev:hover {color: inherit;}


.anchor-links {display: none; margin: 0 0 3rem 0; justify-content: space-around; gap: 5px; text-align: center; line-height: 1;}
.anchor-links li a {color: white; text-decoration: none; font-size: 0.6rem; padding-bottom: 2px;}
.anchor-links li a:hover {border-bottom: 1px solid var(--secondary);}

.section h2 {color: var(--primary); margin-bottom: 2rem;}
.section h6 {margin-bottom: 2rem;}
.section p+h6 {margin-top: 3rem;}
.section-red {background-color: var(--secondary); color: white;}
.section-blue {background-color: var(--colour3); color: white;}
.section-pink {background-color: var(--colour4); color: white;}
.section-dark h2,.section-red h2,.section-blue h2,.section-pink h2 {color: white;}
.section-dark a,.section-red a,.section-blue a,.section-pink a {color: white;}

.section-overlay {background-color: grey; background-size: cover; padding: 4rem 0;}
.section-overlay .container div {background: white; padding: 4rem; text-align: center;}  
.section-overlay .container div.overlay-red {background: var(--secondary);}

a.more-link {color: var(--secondary); letter-spacing: 2px; min-height: 20px; display: inline-flex; align-items: center; margin-top: 1rem; border-bottom: 1px solid transparent;}
a.more-link:hover {text-decoration: none; border-bottom: 1px solid var(--secondary);}
.section-dark a.more-link,.section-red a.more-link {color: white;}
.section-dark a.more-link:hover,.section-red a.more-link:hover {border-color: white;}
.main-icon {height: 6rem; margin-bottom: 1rem;}



.document-list.formatted {text-align: left;}
.document-list.formatted li {border-bottom: 1px solid #dee2e6;}
.document-list.formatted li a {display: flex; justify-content: space-between; padding: 8px; transition: 0.2s;}
.document-list.formatted li a:hover {text-decoration: none; background-color: var(--primary); color: white;}
.document-list.formatted li a::after {font-family: 'bootstrap-icons'; content: '\f285';}

.footer {background-color: var(--primary); color: #ddd; padding: 0 0 2rem 0; text-align: center;}
.footer h6 {color: white;}
.footer a {color: #ddd;}
.footer-main {padding: 4rem 0 2rem 0;}
.footer-main>*:not(:last-child) {margin-bottom: 2rem;}
.footer-main img {width: 150px; max-width: 100%;}
.footer-copyright {border-top: 1px solid rgba(255,255,255,0.3); padding-top: 1rem;}
.footer-copyright p {margin: 0; font-size: 0.6rem;}

.social-icons {display: flex; justify-content: center; gap: 8px; margin-top: 1rem;}
.social-icons img {width: 2rem;}


.button-menu {display: flex; flex-wrap: wrap; justify-content: center;}
.button-menu-item {width: 47%; margin: 1.5%; color: inherit; text-decoration: none;}
.button-menu-item:hover,a.button-menu-item:active,a.button-menu-item:focus {text-decoration: none; color: inherit;}
.button-menu-image {width: 100%; transition: 0.2s; margin-bottom: 1rem;}
a .button-menu-image:hover {transform: scale(1.1);}
@media (min-width: 768px) {
  .button-menu-item {width: 22%; margin: 1.5%;}
}

.section h2.accordion-header {margin-bottom: 0;}
.accordion-button {font-size: 1.1rem; font-family: var(--body-font);}
.accordion-body {text-align: left; font-size: 1rem;}
.accordion-body p {font-weight: 600;}

.calendar-table {text-align: left;}
.calendar-table thead i {font-size: 1.5rem;}
.calendar-table thead tr:first-child td {padding-bottom: 2rem;}
.calendar-table th {font-size: 0.6rem;}
.calendar-table td {font-size: 0.8rem;}
.calendar-table button {transition: 0.2s;}
.calendar-table button:hover {transform: scale(1.3);}

.form-control {border: 0; border-radius: 0; border-bottom: 1px solid var(--primary); background-color: transparent; color: inherit;}
label {font-size: 0.6rem;}
.form-response-message img {margin-bottom: 2rem;}


.popup-container {background-color: white; text-align: center; padding: 4rem 1rem 1rem 1rem; max-width: 90%; margin: 2rem 0; display: inline-block; position: relative; border-radius: 4px; transition: 0.5s;}
#popup_uniform ul {margin: 0 0 2rem 0;}

@media (min-width: 768px) {
  .team-image-container {width: 20%; margin: 2.5%;}
  .popup-container {padding: 4rem; max-width: 60%;}

  .offcanvas {background: var(--primary) url('/img/svg/MNS_icon_watermark.svg') no-repeat 0% 50%; background-size: 70vw auto;}
  .offcanvas .nav-link {font-size: 1.8rem;}


  .calendar-table {table-layout: fixed;}
}


@media (min-width: 992px) {
  .section {display: flex;}
  .section-full {display: block;}
  .section.image-right {flex-direction: row-reverse;}
  .section-image {flex: 2; background-color: grey;}
  .section-text {flex: 3; align-self: center; padding: 0;}
  .section-text>div {width: 60%; margin: 8rem auto;}
  .section-main {padding: 4rem;}
  .section-half .section {width: 50%;}

  .section-overlay .container {display: flex; justify-content: flex-end;}
  .section-overlay.overlay-left .container {justify-content: flex-start;}
  .section-overlay .container div {width: 50%;}  

  .anchor-links {display: flex;}
  .footer {text-align: left;}
  .footer-main {display: flex; justify-content: space-between; align-items: flex-start;}
  .footer-main>* {margin-bottom: 0;}
  .footer-copyright>div {display: flex; justify-content: space-between;}
  .social-icons {margin: 0;}
}

@media (prefers-reduced-motion) {
  .banner-arrow a img {animation: none;}
  .up-link {transform: scale(1);}
  .gallery-grid img {opacity: 1;}
  .fade-image {animation: none;}
}