/* ========================================================================= */
/*                                                          Custom CSS Reset */
/* ========================================================================= */
*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
	line-height: calc(1em + 0.5rem);
}

html,
body {
	height: 100%;
}

body {
	-webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

input,
button,
textarea,
select {
	font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
	margin-top: 0;
	margin-bottom: 0;
}

/* bootstrap ROW */
.row {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 0;
	margin-right: 0;
	margin-left: 0;
}


/* ========================================================================= */
/* 															Custom Variables */
/* ========================================================================= */
:root {
	/* fonts */
	--heading-font: 'Nunito', sans-serif;
	--head-font: 'Oswald', sans-serif;
	--nav-font: 'PaytoneOne', sans-serif;
	--heading-font: 'SourceSans3', sans-serif;
	--para-font: 'SourceSans3', sans-serif;
	--italic: 'SourceSans3Italic', sans-serif;

	/* colours */
	--site-blue: rgba(218,225,65, 1);
	--site-blue: rgba(149,212,228, 1);
	--site-yellow: rgba(33, 152, 58, 1);
	--site-yellow: rgba(218,225,65, 1);
	--site-white: rgba(255, 255, 255, 1);
	--color-light-green: #2CCCC4;
	--color-dark-green: #073a36;
	--color-white: rgba(255, 255, 255, 1);
	--border-color: rgba(31, 31, 31, 1);
	--nav-font-color: var(--border-color);
	--nav-background: var(--color-white);
	--page-color: rgba(51, 51, 51, 1);
	--header-bg-color: rgba(255, 255, 255, .95);
	--btn-bgcolor: rgba(51, 51, 51, 1);
	--btn-color: rgba(255, 255, 255, 1);
	--btn-border: rgba(102, 102, 102, 1);
	--btn-hover-bg: rgba(234, 234, 234, 1);
	--btn-hover-color: rgba(51, 51, 51, 1);
	--footer-color: rgb(214, 214, 214);
	--meta-heading: rgb(70, 70, 70, 1);
	--meta-para: rgb(150, 150, 150, 1);
	--site-red:    rgba( 255,   0,   0, .8);
	--site-yellow: rgba( 255, 251,   0, .8);
	--site-green:  rgba(   0, 255,   0, .8);
	--site-blue:   rgba(   0,   0, 255, .8);
	--site-violet: rgba( 255,   0, 255, .8);



	/* row heights */
	--header: 5rem;
	--featured-header: 200px;
	--main: 300px;
	--articles: 300px;
	--chairperson-wrapper: 300px;
	--footer: 1fr;
}

/* ========================================================================= */
/* 					   							   Social Media Icon Colours */
/* ========================================================================= */
.fa-facebook, .fa-facebook-square {
    color: #3b5998
}
.fa-twitter, .fa-twitter-square {
    color: #00aced
}
.fa-google-plus, .fa-google-plus-square {
    color: #dd4b39
}
.fa-youtube, .fa-youtube-play, .fa-youtube-square {
    color: #bb0000
}
.fa-tumblr, .fa-tumblr-square {
    color: #32506d
}
.fa-vine {
    color: #00bf8f
}
.fa-flickr {
    color: #ff0084
}
.fa-vimeo-square {
    color: #aad450
}
.fa-pinterest, .fa-pinterest-square {
    color: #cb2027
}
.fa-linkedin, .fa-linkedin-square {
    color: #007bb6
}
.fa-instagram {
    color: #517fa4;
}
.fa-spotify {
    color: #1ED760;
}

/* ========================================================================= */
/* 																	Page CSS */
/* ========================================================================= */
body {
	background-color: var(--site-white) !important;
	background-image: linear-gradient(to right, var(--site-red), var(--site-yellow), var(--site-green), var(--site-blue), var(--site-violet)) !important;
	color: #444a52;
	margin: 0;
	padding: 0;
	-moz-osx-font-smoothing: grayscale;
	display: block;
	font-size: 16pt;
}

.admin-page {
    background-color: var(--site-white) !important;
}

.image-shadow {
	border: 0.0625rem solid var(--border-color);
	filter: drop-shadow(5px 5px 10px var(--color-dark-green));
}

.image-circular {
	width: 200px;
	height: 200px;
	border-radius: 100px;
	overflow: hidden;
}

.image-circular img {
	width: 200px;
	height: 200px;
	object-fit: cover;
}

/* Floating column for labels: 25% width */
.col-25 {
	float: left;
	width: 25%;
	margin-top: 6px;
}

/* Floating column for inputs: 75% width */
.col-75 {
	float: left;
	width: 75%;
	margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
	content: "";
	display: table;
	clear: both;
}


h1{
	font-family: var(--heading-font);
	font-size: 36pt;
	font-weight: 900;
	color: var(--color-dark-green);
}

h2 {
	font-weight: 600;
	color: black;
}

h3, h4 {
	color: var(--color-dark-green);
}

p {
	color: var(--color-dark-green);
		font-family: var(--para-font);
	font-size: 14pt;
	line-height: 16pt;
}

.small-p {
	font-size: 12pt;
	line-height: 14pt;
}

.page-footer {
	background-color: var(--footer-color);
	color: var(--site-white);
}

.navbar {
	/* background: linear-gradient(to right, var(--site-yellow), var(--site-white), var(--site-white), var(--site-blue)); */
	background-color: white;
}

.navbar-toggler {
	background-color: var(--site-white);
}

.nav-link {
	color: Black;
}

.admin-nav-link {
	color: var(--site-yellow);
	text-decoration: none;
}

.admin-nav-link.active {
	color: var(--site-blue);
	text-decoration: none;
}

.nav-link:hover {
	color: Red;
}

.navbar-nav .nav-link.active {
	color: Red;
	text-decoration: none;
}

.admin-nav-link:hover {
	color: var(--site-blue);
	text-decoration: none;
}

.px-3, .container-fluid {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.card-img-top {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

tr {
	border-style: none;
	background-color: transparent !important;
}

 /* `xs` returns only a ruleset and no media query */
 /* ... { ... } */

 /* `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (min-width: 576px) {
h1 {
	font-family: var(--heading-font);
	font-size: 42pt;
	font-weight: 900;
}
}

 /* `md` applies to small devices (landscape phones, less than 768px) */
@media (min-width: 768px) {
h1 {
	font-family: var(--heading-font);
	font-size: 64pt;
	font-weight: 900;
}
}

 /* `lg` applies to medium devices (tablets, less than 992px) */
@media (min-width: 992px) {
h1 {
	font-family: var(--heading-font);
	font-size: 72pt;
	font-weight: 900;
}
}

 /* `xl` applies to large devices (desktops, less than 1200px) */
@media (min-width: 1200px) {
h1 {
	font-family: var(--heading-font);
	font-size: 84pt;
	font-weight: 900;
}
}

 /* `xxl` applies to x-large devices (large desktops, less than 1400px) */
@media (min-width: 1400px) {
h1 {
	font-family: var(--heading-font);
	font-size: 96pt;
	font-weight: 900;
}
}