.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.8);
}

h1 {
  text-transform: uppercase;
}

a {
   font-weight:bold;
}

blockquote{
   margin-left: 2rem;
   margin-right: 2rem;
}

.julius {
  font-family: "Julius Sans One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* Make sure the footer appears at the bottom of the screen on short pages */
body {
   height: 100vh;
}

body > footer {
  position: sticky;
  top: 100vh;
}

.navbar {
   padding: 0.6rem 1rem 1rem;
}

.navbar-nav.secondary .nav-link {
  color: #808181;
}

.banner {
   text-align: center;
}

/* This tells the browser to zoom in and crop. */
/* override this for larger srcreens in the media query section */
.banner img {
  height: 300px;
  object-fit: cover;
  margin: 0 auto;
}

/* Vignette: https://codepen.io/burtclan/pen/NgPjva */
.vignette {
  position: relative;
  color: white;
}


  .vignette:after {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-collapse: separate;
    box-shadow: inset 0 0 40px 20px rgba(0, 0, 0, 0.3);
  }

  .vignette.vignette-small:after {
    box-shadow: inset 0 0 20px 10px rgba(0, 0, 0, 0.3);
  }

  .vignette.vignette-large:after {
    box-shadow: inset 0 0 80px 40px rgba(0, 0, 0, 0.3);
  }

/* In-banner text is floated above the banner using absolute positioning
   To fix the alignment with the rest of the page, the left value is calculated
   in the media query section as (100vw - max-width) / 2,
   100vw representing screen width.
*/
.in-banner {
  text-shadow: 0 0 4px #333;
  position: absolute;
  top: 10%;
}

@media only screen and (max-width: 576px) {
   .in-banner{
      font-size: 2rem;
      left: 10px;
   }
   .navbar-brand img{
      height:60px;
   }
}


  .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
  color: rgba(255, 255, 255, 1.0);
}

h1 {
  margin-top: 1rem;
  margin-bottom: 3rem;
}

/* FAQs */
details {
  padding: 10px;
  background-color: var(--light);
  border-radius: 10px;
  margin-bottom:10px;
}

  details p {
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    padding: 10px;
    margin: 0;
  }

summary {
  color: var(--blue);
  font-weight: bold;
}
  summary::marker {
    color: var(--blue);
    font-size: 1.2em;
  }



/* Footer */
footer .nav-item .nav-link {
  padding: 0;
}

footer {
  position: relative;
  min-height: 150px;
  overflow: hidden;
}

  footer:before {
    content: ' ';
    display: block;
    position: absolute;
    left: -20%;
    top: -10%;
    width: 150%;
    height: 150%;
    opacity: 0.4;
  }

.row {
  position: relative;
  z-index: 1;
}

.jumbotron {
  position: relative;
  background-clip: padding-box;
  /* The background image below will otherwise spill over, creating a horizontal scroll bar. */
  overflow: hidden;
  /* This combines with z-index on the psudo-element to keep the background image visibule, but behind the jumbotron contents */
  transform-style: preserve-3d;
}

.slide * {
  transform: translateZ(1px);
}

.slide {
  position: relative;
  background-clip: padding-box;
  /* The background image below will otherwise spill over, creating a horizontal scroll bar. */
  overflow: hidden;
  /* This combines with z-index on the psudo-element to keep the background image visibule, but behind the jumbotron contents */
  transform-style: preserve-3d;
}


.slide * {
  transform: translateZ(1px);
}


.locators {
  background-color: var(--light);
  text-align: center;
}

  .locators img {
    max-width: 100%;
    border-radius: 50%;
    border: 1px solid #ddd;
  }

    .locators img:hover {
      border: 1px solid #aaa;
    }

    .locators img[width] {
      width: auto; /* Defer to max-width */
    }

      .locators img[width][height] {
        height: auto; /* Preserve aspect ratio */
      }

  .locators p {
    margin-top: 1rem;
    text-align: center;
  }


.leadership {
  background-color: var(--light);
}

.people img {
  border-radius: 50%;
}

img.round {
  border-radius: 50%;
}


.panel {
  background-color: blue;
  padding: 1em;
  color: white;
}

  .panel .faded {
    color: blue;
  }

img {
  max-width: 100%;
}


/* Stylised Text */
.brochure {
  color: #082A52;
  font-size: 1.5rem;
  font-family: "Crimson Text"
}

p.brochure {
  width: 80%;
  margin-left: 10%;
}

.brochure strong {
  background-color: #F7F2EB;
  color: #D56F3E;
  font-weight: bolder;
}


/* ----------------------------------------------
/* Animate on Scroll. Adapted from https://codepen.io/tutsplus/pen/QWGYKMN */

.scroll-animate {
  opacity: 0;
  transition: opacity 500ms;
}

  .scroll-animate.scrolled-once {
    opacity: 1;
  }

.scrolling.fade-in {
  /* animation: fade-in 1s ease-in-out both; */
  animation-name: fade-in;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
}

.scrolling.fade-in-bottom {
  /* animation: fade-in-bottom 1s ease-in-out both; */
  animation-name: fade-in-bottom;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
}

.scrolling.slide-left {
  /* animation: slide-in-left 1s ease-in-out both; */
  animation-name: slide-in-left;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
}

.scrolling.slide-right {
  /* animation: slide-in-right 1s ease-in-out both; */
  animation-name: slide-in-right;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
}

/* ----------------------------------------------
 * Animations Generated by Animista on 2021-2-11 23:32:31
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
/* For more animations, check out https://css-tricks.com/a-handy-little-system-for-animated-entrances-in-css/
 * ---------------------------------------------- */

@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@media screen and (prefers-reduced-motion: reduce) {
  .scroll-animate {
    animation: none !important;
  }
}

/* MEDIA QUERIES */
/* Stop the toggler dropping onto a new line*/
@media (max-width: 500px) {
  .navbar-brand {
    display: contents;
  }

    .navbar-brand img {
      max-width: 70%;
    }

    .jumbotron{
       border-radius:0;
    }
}

/* No media query for `xs` since this is the default in Bootstrap
   Small devices (landscape phones, 576px and up) */
@media only screen and (min-width: 576px) {
  .leadership {
    border-radius: 20px;
  }

  .in-banner {
    max-width: 540px;
    left: calc(50vw - 270px);
    font-size: 3rem;
  }

  .navbar-brand img {
    height: 90px;
  }
  .jumbotron {
    border-radius: 15px;
  }

  .multi-column {
     column-count:2;
  }
}

/* Medium devices (tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .banner img {
    display: inline-block;
    width: 100%;
    height: 100%;
  }

  .in-banner {
    left: calc(50vw - 360px);
  }
}
/* Large devices (desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  /* show secondary menu a little above the main menu */
  .navbar-nav.secondary {
    margin-top: -60px;
    margin-right: 5%;
  }


  .in-banner {
    max-width: 960px;
    left: calc(50vw - 480px)
  }
}
/* Extra large devices (large desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .in-banner {
    max-width: 1140px;
    left: calc(50vw - 570px)
  }

  .banner,.banner img{
    max-height: 600px;
    object-fit: cover;
  }
}


/* Image Slider: by Temani Alif https://css-tricks.com/css-only-infinite-and-circular-image-slider/ */
/* number of images*/
.gallery {
  --s: 280px;
  /* control the size */
  --d: 12s;
  /* animation duration */
  display: grid;
  width: var(--s);
  aspect-ratio: 1;
  overflow: hidden;
  padding: calc(var(--s)/40);
  border-radius: 50%;
  position: relative;
  clip-path: circle(49.5%);
  /* to avoid a few glitch caused by overflow: hidden */
}

  .gallery::after {
    content: "";
    position: absolute;
    inset: 0;
    padding: inherit;
    border-radius: inherit;
    background: repeating-conic-gradient(#F9F6F1 0 5deg, #F7F2EB 0 10deg);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }

  .gallery > img {
    grid-area: 1/1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    transform-origin: 50% 135.0650808352%;
  }

  .gallery::after,
  .gallery > img {
    animation: m var(--d) infinite cubic-bezier(0.5, -0.2, 0.5, 1.2);
  }

    .gallery > img:nth-child(2) {
      animation-delay: calc(-0.2*var(--d));
    }

    .gallery > img:nth-child(3) {
      animation-delay: calc(-0.4*var(--d));
    }

    .gallery > img:nth-child(4) {
      animation-delay: calc(-0.6*var(--d));
    }

    .gallery > img:nth-child(5) {
      animation-delay: calc(-0.8*var(--d));
    }

@keyframes m {
  0%, 3% {
    transform: rotate(0);
  }

  18%, 23% {
    transform: rotate(-72deg);
  }

  38%, 43% {
    transform: rotate(-144deg);
  }

  58%, 63% {
    transform: rotate(-216deg);
  }

  78%, 83% {
    transform: rotate(-288deg);
  }

  98%, 100% {
    transform: rotate(-360deg);
  }
}