* {
  box-sizing: border-box;
  width: 100%;
  margin:0px;
}


body {background-color: var(--bgcolor1);}

p, h1, h2, h3, h4 {
	padding:0px;
	color: var(--fontcolor1);
	font-family: Figtree;
}
a {text-decoration: none;}
input, textarea, select {outline: none;}

.floatLeft {float: left;}
.floatRight {float: right;}
.clearFix {clear: both;}
.displayNone {display: none;}
.displayInlineBlock {display: inline-block;}
.displayInline {display: inline;}
.displayBlock {display: block;}

.pageHeader {
	position:fixed;
	top:0px; left:0px;
	height:var(--pageHeaderHeight);
	background-color: var(--bgcolor2); 
	border-bottom: 1px solid var(--fontcolor1);
	z-index: 99;
}
.pageHeader p {line-height: var(--pageHeaderHeight);}
.pageHeaderLeft, .pageHeaderRight {width: 30%;}
.pageHeaderCenter{width: 40%;}
.pageHeaderLeft p {text-align: left;}
.pageHeaderCenter p {text-align: center;}
.pageHeaderRight p {text-align: right;}
.pageHeaderRight button {
	width: 70%;
	height:24px;
	margin:12px 0px 0px 20%; 
	border-radius: 8px;
	background-color:var(--bgcolor1);
	color:var(--fontcolor1);
	border: none;
	outline:1px solid var(--fontcolor1);
}
.pageHeaderLeft img {
	width: 48px; padding: 1px;
}

#pageHeaderCityLogoImg {width: 48px; display: block; margin: auto; border-radius: 50%;}

.pageBody {
	margin-top:var(--pageHeaderHeight);
	margin-bottom:var(--pageHeaderHeight);
	background-color: var(--bgcolor1);
	
}

.categoryPageBody {
	margin-top: 0px;
	margin-bottom:var(--pageHeaderHeight);
	background-color: var(--bgcolor1);
	
}

.pageBodyTitle {

}

.pageBodyTitle h1 {
	text-align: center;
	font-size: 350%;
	line-height: 70px;
	color: var(--whitefontcolor);

}
.categoryPageBodyTitle h1 {
	text-shadow: 0px 0px 2px var(--highlightcolor);
}

.pageBodyTitle h1 a {
	text-decoration: none;
	color: var(--whitefontcolor);
}
.pageBodyTitle h1 a:hover {
	color: var(--highlightcolor);
}

.pageFooter {
	position:fixed;
	bottom:0px; left:0px;
	height:var(--pageHeaderHeight);
	background-color: var(--bgcolor2); 
	border-top: 1px solid var(--fontcolor1);
}


.pageSideNav {
	height: 100%;
	width: 320px;
	background-color: var(--bgcolor2); 
	position: fixed;
	top: 0;
	border-right: 1px solid var(--fontcolor1);
	z-index: 99;
}

.pageSideNavScrollable {
	margin-top: 4px;
	height:75%;
	overflow-y: scroll;
}

#pageSideNavProfileName, #pageSideNavProfileAddress, #profileFollows {
	padding-left:30px;
	line-height: 24px;
}

.pageSideNavLink {
	height:40px; width: 260px;
	margin:20px 0px 0px 30px;
	line-height:40px;

}
.pageSideNavSectionDivider {
	border-bottom: 1px solid var(--fontcolor1);
	width: 260px; margin:40px auto;
}

.pageSideNavLink h2, .pageSideNavLink h3 {
	display: inline;
}
.pageSideNavLink:hover {
	background-color: var(--bgcolor1);
}
#pageSideNavProfileImg {
	width: 50px; height: 50px; border-radius: 25px;
	margin: 20px 0px 30px 30px;
}
#pageSideNavProfileName, .profileFollowsNum, .pageSideNavLink h2, .pageSideNavLink h3, .rightNavIcons {color: var(--highlightfontcolor);}



.pageSideNavSectionCategories a {
	text-decoration: none;
}


#pageSideNavCloseBar {
	height: 100%;
	width: 600px;
	background-color: var(--highlightcolor);
	opacity: 0.0;
	position: fixed;
	top: 0;
	z-index: 99;
}






.profileFollows {padding-bottom: 6px;}

.pageBodyPost {
	width: 99%; margin: 0px 0px 16px 1%;
	border-bottom: 1px solid var(--fontcolor1);
} 

.pageBodyPostHeaderProfilePic {
	width: 48px; height:48px;
	margin:2px 10px 0px 2px;
}

.pageBodyPostHeaderProfilePic img {
	width: 48px;
}
.pageBodyPostContent {
	width: 80%;
}
.pageBodyPostContent p {
	line-height: 24px;
	font-size: 105%;
}
.pageBodyPostContentName {
	font-weight: bold;
	font-size: 115%;
	color: var(--highlightfontcolor);
}

.pageMemberProfileName {
	font-size: 150%;
}
.pageBodyPostContentAddress {
	color: var(--highlightfontcolor);
}



.pageBodyPostFooter {
	margin:5px 0px;
}


.pageBodyPostFooterNum {
	color: var(--highlightfontcolor);

}


#pageLiveNavBar {
	width: 90%; 
	height:var(--pageHeaderHeight);
	position: fixed;
	top:60px;
	background-color: var(--bgcolor2);
	border-radius: 25px;
	border:1px solid var(--fontcolor1);
	z-index: 98;
	box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.25);
}


#pageLiveNavBarOpen {
	float: left;
	height:40px; width: 40px;
	margin: 5px 0px 0px 5px;
}
#pageLiveNavBarClose {
	float: right;
	height:40px; width: 40px;
	margin: 5px 5px 0px 0px;
}
#pageLiveNavBarCloseIcon {
	font-size: 230%;
}
#pageLiveNavBarOpenIcon {
	font-size: 210%;
	line-height: 40px;
	padding-left: 4px;
}

#pageLiveNavBarSearch {
	float:left; 
	width: 260px; 
	margin-top:6px; margin-left: 10px;


}
#pageLiveNavBarSearchInput {
	width: 100%; height:36px;
	background-color: var(--bgcolor1);
	border:1px solid var(--bgcolor1);
	color:var(--fontcolor1);
	font-size: 125%;
	padding-left:12px;
	border-radius: 12px;
}
#pageLiveNavBarSearchInput:focus {
	border-bottom:1px solid var(--fontcolor1);
}

.pageLiveNavBarOnScreen {
	animation: moveLiveBarOnScreen 0.1s ease-out 0s 1 normal;
	right: 2%;
}
.pageLiveNavBarOffScreen {
	animation: moveLiveBarOffScreen 0.1s ease-out 0s 1 normal;
	right: -77.5%;
}






#pageMemberProfile {
	width: 90%; margin-right:5%;
	max-height: 85%;
	position: fixed;
	top:100px;
	background-color: var(--bgcolor1);
	border-radius: 6px;
	border:2px solid var(--fontcolor2);
	box-shadow: 0px 0px 10px var(--bgcolor4);
	overflow-y: hidden;


}
.pageMemberProfileContent {
	width: 100%;
	position: relative;
}
.pageMemberProfileContentScroll {
	overflow-y: scroll;

}

.memberProfileOnScreen {
	animation: moveProfileOnScreen 0.1s ease-out 0s 1 normal;
	right: 0%;
}
.memberProfileOffScreen {
	animation: moveProfileOffScreen 0.1s ease-out 0s 1 normal;
	right: -100%;
}

#pageMemberProfileHeader { height:160px; }

#pageMemberProfileHeaderBanner {height: 160px;}

#pageMemberProfileHeaderBanner img {width:100%; height:100%;object-fit: cover;}


#pageMemberProfileHeaderPic {
	width: 70px; height:70px; 
	background-color: var(--bgcolor1);
	border-radius: 30px;
	position: relative;
	left:10px;
	bottom:35px;

}
#pageMemberProfileHeaderPicImg {
	width: 60px; margin: 5px;
}

#pageMemberProfileAbout {
	

}
#pageMemberProfileAbout p {padding: 40px 20px 10px 20px;}



.pageMemberProfileHeaderButtons {
	background-color: var(--bgcolor1);
	border: none;
	outline: 1px solid var(--fontcolor1);
	border-radius: 12px;
	position: absolute;
	top:10px;
	display: inline-block;
}
#pageMemberProfileHeaderAlertButton {width:24px; height:24px;right:120px;}
#pageMemberProfileHeaderFollowButton {width:100px; height:24px;right:10px;}


#pageMemberProfileClose {
	height: 60px; 
	position: absolute;
	bottom:0px; left: 0px;
	background-color: var(--bgcolor1);
}
.pageMemberProfileContacts {
	height: 40px; 
	position: absolute;
	bottom:60px; left: 0px;
	background-color: var(--bgcolor1);
}

#pageMemberProfileBottomSpacer {
	margin-bottom: 100px;
}


#pageMemberProfileCloseIcon {
	font-size: 250%;
	text-align: center;
	margin:0px;
}

#pageMemberProfileCloseIcon:hover {
	cursor: pointer;
	color: var(--highlightfontcolor);
}

.pageMemberProfileCategories {}
.pageMemberProfileCategories p {padding:0px 20px; line-height: 24px;}
.pageMemberProfileCategory {
	background-color: var(--bgcolor2);
	border-radius: 6px;
	padding:0px 8px;
}





.pageMemberProfileList {
 	overflow-x: scroll;
  	overflow-y: hidden;
  	margin-top: 12px;
  	/*background-color: var(--bgcolor2);*/
 }
 .pageMemberProfileListings {
 	width: 1000px;
 	height:200px;
 }
.pageMemberProfileListing {
	width: 240px;
	height:200px;
	display: inline-block;
  	position: relative;
	overflow: hidden;
	margin-right: 3px;
}

.pageMemberProfileListingImg {
	width: 100%;
}
.pageMemberProfileListingTitleBg {
	height:50px;
	background-color: var(--bgcolor1); 
	opacity: 0.5;
	position: absolute;
	bottom:0px;
}

.pageMemberProfileListingTitle {
	height:50px;
	position: absolute;
	bottom:0px;
}
.pageMemberProfileListingTitle h3, .pageMemberProfileListingTitle p {
	text-align: center;
	color: var(--highlightfontcolor);
}
.pageMemberProfileListingTitle h3 {font-size: 180%; text-shadow: 0px 0px 6px var(--bgcolor1);}
.pageMemberProfileListingTitle p {font-size: 120%; text-shadow: 0px 0px 6px var(--bgcolor1);}









.cityAffiliateListings {}



.cityAffiliateListing {
	background-color: var(--bgcolor2);
	width: 96%;
	margin: 8px auto 0px auto;
	border-radius: 4px;
}
.cityAffiliateListing:hover {
	cursor: pointer;
}

.cityAffiliateListingImg {
	width:25%; max-width: 120px;
	border-radius: 4px; 
	float:left;
}
.cityAffiliateListingDetails {
	width: 75%; float:left;
}

.cityAffiliateListingDetails a {
	text-decoration: none;
}

.cityAffiliateListingDetails h3, .cityAffiliateListingDetails p {
	padding: 6px 2px 0px 12px;
}
.cityAffiliateListingDetails p {
	line-height: 18px;
}

.cityAffiliateListingImg img {
	border-radius: 4px;
}







/* ##### featured content ########################################### */
#cityPageFeatured {
	height:480px;
	background-color: var(--bgcolor4);
}
.cityPageFeaturedContent {
	height:480px;
	position: relative;
	display:none;

}

.cityPageFeaturedContent img {
	object-fit: cover;
	height:480px;
}

.cityPageFeaturedContentDetailsBg {
	height:90px;
	background-color: var(--bgcolor4);
	opacity: 0.5;
	position: absolute;
	bottom:0px;

}
.cityPageFeaturedContentDetails {
	height:90px;
	position: absolute;
	bottom:0px;

}
.cityPageFeaturedContentDetails h2 {
	line-height: 45px;
	text-align: center;
	padding: 0px 20px;
	font-size: 200%;
	color: var(--highlightfontcolor);
}
.cityPageFeaturedContentDetails p {
	line-height: 20px;
	text-align: center;
	padding: 0px 20px;
	color: var(--whitefontcolor);

}

/* ##### end featured content ########################################### */











.fa-regular {
	color: var(--fontcolor1);
	
}
.inlineIcons {display: inline; padding-right: 15px;}
.fa-chevron-down {padding-left:30px;}

.fa-brands, .fa-solid {
	color: var(--fontcolor1);
}
.fa-brandsDark, .fa-solidDark {
	color: var(--fontcolor2);
}
.fa-brands:hover, .fa-solid:hover, .fa-regular:hover {cursor: pointer;color:var(--highlightcolor);}


.fa-brandsDark {
	display: inline; 
	text-align: right;
	padding-top: 20px; padding-left: 20px;
	line-height: 30px;
}

.fa-brandsBizProfile {
	font-size: 125%;
}

.fa-bars-staggered {
	line-height: 50px;
	padding-left: 10px;
	font-size: 200%;
}

#pageFooterSocialLinks, #pageFooterDomainName {
	display: inline-block; line-height: 60px;
}

#pageFooterDomainName a {color: var(--highlightcolor);}
#pageFooterSocialLinks i {
	padding-left:20px;
}

.lightText {color:var(--fontcolor1);}
.darkText {color:var(--fontcolor3);}

.displayInlineBlock {display: inline-block;}

.pageContentSlideOnscreen {right:100%;}
.pageContentSlideOffscreenRight {right:200%;}
.pageContentSlideOffscreenLeft {right:0%;}

.sideNavOnScreen {
	animation: moveOnScreen 0.1s ease-out 0s 1 normal;
	left: 0px;
}
.sideNavOffScreen {
	animation: moveOffScreen 0.1s ease-out 0s 1 normal;
	left: -320px;
}

.sideNavCloseBarOnScreen {
	animation: moveSideNavCloseBarOnScreen 0.1s ease-out 0s 1 normal;
	left: 320px;
}
.sideNavCloseBarOffScreen {
	animation: moveSideNavCloseBarOffScreen 0.1s ease-out 0s 1 normal;
	left: -920px;
}

@keyframes moveOnScreen{
    from {left: -320px;} 
    to{left:0px;} 
}
@keyframes moveOffScreen{
    from {left: 0px;} 
    to{left:-320px;} 
}

@keyframes moveSideNavCloseBarOnScreen{
    from {left: -920px;} 
    to{left:320px;} 
}
@keyframes moveSideNavCloseBarOffScreen{
    from {left: 320px;} 
    to{left:-920px;} 
}

@keyframes moveLiveBarOnScreen{
    from {right: -75%;} 
    to{right:2%;} 
}
@keyframes moveLiveBarOffScreen{
    from {right: 2%;} 
    to{right:-75%;} 
}

@keyframes moveProfileOnScreen{
    from {right: -100%;} 
    to{right:0%;} 
}
@keyframes moveProfileOffScreen{
    from {right: 0%;} 
    to{right:-100%;} 
}


















/* ########## BIZ ADMIN #################################################  */
#bizAdminContent {
	width: 98%; max-width: 800px;
	margin: 0px auto;
}



.catSelections {
	margin: 0px auto 0px auto;
}
.bizAdminField {
	height:45px;
	font-size: 115%;
	margin: 0px auto 10px auto;
}
.bizAdminFieldTextarea {
	min-height: 200px;
	font-size: 150%;
}
/* ########## END BIZ ADMIN #############################################  */













.cityAffiliatePost {
	background-color: var(--bgcolor2);
	margin:12px 0px 0px 0px;
}

.cityAffiliatePost p, .cityAffiliatePost h2 {
	padding: 6px 12px;
}

.cityAffiliatePost p {
	line-height: 24px;
}

.cityAffiliatePostButton {
	width: 120px; height: 45px;
	font-size: 110%;
	float: right;
	margin-right:12px; margin-bottom:12px;
	background-color: var(--fontcolor1);
	outline: none;
	border:0px solid var(--fontcolor1);
	border-radius: 6px;
	color:var(--highlightfontcolor);
}

.cityAffiliatePostButton:hover {
	cursor: pointer;
	background-color: var(--highlightcolor);
	color:var(--fontcolor1);
}

.categoryPageSubCatLinks {
	line-height: 30px;
	padding:12px;
}
.categoryPageSubCatLink {
	padding:3px 12px;
	color: var(--bgcolor3);
	background-color: var(--whitefontcolor);
	border-radius: 6px;
}
.categoryPageSubCatLink:hover {
	background-color: var(--bgcolor3);
	color: var(--whitefontcolor);
}

.cityPageBreadCrumbLinks {
	line-height: 20px; padding:12px 24px 0px 12px;
	color: var(--whitefontcolor);
}
.cityPageBreadCrumbLink {
	color: var(--whitefontcolor);
	background-color: var(--bgcolor4);
	border-radius: 6px;
	padding:2px 4px;
}
.cityPageBreadCrumbLink:hover {
	color: var(--highlightfontcolor);
}


.cityBusinessListings {

}

.categoryIsSponsored {
	margin-top:var(--sponsorHeight);
	z-index: 2;
}

.categoryPageBg {
	position: fixed;
	top:50px; left: 0px;
	z-index:-10;
}
.categoryPageBgSpacer {margin-top: 420px;}

#categoryPageBgScreen {
	position: fixed;
	top:50px; left: 0px;
	z-index:-9;
	height:100%;
	background-color: #000;
	opacity: 0.0;
}


.cityCategorySponsor {
	position: fixed;
	top:var(--pageHeaderHeight);
	left:0px;
	height:var(--sponsorHeight);
	background-color: var(--bgcolor3);
	box-shadow: 0px 1px 6px var(--bgcolor1);
}
.cityCategorySponsor h1, .cityCategorySponsor p {
	color: var(--fontcolor3);
	padding:0px 12px;
}

.cityCategorySponsorCallToActionButton {
	width: 160px; height:45px;
	background-color: var(--bgcolor2);
	outline: none;
	border-radius: 6px;
	border:1px solid var(--bgcolor2);
	float: right;
	margin: 0px 12px 0px 0px;
	font-size: 110%;
	color: var(--fontcolor1);
}
.cityCategorySponsorCallToActionButton:hover {
	background-color: var(--highlightcolor);
	border:1px solid var(--highlightcolor);
	color: var(--fontcolor3);
}


.cityBusinessListingPlus {
	background-color: var(--bgcolor3);
	width: 96%;
	margin: 8px auto 0px auto;
	border-radius: 40px 4px 4px 40px;
}
.cityBusinessListingPlus:hover {
	cursor: pointer;
}
.cityBusinessListingPlus h3, .cityBusinessListingPlus p {
	color: var(--fontcolor3);
}

.cityBusinessListing {
	background-color: var(--bgcolor2);
	width: 96%;
	margin: 8px auto 0px auto;
	border-radius: 40px 4px 4px 40px;
}
.cityBusinessListing:hover {
	cursor: pointer;
}

.cityBusinessListingLogo {
	width:25%; max-width: 80px;
	border-radius: 50px;
}
.cityBusinessListingDetails {
	width: 75%;
}

.cityBusinessListingDetails a {
	text-decoration: none;
}

.cityBusinessListingDetails h3, .cityBusinessListingDetails p {
	padding: 6px 2px 0px 12px;
}
.cityBusinessListingDetails p {
	line-height: 18px;
}

.cityBusinessListingLogo img {
	border-radius: 50px;
}




.cityBizUploadForm {
	width: 96%;
	margin:24px auto 12px auto;
}

.cityBizUploadForm h2 {
	line-height: 36px;
	padding:0px 12px;
}

.cityBizUploadFormField {
	width: 100%; height: 40px;
	margin:0px auto 12px auto;
	background-color: var(--bgcolor2);
	border: 1px solid var(--fontcolor2);
	outline: none;
	border-radius: 6px;
	color: var(--fontcolor1);
	font-size: 110%;
	padding-left:15px;
}

.cityBizUploadFormField:focus {
	border: 2px solid var(--fontcolor1);
}

.cityBizUploadFormButton {
	background-color: var(--fontcolor1);
	color: var(--fontcolor3);
}

.cityBizUploadFormButton:hover {
	background-color: var(--highlightcolor);
	border-color: var(--highlightcolor);
}


.cityBizUploadFormMoreButton {
	
	width: 50%; height:24px;
	margin:0px auto 12px auto;
	background-color: var(--bgcolor2);
	border: 1px solid var(--fontcolor2);
	border-radius: 6px;
}
.cityBizUploadFormMoreButton p {
	text-align: center; line-height: 24px;
}
.cityBizUploadFormMoreButton:hover {
	background-color: var(--fontcolor1);
	border-color: var(--fontcolor1);
	cursor: pointer;
}
.cityBizUploadFormMoreButton:hover p {
	color: var(--fontcolor3);
}


.cityBizUploadFormTextarea {min-height: 80px;}




.cityInputFormError {border:2px solid red; background-color: pink;}

.cityFormMsgErr {
	border-radius: 6px; 
	border:1px solid red;
	background-color: pink;
	margin-bottom: 6px;
	text-align: center;
}


















.cityMostPopCatListTitle {margin-top:12px;}
.cityMostPopCatListTitle h2 {text-align: center; line-height: 30px;}

 .cityMostPopCatList {
 	overflow-x: scroll;
  	overflow-y: hidden;
  	margin-top: 12px;
  	/*background-color: var(--bgcolor2);*/
 }
 .cityMostPopCatListings {
 	width: 1000px;
 	height:480px;
 }
.cityMostPopCatListing {
	width: 300px;
	height:480px;
	display: inline-block;
  	position: relative;
	overflow: hidden;
	margin-right: 3px;
}
.cityMostPopCatListingDetailsBg {
	height:70px;
	background-color: var(--bgcolor1); 
	opacity: 0.5;
	position: absolute;
	bottom:0px;
}

.cityMostPopCatListingDetails {
	height:70px;
	position: absolute;
	bottom:0px;
}
.cityMostPopCatListingDetails h3, .cityMostPopCatListingDetails p {
	text-align: center;
	color: var(--highlightfontcolor);
}
.cityMostPopCatListingDetails h3 {font-size: 180%; text-shadow: 0px 0px 6px var(--bgcolor1);}
.cityMostPopCatListingDetails p {font-size: 120%; text-shadow: 0px 0px 6px var(--bgcolor1);}



#cityColorSchemeSelect {width: 80px; height:24px;}


























/* ##### ADMIN ########################################################################## */
.cityAdminSection {
	width: 100%; margin:12px auto 0px auto;
}
#cityAdminFeaturedCategoriesLeft {
	width: 48.5%;
	margin:0px 0px 0px 1%;
	float:left;
}
#cityAdminFeaturedCategoriesRight {
	width: 48.5%;
	margin:0px 0px 0px 1%; 
	float:left;
}
.cityAdminFeaturedCategoryListing {
	border:1px solid #000;
	background-color: #fff;
	height: 40px;
	margin: 0px 0px 4px 0px;
	cursor: pointer;
}
.cityAdminFeaturedCategoryListing:hover {border:1px solid var(--bgcolor3);}
.cityAdminFeaturedCategoryListing p {
	line-height: 40px; padding:0px 12px;
}
.cityAdminCategoryIsFeatured {
	border:1px solid var(--bgcolor3);
	background-color: var(--bgcolor3);
}


/* ##### ADMIN ########################################################################## */














.spinningWorking {width: 40px; height:40px; animation:spinningWorkingAnimation 0.5s linear 0s infinite normal;}
@keyframes spinningWorkingAnimation {
 	100% {-webkit-transform: rotate(360deg); transform:rotate(360deg);}
}

@media only screen and (min-width: 600px) {
	#pageMemberProfile {
	max-height: 90%;

}