/* File includes styles for: 
	- Client Businesses: landing, Business Category, Filters and Individual Business page
	- Staff landing and indivudal page with bio
***********************************************/

/* Global styles
***********************************************/
.mw1600 {
	padding-bottom: 5%; }

.team-member-title {
	font-weight: 600; }

.team-member-title span {
	font-weight: 400; }

.team-member-title span {
	font-size: 1.25rem;
	line-height: 1.5rem; }

.team-member-title {
    font-size: 1.5rem;
	line-height: 2rem; }

.team-member-image .photo-credit {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9;
    background: #0000007d;
    padding: 10px 10px;
    font-size: 0.8rem !important;
    line-height: 1.15rem !important;
    padding-bottom: 10px !important; }
    
#business-directory > ul.business-cat-wrapper li a, .filter-button, .directory-item, ul.businesses-wrapper li, .team-departments-menu li a, .team-department-wrapper .team-member, .collaboration-item {
	background: var(--beige); }
	
.business-button:hover, .social-icon.instagram-icon:hover, .social-icon.facebook-icon:hover, .social-icon.linkedin-icon:hover, .bio-button:hover, div.collaboration-item a.et_pb_button:hover {
	background-color: var(--green-secondary); }

#business-directory > ul.business-cat-wrapper li a:after {
	background-color: var(--lime); }
	
.business-button, .social-icon.instagram-icon, .social-icon.facebook-icon, .social-icon.linkedin-icon, .has-sticky-pos, .bio-button, div.collaboration-item a.et_pb_button, .businesses-wrapper li .business-img {
	background-color: var(--white);	}

.team-member-divider {
    background-color: var(--black); }
	
.business-button:hover, .social-icon.instagram-icon:hover:after, .social-icon.facebook-icon:hover:after, .social-icon.linkedin-icon:hover:after, .bio-button:hover, .team-member-image .photo-credit  {
	color: var(--white); }

.team-departments-menu li a, .bio-button, .team-member-email a, .team-member-phone a {
	color: var(--black); }

.team-member-title, .team-member-email a:hover, .team-member-phone a:hover {
	color: var(--dark-green); }

.team-member-title span {
	color: var(--green-secondary); }
	
.business-button-wrapper a, .bio-button {
	text-align: center;	}
	
.business-button, .filter-button, .team-departments-menu li a, .team-departments-menu:before, .bio-button {
	text-transform: uppercase; }
	
.social-icon.instagram-icon, .social-icon.facebook-icon, .businesses-wrapper li, .business-button, .filter-button, .bio-button, .collaboration-item {
	border-radius: 5px 5px;	}
	
.business-button, .alphabet-navigation a,  #business-directory > ul.business-cat-wrapper li a, .team-departments-menu li, .team-departments-menu li a, .bio-button, div.collaboration-item a.et_pb_button {
	display: inline-block; }
	
.business-phone-number p, .business-phone-number p a, .business-phone-number a,   #business-directory > ul.business-cat-wrapper li a, .team-member-image {
	position: relative;	}
	
.business-phone-number a:hover, .team-member-email a:hover, .team-member-phone a:hover {
	text-decoration: underline;	}
	
.business-button, .bio-button {
	padding: .5em 1em !important; }

.team-member-divider, .businesses-wrapper li .business-img img, .team-member-image img, .collaboration-item .feat-img img {
	width: 100%; }
	
/* Alphabet and Launch Year filter styles 
***********************************************/
.alphabet-navigation a {
	font-weight: 700; }
	
.alphabet-navigation a {
	transition: all 400ms ease; }

.alphabet-navigation a:hover {
	transform: translatey(-3px); }	
	
.letter-group {
	padding: 2rem 0; }
	
.businesses-wrapper li, .collaboration-item {
	padding-bottom: 2.5rem; }
	
ul.businesses-wrapper li .business-title, ul.businesses-wrapper li .directory-details, .collaboration-item .content-wrapper {
	padding-left: 1.5rem;
	padding-right: 1.5rem; }
	
.businesses-wrapper li .business-img, .collaboration-item .feat-img {
	position: relative;
	padding-top: 60%;
	margin-bottom: 1.5rem; }

.businesses-wrapper li .business-img {
	border: 1px solid var(--black); }
	
.businesses-wrapper li .business-img, .businesses-wrapper li .business-img img, .collaboration-item .feat-img {
	border-radius: 5px 5px 0 0;	}

.businesses-wrapper li .business-img img, .team-member-image img, .collaboration-item .feat-img img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	-o-object-fit: cover;
	object-fit: cover;
	object-position: center;
	height: 100%; }	

.businesses-wrapper li .business-img img.logo {
	-o-object-fit: contain;
	object-fit: contain;
	max-width: 85%;
	margin: 0 auto; }

.business-button-wrapper, .bio-button, .content-wrapper a.et_pb_button {
	margin-top: 2rem; }
	
ul.businesses-wrapper li, .directory-details  {
	display: -webkit-box;
  	display: -ms-flexbox;  
  	display: -webkit-flex;
	display: flex;		
	flex-direction: column; }

.directory-details {
	flex: 1; }

.has-sticky-pos {
    position: fixed;
    top: 0;
	z-index: 10;
    width: 100% !important; }
	
/* Socials 
***********************************************/  	
.social-icon.instagram-icon:after {
	content: "\e09a"; }

.social-icon.facebook-icon:after {
	content: "\e093"; }
	
.social-icon.linkedin-icon:after {
	content: "\E09D"; }

.social-icon.instagram-icon, .social-icon.facebook-icon, .social-icon.linkedin-icon {
	width: 40px;
	min-height: 48px;
	position: relative; }
	
.social-icon.instagram-icon:after, .social-icon.facebook-icon:after, .social-icon.linkedin-icon:after {
	font-family: 'EtModules';
	font-size: 24px;
	line-height: 24px;
	color: var(--dark-green);
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%); }	
	
/* Phone Icon */
.business-phone-number {
	margin-top: 1rem; }
	
.business-phone-number p a, .business-phone-number a {
	padding-left: 30px; }
	
.business-phone-number a:before {
	font-family: 'ETmodules';
	content: "\e090";
	font-size: 20px;
	position: absolute !important;
	left: 0;
	top: 0; }

/* Client Business Category Filter styles 
***********************************************/  
#business-directory > ul.business-cat-wrapper li a {
	padding: 1rem;
	padding-right: 50px;
	width: 100%;
	border: 3px solid var(--beige); }
    
#business-directory ul li a:hover, .filter-button:hover {
	cursor: pointer; }
    
#business-directory ul.business-cat-wrapper li a:hover:not(.email):not(.social-icon):not(.business-phone-number):not(.business-button) {
	border-bottom: 3px solid var(--lime); }
    
#business-directory > ul.business-cat-wrapper li a:after {
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translatey(-50%);
	width: 45px; 
	height: 45px; 
	color: var(--dark-green);
	font-family: 'EtModules';
	content: "\35";
	font-size: 42px;
	line-height: 42px;
	border-radius: 50% 50%;
	text-align: center; }
    
.filter-button {
	padding: .5em 1em;
	margin-right: 5px;
	border: none; 
	font-size: 20px;
	line-height: 28px; }
    
.filter-button.active , .filter-button:hover {
	background-color: var(--lime); }
    
.directory-logo img {
	max-width: 100%; }
	
.directory-filters {
	margin-bottom: 2rem; }

.business-description {
	margin-bottom: 1rem; }

.alphabet-navigation.has-sticky-pos {
    padding: 1rem 0; }

.team-member-image {
	padding-top: 100%; }

.team-member-content {
    padding: 1.5rem 1.5rem; }

.team-member-divider {
    height: 1px;
    width: 100%;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem; }

.team-role-section:not(:last-of-type) {
    padding-bottom: 2rem; }

.team-member-title {
	padding-bottom: 0; }
    
@media screen and (min-width: 1350px) {
	.breadcrumbs-wrapper {
    	padding-top: 54px; }
	
	.team-role-section:not(#directors) .team-department-wrapper .team-member {
		width: calc(100%/4 - 2rem) !important; }
	
	.annual-reports-wrapper .annual-report-item {
		width: calc(100% / 4 - 1.5rem); }
}
@media screen and (min-width: 981px) and (max-width: 1349px) {
	.annual-reports-wrapper .annual-report-item {
		width: calc(100% / 3 - 1.5rem); }
}
@media screen and (min-width: 981px) {
	.breadcrumbs-wrapper {
		padding-top: 6%;
		margin-bottom: 2.75%; }
		
	h1 {
		margin-bottom: 2.75%; }
		
	#business-directory .directory-item, .team-role-section:not(#directors) .team-department-wrapper .team-member, .team-role-section#directors .team-department-wrapper .team-member {
		width: calc(100% / 3 - 2rem); } 
	
	.team-role-section {
    	padding-top: 4rem; }
}
@media all and (min-width: 1281px) {
	#business-directory ul:not(.alphabet-navigation) li {
		width: calc(100% / 3 - 1.3333rem);	}
}
@media all and (max-width: 1280px) and (min-width: 768px) {
	#business-directory ul:not(.alphabet-navigation) li {
        width: calc(100% / 2 - 1rem); }
}
@media all and (max-width: 980px) and (min-width: 768px) {
	#business-directory .directory-item {
		width: calc(100% / 2 - 2rem); }  
	
	.annual-reports-wrapper .annual-report-item {
		width: calc(100% / 2 - 1rem); }
	
	.team-role-section:not(#directors) .team-department-wrapper .team-member, .team-role-section#directors .team-department-wrapper .team-member {
		width: calc(50% - 2rem); }	
}
@media all and (max-width: 980px) {
	.breadcrumbs-wrapper {
		padding-top: 80px; }
	
	.breadcrumbs-wrapper, h1 {
    	margin-bottom: 30px; }
	
	.team-role-section {
    	padding-top: 2rem; }
 }    
@media all and (min-width: 768px) { 
	.team-departments-menu li a:hover {
		background-color: var(--lime); }
	
	#business-directory {
		padding-top: 2rem; }
		
	.alphabet-navigation:not(.has-sticky-pos) {
		margin-top: -2rem;
		padding-bottom: 2rem; }
		
	div#business-directory ul, .business-button-wrapper, .team-departments-menu, .annual-reports-wrapper, .collaboration-wrapper {
		display: -webkit-box;  
  		display: -ms-flexbox;  
  		display: -webkit-flex;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap; } 
	
	.collaboration-wrapper .collaboration-item {
		width: calc(100%/2 - 1rem); }
	
	.business-button-wrapper, .team-departments-menu {
		gap: 1rem; }
		
    #business-directory ul:not(.alphabet-navigation), .annual-reports-wrapper, .collaboration-wrapper {
        gap: 2rem; }  
		
	.business-button-wrapper, #business-directory ul.alphabet-navigation {
		gap: 0.5rem; }
	
	/* Staff department sub menu
	***********************************************/
	ul.team-departments-menu.open-menu, .team-role-section h2 {
		margin-bottom: 2rem; }
	
	.team-departments-menu li a {
		padding: .5em 1em;
		border: none;
		border-radius: 5px 5px;
		font-size: 20px;
		line-height: 28px; }
	
	/* Staff departments 
	***********************************************/
	.team-department-wrapper {
		display: -webkit-box;
		display: -ms-flexbox;  
		display: -webkit-flex;	
		display: flex;
		flex-wrap: wrap;
		gap: 2rem; }
}
@media all and (max-width: 767px) {        
	.filter-button:not(:last-of-type) {
		margin-bottom: 0.5rem; }
        
	.directory-item:not(:last-of-type), ul.businesses-wrapper li, /*.business-button-wrapper a:not(:last-of-type),*/ .team-member, .collaboration-item {
		margin-bottom: 2rem; }
	
	#business-directory ul:not(.alphabet-navigation) li:not(:last-of-type) a, .team-role-section h2, .business-button-wrapper a:not(:last-of-type) {	
		margin-bottom: 1rem; }
	
	h1.business-title, .business-button-wrapper a:last-of-type {
		margin-bottom: 0 !important; }

	ul.alphabet-navigation li {
		display: inline;
		margin-right: 0.5em; }
        
	.filter-button, .business-button-wrapper a, .bio-button {
		width: 100%; } 
		
	a.social-icon {
		width: 40px;
		height: 40px; }
			
	a.social-icon, .team-departments-menu {
		display: inline-block; }
	
	/* Staff department sub menu
	***********************************************/
	.team-departments-menu {
		position: relative;
		width: 100%;
		background-color: var(--beige);
		padding: 15px 15px; 
		border-radius: 5px 5px; }
	
	.team-departments-menu:hover { 
		cursor: pointer; }
	
	.team-departments-menu.open-menu:before, .team-departments-menu.open-menu:after {
		font-weight: 600; }
	
	.team-departments-menu:before { 
		content: "View Departments";
		position: relative;
		width: 100%;
		margin-right: 30px;
		font-size: 20px;
		line-height: 24px; }

	.team-departments-menu:after {
		font-family: 'ETmodules';
		content: "\33";
		position: absolute;
		right: 15px;
		font-size: 30px;
		top: 15px; 
		transition: transform 500ms ease; }
	
	.team-departments-menu.open-menu:after {
		transform: rotate(-180deg); }
	
	.team-departments-menu li {
		display: none; }
	
	.team-departments-menu.open-menu li {
		display: block; }
	
	.team-departments-menu.open-menu li:first-of-type {
		padding-top: 1rem; }
	
	.team-departments-menu li a {
		padding: 0.5rem 0; }
}