@charset "utf-8";
/** Layout Page Styles **/
.container {
	width: 100%;
	overflow-x: hidden;
}
.sec-inner {
  width: 100%;
  max-width: 1480px;
  height: auto;
  margin: 0px auto 0px auto;
}
.txt-center {
  text-align: center;
}
.sec-flex {
  display: flex;
  flex-wrap: wrap;
}
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
/** Toggled Newsfeed Bar Styles 
===================================================**/
.newsfeed {
	width: 100%;
  overflow: hidden;
  box-sizing: border-box;
	/**padding: 12px 15px 8px 15px;**/
	background-color: #52a5b6;
  font-size: 1.2em;
  text-align: center;
	color: #ffffff;
}
body.dark-mode .newsfeed {
	width: 100%;
	padding: 8px 15px 8px 15px;
	box-sizing: border-box;
	background-color: #2C6068;
  font-size: 1.2em;
	color: #ffffff;
}
.newsfeed-inner {
  width: 100%;
  max-width: 1480px;
  height: auto;
  margin: 0px auto 0px auto;
}
.newsfeed p {
  margin: 0;
}
.newsfeed span {
  text-transform: uppercase;
}
.newsfeed a {
	color: #ffffff;
  font-weight: bold;
  text-decoration: underline;
	transition: all 0.3s ease-in;
}
.newsfeed a:hover,
.newsfeed a:focus {
	color: #FFFFB8;
}
@media screen and (min-width: 1180px) {
    .newsfeed {
        height: 41px;
    }
    .newsfeed img {
        height: 41px !important;
    }
}
@media screen and (max-width: 1180px) {
  .newsfeed {
    height: 30px;
    font-size: 1.0em;
  }
}
@media screen and (max-width: 768px) {
  .newsfeed {
    height: auto;
  }
}
/** Top Bar Styles 
===================================================**/
.top-bar {
	width: 100%;
	padding: 0 15px 0 15px;
	box-sizing: border-box;
	background-color: #4b217a;
	color: #ffffff;
}
body.dark-mode .top-bar {
	background-color: #000000;
}
.top-bar a {
	display: block;
	padding: 6px 15px 6px 15px;
  font-size: 1.0em;
	font-weight: 400;
	color: #ffffff;
	transition: all 0.3s ease-in;
}
.top-bar a:hover,
.top-bar a:focus {
	background-color: #281041;
}
.ld-toggle {
  display: flex;
}
.drk-btn,
.lgt-btn {
	border: none;
	margin: 0;
	background: none;
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-weight: 400;
	font-size: 1.0em;
	color: #ffffff;
	cursor: pointer;
	transition: all 0.3s ease-in;
}
.drk-btn:hover,
.drk-btn:focus,
.lgt-btn:hover,
.lgt-btn:focus {
	background-color: #E6CC5C;
  color: #000000;
}
.drk-btn {
	padding: 8px 8px 6px 8px; 
}
.lgt-btn {
	padding: 8px 8px 6px 8px; 
}
.dark-on {
  padding: 7px 3px 0 3px;
}
.light-on {
  display: none;
}
body.dark-mode .dark-on {
  display: none;
}
body.dark-mode .light-on {
  display: block;
  padding: 7px 3px 0 3px;
}
.contact-info {
	flex: 1;
}
.contact-info .field--name-body {
  display: flex;
}
.top-links {
	flex: 1;
	display: flex;
	justify-content: flex-end;
}
@media screen and (max-width: 768px) {
  .contact-info i {
    display: none;
  }
}
@media screen and (max-width: 640px) {
  .top-bar a {
    padding: 6px 5px 6px 5px;
    font-size: 0.85em;
  }
	.top-bar .sec-flex {
		display: block;
	}
  .contact-info,
  .top-links {
    justify-content: center;
  }
}
@media screen and (max-width: 468px) {
  .contact-info .field--name-body {
    justify-content: center;
  }
  .contact-info i {
    display: inline-block;
  }
  .top-links {
    justify-content: center;
  }
}
/** Header Styles **/
.main-head {
  width: 100%;
  height: 141px;
  position: fixed;
  top: 36px;
  left: 0;
  z-index: 99;
  background: #ffffff;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  transition: all 0.3s ease-in;
}
.toggle-newsfeed {
  top: 78px;
}
.main-head.tiny {
  height: 90px;
  top: 0;
}
body.dark-mode .main-head {
  width: 100%;
  height: 141px;
  position: fixed;
  top: 36px;
  left: 0;
  z-index: 99;  
	background-color: #4b217a;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  transition: all 0.3s ease-in;
}
body.dark-mode .toggle-newsfeed {
  top: 78px;
}
body.dark-mode .main-head.tiny {
  height: 100px;
  top: 0;
}
.header-flex {
	width: 100%;
  display: flex;
  align-items: center;
}
.logo {
	flex-basis: 20%;
	padding: 20px 15px 15px 15px;
	box-sizing: border-box;
  transition: all 0.3s ease-in;
}
.logo img,
.logo-dark img {
  width: 100%;
  height: auto;
  transition: all 0.3s ease-in;
}
.logo-dark {
	display: none;
}
.main-head.tiny .logo img,
.main-head.tiny .logo-dark img {
  width: 80%;
}
body.dark-mode .logo {
	display: none;
}
body.dark-mode .logo-dark {
	display: block;
	flex: 1;
	padding: 20px 0 15px 15px;
  transition: all 0.3s ease-in;
}
.main-head.tiny .logo,
body.dark-mode .main-head.tiny .logo-dark {
  padding: 15px 0 15px 15px;
}
.main-menu {
	flex-basis: 80%;
	display: flex;
	justify-content: flex-end;
	padding: 0;
  transition: all 0.3s ease-in;
}
.main-menu .flexy-menu > li:last-of-type a {
  background: #4e217a;
  color: #E6CC5C;
}
body.dark-mode .main-menu .flexy-menu > li:last-of-type a {
  background: #E6CC5C;
  color: #4e217a;
}
.main-menu .flexy-menu > li:last-of-type:hover > a,
.main-menu .flexy-menu > li:last-of-type.active a,
.main-menu .flexy-menu > li:last-of-type > a:focus {
	background: #E6CC5C;
	color: #4e217a;
}
body.dark-mode .main-menu .flexy-menu > li:last-of-type:hover > a,
body.dark-mode .main-menu .flexy-menu > li:last-of-type.active a,
body.dark-mode .main-menu .flexy-menu > li:last-of-type > a:focus {
	background: #000000;
	color: #E6CC5C;
}
.header-spacer {
  height: 141px;
}
@media screen and (max-width: 1180px) {
  .toggle-newsfeed {
    top: 106px;
  }
	.logo {
		padding: 45px 0 15px 15px;
	}
  .header-spacer {
    height: 0;
  }
}
@media screen and (max-width: 768px) {
  .main-head {
    width: 100%;
    height: auto;
    overflow: auto;
    position: relative;
		top: 0;
  }
	.main-head.tiny {
		height: auto;
	}
	body.dark-mode .main-head {
    width: 100%;
    height: auto;
    overflow: auto;
    position: relative;
		top: 0;
	}
	body.dark-mode .main-head.tiny {
		height: auto;
	}
	.main-head .header-flex {
		display: block;
	}
	.logo {
		padding: 15px 15px 5px 15px;
		box-sizing: border-box;
		text-align: center;
	}
	body.dark-mode .logo-dark {
		padding: 15px 15px 5px 15px;
		box-sizing: border-box;
		text-align: center;
	}
	.main-head.tiny .logo,
	body.dark-mode .main-head.tiny .logo-dark {
		padding: 15px 0 5px 0;
	}
	.main-menu {
		display: block;
		padding: 15px 0 0 0;
	}
	.main-head.tiny .main-menu {
		padding: 15px 0 0 0;
	}
	.header-spacer {
		height: 0;
	}
}
/** Intro Content Styles **/
.intro-area {
  width: 100%;
  min-height: 950px;
  background: #000000 url("img/backdrop.jpg") no-repeat bottom center;
  background-attachment: fixed;
  background-size: cover;
	border-bottom: 5px solid #dbbe3e;
}
.intro-content {
  width: 100%;
	display:flex;
	justify-content: flex-end;
  height: auto;
  margin:0;
  padding:1em;
	box-sizing: border-box;
}
.intro-content h1 {
	display:block;
	max-width:1040px;
  color: #ffffff;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.75);
  font-size: 2.5em;
}
.intro-text {
	display:flex;
	justify-content: center;
	align-items:center;	
}
.intro-text .intro-text-inner {
	max-width:1480px;
	margin:1.25em 0;
	font-size:1.5em;
}
@media screen and (max-width: 768px) {
	.intro-area {
		min-height: 350px;
	}
	.intro-content {
		padding: 5% 15px 0 25px;
	}
	.intro-content h1 {
		font-size: 4.1em;
	}
}
@media screen and (max-width: 468px) {
	.intro-content h1 {
		font-size: 3.1em;
	}
}
/** Event Banner Styles **/
.event-banner {
  background-color: #511560;
  border-bottom: 5px solid #dbbe3e;
}
/** Main Content Styles **/
.sub-content {
  width: 100%;
  padding: 0 0 25px 0;
}
.main-content {
  width: 100%;
  padding: 0 0 25px 0;
  text-align: center;
}
.main-titles {
	padding: 3px 25px 3px 25px;
	box-sizing: border-box;
	background-color: #4b217a;
}
.main-titles h2,.main-titles h1 {
	color:#fff;
}
body.dark-mode .main-titles {
	padding: 3px 15px 3px 15px;
	box-sizing: border-box;
	background-color: #000000;
}
body.dark-mode .main-content,
body.dark-mode .sub-content {
  width: 100%;
  background-color: #4b217a;
  color: #ffffff;
}
body.dark-mode .main-content h2,
body.dark-mode .main-content h3,
body.dark-mode .sub-content h2,
body.dark-mode .sub-content h3 {
  color: #ffffff;
}
.sub-area {
	min-height: 450px;
	padding: 45px 25px 45px 25px;
  box-sizing: border-box;
}
.sub-area h2 {
	font-size: 1.5em;
}
.sub-area h3 {
	font-size: 1.2em;
}
@media screen and (max-width: 640px) {
  .sub-area {
    padding: 45px 10px 45px 10px;
  }
}
/** Bubble Styles **/
.groups {
  display: flex;
  flex-wrap: wrap;
	padding: 45px 0 45px 0;
}
.group {
  flex-basis: 25%;
  padding: 0 25px 0 25px;
  margin: 0 auto;
  box-sizing: border-box;
	text-align: center;
}
.circle { 
    width: 300px; 
    height: 300px; 
    margin: 0 auto 0 auto; 
    overflow: hidden; 
    color: #ffffff; 
    text-align: center; 
    box-sizing: border-box; 
}
.group .circle a img {
	transition: all 0.3s ease-out;
}
.group .circle a:hover img,
.group .circle a:focus img {
	opacity: 0.5;
}
@media screen and (max-width: 1024px) {
	.circle {
		width: 150px;
		height: 150px;
	}
}
@media screen and (max-width: 768px) {
	.group {
		flex-basis: 100%;
    padding: 0 15px 0 15px;
	}
	.circle {
		width: 300px;
		height: 300px;
	}
}
@media screen and (max-width: 640px) {
	.group {
    padding: 0;
	}
	.circle {
		width: 200px;
		height: 200px;
	}
}

/** Sub-Section I (We We Are) Styles 
**===================================================**/
.why-we-matter {
	width: 100%;
}
.why-we-matter .main-titles {
	text-align: center;
}
.why-we-matter .why-we-matter-img {
	float: right;
	margin: 0 0 1em 1em;
}
.why-we-matter #block-broward2021-whywemattercontent {
	margin: 2em 0 3em;
}
body.dark-mode .why-we-matter h2 {
	color: #ffffff;
}

/** Sub-Section II (We We Are) Styles
**===================================================**/
.who-we-are {
	width: 100%;
	text-align: center;
}
body.dark-mode .who-we-are h2 {
	color: #ffffff;
}
.mission-vision {
	background: #eae5eb;
	padding: 65px 15px 65px 15px;
	border-top: 1px solid #ffffff;
	box-sizing: border-box;
	text-align: left;
}
body.dark-mode .mission-vision {
	background: #2C6068;
	border-top: 1px solid #4b217a;
	color: #ffffff;
}
.mission-vision .xbold {
	font-size: 1.3em;
	font-weight: 700;
	color: #4b217a;
}
body.dark-mode .mission-vision .xbold {
	font-size: 1.3em;
	font-weight: 700;
	color: #f5d35b;
}
.vid-container {
	width: 100%;
	max-width: 1024px;
	margin: 0 auto 25px auto;
}
.promo-vid .field--name-body {
  position: relative;
  padding-bottom: 75%;
  height: 0;
  overflow: hidden;
}
.promo-vid iframe {
  position: absolute;
  top: 0;
  left: 0;
	border: 0;
  width: 100% !important;
  height: 100% !important;
}
.mv-inner {
  width: 100%;
  max-width: 1024px;
  height: auto;
  margin: 0px auto 0px auto;
}
@media screen and (max-width: 468px) {
	.mission-vision {
		padding: 65px 15px 65px 15px;
	}
}
/** Sub-Section IB (Homepage Video & Vertical Events Section) Styles **/
.wwa-area {
  display: flex;
  flex-wrap: wrap;
}
.mv-section {
  flex: 2;
}
.upcoming-events {
  flex: 1;
}
.ue-box {
  width: 100%;
  max-width: 550px;
  padding: 5px 25px 45px 25px;
  box-sizing: border-box;
  background: #ffffff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}
body.dark-mode .ue-box {
  background: #000000;
  box-shadow: 0 2px 4px rgba(0,0,0,0.95);
  color: #ffffff;
}
body.dark-mode .ue-box h3 {
  color: #ffffff;
}
.event-box {
  display: flex;
  align-items: center;
  padding: 0 0 45px 0;
}
.event-img {
  padding: 0 20px 0 0;
	box-sizing: border-box;
}
.event-img img {
  min-width: 70px;
  min-height: 70px;
}
.news-img {
  padding: 0 20px 0 0;
	box-sizing: border-box;
}
.news-img img {
  min-width: 140px;
  min-height: 140px;
}
.event-content h4 {
  margin: 0;
  color: #6E31B4;
}
body.dark-mode  h4 {
  color: #FDFBFE;
}
.event-content p {
  margin: 0;
}
.e-location {
  font-size: 0.85em;
}
@media screen and (max-width: 768px) {
  .wwa-area {
    display: block;
  }
  .ue-box {
    margin: 0 auto;
  }
}

/** Events Page Styles **/
.field--name-field-icon {
	float: right;
	margin: 0 0 25px 25px;
}

/** Sub-Section III (Board of Directors Homepage) Styles 
**===================================================**/
.board-home {
	width: 100%;
}
.board-home .main-titles {
	text-align: center;
}
body.dark-mode .board-home h2 {
	color: #ffffff;
}


/** Sub-Section IV (What We Do) Styles
**===================================================**/
.features {
	display: grid;
	grid-template-columns: auto auto auto;
	max-width:1480px;
	margin:0 auto;
	padding: 65px 0 65px 0;
}
.feature {
	margin: 0 auto 1.5em auto;
	max-width: 360px;
	min-width: 360px;
	background: #ffffff;
	border-radius: 3px;
	overflow: hidden;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
	text-align: center;
}
body.dark-mode .feature {
	background: #000000;
	border-radius: 3px;
	overflow: hidden;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.feat-title {
  min-height: 52px;
	padding-top: 0;
  position: relative;
}
.feat-title h3 {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
	padding: 0 15px;
	box-sizing: border-box;
	font-size: 1.3em;
  transform: translate(-50%,-50%);
  text-transform:capitalize;
  font-weight:600;
}
body.dark-mode .feature h3 {
	padding: 0 15px 0 15px;
	box-sizing: border-box;
	font-size: 1.2em;
	color: #C7C7C7;
}
.feature p {
	padding: 0 15px 0 15px;
	box-sizing: border-box;
}
body.dark-mode .feature a {
	color: #f5d35b;
}
body.dark-mode .feature a:hover,
body.dark-mode .feature a:focus {
	color: #FFFBC5;
}
@media screen and (max-width: 1024px) {
	.features {
		flex-wrap: wrap;
	}
	.feature {
		flex-basis: 29.3333%;
		margin: 0 auto 4% auto;
	}
}
@media screen and (max-width: 768px) {
	.feature {
		flex-basis: 46%;
	}
}
@media screen and (max-width: 468px) {
	.feature {
		flex-basis: 100%;
		margin: 0;
    max-width: 100%;
		min-width: 100%;
	}
}
/** Follow Us Section Styles **/
.follow-us {
	width: 100%;
	text-align: center;
	padding: 15px 0 25px 0;
}
body.dark-mode .follow-us {
	background: #000000;
}
body.dark-mode .follow-us h2,
body.dark-mode .follow-us h3 {
	color: #ffffff;
}
.soc-ico {
	flex: 1;
	padding: 45px 0 45px 0;
	text-align: center;
}
.soc-ico p {
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  text-transform: capitalize;
}
.facebook {
	font-size: 5.1em;
	color: #1877f2;
}
.twitter {
	font-size: 5.1em;
	color: #5da9dd;
}
.instagram {
	font-size: 5.1em;
	color: #f00075;
}
.youtube {
	font-size: 5.1em;
	color: #fe0000;
}
@media screen and (max-width: 468px) {
	.soc-ico {
		flex-basis: 100%;
	}
}
/** iFrame Styles **/
.aud-psignals {
	width: 100%;
	min-height: 550px;
	border: 0;
}
.donate-online {
	width: 100%;
	min-height: 2450px;
	border: 0;
}
.gt-donate-online {
	width: 100%;
	min-height: 4850px;
	border: 0;
}
/** Dropdown select list **/
.custom-select {
	display: flex;
}
.custom-select select {
  width: 100%;
  max-width: 600px;
  appearance: none;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  padding: 5px 15px;;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  cursor: inherit;
  line-height: inherit;
}
body.dark-mode .custom-select select {
  background-color: #000000;
	color: #ffffff;
}
.SubmitButton {
  padding: 7px 25px 7px 25px;
  background: #4b217a;
  border: 1px solid #6e6f71;
  text-shadow: 1px 1px 1px #000000;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  text-transform: capitalize;
	font-size: 1.1em;
  color: #ffffff;
  cursor: pointer;  
}
body.dark-mode .SubmitButton {
  background: #000000;
}
.SubmitButton:hover,
.SubmitButton:focus {
    background: #387785;
}
/** Gallery Page Styles **/
.gallery-row {
	display: flex;
	flex-wrap: wrap;
}
.gallery-col {
	flex: 1;
	margin: 0 1% 2% 1%;
	text-align: center;
}
.gallery-col h2 {
	font-size: 1.0em;
}
@media screen and (max-width: 768px) {
  .gallery-col {
    flex-basis: 100%;
  }
}
/** Equipment Donation Page Styles **/
.ed-row {
	display: flex;
}
.ed-col {
	flex: 1;
}
/** Staff Listing Styles **/
#block-views-block-staff-directory-block-1 h2,
#block-views-block-staff-directory-block-2 h2 {
  border-bottom: 2px solid #4b217a;
  padding: 0 0 5px 0;
	font-size: 1.5em;
}
body.dark-mode #block-views-block-staff-directory-block-1 h2,
body.dark-mode #block-views-block-staff-directory-block-2 h2 {
  border-bottom: 2px solid #f5f5f5;
}
.staff-directory h3 {
	font-size: 1.0em;
}
.staff-directory .views-row {
	padding: 0 15px 15px 15px;
	border-bottom: 1px solid #cccccc;
}
/** Job Listing - Doing Business Styles **/
.job-listings {
  margin-bottom: 15px;
  padding-bottom: 5px;
  border-bottom: 1px solid #cccccc;
}
.job-listing {
  margin-bottom: 15px;
  padding: 5px 25px 15px 25px;
  background-color: #F7F3FC;
}
body.dark-mode .job-listing {
  background-color: #000000;
}
.no-listing {
  margin-bottom: 15px;
  padding: 8px 25px;
  background: #ffffcf;
}
body.dark-mode .no-listing {
  background: #5C5C00;
}
/** Audible Pedestrian Signals Page Styles **/
.aps-form {
  width: 450px;
  height: 40px;
  margin-bottom: 15px;
  padding: 3px 3px 3px 12px;
  outline: 0 none;
  border: 1px solid #6E6F71;
  box-shadow: inset 0px 1px 4px #9d9d9d;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 1.0em;
  color: #333333;
}
/** Footer Styles **/
.main-footer {
	width: 100%;
	text-align: center;
	background-color: #2E2E2E;
	padding: 65px 25px 65px 25px;
	box-sizing: border-box;
	clear: both;
}
.main-footer a {
  color: #ffffff;
}
.main-footer a:hover,
.main-footer a:focus {
  color: #f5d35b;
}
.foot-col {
  flex: 1;
	text-align: left;
	color: #E3E3E3;
}
.foot-col h2 {
	font-size: 1.6em;
	color: #F5F5F5;
}
.goog-logo-link,
.goog-logo-link:link, 
.goog-logo-link:visited, 
.goog-logo-link:hover,
.goog-logo-link:active,
.goog-te-gadget{
	color: #ffffff !important;
}
.accred-row {
  display: flex;
  align-items: center;
}
.accred-col {
  padding: 0 15px 0 0;
  box-sizing: border-box;
}
.footer-bottom {
	font-size: 0.85em;
	color: #cccccc;
}
@media screen and (max-width: 768px) {
	.foot-col {
		flex-basis: 50%;
	}
}
@media screen and (max-width: 468px) {
	.foot-col {
		flex-basis: 100%;
	}
	.foot-col {
		border-bottom: 1px dotted rgba(255,255,255,0.95);
	}
}
#donation-form {
    font-family: 'Raleway', sans-serif;
}
.btn-submit-donation {
    font-family: 'Raleway', sans-serif;
    font-size: 1.0em;
    letter-spacing: 0.05em;
    line-height: 20px;
    padding: 20px 22px !important;
    text-decoration: none;
    display: block;
    text-transform: uppercase;
    transition: color 0.2s linear, background 0.2s linear;
    background: #4e217a;
    color: #E6CC5C;
}
.btn-submit-donation:hover {
    background: #E6CC5C;
    color: #4e217a;
}

/** Board of Directors Page
 * =======================================================**/
 .board-of-directors .views-view-responsive-grid .views-view-responsive-grid__item {
 	margin: 1em;
 	text-align:center;
 }
 .board-of-directors .views-view-responsive-grid .views-view-responsive-grid__item img {
 	border-radius:20px;
 	overflow: hidden;
 }
 .special-advisors {
 	columns:4;
 }