@charset "utf-8";
body {
	margin: 0;
	font-family: Roboto, "Franklin Gothic Book", Arial;
	color: #0E123B;
	font-size: 1.5vw;
}
.style1 {
	font-size: 1.5vw;
}
.style2 {
	font-size: 1.2vw;
}
#container {
	background-color: #FFFFFF;
	width: 100%;
}
.mobile-menu {
	display: none;
}
#mobile_image {
    display: none;
}
#header {
    width: 100%;
    background-color: #FFFFFF;
    transition: all 0.3s ease;
    padding-bottom: 15px;
    position: relative;
    z-index: 500; /* Keep it lower than the logo and menu */
}
#header.fixed {
    position: fixed;
    top: 0;
    background-color: #FFFFFF;
    z-index: 999; /* Ensure it's above other content but below logo and menu */
    height: auto; /* Adjusted height when fixed */
    padding-bottom: 5px;
}
#logo {
    z-index: 1000; /* Higher than the header, but not too high */
    position: relative;
    padding-left: 20px;
    padding-top: 20px;
	padding-bottom: 5px;
	width: 25%
}
#logo img {
    width: 100%; /* Initial logo size */
}
#header.fixed #logo img {
    width: 15%; /* Smaller logo size */
}
#menu {
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 15px;
    z-index: 999; /* Ensure it's above the header but below the logo */
}
#header.fixed #menu {
    position: absolute;
    top: 0;
    align-items: flex-start;
    padding-bottom: 25px;
    padding-top: 25px;
}
#menu table {
    width: 100%; 
}
#menu td {
    padding: 0 10px; 
    line-height: normal; 
    white-space: nowrap;
}
#menu a:link, #menu a:visited {
    color: #0E123B;
    text-transform: uppercase;
    text-decoration: none;
}
#menu a:hover {
    color: #F6861F;
}
#line {
	background-color: #07477B;
	clear: both;
	padding-top: 50px;
}
#clear {
	clear: both;
}
#banner {
	overflow: hidden;
	background-color: #07477B;
	font-size: 0px;
}
#banner_mobile {
	display: none;
}
h1 {
	font-family: Roboto, "Franklin Gothic Book", Arial;
	font-size: 2.7vw;
	font-weight: bold;
	text-transform: uppercase;
}
h2 {
	font-size: 2vw;
	font-weight: bold;
	text-transform: uppercase;
}
h3 {
	font-size: 1.5vw;
	font-weight: bold;
	text-transform: uppercase;
}
a:link {
	color: #07477B;
	text-decoration: none;
}
a:visited {
	color: #07477B;
	text-decoration: none;
}
a:hover {
	color: #F6861F;
	text-decoration: none;
}
input[type=text] {
  width: 75%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border-style:none;
}
#login #form1 input[type=text] {
	width: 75%;
	padding: 12px 20px;
	margin: 8px 0;
	box-sizing: border-box;
	border: thin solid #333333;
}
#login #form1 input[type=password] {
  width: 75%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: thin solid #333333;
}
textarea {
    background-color:#FFFFFF !important;
	width: 75%;
	padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border-style:none;
}
#login #form1 textarea {
	background-color:#FFFFFF !important;
	width: 75%;
	padding: 12px 20px;
	margin: 8px 0;
	box-sizing: border-box;
	border: thin solid #333333;
}
input[type=button], input[type=submit], input[type=reset] {
  background-color: #FFFFFF;
border-style:none;
  color: #0E123B;
  padding: 16px;
  text-decoration: none;
  cursor: pointer;
  font-size: 1.5vw;
}
#login input[type=submit] {
  background-color: #FFFFFF;
	border: thin solid #333333;
  color: #0E123B;
  padding: 16px;
  text-decoration: none;
  cursor: pointer;
  font-size: 1.5vw;
}
#message_right input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border-style:none;
}
#message_right textarea {
    background-color:#FFFFFF !important;
	width: 100%;
	padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border-style:none;
}
#message_right input[type=button], input[type=submit], input[type=reset] {
  background-color: #FFFFFF;
border-style:none;
  color: #0E123B;
  padding: 16px;
  text-decoration: none;
  cursor: pointer;
  font-size: 1.5vw;
}
#body {
	overflow: hidden;
	background-color: #FFFFFF;
	color: #0E123B;
}
#body_d_blue_home {
    display: flex;
    align-items: center; /* Centers the child elements vertically */
    background-color: #07477B;
    color: #FFFFFF;
}
#body_d_blue {
	background-color: #07477B;
	color: #FFFFFF;
	display: flex;
	align-items: center; /* Centers the child elements vertically */
}
#body_w {
	background-color: #FFFFFF;
	color: #0E123B;
	display: flex;
	align-items: center; /* Centers the child elements vertically */
}
#body_x {
	display: none;
}
#body_d_blue a:link {
	color: #07477B;
	text-decoration: none;
}
#body_d_blue a:visited {
	color: #07477B;
	text-decoration: none;
}
#body_d_blue a:hover {
	color: #F6861F;
	text-decoration: none;
}
#body_left_home {
    width: 60%;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically centers the content */
}
#body_left {
	float: left;
	width: 60%;
	padding: 50px;  
}
#body_left a:link {
	color: #FFFFFF;
}
#body_left a:visited {
	color: #FFFFFF;
}
#body_left a:hover {
	color: #F6861F;
	text-decoration: none;
}
#body_left #connect a:link {
	color: #0E123B;
	text-decoration: none;
}
#body_left #connect a:visited{
	color: #0E123B;
	text-decoration: none;
}
#body_left #connect a:hover {
	color: #F6861F;
	text-decoration: none;
}
#body_centre {
	color: #0E123B;
	background-color: #FFFFFF;
	padding-top: 25px;
	padding-right: 50px;
	padding-bottom: 25px;
	padding-left: 50px;
}
#body_right_home {
    width: 40%;
    margin-right: -1px;
    font-size: 0px;
}
#body_right {
	float: left;
	width: 40%;
	margin-right: -1px;
	font-size: 0px;
}
#body_blue {
	background-color: #dfeaf2;
	padding-top: 25px;
	padding-right: 50px;
	padding-bottom: 25px;
	padding-left: 50px;
}
#body_white {
	background-color: #FFFFFF;
	padding-top: 25px;
	padding-right: 50px;
	padding-bottom: 25px;
	padding-left: 50px;
}
#body_lb {
	background-color: #dfeaf2;
}
#body_lb a:link {
	color: #0E123B;
	text-decoration: none;
}
#body_lb a:visited{
	color: #0E123B;
	text-decoration: none;
}
#body_lb a:hover {
	color: #F6861F;
	text-decoration: none;
}
#body_lb_inner {
	padding-top: 50px;
	padding-right: 50px;
	padding-left: 50px;
	padding-bottom: 25px;
}
#body_grey {
	display:flex;
	background-color: #dfeaf2;
	padding-right: 40px;
	padding-bottom: 40px;
	padding-left: 40px;
}
#comm_groups4 {
	display:flex;
	background-color: #dfeaf2;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left: 20px;
}
#col4 {
	width: 25%;
	padding: 15px;
	margin: 10px;
	float: left;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	background-color: #FFFFFF;
	font-size: 1.2vw;
}
#col4a {
	width: 25%;
	padding: 10px;
	margin: 10px;
	float: left;
	font-size: 1.2vw;
	text-align: center;
}
#col4 img {
	width: 100%;
}
#safe_logo {
	float: right;
}
#coming_events {
	padding: 50px;
	background-color: #dfeaf2;
}
#two {
	background-color: #dfeaf2;
	padding: 50px;
	width: 100%;
	display:inline-block;
}
#venue {
	width: 100%;
	display: flex;
	padding-right: 40px;
	padding-bottom: 25px;
	padding-left: 40px;
}
#half {
	width: 49%;
	padding: 15px;
	margin: 10px;
	float: left;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	background-color: #FFFFFF;
}
#half_left {
	float: left;
	width: 50%;
	padding-right: 25px;
}
#half_left img {
	padding-bottom: 25px;
}
#half_right {
	float: left;
	width: 50%;
	padding-left: 25px;
}
#half_right img {
	padding-bottom: 25px;
}
#half_left_blue {
	background-color: #dfeaf2;
	float: left;
	width: 47%;
	padding: 25px;
	display: inline-block;
	margin-right: 25px;
}
#half_right_blue {
	background-color: #dfeaf2;
	float: left;
	width: 47%;
	padding: 25px;
	display: inline-block;
	margin-left: 25px;
}

.row-eq-height {
	display:flex;
	padding-right: 35px;
	padding-left: 35px;
	padding-bottom: 25px;
}

.col-1 {
	background-color:#dfeaf2;
	margin: 15px;
	width: 47%;
	text-align: center;
	padding: 25px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.col-2 {
	background-color:#dfeaf2;
	margin: 15px;
	width: 47%;
	text-align: center;
	padding: 25px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#image img{
	width: 100%;
}
#coming_events table {
  table-layout: fixed;
  width: 100%;
  font-size: 1.2vw;;
}
#coming_events td {
    padding: 20px;
	box-sizing: border-box;
	vertical-align: text-top;
}
#message {
	background-color: #7FD4EE;
	overflow: hidden;
	display: flex;
}
#body_cubes {
	padding-left: 40px;
	display:flex;
	padding-top: 0px;
	padding-right: 40px;
	padding-bottom: 25px;
}
#body_cubes_c {
	padding-left: 40px;
	display:flex;
	padding-top: 25px;
	padding-right: 40px;
	padding-bottom: 25px;
}
#body_cubes_db {
	padding: 25px;
	background-color: #07477B;
	display:flex;
}
#cubes {
	width: 33%;
	padding: 15px;
	margin: 10px;
	float: left;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	background-color: #FFFFFF;	
}
#body_cubes_db #cubes {
	width: 33%;
	padding: 15px;
	margin: 10px;
	float: left;
	background-color: #FFFFFF;	
}
#cubes img {
	padding-bottom: 25px;
	width: 100%;
}
hr {
	border-top-width: thick;
	border-top-style: solid;
	color: #0E123B;
}
#message_left {
	float: left;
	width: 60%;
	padding: 50px;
	background-color: #dfeaf2;
}
#message_right {
	float: left;
	width: 40%;
	margin-right: -1px;
	padding: 50px;
	background-color: #07477B;
	color:#FFFFFF;
	display: inline-block;
}
#links {
	width: 100%;
	background-color: #0E123B;
}
#links table {
	table-layout: fixed;
	width: 70%;
	margin-right: auto;
	margin-left: auto;
	padding-top: 75px;
	padding-bottom: 75px;
}
#links td {
	box-sizing:border-box;
	vertical-align: middle;
	padding-top: 5px;	
}
#links td img{
	padding-right: 60px;
	padding-left: 60px;
}
#footer {
	background-color: #0E123B;
	padding: 25px;
	overflow: hidden;
	position: relative;
}
#footer h3 {
	color: #FFFFFF;
	font-size: 1.5vw;
}
#footer .style1 {
	color: #FFFFFF;
	font-size: 1.5vw;
	text-transform: uppercase;
}

#footer p {
	color: #FFFFFF;
	font-size: 1.2vw;
}
#footer #right {
	float:right;
	position:absolute;
	bottom: 0;
	right:0;
	clear:right;
	width: 40%;
 	padding-bottom: 15px;
}
#footer #right table {
	padding-top: 25px;
	padding-left: 25px;
}
#footer #left {
	float: left;
	width: 35%;
}
#footer #middle {
	float: left;
	width: 24%;
}
#footer td img{
	padding-right: 15px;
	padding-left: 15px;
}

#footer_home {
	background-color: #C4C4C4;
	padding: 25px;
	overflow: hidden;
	position: relative;
}
#footer_home h3 {
	color: #0E123B;
	font-size: 1.5vw;
}
#footer_home p {
	color: #0E123B;
	font-size: 1.2vw;
}
#footer_home #right {
	float:right;
	position:absolute;
	bottom: 0;
	right:0;
	clear:right;
	width: 40%;
 	padding-bottom: 15px;
}
#footer_home #right table {
	padding-top: 25px;
	padding-left: 25px;
}

#footer_home #left {
	float: left;
	width: 60%;
}
#footer_home td img{
	padding-right: 20px;
	padding-left: 20px;
}
#footer_home a:link {
	text-decoration: none;
}
#footer_home a:visited {
	color: #FFFFFF;
	text-decoration: none;
}
#footer_home a:hover {
	color: #F6861F;
	text-decoration: none;
}
#footer a:link {
	color: #FFFFFF;
	text-decoration: none;
}
#footer a:visited {
	color: #FFFFFF;
	text-decoration: none;
}
#footer a:hover {
	color: #F6861F;
	text-decoration: none;
}
#body_centre table {
	table-layout: fixed;
	width: 70%;
	margin-right: auto;
	margin-left: auto;
	padding-top: 30px;
	padding-bottom: 30px;
}
#body_centre td {
	box-sizing:border-box;
	vertical-align: middle;
	text-align: center;
}
#body_centre img{
	padding-right: 25px;
	padding-left: 25px;
	height: 100%;
	width: 100%;
}
#comm_groups {
	background-color: #dfeaf2;
	padding: 50px;
	text-align: center;
}
#comm_groups img{
	width: 100%;
}
#comm_groups table td {
  text-align: center;
}
#comm_groups #comm_groups4 a:link {
	text-decoration: none;
	color: #0E123B;
}
#comm_groups #comm_groups4 a:visited {
	color: #0E123B;
	text-decoration: none;
}
#comm_groups #comm_groups4 a:hover {
	color: #F6861F;
	text-decoration: none;
}
#statements {
	padding: 50px;
	width: 100%;
	height: auto;
}
#ind_state {
	float: left;
	width: 25%;
	padding-bottom: 50px;
}
#ind_state p {
	text-align: center;
	padding-right: 25px;
	padding-left: 25px;
}
#ind_state h3 {
	text-align: center;
}
#ind_state img {
	width: 50%;
	margin: auto;
	display: block;
	padding-bottom: 25px;
}
#body_white #half_left p {
	padding-top: 10px;
}
.hidden-div {
    display: none;
}
#mission {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	padding-right: 50px;
	padding-bottom: 50px;
	padding-left: 50px;
}
#mission_state {
	display: flex; /* Flex container to align image and text side by side */
	gap: 20px; /* Adds consistent spacing between image and text */
	align-items: center; /* Centers the items vertically within each container */
}
#vision_image {
	flex: 0 0 20%; /* Fix the width of the image container to 20% */
    
    display: flex;
    align-items: center; /* Centers image within its container */
    justify-content: center;
}
#vision_image img {
	width: 100%;
}
#vision_state {
	display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically centers the content */
	flex: 1;
}
#login {
	padding: 50px;
	width: 100%;
}
#login img {
    margin: auto;
    display: block;
}
#hidden{
	display:none;
}



@media only screen and (max-width: 600px) {
body {
	font-size: 1rem;
}
.style1 {
	font-size: 1rem;
}
.style2 {
	font-size: .9rem;
}
h1 {
	font-size: 1.4rem;
}
h2 {
	font-size: 1.2rem;
}
h3 {
	font-size: 1rem;
}
input[type=text] {
  width: 100%;
}
textarea {
	width:100%;
}
input[type=button], input[type=submit], input[type=reset] {
  padding: 16px;
  font-size: 1rem;
}
#header {
	display:none;
}
.mobile-menu {
	display: block;
}
#banner {
	display: none;
}
#banner_mobile {
	display: block;
}
#body_d_blue_home {
	display: block;
}
#body_right_home {
    width: 100%; 
}
#body_left_home {
    width: 100%;
    padding: 25px;
}
#ind_state {
	width: 100%;
	padding-bottom: 20px;
}
#mission {
      display: none; /* Hide mission section on small screens */
    }
#ind_state .hidden-div {
      display: none; /* Initially hide the divs within each ind_state */
    }
#body_centre {
	padding: 25px;
}
.row-eq-height {
	display: block;
	padding-right: 15px;
	padding-left: 15px;
}
.col-1 {
	width: 92%;
	padding: 15px;
}

.col-2 {
	width: 92%;
	padding: 15px;
}
#body_white {
	padding: 25px;
}
#body_lb_inner {
	padding: 25px;
}
#body_grey {
	display: block;
	padding-bottom: 25px;
	padding-left: 15px;
	padding-right: 15px;
}
#comm_groups4{
	display: block;
	padding-bottom: 0px;
	padding-left: 15px;
	padding-right: 15px;
}
#col4 {
	width: 95%;
	font-size: 1rem;
	float: none;
	clear:both;
	margin-bottom: 15px;
}
#col4a {
	width: 95%;
	font-size: 1rem;
	float: none;
	clear:both;
	margin-bottom: 15px;
}
#body_d_blue {
	display: block;
}
#body_right {
	width: 100%;
}
#body_left {
	width: 100%;
	padding: 25px;
}
#body_w {
	display: none;
}
#body_x {
	display: block;
}
#body_cubes {
	padding-left: 15px;
	display: block;
	padding-top: 0px;
	padding-right: 15px;
	padding-bottom: 0px;
}
#body_cubes_c {
	padding-left: 15px;
	display: block;
	padding-top: 15px;
	padding-right: 15px;
	padding-bottom: 15px;
}
#body_cubes_db {
	padding: 15px;
	display: block;
}
#cubes {
	width: 95%;
	padding: 15px;
	margin: 10px;
	float: none;
}
#body_cubes_db #cubes {
	width: 95%;
	padding: 20px;
	margin: 10px;
	float: none;
}
#comm_groups {
	padding: 25px;
	text-align: left;
}
#two {
	padding: 25px;
}
#half_left {
	width: 100%;
	float: none;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 25px;
}
#half_left img {
	padding-bottom: 15px;
}
#half_right {
	width: 100%;
	float: none;
	padding: 0px;
}
#half_right img {
	padding-bottom: 15px;
}
#venue {
	display: block;
	padding-right: 15px;
	padding-bottom: 0px;
	padding-left: 15px;
}
#half {
	width: 95%;
	padding: 15px;
	margin: 10px;
	float: none;
}
#message {
	overflow: hidden;
	display: block;
}
#message_left {
	float: none;
	width: 100%;
	padding: 25px;
}
#message_right {
	float: none;
	width: 100%;
	padding: 25px;
	display: block;
}
#footer h3 {
	color: #FFFFFF;
	font-size: 1rem;
}
#footer .style1 {
	font-size: 1rem;
}
#footer p {
	font-size: .9rem;
}
#footer #left {
	width: 100%;
}
#footer #middle {
	width: 100%;
}
#footer #right {
	width: 100%;
 	padding-bottom: 10px;
	position: relative;
}
#footer #right table {
	padding-top: 15px;
	padding-left: 0px;
}
#footer td img{
	padding-right: 3px;
	padding-left: 3px;
}

}