/* CSS TABLE OF CONTENTS
=====================================
	#BASE CSS
	#SITE-SPECIFIC CSS
===================================== */ 

/* BASE (Initital Setup)
=====================================
	#RESET
	#HTML5
	#BASE TYPOGRAPHY
		#BODY
		#HEADINGS
		#PARAGRAPHS
		#LINKS
		#LISTS
	#IMAGES
	#CLEARFIX
===================================== */

/* #RESET
================================================== */  
* {
	margin: 0;
	padding: 0;
}

/* #HTML5
================================================== */
header, section, footer, aside, nav, article, figure {
  display: block;
}

/* #BASE TYPOGRAPHY
================================================== */

/* BODY */
body {
	font-family: Montserrat, Helvetica, Arial, sans-serif;
	font-size: 100%; /* 1em = 16px */
	line-height: 1.5em; /* 16px x 1.5em = 24px */
	color: #333;
}

/* #HEADINGS
 	Based on a Traditional Typographic Scale 	48, 36, 24, 21, 18, 16	*/

		h1, h2, h3, h4, h5, h6 {
			margin-bottom: .5em;
		}

		h1 {
			font-size: 3em; /* 48px / 16px = 3em */
			line-height: 1em; 
		}

		h2 {
			font-size: 2.25em; /* 36px / 16px = 2.25em */
			line-height: 1.1em;
		}

		h3 {
			font-size: 1.5em; /* 24px / 16px = 1.5em */
			line-height: 1.2em;
		}

		h4 {
			font-size: 1.3125em; /* 21px / 16px = 1.3125em */
			line-height: 1.3em;
		}

		h5 {
			font-size: 1.125em; /* 18px / 16px = 1.125em */
			line-height: 1.4em;
		}

		h6 {
			font-size: 1em; /* 16px / 16px = 1em */
			line-height: 1.5em;
		}

		h3.huge-text {font-size: 44px;}
		/* #PARAGRAPHS 
		================================================== */
		p { 
			margin-bottom: .5em; 
		}


/* #LINKS
================================================== */
	a { color: #6ab43e; text-decoration: none;  }
	a:hover, a:focus { color: rgb(0, 153, 110); }
	
	.btn {
		border:white solid 2px;
		padding:12px 28px; margin:20px;
	}
	.btn a, .btn a:visited, a.btn{
		color:white !important;
		text-transform: uppercase;
		font-weight: 500;
		text-align: center;
		font-size: 1.5rem;
	}
	.btn_colour {
		color:white;
		background-color: var(--green-mid);
	}
	.btn_colour a, a.btn_colour {
		font-size: .9rem !important;
		color:white !important;
	}
	.btn_colour a:visited, .btn a:visited {
		color:white !important;
		tex
	}


/* #LISTS
================================================== */
ul, ol {
	margin-bottom: .5em;
}
ul li ul, ul li ol, ol li ul, ol li ol {
	margin: 0; 
}
li {
	margin-left: 1.875em;
}

/* #IMAGES
================================================== */
	img.scale-with-grid {
		max-width: 100%;
		height: auto; 
	}
	a img {
		border: none;
	}
	/* logo */
	.brand{
		/* border:solid red 1px; */
		padding:40px 20px 20px 20px;
		max-width: 100%;background-color: #fff;  
	}

/* #CLEARFIX ================================================== */
	.group:after {
	content: "";
	display: table;
	clear: both;
	}



/* SITE SPECIFIC (Custom CSS for The Client Site)
=====================================
	#SITE-SPECIFIC GENERAL STYLING
	#SITE-SPECIFIC TYPOGRAPHY
	#LAYOUT/GRID
	#SECTIONS
	#MEDIA QUERIES
	#@FONT-FACE
===================================== */

/* #SITE-SPECIFIC GENERAL STYLING
===================================== */
:root {
	--green-light: #2AF598;
	--green-mid: #1ba467;
	--green-dark: #114145;
	--gradient-coral: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
	--gradient-dark: linear-gradient(62deg, #114145 0%, #1a302b 100%);
	--gradient-blue: linear-gradient(62deg, #08AEEA 0%, #2AF598 100%);
  
    --gradient-mid: linear-gradient(62deg, #1ba467 0%, #114145 100%);


}
body {
	background: #f7f7f7;
}

/* #SITE SPECIFIC TYPOGRAPHY
===================================== */
.display_heading_1 {font-size:1.9em !important;}
.row .display_heading_1 {color:#333 ;}
/* #LAYOUT/GRID
===================================== */
/* helpers */
/* .incomplete {background-color:rgba(255, 255, 0, 0.22); border:solid #ff00ff 2px;} */
/* section {border:dotted blue 3px;} .container{border:dotted red 3px;} .content {border:dotted lime 3px;} .row {border:dotted yellow 3px;}, .col {border:dotted purple 3px;} */
.fix1 {border:dotted blue 3px;} .fix2 {border:dotted red 3px;} .fix3 {border:dotted green 3px;}

.container { 
	/* width:100%;  */
	max-width: 1440px; min-width: 360px;  
	margin: 5em auto;  	
	padding: 3em;
}
.content { padding:10px;	}
.row {	display:flex; 	gap: 2%; }
.tight {margin:5px;}
.col {	display:flex; flex-direction: column;   align-items: center; row-gap: 15px;}
.thirds {max-width:30%;}
.icon {	height: 75px;margin:25px;border-radius: 35px;}
.align-centre {text-align: center; margin: 0 auto;}
.padding-XL {row-gap:3em;}

.width_medium {max-width:66%;margin:0 auto;}
.width_small {max-width:50%;margin:0 auto;}
/* #SECTIONS
===================================== */
section {
	margin:0 auto; width:100%;
	display: flex;flex-direction: column; align-items: center;
}

#nav{
	/* border:solid red 2px; */
	width:100%;
}
#nav .row {
	display:flex; 
	align-items: stretch;
	justify-content: space-between !important;
	flex-direction: row;
	gap:50px;
}
#nav .container {
	padding:0; margin:0px auto;
}
.nav {
	background-color: white;
	padding:25px 15px;
	/* align-items: center !important; */
	/* grow flex */
}
.nav_bar {
	width:60%; padding:10px;
	display:flex; 
	flex-direction: row-reverse;
	align-items: center;
}
.fullwidth_banner_image {
	width:100%;
	height:40vh; min-height: 700px; max-height: 750px;
	background-size: cover;	background-repeat: none; 
	color:white;
}
	.img_coral_1 {background-image:url("/img/coral05.jpg");}
	.img_coral_2 {background-image:url("/img/coral01.jpg");height:20vh; min-height: 400px; max-height: 750px;}
	.img_coral_3 {background-image:url("/img/coral04.jpg");height:20vh; min-height: 400px; max-height: 750px;}


section.colour_block_mid {
	background: var(--gradient-mid);
	color:white;
	text-align: center;
}
section.colour_block_dark {
	background: var(--gradient-dark);
	color:white;
	text-align: center;
}
#footer_bar {
	background-color: #08AEEA;
	background-image: var(--gradient-blue);
}
#footer_bar .container {
	margin:0px;
}
#donate_options .row {justify-content: center;
}
/* #MEDIA QUERIES
===================================== */

/* Tablet (Between 768px - 992px)*/
@media all and (min-width: 48em) and (max-width: 62em) {
	
	body {
		font-size: 93.75%; /* 15px */
	}
	
	.container {
		width: 80%;
		/* margin: 4%; */
		padding: 6%;
	}
	.row {
		display:flex;
		/* flex-direction: column; */
	}
	.thirds {max-width:100%;}
	.nav {
		/* background-color: white; */
		/* padding:15px 5px; */
	}
	#nav .row {
		flex-direction: row;
	}
	.brand{
		/* border:solid red 1px; */
		padding:20px 10px 10px 10px;
	
	}
		

}

/* MOBILE (Smaller than 768px)*/
@media only screen and (max-width: 47.9999em) {
	
	body {		font-size: 87.5%; /* 14px */	}
	.container {		width: 84%;		margin: 3%;		padding: 5%;	}
	
	.row {
		display:flex; flex-direction: column;
	}
	.thirds {max-width:100%;}
	#nav .container {width:100%;}
	#nav .row {
		flex-direction: row;
		gap:0px;
		background-color: var(--green-light);
	}
	.brand{		padding:20px 10px 10px 10px;	}
	
	.nav_bar {
		padding:0px;margin:0px;
		/* display: flex; flex-direction: row; */
	}
	
	.nav_bar .btn {
		text-align: center;
		min-width: 100%;
		padding:50px 5px !important; 
		margin: 0px !important;

		/* border: solid red 2px; */
		border:0px;
		display: flex;
		flex-direction: column;
		align-items:stretch;
	}

	/* button styles */
	#nav .row:hover {
		background-color: #1a302b;
	}
	
	.width_medium {max-width:100%;margin:0 auto;}

}

/* #@FONT-FACE
===================================== */
/*-- Font Family --*/
@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800,900|Poppins:300,400,500,600,700");