* {
  box-sizing: border-box;
}
/*
:root {
  --bgcolor1: #fff;
  --bgcolor2: #000;
  --bgcolor3: #ed936d;
  --bgcolor4: #eee;
  --highlightcolor: skyblue;
  --fontcolor1: #fff;
  --fontcolor2: #97a3bf;
  --fontcolor3: #ed936d;
  --fontcolor4: #222;
  --fontcolor5: #555;
  --bordercolordark: #333;
  --bordercolorlight: #444;
  --buttoncolor: #222;
  --buttoncolorhover: #333;
  --contentcolorhover: #333;
  --glowR: 121;
  --glowG: 203;
  --glowB: 237;
}
*/
:root {
  --bgcolor1: #fff;
  --bgcolor2: #000;
  --bgcolor3: #ed936d;
  --bgcolor4: #eee;
  --highlightcolor: skyblue;
  --fontcolor1: #fff;
  --fontcolor2: #97a3bf;
  --fontcolor3: lightgreen;
  --fontcolor4: #222;
  --fontcolor5: #555;
  --fontcolorBlack: #000;
  --bordercolordark: #333;
  --bordercolorlight: #444;
  --buttoncolor: red;
  --buttoncolorhover: #333;
  --contentcolorhover: #333;
  --glowR: 121;
  --glowG: 203;
  --glowB: 237;
}

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

p, h1, h2, h3, h4 {
	padding:0px;
	margin:0px;
	font-family: Figtree;
}

.floatLeft {float: left;}
.clearFix {clear: both;}
.widthHalf {width: 50%;}

.pageContentHeader {
	position: fixed;
	top:0px; left: 0px;
	width: 100%;
	background-color: var(--bgcolor1);
	z-index: 99;
	box-shadow: 0px 0px 15px #ddd;
}
.pageContentHeaderBannerAd {
	width: 100%;
	height: 100px;
	background-color: orange;
}

.pageContentHeaderInputs {
	width: 98%;
	max-width: 960px;
	margin: 0px auto;

}

.pageContentHeaderCategorySelect, .pageContentHeaderSearchBar {
	width:42.5%; height:40px;
	margin: 10px 0px 0px 5%;
}
.pageContentHeaderSearchBar {
	margin-bottom: 10px;
}





.pageContentHomepageLogo {
	width: 80%; 
	margin: 100px auto 0 auto; 
	max-width: 400px; 
}

.pageContentHomepageLogo img {
	width: 100%;
}

























.pageContentHomepageTitleSection {
	width: 98%; height:400px;
	max-width: 960px;
	margin:100px auto 50px auto;
}

.pageContentHomepageTitleSection h1 {
	text-align:center;
	color:var(--fontcolorBlack); 
	font-size: 335%; 
	padding-top: 230px;
}

.pageContentHomepageTitleSection p {
	text-align: center;
	color: red;
	padding:0px 20px 10px 20px;
}


.pageContentTitleSection {
	width: 98%; height:80px;
	max-width: 960px;
	margin:100px auto 0px auto;
	
}
.pageContentTitleSection h1 {
	text-align:center;
	color:var(--fontcolorBlack); 
	font-size: 235%; 
	padding-top: 0px;
}
.pageContentTitleSection p {
	text-align: center;
	color: var(--fontcolor2);
	padding:0px 20px 10px 20px;
}


#pageHeaderDropdownBars {
	font-size: 250%;
	line-height: 60px;
	padding-left: 20px;
}

.pageHeaderDropdownButton, .pageHeaderButton {
	width:95%;
	height:40px;
	margin: 10px 0px 15px 0px;
	font-size: 125%;
	background-color: #76f90a;
	color: #000;
	border: 1px solid #444;
}
.pageHeaderDropdownButton:hover, .pageHeaderButton:hover {
	background-color: #333;
	border: 1px solid var(--fontcolor5);
}

.pageSideNav {
	width:520px;
	position: fixed;
	top:20px;
	left: -521px;
	z-index: 999;
	background-color: var(--bgcolor1);
	border-top: 1px solid #333;
	border-right: 1px solid #333;
	border-bottom: 1px solid #333;
}

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

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


.pageFooterMoreInfo p {
	text-align: center;
}

.pageSideNavContentScrollable, .pageFooterNavContentScrollable, .pageHeaderNavContentScrollable {
	overflow-x: hidden;
  	overflow-y: auto;
  	width: 100%;
  	height:415px;
  	margin-top: 15px;
}
.pageSideNavTab {
	position: absolute;
	top:80px; right: -59px;
	width: 60px; height: 60px;
	line-height: 60px;
	background-color: var(--bgcolor1);
	border-top: 1px solid #333;
	border-right: 1px solid #333;
	border-bottom: 1px solid #333;
}
.pageSideNavTab p { font-size:200%; text-align: center;}

.pageSideNavLinksTop {border-bottom: 1px solid #ccc;}
.pageSideNavLinksBottom {border-top: 1px solid #ccc;}



.sideNavCatLink {line-height: 40px; width: 90%; background-color: var(--bgcolor4); margin-top: 2px; margin-left: 30px;}
.sideNavCatLink p {font-size: 150%; padding: 0px 10px 0px 30px;}


.pageSideNavLink {line-height: 40px; width: 96%;  background-color: #efe; margin-top: 2px; margin-left: 10px;}
.pageSideNavLink p  {font-size: 150%; padding: 0px 10px 0px 20px;}

.pageSideNavLink:hover, .sideNavCatLink:hover {cursor: pointer; background-color: #ddd;}
.footerNavCatLink, .headerNavCatLink {
	background-color: none;
	color:var(--fontcolor1);
	line-height: 25px;
}
.footerNavCatLink p, .headerNavCatLink p {
	line-height: 25px; font-size: 150%;
}
.footerNavCatLink:hover, .headerNavCatLink:hover {
	background-color: darkgreen;
	color: lightgreen;
	cursor: pointer;
}
.footerNavCatLink p:hover, .headerNavCatLink p:hover {
	color: lightgreen;
}
.footerNavCatLink p:hover a, .headerNavCatLink p:hover a {
	color: lightgreen;
}

.pageHeader {
	background-color: var(--bgcolor2);
	width: 100%;
	height:480px;
	position: fixed;
	top:-420px; left: 0px;
	z-index: 99;

}
.pageFooter {
	background-color: var(--bgcolor2);
	width: 100%;
	height:480px;
	position: fixed;
	bottom:-420px; left: 0px;
	z-index: 99;
}
.pageHeader p, .pageFooter p {color: var(--fontcolor1); line-height: 40px;}
.pageHeaderLeft, .pageHeaderRight { width:50%; height:60px; position: absolute; bottom: 0px;}
.pageHeaderLeft p {text-align: left;}
.pageHeaderRight p {text-align: right; padding-right: 15px;}
.pageHeaderLeft {left: 0px;}
.pageHeaderRight {right: 0px;}
.pageHeaderLeft {overflow: hidden;}

#pageHeaderLeftLogoImg {
	height:50px;
	position: absolute;
	top:5px; left:20px;}
#pageHeaderLeftLogoImg, #pageHeaderLeftDomainName {display: inline;}
#pageHeaderLeftSpinningImg {
	height:320px;
	position: relative;
	top:-130px; left:-130px;
	color:#333;
	z-index: 0;
	animation:spinningWorkingAnimation 30.0s linear 0s infinite normal;
}


.pageFooterSearch input {height:45px; font-size: 150%;}

.pageFooterExpanded {bottom:0%;}
.pageFooter p {
	padding-left: 15px;
}

.pageFooterContent {
	position: relative;
}

.pageContent {
	width: 98%;
	max-width: 960px;
	margin:100px auto 100px auto;
	background-color: #fff;
	z-index: 1;
	opacity: .85;
}

.pageContentBG {
	width: 100%;
	margin:0px;
	position: fixed; top:0px; left:0px;
	z-index: -99;
}

.pageContent h1 {
	padding: 10px 20px 0px 20px;
}
.pageContent p {
	padding: 10px 30px 0px 30px;
}


.pageFooterNavContentScrollable, .pageHeaderNavContentScrollable {
	color: var(--fontcolor1);
	/*background-color: #2b3854;*/
	background-color: green;
	height: 315px;
	width:90%; margin-left: auto; margin-right: auto;
}
.footerNavCatLink p, .headerNavCatLink p {
	font-size: 150%;
	padding-left: 35px;

}

#pageFooterExpandButton {
	position: absolute;
	top:-40px; right:0px;
	width:80px; height: 80px;
	border-radius: 100%;
	text-align: center;
	
	background-color: var(--bgcolor2);

}
#pageFooterExpandButton img {height: 80%; margin-top:10%;}

.pageFooterMoreInfo p {
	line-height: 40px;
}

#pageFooterExpandButton p {
	line-height: 60px;
}
#pageFooterExpandButton:hover {
	box-shadow: 0px 0px 20px rgba(237, 147, 109, 0.5);


}
#pageFooterExpandArrow {
	position: absolute;
	top:15px; right:-15px;
	width:80px; height: 80px;
	font-size: 275%;
	color: #76f909;
	text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.75);
}

.pageFooterOnScreen {
	animation: moveFooterOnScreen 0.125s ease-out 0s 1 normal;
	bottom: 0px;
}
.pageFooterOffScreen {
	animation: moveFooterOffScreen 0.125s ease-out 0s 1 normal;
	bottom: -420px;
}

@keyframes moveFooterOnScreen{
    from {bottom: -540px;} 
    to{bottom:0px;} 
}
@keyframes moveFooterOffScreen{
    from {bottom: 0px;} 
    to{bottom:-240px;} 
}


.pageContentFooter {
	width: 100%;
	margin:30px 0px 0px 0px;
	background-color: orange;
}
.pageContentFooter p {color: var(--fontcolor1);}

.pageContentFooterLeft, .pageContentFooterRight {
	width:50%;
}
.pageContentFooterRight p {text-align: right;}
.pageContentFooterLink {
	line-height:30px;
} 
.pageContentFooterLink p {
	padding-left: 25px; padding-right: 25px;
}

.pageContentSocialLink {
	width: 20%;
	height:60px;
	line-height: 60px;
}
.pageContentSocialLink p {text-align: center;}


.pageContentFooterInfo {
	line-height: 35px;
}
.pageContentFooterInfo p {
	text-align: center;
}


.pageContentFeaturedMerchant {
	width:100%;
	background-color: #ddd;
	position: relative;
}
.pageContentFeaturedMerchantImg {
	width: 100%;
}

.pageContentFeaturedMerchantTitleBg, .pageContentFeaturedMerchantTitle {
	position: absolute;
	bottom:0px;left:0px;
	width:100%; height:70px;
}
.pageContentFeaturedMerchantTitleBg {
	background-color: #444;
	opacity: 0.5;
}
.pageContentFeaturedMerchantTitle p { color:var(--fontcolor1); text-align:center; font-size:325%; }





.adListing { 
	width:100%;
	margin:10px 0px 0px 0px;
	border: 1px solid #333;
}
.adListingImg {
	width: 80px; height: 80px;
	margin:5px 0px 5px 5px;
}
.adListingImage {
	width:100%;
}
.adListingDetails {
	width:60%;
	margin:5px 0px 5px 5px;
}
.adListingDetailsTitle { font-size:150%; }
.adListingDetailsDescription {}
.adListingMore {width:5%;margin:5px 5px 5px 5px; line-height: 80px; text-align: right; padding-right: 5px;}






.itemListing {
	position: relative;
	border:1px solid var(--bgcolor4);
	box-shadow: 0px 0px 15px var(--bgcolor4);
	width:31%;
	margin:20px 0px 0px 2%;
}
.itemListing img {
	width:80%;
	margin:10px 10%;
}
.itemListingDetails {
	background-color: var(--bgcolor4);
	line-height:30px;
}
.itemListingDetails p {
	text-align: center;

}
.itemListingBoxPriceBg {
	background-color: var(--bgcolor4);
	position: absolute;
	top:0px;right:0px;
	width:80px; height:80px;
	opacity: 0.6;
}
.itemListingBoxPrice {
	position: absolute;
	top:0px;right:0px;
	width:80px;height:80px;
	line-height: 80px;
}
.itemListingBoxPrice p {
	font-size: 175%;
	text-align: center;
	
}


.cityNameCategory {font-size: 85%; color: orange;}











.bizProfileHeader, .bizProfileContent, .bizProfilePageLinks, .bizProfilePageContent, .bizProfilePageContentTitle, .bizProfileFooter { 
	box-sizing: border-box; 
}

.bizProfileHeader, .bizProfileFooter {
	background-color: grey;
	color: white;
	padding: 20px;
}
.bizProfileContent {
	margin:20px;
}

.bizProfilePageLinks {
	float: left;
	width: 25%;
}
.newClearFix::after {
	content:"";
	clear:both;
	display:table;
}
.bizProfilePageLinks ul {
	list-style-type: none;
	margin:0;
	padding:0;
}
.bizProfilePageLinks li {
	padding: 8px;
	margin-bottom: 8px;
	background-color: darkgrey;
	color:white;

}
.bizProfilePageLinks li:hover {
	background-color: lightgrey;
	color:black;
}

.bizProfilePageContent {
	width:75%;
	float:left;
}

.bizProfilePageContent h1, .bizProfilePageContent p {
	padding:25px;
}
.bizProfilePageContent p {
	padding-top:0px;
}



.cityForm, .loginFormForgetDiv {
	width: 60%;
	margin: 20px auto;
	
}
.cityForm {margin-top: 100px;}
.cityFormTextField, .cityFormButton {
	width: 80%; 
	height: 35px;
	margin: 10px 10% 0px 10%;
	text-align: center;
	border: 1px solid var(--bgcolor3);
	border-radius: 6px;
}

.cityForm p {
	line-height: 30px;
	padding: 0px 0px 0px 10%;
}
.cityFormButton:hover {
	cursor: pointer;
	background-color: var(--bgcolor3);
	color: var(--fontcolor1);
}




#cityLoginForm { 
	width:90%;
	max-width:640px;
	margin: 100px auto 20px auto;
	border:1px solid #bbb;
	border-radius: 32px;
	box-shadow: 0px 0px 15px #ccc;

	 }
#cityLoginFormTitle { font-size:300%; text-align: center;line-height: 60px; padding-top:40px; color: #000;}
#cityLoginFormMsg {text-align: center;line-height: 30px; color: orange;  padding:0px 30px; }
.cityLoginFormMsg {text-align: center;line-height: 30px; color: orange;  padding:0px 20px; }
#cityLoginFormMsgErr {color: red;}
#cityLoginFormMsgSucceess {color: green;}
#cityLoginFormForgot {text-align: center;line-height: 30px; color: #000;}
#cityLoginFormForgot:hover {cursor: pointer;color: blue;}
#cityLoginFormMoreInfo {text-align: center;line-height: 20px; padding:30px; font-size: 85%; color: orange;}
.cityLoginFormInput {text-align: center; width:80%; height:50px; margin:10px 10% 0px 10%; border:1px solid #000;}
.cityLoginFormInput:hover {border:1px solid var(--bgcolor3);}
.cityLoginFormButton {text-align: center; width:80%; height:50px; margin:10px 10% 0px 10%; border:1px solid #000; background-color: #000; color:var(--fontcolor1);}
.cityLoginFormButton:hover {background-color: #ced4e0; color:#000;}
#cityLoginFormLogo { width:120px; margin:40px auto 0px auto; }
#cityLoginFormLogoImg {
	width:100%;
}
.cityLoginFormSocialMediaLinks {
	width:320px; margin: 10px auto;
}
.cityLoginFormSocialMediaLink {
	width:60px; height:60px; border: 1px solid #000; margin-left: 30px;
}
.cityLoginFormShopLink {
	width:60px; height:60px; border: 1px solid #9aa5c1; margin: auto;
}


.loginFormForgetDiv {

}


#loginFormForgotPassword {
	padding: 0px 0px 0px 20%;
}
#loginFormResetPassword {
	text-align: right;
	padding: 0px 20% 0px 0px;
}

#loginFormForgotPassword:hover, #loginFormResetPassword:hover, #pageHeaderLogin:hover, .pageFooterMoreInfo p a:hover {
	color: var(--fontcolor3);
	cursor: pointer;
}

#pageHeaderLogin a, .pageHeaderLeft p a, .pageFooter p a, .headerNavCatLink p a, .pageFooterMoreInfo p a {text-decoration: none; color: var(--fontcolor1);}
#pageHeaderLogin a:hover, .pageHeaderLeft p a:hover, .pageFooter p a:hover {color: var(--fontcolor3);}


.fa-brands, .fa-solid {
	color: var(--fontcolor1); margin-right: 15px;
}
.fa-brands:hover, .fa-solid:hover {cursor: pointer;color:var(--fontcolor3);}

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

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

.cityMemberDropdown {
	width:100%;
	background-color: var(--bgcolor2);
	line-height: 40px;
	text-align: right;
	padding-right: 15px;
	position: absolute;
	top:60px;
	right: 0px;
	z-index: 99;
	display: none;
}
.cityMemberDropdown ul li a {color: var(--fontcolor1); text-decoration: none;}
.cityMemberDropdownDisplayed {
	display: block;
}







#pageContentSectionPrivacyPolicy p, #pageContentSectionTerms p {
	text-align: left;
}
.privacyPolicyBold {
	font-weight: bold;
}






#pageContentSlides {
	width: 100%;
	min-height:100px;
	margin-bottom: 20px;

}
.pageContentSlide {
	width: 100%;
	position: relative;
	display: none;

}
.pageContentSlide img {width: 100%;}
.pageContentSlide h1 {
	position: absolute; 
	bottom: 0px;
	text-align: center;
	width: 100%;
}
.lightText {color:var(--fontcolor1);}
.darkText {color:var(--fontcolor3);}

.openDaysDays, .openDaysTime {
	position: absolute;
	text-align: center;
	width: 100%;
}

#openDaysWeekdays {
	top:100px;
	
} 
#openDays {
	top: 30px;
	font-size: 300%;
}

#openDaysWeekdaysTime {
	top:120px;
	font-size: 200%;
}

#openDaysWeekend {
	top:160px;

}

#openDaysWeekendTime {
	top:180px;
	font-size: 200%;
}
.displayInlineBlock {display: inline-block;}

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


.contentSectionButton {
	width: 99%;
	margin: 10px auto;
}
.contentSectionButton button {
	margin:0px 2.5%;
}

.pageHeaderOnScreen {
	animation: moveHeaderOnScreen 0.125s ease-out 0s 1 normal;
	top: 0px;
}
.pageHeaderOffScreen {
	animation: moveHeaderOffScreen 0.125s ease-out 0s 1 normal;
	top: -420px;
}
@keyframes moveHeaderOnScreen{
    from {top: -420px;} 
    to{top:0px;} 
}
@keyframes moveHeaderOffScreen{
    from {top: 0px;} 
    to{top:-420px;} 
}



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







/* ######################### */
.pageContentMainSectionButton {
	width: 80%; margin: 10px 10% 30px 10%;
}

.pageContentMainSectionImg {
	width: 86%; margin: 0px auto 30px auto; 
	max-width: 512px;
}
.pageContentMainSectionImg img {
	width: 100%;
}
.roundImg {
	border-radius: 50%;
}
.pageContentMainSectionImg p {
	color: #fff;
	padding: 10px 20px 50px 20px;
	text-align: center;
	font-size: 120%;
}

.pageContentMainSectionImg p a {
	text-decoration: none;
	color:#76f90a;
}
#comingSoonDetails, #homePageMottoDetails, #phaseTwoDetails {
	color: var(--fontcolor2);
	padding: 0px 7% 20px 7%;
	font-size: 125%;
}

#homePageMottoDetails {
	text-align: center;
}


.homePageMottoDetailsBold {
	color: #76f90a;
}

.pageBodyButton {
	width:100%;
	height:40px;
	font-size: 125%;
	background-color: #76f90a;
	color: #000;
	border: 1px solid #444;
}
.pageBodyButton:hover {
	background-color: #333;
	border: 1px solid var(--fontcolor5);
}
/* ######################### */



@media only screen and (max-width: 600px) {
	.pageContent {
		margin-top: 100px;
	}

	.pageSideNav {
		width:320px;
		left: -321px;
	}
	.sideNavOnScreen {
		left: 0px;
		animation: moveOnScreen 0.125s ease-out 0s 1 normal;

	}
	.sideNavOffScreen {
		left: -321px;
		animation: moveOffScreen 0.125s ease-out 0s 1 normal;
	}
	@keyframes moveOnScreen{
	    from {left: -321px;} 
	    to{left:0px;} 
	}
	@keyframes moveOffScreen{
	    from {left: 0px;} 
	    to{left:-321px;} 
	}
	.pageSideNavContentScrollable {
		height:600px;
	}
	.pageContentHeaderCategorySelect, .pageContentHeaderSearchBar {
		width:80%; height:40px;
		margin: 10px 10% 0px 10%;
	}
	.pageContentHeaderSearchBar {
		margin-bottom: 10px;
	}

	.pageContentFeaturedMerchantTitleBg, .pageContentFeaturedMerchantTitle {
		height:50px;
	}
	.pageContentFeaturedMerchantTitle p { font-size:200%; }

	.itemListing {
		width:93%;
		margin:20px 0px 0px 3.3%;
	}
	.itemListingBoxPrice p {
		font-size: 225%;
		text-align: center;
	}

	#cityName {
		font-size: 150%;
		padding: 0px 30px 0px 60px;
	}



	.bizProfilePageLinks {
		float: none;
		width: 100%;

	}
	.bizProfilePageLinks li {
		display:inline;
		margin-right: 8px;

	}
	.bizProfilePageContent {
		width:100%;

	}	

	.cityForm, .loginFormForgetDiv {
		width: 90%;
	}

	.pageFooter {
		width: 100%;
		height:500px;
		position: fixed;
		bottom:-420px; left: 0px;
	}
	.pageFooterOnScreen {
		animation: moveFooterOnScreen 0.125s ease-out 0s 1 normal;
		bottom: 0px;
	}
	.pageFooterOffScreen {
		animation: moveFooterOffScreen 0.125s ease-out 0s 1 normal;
		bottom: -420px;
	}
	#pageFooterSocialLinks, #pageFooterDomainName {
	display: block; line-height:40px;
	}
	#pageFooterSocialLinks i {
		padding-left:20px;
	}
	.pageFooterNavContentScrollable, .pageHeaderNavContentScrollable {
		width:100%; margin-left: 0px; margin-right: 0px;
	}
	.pageHeader p, .pageFooter p {color: var(--fontcolor1); line-height: 60px; font-size: 125%;}
	.footerNavCatLink, .headerNavCatLink {
		 font-size: 135%;
	}
	.footerNavCatLink p, .headerNavCatLink p {
		 font-size: 140%;
		 line-height: 45px;
	}
	.pageFooterMoreInfo p {
		line-height:40px;
	}

}





@media only screen and (max-width: 480px) {
	.pageContent {width: 100%;}
	.pageContentSlide {
		width: 100%;
		height: 400px;
		background-color: #000;
	}
	.pageContentSlide img {
		width: 480; height: 400px;
		object-fit: fill;
	}

	.openDaysDays { 
		font-size:150%; 
	}
	.openDaysTime { 
		font-size:500%; 
	}
	#openDaysWeekdaysTime { top: 130px; font-size: 300%; }
	#openDaysWeekend { top: 200px;  }
	#openDaysWeekendTime { top: 230px; font-size: 300%; }

	.pageContentHomepageTitleSection h1 {
		text-align:center;
		color:var(--fontcolorBlack); 
		font-size: 235%; 
		padding-top: 180px;
	}

	.pageContentHomepageTitleSection p {
		text-align: center;
		color: red;
		padding:0px 20px 10px 20px;
	}
}