/*------------------------------
            Variables
-------------------------------*/

:root {
  --header-height: 137px;
}

/*------------------------------
            Global
-------------------------------*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  color: #707070;
}

.grid{
  display: grid;
}

.flex-container{
  display: flex;
}

p{
  margin-bottom: 25px;
}

ol{
  margin-left: 25px;
}

ol ol{
  list-style-type: lower-alpha;
}

ul {
	margin-left: 25px;
}

a{
	color: #4ACEBF;
}

a:hover{
  color: #549442;
  text-decoration: none;
}

blockquote{
  color: #549442;
  font-size: 1.25rem;
}

img{
	max-width: 100%;
}

table{
	width: 100%;
	max-width: 1200px;
}

table, th, tr, td{
	border-collapse: collapse;
	border: 1px solid black;
	padding: 10px;
}

th{
	
}


.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto{
  padding: 0;
}

.col-6{
	flex: unset;
	max-width: 50%;
	flex-grow: 1;
}

.row{
  margin-right: inherit !important;
  margin-left: inherit !important;
}

.clearfix{
  clear: both;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 1s;
}

.bottom{
  position: absolute;
  bottom: 0;
  left: 0;
}

.bold{
  font-weight: bold;
}

.content-container{
  padding-left: 6.5vw;
  padding-right: 6.5vw;
}

.spacer{
  padding-top: 5vw;
  padding-bottom: 5vw;
}

.widget_media_video{
  padding: 0 !important;
  align-items: center;
  background-color: #222;
  display: flex;
  width: 100%;
}

.callout{
	background-color: #eeeeee;
	padding: 50px;
	margin: 25px 0;
	& p{
		margin-bottom: 15px !important;
	}
}

.cleanCorp-btn{
   display: inline-block;
   padding: 8px 15px;
   text-align: center;
   color: #000000;
   background-color: #eeeeee;
   display: inline-block;
   padding: 8px 15px;
   text-align: center;
   font-size: 18px;
   letter-spacing: .5px;
   box-shadow: #00000075 3px 3px 10px;
   border: 0;
   border-radius: 5px;
}

.cleanCorp-btn-lg{
  color: #ffffff;
  display: inline-block;
  margin-bottom: 25px;
  margin-right: 15px;
  padding: 15px 25px;
  text-align: center;
}

.cleanCorp-btn a{
  color: #ffffff;
}

.cleanCorp-btn-lg a{
  color: #ffffff;
}

.color-1{
  background-color: #549442;
}

.color-2{
  background-color: #BDCC30;
}

.stack{
  display: flex;
  flex-direction: column;
}

.left{
  padding-right: 15px;
}

.right{
  padding-left: 15px;
}

.pdf-icon{
  max-height: 20px;
}

.board-page-title{
  display: flex;
  justify-content: center;
  align-items: center;
}

.hidden{
  display: none;
}

.page-scroll{
  margin-bottom: 35px;
  font-size: 2em;
  justify-content: center;

}

.resources-videos{
	padding: 15px;
}

.aspect-ratio {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56%;
}

.aspect-ratio iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0; top: 0;
}

/*------------------------------
            Header
-------------------------------*/

.header{
	position: relative;
    z-index: 1000;
    background-color: #3d3d3d;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.header p{
  margin-bottom: 0;
}

.home-logo{
	display: flex;
	padding-left: 6.5vw;
	max-width: 20%;
	max-height: 150px;
}

.home-logo img{
  height: auto;
	width: auto;
  max-height: 130px;
	max-width: 100%;
}

.home .header .home-logo{
	display: none;
}

.custom-logo-link{
	padding: 15px;
}

.menu{
  list-style-type: none;
  margin-left: 25px;
  margin-bottom: 0;
}

.menu a{
  border: none;
  text-decoration: none;
  margin-left: 25px;
}

.menu li{
  display: inline-block;
}

.menu a:hover{
	color: #4ACEBF;
}

.current_page_item a{
	color: #4ACEBF;
}

/*------------------------------
          Mobile Menu
-------------------------------*/

.mobile-header{
	display: none;
	min-height: var(--header-height);
	position: fixed;
	height: initial;
	width: 100%;
	background-color: #3d3d3d;
}

.mobile-header-content{
	display: flex;
}

.mobile-header-open{
	flex-direction: column;
	inset: 0;
}

.mobile-nav-menu-icon{
	display: none;
}

.btnToggle {
    display: inline-block;
    cursor: pointer;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #3d3d3d;
    margin: 6px 0;
    transition: 0.4s;
}

.open .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
}

.open .bar2 {opacity: 0;}

.open .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
}


.side-nav{
	height: 0; /* 100% Full-height */
	width: 100%; /* 0 width - change this with JavaScript */
	z-index: 900; /* Stay on top */
	overflow-x: hidden; /* Disable horizontal scroll */
	transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

.side-nav li{
	list-style: none;
}

/* 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-left .5s;
}

.side-nav .sub-menu{
	display: block;
	padding: 0 16px 12px;
}

.side-nav .sub-menu li{
	margin: 0;
}

.side-nav a{
	color: #ffffff;
	font-size: 2em;
	margin-left: 0;
}

.side-nav a:hover{
	color: #46BEBC;
}

.side-nav .current_page_item > a {
	color: #46BEBC;
}

#menu-secondary-nav{
	display: flex;
	flex-wrap: nowrap;
	margin-bottom: 25px;
}

#menu-secondary-nav li{
	display: inline-block;
	word-spacing: 25px;
	margin-right: 25px;
}

#menu-secondary-nav li:first-child{
	margin-left: 0;
}

.featured-nav #menu-item-28 a{
	max-width: 100%;
	padding: unset;
}
.featured-nav #menu-item-27 a{
	max-width: 100%;
/* 	padding: unset; */
}
.featured-nav #menu-item-26 a{
	max-width: 100%;
	padding: unset;
}
/*------------------------------
            Desktop
-------------------------------*/

.desktop-header{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.desktop-nav-contain{
	flex-direction: column;
    display: flex;
    flex-grow: 1;
}

.primaryNav {
  background-color: #3d3d3d;
  color: #FFFFFF;
  align-items: center;
  justify-content: flex-end;
  padding-top: 10px;
  padding-bottom: 25px;
	padding-right: 6.5vw;
}

.primaryNav a{
  color: #FFFFFF;
}
.secondaryNav{
	justify-content: flex-end;
  	padding-top: 25px;
}

#menu-secondary-nav li a, #menu-secondary-nav-1 li a, #menu-secondary-nav-2 li a  {
   max-height: 100px;
   max-width: 100%;
}

.menu-item-28 a{
	content: url(https://digsafewashstg.wpenginepowered.com/wp-content/uploads/2020/04/WA811logo_color_2016_FullSize.png);
}
.menu-item-26 a{
	content: url(https://digsafewashstg.wpenginepowered.com/wp-content/uploads/2020/04/NW811_LS2.png);
}
.menu-item-27 a{
	content: url(https://digsafewashstg.wpenginepowered.com/wp-content/uploads/2020/04/IEUCCLogo.png);
	padding: 7px;
}

#menu-secondary-nav-1 li a{
  max-height: 50px;
}
/*------------------------------
              Notices
-------------------------------*/

.informationSection{
	background-color: #4ACEBF;
  	color: #ffffff;
   	padding: 25px;
   	font-size: 1.75rem;
   	font-family: HelveticaNeueLightExp;
   	letter-spacing: .5px;
	justify-content: center;
}

.informationSection .textwidget{
    margin: 25px auto;
	max-width: 1200px;

}

.informationSection a{
	color: #ffffff !important;
}

.informationSection a:hover{
	text-decoration: underline !important;
}

.noticesSection:empty{
	display: none;
}

.paymentSection{
	background-color: #d4d9d5;
	padding: 15px 30px;
	margin-top: 50px;
	border: 3px double;
}

.paymentSection a, .paymentSection a:hover{
	color: inherit;
}

.paymentSection p{
	margin-bottom: 0;
}

/*------------------------------
              Intro
-------------------------------*/
.page-template-board-page .introSection{
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.board-intro{
  width: 60%;
}

.board-logo{
  max-width: 30%;
  margin: 25px;
}

.page-template-board-page .introSection{
  background-color: #ffffff;
}

#home-intro img{
  max-width: 70%;
}

.wayfinding{
  display: flex;
  justify-content: center;
  /*flex-direction: column;*/
  text-align: center;
}

.wayfinding span{
  margin: 0 10px;
  font-size: .75em;
}

.wayfinding p{
  margin-bottom: 0;
}

#homeowners-intro .page-scroll {
position: relative;
top: 75px;
}
/*------------------------------
            Showcase
-------------------------------*/
.showcaseSection{
  background-color: #EEEEEE;
  /*color: #000000;*/
  align-items: center;
}

.home .showcaseSection{
	background-color: #ffffff;
}

/*.showcaseSection > div{
  flex:1;
}*/

.fp-showcase{
  position: relative;
  color: white !important;
}

.fp-showcase img{
    width: 101%;
    height: auto;
}

.fp-showcase a{
  color: inherit;
}

/*.fp-title{
  margin-top: 250px;
}*/

.fp-title-text-visible{
  margin-top: 0px;
}

.fp-text-block{
  background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.65), rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,1));
  margin-top: -50px;
  opacity: 0;
  padding: 35px 25px 10px;
  position: relative;
  display: none;
}

.fp-text-block-visible{
  opacity: 1;
}

.fp-box p{
  padding: 40px 25px;
}

fp-hover:hover{

}

.counties {
	align-items: center;
}

/*------------------------------
            Feature
-------------------------------*/
.featureSection{
  background-color: #549442;
  color: #ffffff;
}

.apwa-grid{
  /*grid-template-columns: auto auto auto auto;*/
  display: flex;
  flex-wrap: wrap;
  padding-left: 10px;
}

.apwa-col{
  /*flex: 25%;
  max-width: 25%;*/
  flex-direction: column;
}

.apwa-btn{
  border-radius: 1000px;
  height: 25px;
  width: 25px;
  border: solid black .25px;
  margin-right: 10px;
}

#apwa-container{
  margin-top: -25px;
  /*margin-bottom: 50px;*/
  display: none;
  border-bottom: #707070 solid 2px;
  border-top: #707070 solid 2px;
  color: #FFFFFF;
}

#apwa-btn-container{
  padding: 15px;
  background-color: #EBEBEB;
}

#apwa-intro{
  padding-top: 50px;
  padding-bottom: 50px;
  text-align: center;
  background-color: #EDEDED;
}

#white{
  background-color: #FFFFFF;
}

#pink{
  background-color: #FF7BC2;
}

#red{
  background-color: #D30E0E;
	color: white;
}

#yellow{
  background-color: #FFE200;
}

#orange{
  background-color: #FF9300;
}

#blue{
  background-color: #0099DD;
}

#purple{
  background-color: #7633A7;
}

#green{
  background-color: #36A360;
}

#teal{
	background-color: #157a6f;
	padding: 5px;
	color: white;
}

/*------------------------------
            Main Body
-------------------------------*/
.meeting-minutes p, .financials p{
	margin: 0;
	padding: 0;
}

.\32 025 a:not(:last-child):after{
	content: " | ";
}

.minute-contain{
  margin-bottom: 25px;
}

.events{
	margin-top: 50px;
}
.events p:first-of-type{
	margin-top: 25px;
}
.events p{
	margin-bottom: 10px;
}

.events h3{
	text-align: center;
}

.events .subhead{
	text-align: center;
}

.bod-container{
  column-count: 3;
  margin-bottom: 50px;
  gap: 50px;
}

.member-contact{
  display: flex;
	justify-content: stretch;
}

.member-contact p{
	flex-grow: 1;
}

.industry{
  writing-mode: vertical-rl;
  text-transform: uppercase;
  font-size: .8rem;
  margin: 7px 7px 7px 0;
}

.county-list li{
  list-style-type: none;

}

.county-list{
	margin-left: 0;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
}

.officers{
	-ms-flex: 0 0 30%;
    flex: 0 0 30%;
    max-width: 30%;
}

 .bod-members-heading{
   margin-bottom: 25px;
   text-align: left;
 }

.bod-members-heading h3{
	text-align: center;
	margin-bottom: 50px;
}

.bod-members-heading > .row{
	gap: 25px;
}

 .pdf img{
   border: black solid .5px;
	 max-height: 250px;
 }

 .pdf p{
   margin-top: 10px;
 }

 .training{
   margin-bottom: 50px;
 }

 .resources h3{
   margin-bottom: 25px;
 }

 .resources .flex-container{
   justify-content: flex-start;
 }

.pdf{
   margin-right: 50px;

 }

#the-process{
	text-align: left;
}

#meeting-minutes-archive p:not(first-child) {
	margin-bottom: 5px;
}

#monthly-meeting{
	padding-right: 0;
	padding-left: 0;
    background-color: #EDEBEB;
	max-width: 100%;
}

#next-meeting{
	background-color: #EDEBEB;
/* 	gap: 15px; */
	padding: 50px;
}

/*------------------------------
            Bottom
-------------------------------*/

.bottomSection{
  background-color: #EDEBEB;
}

.bottomSection p{
  margin-bottom: 15px;
	word-break: keep-all;
}

.contact-title{
  display: flex;
  justify-content: center;
  align-items: center;
}

.social-links img{
  max-height: 40px;
  width: auto;
  margin-right: 7px;
}

.mobile-app-links img{
  max-height: 40px;
  width: auto;
  margin-right: 7px;
}

#resources-main{
  flex-direction: column;
}

.resource-img{
  display: flex;
}

.img-title a{
  color: #6e6e6e;
  float: left;
  font-size: 12px;
  line-height: 1.4;
}

.guides{
  margin-bottom: 50px;
}

#wa811-bottom.textwidget{
	margin-right: 15px;	
}
/*------------------------------
            Footer
-------------------------------*/

footer {
  background-color: #2A4A21;
  color: #ffffff;
  padding: 50px 100px 100px;
  font-size: 14px;
}

footer a{
  color: #ffffff;
  text-decoration: none;
}

footer .menu{
  display: flex;
  margin-left: 0;
}

footer .menu a{
  margin: 0;
}

.footer-menu-contain{
	width: 100%;
}

footer .current_page_item a{
  color: #ffffff;
}

.footer-container{
  display: flex;
  /*justify-content: space-around;*/
}

.footer-container>div{
  padding-right: 25px;
}

.footer-heading{
  margin-top: 15px;
}

footer img{
  max-width: 80%;
}

.footer-left-col{
	flex-direction: column;
	margin-right: 25px;
}

.board-btn{
  text-align: center;
}

.board-btn p{
  margin-top: 15px;
}