@charset "utf-8";
/* CSS Document */
@import url("https://use.typekit.net/xsf4usp.css");
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Cutive+Mono&family=Major+Mono+Display&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap');
/* 
Google Fonts:
font-family: 'Courier Prime', monospace;
font-family: 'Cutive Mono', monospace;
font-family: 'Major Mono Display', monospace;
font-family: 'Roboto', sans-serif;
font-family: 'Source Sans Pro', sans-serif; 

Adobe Fonts:
.tk-neuzeit-grotesk-condensed { font-family: "neuzeit-grotesk-condensed",sans-serif; }
.tk-neuzeit-grotesk { font-family: "neuzeit-grotesk",sans-serif; }
.tk-bebas-neue { font-family: "bebas-neue",sans-serif; }
.tk-prestige-elite-std { font-family: "prestige-elite-std",monospace; }
.tk-courier-std { font-family: "courier-std",monospace; }
.tk-nitti-typewriter-normal { font-family: "nitti-typewriter-normal",sans-serif; }
.tk-nitti-typewriter-corrected { font-family: "nitti-typewriter-corrected",sans-serif; }
.tk-nitti-typewriter-open { font-family: "nitti-typewriter-open",sans-serif; }
.tk-nitti-typewriter-underlined { font-family: "nitti-typewriter-underlined",sans-serif; }
.tk-nitti-typewriter-cameo { font-family: "nitti-typewriter-cameo",sans-serif; }

*/



.yellowBack {
	background-color: #f2cd47;
}
.whiteBack {
	background-color: white;
}
.m-off{
	margin-top:90px;
}
.filter-white {
	filter: invert(0%) sepia(100%) saturate(0%) hue-rotate(21deg) brightness(97%) contrast(103%);
}

.filter-white:hover {
	filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(26deg) brightness(108%) contrast(104%);
}

.arial {
    font-family: p22-underground-sc, Arial, Helvetica, Roboto, sans-serif;
    font-weight: 600;
}
.courier {
    font-family: Courier New, Courier Prime, Prestige Elite std, Protipo, Courier, monospace;
    font-weight: 400;
}
#RecoTriangle {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}
#RecoTriangle:hover {
    opacity: 0.7;
}
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto;
    margin: auto;
    background-color: rgb(255, 255, 255); /* Fallback color */
    background-color: rgba(255, 255, 255, 0.9); /* Black w/ opacity */
    align-items: center;
    justify-content: center;
}
/* Modal Content (Image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    height: 90%;
    object-fit: contain;
    object-position: center;
}
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}
/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
    animation-name: zoom;
    animation-duration: 0.9s;
}
@keyframes zoom {
    from {
        transform: scale(0)
    }
    to {
        transform: scale(1)
    }
}
/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}
.close:hover, .close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}
.unset a {
    text-decoration: none;
    color: black;
}
.unset a:visited {
    text-decoration: none;
    color: black;
}
.unset a:hover {
    text-decoration: none;
    color: white;
}

.clear_button {
        background-color: transparent;
        border: none;
}
.clear_button :hover{
	opacity: 0.8;
}
.pinkHover 
{
	background-color: transparent;
	color: black;
}
.pinkHover:hover{
	color: white !important; 
}
.pinkHover:active{
	color: black;
}

/* ### GRID ###

.grid-item {
  float: left;
  width: 80px;
  height: 60px;
  border: 2px solid hsla(0, 0%, 0%, 0.5);
}

.grid-item--width2 { width: 160px; }
.grid-item--height2 { height: 140px; }
*/
/*
/* ### FLIP CARDS ###

The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect * /
.flip-card {
  background-color: transparent;
  width: 300px;
  perspective: 1000px; /* Remove this if you don't want the 3D effect * /
	margin: 1em;
}

/* This container is needed to position the front and back side * /
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container 
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}*/

/* Position the front and back side * /
.flip-card-front, .flip-card-back {
  display: flex; 
	flex-direction: column; 
	align-items: center; 
		justify-content: flex-end;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari * /
  backface-visibility: hidden;
	
}

/* Style the front side (fallback if image is missing) * /
.flip-card-front {
  background-color: #fff;
  color: black;
}
.flip-card-front img{
	width: 100%;
	height: 100%;
  object-fit: contain;
}

/* Style the back side * /
.flip-card-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}
*/

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) {
    .modal-content {
        width: 100%;
    }
}
@media screen and (max-width: 576px) {
    .Re_Logo {
        width: 4em;
        height: 4em;
        padding: 5px;
    }
    .Re_Text {
        display: none;
    }
    .topBar {
        width: 100%;
        margin: auto;
        display: flex;
    }
    .Menu {
        width: 3em;
        height: 3em;
    }
    .marginFloat {
        margin-top: auto;
        margin-bottom: auto;
    }
    .bars {
        cursor: pointer;
        margin-right: 10px;
        margin-left: auto;
        align-content: center;
    }
    div .bars {
        padding: 5px;
    }
    .bar1, .bar2, .bar3 {
        width: 35px;
        height: 5px;
        background-color: black;
        margin: 6px 0;
        transition: 0.4s;
        display: block;
    }
    .MenuIcon {
        fill: black;
        color: black;
    }
    .sidenav {
        display: none;
    }
    /* The navigation menu links */
    .sidenav a {
        displau: none;
    }
    /* Position and style the close button (top right corner) */
    .sidenav .closebtn {
        display: none;
    }
    .topnav {
        height: 0; /* changed in js to open */
        width: 100%; /* full width */
        position: absolute;
		align-items: center;
		justify-content: flex-start;
        z-index: 1; /* Stay on top */
        top: 0; /* Stay at the top */
        right: 0;
        left: 0;
        background-color: hotpink; /* Black*/
        overflow: scroll; /*Enable horizontal scroll */
        transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
        margin-left: 0;
        margin-right: 0;
        white-space: nowrap;
        border-collapse: collapse;
        -ms-overflow-style: none; /* hide scroll in IE and Edge */
        scrollbar-width: none; /* hide scroll in  Firefox */
    }
    /* The navigation menu links */
    .topnav a {
        padding: 2px 10px;
        text-decoration: none;
        font-size: 4vh;
        color: #2D2D2D;
        display: inline-flex;
        transition: 0.3s;
        text-align: center;
    }
    /* Hide scrollbar for Chrome, Safari and Opera */
    .topnav::-webkit-scrollbar {
        display: none;
    }
    .title {
        font-size: 2em;
        text-align: center;
        width: 90%;
        display: block;
        margin: auto;
        padding: 30px 5px;
        letter-spacing: 5px;
    }
    /* Rotate first bar */
    .changeT .bar1 {
        transform: translate(0, 11px)rotate(-45deg);
    }
    /* Fade out the second bar */
    .changeT .bar2 {
        transform: translate(0, 0)rotate(-90deg);
        opacity: 0;
    }
    /* Rotate last bar */
    .changeT .bar3 {
        transform: translate(0, -11px) rotate(45deg);
    }
    .disclaimer {
        padding-top: 30px;
        text-align: center;
        width: 90%;
        margin: auto;
        justify-content: center;
        display: block;
        font-size: 10px;
    }
    .disclaimer img {
        width: 5%;
    }
    .gallery {
        width: 100%;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        margin: auto;
        padding-top: 15px;
    }
    .banner {
        width: 100%;
        max-height: 350px;
    }
    .ClickBorder {
        width: 90%;
        margin: 1em;
        display: flex;
        flex-direction: column;
        border-color: black;
        box-shadow: 1px 1px 5px 1px #888888;
        padding: 15px;
        cursor: pointer;
        text-align: center;
    }
    .ClickBorder img {
        max-height: 150px;
        object-fit: cover;
        object-position: center;
    }
    .ClickBorder:hover {
        border-color: black;
        box-shadow: 2px 2px 10px 2px #888888;
    }
    
    .flow {
        display: flex;
        justify-content: center;
        text-align: center;
        flex-direction: column;
        row-gap: 2em;
    }
    .flow_wide {
        display: flex;
        justify-content: center;
        text-align: center;
        flex-direction: column;
        row-gap: 2em;
    }
    .flow_reverse {
        display: flex;
        justify-content: center;
        text-align: center;
        flex-direction: column-reverse;
    }
    .left_to_center {
        text-align: center;
    }
    .form-popup {
        display: none;
        position: fixed;
        bottom: 0;
        right: 15px;
        border: 3px solid #f1f1f1;
        z-index: 9;
		background-color: #f2cd47;
    }
    /* Add styles to the form container */
    .form-container {
        max-width: 300px;
        padding: 20px;
    }
    .form-container label {
        text-align: center;
    }
    /* Full-width input fields */
    .form-container input[type=text], .form-container input[type=password] {
        box-sizing: border-box;
        width: 100%;
        padding: 15px;
        margin: 5px 5px 10px 5px;
        border: none;
        background: #f1f1f1;
        font-family: "Courier";
    }
    /* When the inputs get focus, do something */
    .form-container input[type=text]:focus, .form-container input[type=password]:focus {
        background-color: #ddd;
        outline: none;
    }
    /* Set a style for the submit/login button */
    .form-container .btn {
        color: black;
        background-color: transparent;
        font-size: 1.5em;
        padding: 10px 20px;
        border: none;
        cursor: pointer;
        width: 100%;
        margin-bottom: 5px;
        opacity: 0.8;
    }
    /* Add a red background color to the cancel button */
    .form-container .cancel {
        color: white;
    }
    /* Add some hover effects to buttons */
    .form-container .btn:hover, .open-button:hover {
        opacity: 1;
    }
    .feature_image {
        width: 90%;
        margin: auto;
    }
    .feature_image img {
        width: 90%;
    }
    .feature_diagram {
        width: 90%;
        margin: auto;
    }
    .feature_diagram img {
        width: 90%;
    }
    .partner_logo {
        width: 35%;
    }
    .spaced_header {
        text-align: center;
        font-size: 2.5em;
        line-height: 1.5em;
        word-spacing: normal;
        align-items: center;
        justify-content: center;
        padding-top: 20px;
        letter-spacing: 5px;
    }
    
    .text_block {
        padding: 30px 10px;
        font-size: 1em;
        text-align: start;
    }
    .bullet_icon {
        width: 50px;
        align-items: center;
        padding-right: 20px;
    }
    .text-danger {
        font-family: "Courier";
        font-style: italic;
        color: white;
    }
    .center_image {
        display: flex;
        flex-direction: row;
        align-content: center;
        margin: auto;
        width: 60%;
    }
    .map_img {
        display: block;
        width: 60%;
        margin: auto;
    }
    .engage_buttons {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        align-content: space-between;
        padding: 10px 0px;
        text-align: center;
	
    }
}
@media screen and (min-width: 577px) and (max-width: 991px) {
    .center {
        margin: auto;
        justify-content: center;
    }
    .sidenav {
        display: none;
    }
    /* The navigation menu links */
    .sidenav a {
        displau: none;
    }
    /* Position and style the close button (top right corner) */
    .sidenav .closebtn {
        display: none;
    }
    .Menu {
        width: 3em;
        height: 3em;
        vertical-align: middle;
        border: none;
        background: none;
        display: inline;
    }
    .MenuIcon {
        fill: black;
        color: black;
        text-decoration: none;
    }
    .MenuIcon:hover {
        fill: white;
        color: white;
    }
    .topBar {
        width: 100%;
        min-height: 100px;
        display: flex;
        justify-content: flex-start;
        padding-bottom: 10px;
    }
    .topbar a {
        display: flex;
        align-items: center;
    }
    .topnav {
        font-family: "Courier";
        height: 0; /* 100% Full-height */
        width: 100%; /* 0 width - change this with JavaScript */
        position: absolute;
        z-index: 1; /* Stay on top */
        top: 0; /* Stay at the top */
        right: 0;
        left: 0;
        background-color: hotpink;
        overflow: hidden; /* Enable horizontal scroll */
        white-space: nowrap;
        transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
        border-collapse: collapse;
    }
    .topnav {
        font-family: "Courier";
        height: 0; /* changed in js to open */
        width: 100%; /* full width */
        position: absolute;
        z-index: 1; /* Stay on top */
        top: 0; /* Stay at the top */
        right: 0;
        left: 0;
        background-color: hotpink; /* Black*/
        overflow: scroll; /*Enable horizontal scroll */
        transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
        margin-left: 0;
        margin-right: 0;
        white-space: nowrap;
        border-collapse: collapse;
        align-items: center;
        -ms-overflow-style: none; /* hide scroll in IE and Edge */
        scrollbar-width: none; /* hide scroll in  Firefox */
    }
    /* The navigation menu links */
    .topnav a {
        padding: 2px 10px;
        text-decoration: none;
        font-size: 4vh;
        color: #2D2D2D;
        display: inline-flex;
        transition: 0.3s;
        text-align: center;
    }
    /* Hide scrollbar for Chrome, Safari and Opera */
    .topnav::-webkit-scrollbar {
        display: none;
    }
    .title {
        font-size: 2em;
        text-align: center;
        width: 90%;
        display: block;
        margin: auto;
        padding: 30px 5px;
        letter-spacing: 5px;
    }
    .Re_Logo {
        width: 5em;
        height: 5em;
        align-items: center;
    }
    .Re_Text {
        padding: 15px;
        display: inline-flex;
        font-family: arial;
    }
    .vCenter {
        display: flex;
        align-items: center;
        align-content: center;
    }
    .marginFloat {
        margin-top: auto;
        margin-bottom: auto;
    }
    .bars {
        cursor: pointer;
        align-items: center;
    }
    .bar1, .bar2, .bar3 {
        width: 35px;
        height: 5px;
        background-color: #333;
        margin: 6px 0;
        transition: 0.4s;
        display: block;
    }
    /* Rotate first bar */
    .changeT .bar1 {
        transform: translate(0, 11px)rotate(-45deg);
    }
    /* Fade out the second bar */
    .changeT .bar2 {
        transform: translate(0, 0)rotate(-90deg);
        opacity: 0;
    }
    /* Rotate last bar */
    .changeT .bar3 {
        transform: translate(0, -11px) rotate(45deg);
    }
    .form-inline input {
        margin: 10px 0;
        flex: 1 1 100%;
        width: 80%;
    }
    .flow {
        display: flex;
        flex-flow: row wrap;
        margin: auto;
        justify-content: center;
        align-content: space-around;
        row-gap: 2em;
        text-align: center;
    }
    .flow_wide {
        width: 95%;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        align-content: space-around;
        row-gap: 2em;
        text-align: center;
        margin: auto;
    }
    .flow_reverse {
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        text-align: center;
    }
    .spaced_header {
        font-size: 3em;
        text-align: center;
        line-height: 1.5em;
        word-spacing: normal;
        align-items: center;
        justify-content: center;
        padding-top: 20px;
        letter-spacing: 15px;
    }
    .banner {
        width: 95%;
        margin: auto;
        max-height: 400px;
    }
    
    .text_block {
        padding: 30px 10px;
        font-size: 1em;
        text-align: start;
    }
    .bullet_icon {
        width: 50px;
        align-items: center;
        padding-right: 20px;
    }
    .sml_to_lrg {
        width: 90%;
        flex-direction: column;
        align-items: center;
        align-content: center;
    }
    .feature_image {
        width: 80%;
        flex-direction: column;
        align-items: center;
        align-content: center;
        margin: auto;
    }
    .feature_image img {
        width: 100%;
    }
    .partner_logo {
        margin: auto;
        object-fit: contain;
    }
    .feature_diagram {
        width: 80%;
        flex-direction: column;
        align-items: center;
        align-content: center;
        margin: auto;
    }
    .feature_diagram img {
        width: 60%;
    }
    .left {
        justify-content: flex-start;
        align-content: flex-start;
    }
    .column_s_to_l {
        width: 80%;
		justify-content: center;
		margin: auto;
    }
    .column_s_to_s {
        max-width: 50%;
    }
    .column_m_to_m {
        max-width: 60%;
    }
    .column_s_to_m {
        width: 45%;
    }
    .engage_buttons {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        align-content: space-around;
        padding: 10px 0px;
        text-align: center;
    }
    .form-inline {
        flex-direction: column;
        align-content: stretch;
    }
    .flow_icons {
        width: 50%;
    }
    #main {
        transition: margin-right 0.5s;
        padding: 20px;
    }
    .gallery {
        width: 90%;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        margin: auto;
    }
    .ClickBorder {
        width: 30%;
        display: flex;
        flex-direction: column;
        box-shadow: 1px 1px 5px 1px #888888;
        cursor: pointer;
        text-align: center;
        flex-grow: 1;
        justify-content: center;
		margin: 1em;
    }
    .ClickBorder img {
        max-height: 200px;
        object-fit: cover;
        object-position: center;
    }
    .ClickBorder:hover {
        border-color: black;
        box-shadow: 2px 2px 10px 2px #888888;
        
    }
   
    .left_to_center {
        display: flex;
        flex-direction: column;
        text-align: center;
        margin: auto;
        justify-content: center;
    }
    .form-popup {
        display: none;
        position: fixed;
        bottom: 0;
        right: 15px;
        border: 3px solid #f1f1f1;
        z-index: 9;
		background-color: #f2cd47;
    }
    /* Add styles to the form container */
    .form-container {
        max-width: 300px;
        padding: 20px;
    }
    .form-container label {
        text-align: center;
        font-family: "Courier";
    }
    /* Full-width input fields */
    .form-container input[type=text], .form-container input[type=password] {
        box-sizing: border-box;
        width: 100%;
        padding: 15px;
        margin: 5px 5px 10px 5px;
        border: none;
        background: #f1f1f1;
        font-family: "Courier";
    }
    /* When the inputs get focus, do something */
    .form-container input[type=text]:focus, .form-container input[type=password]:focus {
        background-color: #ddd;
        outline: none;
    }
    /* Set a style for the submit/login button */
    .form-container .btn {
        color: black;
        background-color: transparent;
        font-size: 1.5em;
        padding: 10px 20px;
        border: none;
        cursor: pointer;
        width: 100%;
        margin-bottom: 5px;
        opacity: 0.8;
    }
    /* Add a red background color to the cancel button */
    .form-container .cancel {
        color: white;
    }
    /* Add some hover effects to buttons */
    .form-container .btn:hover, .open-button:hover {
        opacity: 1;
    }
    .text-danger {
        font-style: italic;
        color: white;
    }
    .center_image {
        display: flex;
        flex-direction: row;
        align-content: center;
        margin: auto;
        width: 50%;
    }
    .map_img {
        display: block;
        width: 35%;
        margin: auto;
    }
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }
    .sidenav a {
        font-size: 18px;
    }
}
@media screen and (min-width: 992px) {
    h1 {
        font-size: 2em;
    }
    div .bar1, .bar2, .bar3 {
        width: 35px;
        height: 5px;
        background-color: black;
        margin: 6px 0;
    }
    div .bars {
        padding: 5px;
    }
    div .bars:hover div {
        background-color: white;
    }
    
    .topBar {
        width: 100%;
        height: 100px;
        display: flex;
        justify-content: flex-start;
    }
    .topbar a {
        display: flex;
        align-items: center;
    }
    .topnav {
        display: none;
    }
    /* The navigation menu links */
    .topnav a {
        display: none;
    }
    .Re_Logo {
        width: 5em;
        height: 5em;
        align-items: center;
    }
    .Re_Text {
        padding: 15px;
        display: inline-flex;
        font-family: arial;
    }
    .vCenter {
        display: flex;
        align-items: center;
        align-content: center;
    }
    .marginFloat {
        margin-top: auto;
        margin-bottom: auto;
    }
    .bars {
        cursor: pointer;
        align-items: center;
    }
    .bar1, .bar2, .bar3 {
        width: 35px;
        height: 5px;
        background-color: #333;
        margin: 6px 0;
        transition: 0.4s;
        display: block;
    }
    /* Rotate first bar */
    .change .bar1 {
        transform: translate(-11px, 11px)rotate(-90deg);
    }
    /* Fade out the second bar */
    .change .bar2 {
        transform: translate(0, 0)rotate(-90deg);
    }
    /* Rotate last bar */
    .change .bar3 {
        transform: translate(11px, -11px) rotate(-90deg);
    }
    .title {
        font-size: 2.5em;
        width: 90%;
        display: block;
        margin: auto;
        padding: 50px 5px 20px;
        letter-spacing: 5px;
    }
    .flow {
        width: 90%;
        display: flex;
        justify-content: space-around;
        margin: auto;
        flex-direction: row;
        align-items: center;
        align-content: space-around;
        flex-wrap: wrap;
        column-gap: 10px;
        row-gap: 2em;
    }
    .flow_wide {
        width: 90%;
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        align-content: space-around;
        flex-wrap: wrap;
        column-gap: 10px;
        row-gap: 2em;
        margin: auto;
    }
    .flow_reverse {
        display: flex;
        justify-content: space-around;
        flex-direction: row;
        align-items: center;
    }
    .sml_to_lrg {
        display: flex;
        flex-direction: row;
        width: 35%;
    }
    .spaced_header {
        z-index: 1;
        display: flex;
        flex-direction: row;
        text-align: left;
        word-spacing: 9999rem;
        line-height: 1.5em;
        font-size: 3em;
        letter-spacing: 10px;
    }
    
    .text_block {
        padding: 50px 10px;
        font-size: 1.2em;
        text-align: start;
    }
    .bullet_icon {
        width: 50px;
        align-items: center;
        padding-right: 20px;
    }
    .feature_image {
        width: 40%;
        align-self: center;
    }
    .feature_image img {
        width: 100%;
    }
    .partner_logo {
        width: 100%;
    }
    .feature_image_h {
        width: 40%;
        height: 60vh;
        object-fit: contain;
        align-self: center;
    }
    .feature_image_h img {
        height: 100%;
    }
    .feature_diagram {
        width: 40%;
        align-self: center;
    }
    .feature_diagram img {
        width: 100%;
    }
    .center_image {
        display: flex;
        flex-direction: row;
        align-content: center;
        margin: auto;
        width: 40%;
    }
    .center {
        display: block;
        margin: auto;
        text-align: center;
    }
    .clear_button {
        padding: 10px;
        background-color: transparent;
        border: none;
    }
    .clear_button:hover {
        opacity: 0.8;
    }
    /* The side navigation menu */
    .sidenav {
        height: 100%; /* 100% Full-height */
        width: 0; /* 0 width - change this with JavaScript */
        position: fixed; /* Stay in place */
        z-index: 1; /* Stay on top */
        top: 0; /* Stay at the top */
        right: 0;
        background-color: hotpink; /* Black*/
        overflow-x: hidden; /* Disable horizontal scroll */
        padding-top: 60px; /* Place content 60px from the top */
        transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
    }
    /* The navigation menu links */
    .sidenav a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: #2D2D2D;
        display: block;
        transition: 0.3s;
    }
    /* When you mouse over the navigation links, change their color */
    .sidenav a:hover {
        color: #f1f1f1;
    }
    .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
        color: #2D2D2D;
    }
    .Menu {
        width: 3em;
        height: 3em;
        vertical-align: middle;
        border: none;
        background: none;
        display: inline;
    }
    .MenuIcon {
        fill: black;
        color: black;
        text-decoration: none;
    }
    .MenuIcon:hover {
        fill: white;
        color: white;
    }
    /* Style page content - use this if you want to push the page content to the right when you open the side navigation */
    #main {
        transition: margin-right 0.5s;
        padding: 20px;
    }
    /* Button used to open the contact form - fixed at the bottom of the page */
    .open-button {
        border-radius: 10px;
        background-color: hotpink;
        padding: 16px 20px;
        border: none;
        cursor: pointer;
        opacity: 0.8;
        bottom: 23px;
        right: 28px;
        width: 160px;
    }
    .accordion {
        cursor: pointer;
        padding: 10px 10px 10px 10px;
        width: 100%;
        outline: none;
        transition: 0.4s;
    }
    /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
    .active, .accordion:hover {
        background-color: #FFFF99;
    }
    /* Style the accordion panel. Note: hidden by default */
    .drop_panel {
        padding: 0 18px;
        margin: 5px;
        background-color: white;
        display: none;
        overflow: hidden;
    }
    .engage_buttons {
		
        text-align: center;
        display: flex;
        flex-flow: row wrap;
        align-content: flex-end;
        justify-content: space-between;
        width: 85%;
		margin: auto;
    }
    /* The popup form - hidden by default */
    .form-popup {
        display: none;
        position: fixed;
        bottom: 0;
        right: 15px;
        border: 3px solid #f1f1f1;
        z-index: 9;
		background-color: #f2cd47;
    }
    /* Add styles to the form container */
    .form-container {
        max-width: 300px;
        padding: 20px;
    }
    .form-container label {
        text-align: center;
    }
    /* Full-width input fields */
    .form-container input[type=text], .form-container input[type=password] {
        box-sizing: border-box;
        width: 100%;
        padding: 15px;
        margin: 5px 5px 10px 5px;
        border: none;
        background: #f1f1f1;
    }
    /* When the inputs get focus, do something */
    .form-container input[type=text]:focus, .form-container input[type=password]:focus {
        background-color: #ddd;
        outline: none;
    }
    /* Set a style for the submit/login button */
    .form-container .btn {
        color: black;
        background-color: transparent;
        font-size: 1.5em;
        padding: 10px 20px;
        border: none;
        cursor: pointer;
        width: 100%;
        margin-bottom: 5px;
        opacity: 0.8;
    }
    /* Add a red background color to the cancel button */
    .form-container .cancel {
        color: white;
    }
    /* Add some hover effects to buttons */
    .form-container .btn:hover, .open-button:hover {
        opacity: 1;
    }
    
    .break {
        flex-basis: 100%;
        height: 0;
    }
    .flow_icons {
        width: 25%;
    }
    .text-danger {
        font-style: italic;
        color: white;
    }
    .column_s_to_l {
        width: 35%;
        flex-basis: auto;
        flex-shrink: 1;
    }
    .column_s_to_m {
        width: 40%;
    }
    .column_m_to_l {
        width: 30%;
        flex-basis: auto;
        flex-shrink: 1;
        flex-grow: 1;
    }
    .banner {
        width: 90%;
        margin: auto;
        height: 250px;
        object-fit: cover;
        object-position: center;
    }
    .gallery {
        width: 90%;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        margin: auto;
        padding-top: 15px;
    }
    .ClickBorder {
        width: 25%;
        display: flex;
        flex-direction: column;
        border-color: black;
        box-shadow: 1px 1px 5px 1px #888888;
        padding: 15px;
        cursor: pointer;
        justify-content: center;
        text-align: center;
        flex-grow: 1;
        margin: 1em;
		align-self: flex-start;
    }
    .ClickBorder img {
        max-height: 200px;
        object-fit: cover;
    }
    .ClickBorder:hover {
        border-color: black;
        box-shadow: 2px 2px 10px 2px #888888;
        padding: 15px;
    }
	
	/* ### MEMBER GALLERY STYLING ### */
	
	.MemberBorder {
		display: flex;
		flex: 1 1 20%;
		flex-direction: column;
        box-shadow: 1px 1px 5px 1px #888888;
        padding: 15px;
        cursor: pointer;
        text-align: center;
        margin: 1em;
		flex-grow: 1;
		transition: all 0.5s ease-in-out;
		
    }
	.MemberBorder-active {
		display: flex;
		flex-basis: 100%;
		flex-direction: row;
        border-color: black;
        box-shadow: 1px 1px 5px 1px #888888;
        padding: 15px;
        cursor: pointer;
        text-align: center;
        margin: 1em;
		flex-grow: 1;
		transition:  all 0.5s ease-in-out;
		
    }
 
    .MemberBorder:hover {
        border-color: black;
        box-shadow: 2px 2px 10px 2px #888888;
        padding: 15px;
		transition:  all 1s ease-in-out;
    }
	
	.MemberImg {
		width: 200px;
		height: 200px;
		object-fit: cover;
		text-align: center;
		align-content: center;
		margin: auto;
		transition:  all 1s ease-in-out;
	}
	.MemberImg-active {
		max-height: 200px;
		object-fit: contain;
		text-align: center;
		align-content: center;
		margin: auto;
		transition:  all 1s ease-in-out;
	}
	
	.MemberText {
		display: none;
		text-align: left;
		width: 60%;
		margin: 1em;
		vertical-align: center;
		transition:  all 1s ease-in-out;
	}
	
	.MemberText-active {
		display: block;
		text-align: left;
		width: 60%;
		margin: 1em;
		vertical-align: center;
		transition:  all 1s ease-in-out;
	}
	.MemberTitle-active {
		display: none;
		transition:  all 1s ease-in-out;
		
	}
	.MemberTitle {
		display: block;
		transition:  all 1s ease-in-out;
		
	}
	.MemberHeading {
		display: flex;
		margin: auto;
		align-items: flex-end;
		
	}
		
    .clear_button {
		padding: 10px;
        background-color: transparent;
    }
    .clear_button:hover {
        opacity:0.8;
    }
    .left_to_center {
        text-align: left;
    }
    
    .text_block {
        padding: 30px 10px;
        font-size: 1em;
        text-align: start;
    }
    .bullet_icon {
        width: 50px;
        align-items: center;
        padding-right: 20px;
    }
    .map_img {
        width: 35%;
        justify-content: flex-start;
    }
    .column_s_to_s {
        max-width: 40%;
    }
    .column_m_to_m {
        max-width: 60%;
    }
}