/* HEADER-NAV STYLES */

 #mainNav {
    background-color: #2d274f;
  }

header.masthead {
	background-image: none !important;
	background-color: #2D274F !important;
}

#masthead-logo { 
	width: 55%;
	min-width: 350px;
	/* height: 35rem; */
	margin-bottom: 1.5rem;
}

#header-logo {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out !important;
}

#header-logo.visible {
    opacity: 1 !important;
    visibility: visible !important;
}


/* BACKGROUND COLOUR STYLES */
.bg-primary {
	background-color: #d9b483 !important;
}

/* HOMEPAGE SECTION-SPECIFIC STYLES */

section#contact {
  background-color: #2D274F !important;
  background-image: none !important;
}

section#about {
  /* height: 95vh; */
}


/* LINK STYLES */
a { color: #5A5A7A; }

.active { colour: #ffc800 !important; }

:root {
  --bs-link-color: #341DBC;
  --bs-link-hover-color: color-mix(in srgb, var(--bs-link-color), black 20%);
  --bs-link-underline-color: color-mix(in srgb, var(--bs-link-color), white 75%);
  --bs-link-underline-hover-color: color-mix(in srgb, var(--bs-link-color), black 20%);
}

h1, h1 a, h2 a, h2, h3 a, h4 a, h5 a {
  text-decoration: none !important;
}

/* BUTTON STYLES */
.btn { color: white !important; }

.btn-primary {
	background-color: #d9b483 !important;
	}

.btn-secondary {
	background-color: #2D274F !important;
	}

.btn-secondary-light {
	background-color: #5A5A7A !important;
	}

.btn-3 {
	background-color: #c996c1 !important;
	}

.btn-3-light {
	background-color: #E8C0E2 !important;
	}

.editButton { float: right !important; }

.bg-lsc-primary {
  background-color: #dc3545;
  border-color: #dc3545;
}

.bg-lsc-secondary {
  background-color: #2D274F;
  border-color: #2D274F;
}


/* BLOG STYLES*/
.blogWrapper {
	margin-bottom: 25px; 
	background-color: #F7F7F7; 
	padding: 20px; 
	border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
}

.blogContent {
	padding: 0 0 !important;
}

.readMoreWrapper {
  margin-top: 15px;
}

/* MEDIA QUERIES */
@media (min-width: 768px) {
  header.masthead {
    padding-top: 10rem !important;
  }
}

@media (min-width: 992px) {
  #mainNav .navbar-brand img {
    height: 3.5rem !important;
  }
}