/* CSS for RS */
/* Colour Variables for Scheme Colours */
:root {
	--cs-lavender-hex: #EFC6D4;
	--cs-magenta-hex: #D950AE;
	--cs-green-hex: #AAE847;
	--cs-offwhite-hex: #EEEDEE;
	--cs-lavender-rgb: 239, 198, 212;
	--cs-magenta-rgb: 217, 80, 174;
	--cs-green-rgb: 170, 232, 71;
	--cs-offwhite-rgb: 238, 237, 238;
}
/* Colour Options
1:
#BD5598 - 189, 85, 152 - purple
#82BB42 - 130, 187, 66 - darker green
#BFCF6E - 191, 207, 110 - sage green
#DF3C5F - 223, 60, 95 - dark pink
2:
#F4B0F7 - 244, 176, 247 - lilac
#9CFAD4 - 156, 250, 212 - aqua
#EDF9A2 - 237, 249, 162 - olive green
#F8B0B3 - 248, 176, 179 - dusky pink
3:
#78FFC4 - 120, 255, 196 - aqua
#DCAAE4 - 220, 170, 228 - lavender
#FDC2E4 - 253, 194, 228 - pink
#FAF3DE - 250, 243, 222 - sand
4:
#020202 - 2, 2, 2 - charcoal
#5351A2 - 83, 81, 162 - periwinkle blue
#A254A1 - 162, 84, 161 - purple
#F6C845 - 246, 200, 69 - mustard
5: using currently
#EFC6D4 - 239, 198, 212 - lavender
#D950AE - 217, 80, 174 - magenta
#AAE847 - 170, 232, 71 - neon green
#EEEDEE - 238, 237, 238 - off white
*/
html {
	/* min-height: 100% important;*/
	height: auto !important;
}
body {
	font-family: 'Poppins', Helvetica, Arial, Verdana, sans-serif;
	background: linear-gradient(-45deg,
		rgba(var(--cs-green-rgb), 1) 0%,
		rgba(var(--cs-lavender-rgb), 1) 30%,
		rgba(var(--cs-offwhite-rgb), 1) 70%,
		rgba(var(--cs-magenta-rgb), 1) 100%
	);
}
.bg-navbar-multi {
	background: linear-gradient(-45deg,
		rgba(var(--cs-magenta-rgb), 1) 0%,
		rgba(var(--cs-magenta-rgb), 1) 7%,
		rgba(var(--cs-lavender-rgb), 1) 26%,
		rgba(var(--cs-lavender-rgb), 1) 40%,
		rgba(var(--cs-offwhite-rgb), 1) 60%,
		rgba(var(--cs-offwhite-rgb), 1) 74%,
		rgba(var(--cs-green-rgb), 1) 93%,
		rgba(var(--cs-green-rgb), 1) 100%
	);
}
.bg-footer { background-color: var(--cs-magenta-hex); }
.bg-offwhite { background-color: var(--cs-offwhite-hex); }

h1,.h1 { font-family: 'Righteous', Verdana, Helvetica, Arial, sans-serif; }
h2,.h2 { font-family: 'Righteous', Verdana, Helvetica, Arial, sans-serif; }
h3,.h3 { font-family: 'Righteous', Verdana, Helvetica, Arial, sans-serif; }
h4,.h4 { font-family: 'Righteous', Verdana, Helvetica, Arial, sans-serif; }
h5,.h5 { font-family: 'Righteous', Verdana, Helvetica, Arial, sans-serif; }
li > a { font-family: 'Righteous', Verdana, Helvetica, Arial, sans-serif; font-size: 14pt !important; }
.logofont { font-family: 'Yellowtail', 'Righteous', Verdana, Helvetica, Arial, sans-serif; }
.headerfont { font-family: 'Righteous', Verdana, Helvetica, Arial, sans-serif; }
.display-2-logo { font-size: calc(1.825rem + 6.9vw); }
h1-logo, .h1-logo { font-size: calc(1.85rem + 5.5vw);}
@media (min-width: 1200px) {
	.display-2-logo { font-size: 9rem; }
	h1-logo, .h1-logo { font-size: 5rem;}
}
/* Other Header Font Options
Anton
Bebas Neue
Comfortaa
Passion One
Sonsie One
Tilt Neon
*/

.carousel-overlay { 
	position: absolute;
	z-index: 1000;
	top: 30%;
	left: 0;
	width: 100%;
	in-height: 500px;
	text-align: center;
}

.form-check-input { float: inherit !important; margin-left: inherit !important; }

.navbar-collapse { flex-grow: 0 !important; }
.xnavbar { --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; 
			--bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.75) !important; }

.text-shadow, .carousel-control-prev-icon, .carousel-control-next-icon { text-shadow: 2px 2px 4px #000000; }

.text-purple { color: var(--cs-magenta-hex); }
.border-purple {
  --bs-border-opacity: 1;
  border-color: rgba(var(--cs-magenta-rgb),var(--bs-border-opacity)) !important;
}
.btn-purple {
  color: var(--cs-magenta-hex);
  background-color: var(--cs-lavender-hex);
  border-color: var(--cs-magenta-hex);
}
.btn-purple:hover {
  color: var(--cs-magenta-hex);
  background-color: var(--cs-offwhite-hex);
  border-color: var(--cs-magenta-hex);
}
.link-purple {
  color: RGBA(var(--cs-magenta-rgb), 1) !important;
  -webkit-text-decoration-color: RGBA(var(--cs-magenta-rgb), 1) !important;
  text-decoration-color: RGBA(var(--cs-magenta-rgb), 1) !important;
}
.link-purple:hover, .link-purple:focus {
  color: RGBA(var(--cs-lavender-rgb), 1) !important;
  -webkit-text-decoration-color: RGBA(var(--cs-lavender-rgb), 1) !important;
  text-decoration-color: RGBA(var(--cs-lavender-rgb), 1) !important;
}
a:visited, a:active {
  color: inherit;
}

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; /* remove the gap so it doesn't close */ 
 }

/* css for header video banner */
header {
  position: relative;
  background-color: black;
/* moved to media sizing below 
  height: 75vh;
  min-height: 25rem;
*/
  width: 100%;
  overflow: hidden;
}

header video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

header img {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

header .container {
  position: relative;
  z-index: 2;
}

header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.25;
  z-index: 1;
}

/* Media Query for devices withi coarse pointers and no hover functionality */

/* This will use a fallback image instead of a video for devices that commonly do not support the HTML5 video element */

@media (pointer: coarse) and (hover: none) {
  header {
    background: url('/assets/images/bgn1.webp') black no-repeat center center scroll;
  }

  header video {
    display: none;
  }
}

@media (max-width: 767px){ /* upper limit of bootstrap 5 sm */
	header { height: 50vh; min-height: 15rem; }
}
@media (min-width: 768px){ /* lower limit of bootstrap 5 md */
	header { height: 75vh; min-height: 25rem; }
}