/* colours for  links */

a:link {
  color: white;
  background-color: transparent;
  text-decoration: underline;
}

a:visited {
  color: white;
  background-color: transparent;
  text-decoration: underline;
}

a:hover {
  color: #ffc107;
  background-color: transparent;
  text-decoration: none;
}

a:active {
  color: #ffc107;
  background-color: transparent;
  text-decoration: underline;
}

a.white_link_colour:link {
  color: white;
  background-color: transparent;
  text-decoration: underline !important;
}

a.white_link_colour:visited {
  color: white !important;
  background-color: transparent;
  text-decoration: none !important;
}

a.white_link_colour:hover {
  color: white !important;
  background-color: transparent;
  text-decoration: none !important;
}

a.white_link_colour:active {
  color: white;
  background-color: transparent;
  text-decoration: underline !important;
}

a.link_2:link {
  color: #005eb8;
  background-color: transparent;
  text-decoration: underline;
}

a.link_2:visited {
  color: #005eb8;
  background-color: transparent;
  text-decoration: underline;
}

a.link_2:hover {
  color: #005eb8;
  background-color: transparent;
  text-decoration: none;
}

a.link_2:active {
  color: #005eb8;
  background-color: transparent;
  text-decoration: none;
}

.divider-color {
  --bs-breadcrumb-divider-color: white;
}

/* colours for navbar links */

.nav-link {
  color: #ffffff;
}

.nav-link:link {
  color: white;
  background-color: transparent;
  text-decoration: none;
}

.nav-link:hover {
  color: var(--bs-yellow) !important;
  background-color: transparent;
  text-decoration: none;
}

.nav-link:visited {
  color: white;
  background-color: transparent;
  text-decoration: none;
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
  color: var(--bs-yellow);
  background-color: transparent;
  text-decoration: none;
}

/* white colour for toggler when active */

.navbar-toggler {
  color: #ffffff;
}

/* orange colour */

.orange_colour {
  color: #e76f51;
}

.orange_background_colour {
  background-color: #e76f51 !important;
}

/* light orange colour */

.light_orange_colour {
  color: #FF916A;
}

.light_orange_background_colour {
  background-color: #FF916A;
}

/* yellow colour */

.yellow_colour {
  color: #ffc107;
}

.yellow_background_colour {
  background-color: #ffc107;
}

/* green colour */

.green_colour {
  color: #2a9d8f;
}

.green_background_colour {
  background-color: #2a9d8f;
}

/* light green colour */

.light_green_colour {
  color: #37CDBA;
}

.light_green_background_colour {
  background-color: #37CDBA;
}

/* blue colour */

.blue_colour {
  color: #1e8faa;
}

.blue_background_colour {
  background-color: #1e8faa !important;
}

/* light blue colour */

.light_blue_colour {
  color: #99d2e0;
}

.light_blue_background_colour {
  background-color: #99d2e0 !important;
}

/* dark blue colour */

.dark_blue_colour {
  color: #30384d;
}

.dark_blue_colour_border {
  border-color: #30384d;
}

.dark_blue_background_colour {
  background-color: #30384d !important;
}

.dynamic_font_size_1 {
  font-size: min(max(1px,4.1vw), 20px);
}

.dynamic_font_size_2 {
  font-size: min(max(1px,4vw), 16px);
}

.dynamic_font_size_3 {
  font-size: min(max(1px,3.53vw), 16px);
}

.dynamic_font_size_4 {
  font-size: min(max(1px,5.5vw), 20px);
}

.ratio_16x9 {
  --bs-aspect-ratio: 56.25%;
  aspect-ratio: 16 / 9;
}

/* portrait */

.ratio_9x16 {
  --bs-aspect-ratio: 56.25%;
  aspect-ratio: 9 / 16;
}

.responsive-video-landscape {
  max-width: 100%;
  height: auto;
  display: block;
}

.fullWidth {
  margin: 0 -25%;
  padding: 0 25%;
}

.btn1:hover {
  background: rgb(185,89,65) !important;
}

.btn_grey {
  background: rgb(230,230,230) !important;
  color: rgb(0,0,0);
  border-style: none;
}

.btn_grey:hover {
  background: rgb(184,184,184) !important;
  color: #000000;
}

.tile_shadow {
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  border-radius: 10px;
}

.nav_element {
  cursor: pointer;
}

.hover-opacity-effect {
}

.hover-opacity-effect:hover {
  opacity: 0.8;
}

section {
  scroll-margin-top: 120px;
}

/* make 'Close' button text on sweetalerts bold */

.swal2-confirm {
  font-weight: bold !important;
}

/* video controls */

/* Responsive video */

.responsive-video {
  width: 100%;
  height: auto;
  max-height: 720px;
  display: block;
  margin: 0;
}

/* Custom player wrapper */

.custom-player {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 640px;
  margin-bottom: 20px;
}

/* Big central play button */

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: white;
  transition: opacity 0.5s ease;
  z-index: 2;
}

.play-button::before {
  content: "";
  display: block;
  margin-left: 3px;
  width: 0;
  height: 0;
  border-left: 18px solid white;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

.play-button.hide {
  opacity: 0;
  pointer-events: none;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 1;
}

/* accordion border colour */

.accordion-item {
  border-color: #bbb !important;
}