* {
  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;}
.centerImageToDiv {margin: auto; padding: auto;}

.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;}
.pageHeaderButton {
	width: 70%;
	height:24px;
	margin:12px 12px 0px 0%; 
	
}
.pageHeaderLeft img {
	width: 48px; padding: 1px;
}

#pageHeaderLogoImg {width: 72px; display: block; margin: auto; border-radius: 50%; box-shadow: 0px 1px 1px #000;}


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

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

.pageBodyTitle {

}

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

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

.pageBodyTitle h1 a {
	text-decoration: none;
	color: var(--highcontrastfontcolor);
}
.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 {
	min-height:40px; width: 260px;
	margin:20px 0px 0px 30px;
	line-height:40px;

}

.pageSideNavSocialLink {
	height:40px; width: 230px;
	margin:10px 0px 0px 30px;
	line-height:40px;

}

.pageSideNavLinkFollowUsDropDown {
	width: 260px;
	margin:0px 0px 0px 30px;
}

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

.pageSideNavLink h2, .pageSideNavLink h3, .rightNavProfileImg {
	display: inline;
}
.pageSideNavLink:hover {
	background-color: var(--bgcolor1);
	cursor: pointer;
}
#pageSideNavProfileImg {
	width: 200px; height: 200px; border-radius: 5px;
	margin: 20px 0px 30px 60px;
}
#pageSideNavProfileName, .profileFollowsNum, .pageSideNavLink h2, .pageSideNavLink h3, .rightNavIcons, .footerIcon {color: var(--highlightfontcolor);}



.rightNavProfileImg {
	width: 120px;
	border-radius: 50%;
}

.pageSideNavSectionCategories a {
	text-decoration: none;
}

.pageSideNavLongerTextLink {
	font-size: 125%;
}


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

#pageBreadCrumbs {
	font-size: 85%;
	padding: 18px 12px 0px 12px;
}






.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);
}


.pageBodyPostContentAddress {
	color: var(--highlightfontcolor);
}



.pageBodyPostFooter {
	margin:5px 0px;
}


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

}







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

}

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

.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(--whitefontcolor);
}
.cityPageFeaturedContentDetails p {
	line-height: 20px;
	text-align: center;
	padding: 0px 20px;
	color: var(--whitefontcolor);

}

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



/* ##### page content ########################################### */
.pageContent {
	width: 94%;
	margin: 16px auto;
	background-color: var(--bgcolor2);
	border-radius: 6px;
	z-index: 2;
	/*box-shadow: 0px 0px 2px var(--bgcolor1);*/
}
.pageContent h1, .pageContent h2 {
	padding:12px 5% 0px 5%;
}
.pageContent p {
	font-size: 140%;
	padding:30px 30px 0px 30px;
}

.pageButtonContainer {
	width: 90%; margin:6px auto;
}
.pageButton {
	outline:none;
	border: 1px solid var(--bgcolor3);
	border-radius: 6px;
	background-color: var(--bgcolor3);
	color: var(--fontcolor3);
}

#pageBigBuyNowButton {
	height: 45px;
	font-size: 125%;
	
}
.pageButton:hover {
	background-color: var(--bgcolor3);
	color: var(--highlightfontcolor);border: 1px solid var(--highlightfontcolor);
	cursor: pointer;
}
/* ##### end page content ########################################### */








.aboutPageContent {
	width: 94%; max-width: 800px;
	margin:120px auto 60px auto;
	background-color: var(--bgcolor3);
	
}

#authorProfileImg {
	border-radius: 50%;
	border:12px solid var(--highlightcolor);
	width: 280px;
	margin: 24px auto 0px auto; 
	padding: auto; display: block;
}







/* ##### CONTACT US FORM ######################################## */
#contactPageContent {
	margin: 100px auto;
}

.contactPageForm {
	width: 90%;
	margin: 12px auto;
}
.pageFormField {
	outline: none;
	height: 40px;
	border: 1px solid var(--bgcolor2);
	background-color: var(--bgcolor2);
	border-radius: 6px;
	color:var(--fontcolor1);
	font-size: 125%;
	margin-top: 12px;
	padding: 0px 12px;
}
.pageFormField:hover {
	border: 1px solid var(--bgcolor3);
}
.pageFormField:focus {
	border: 3px solid var(--bgcolor3);

}

.pageFormTextarea {
	min-height: 120px;
}
.pageFormButton {
	height: 40px;
	font-size: 150%;
}
#contactPageFormButtonContainer {
	width: 100%;
}



/* ##### SIGN UP BOX ######################################## */
.pageSignupBox {
	width: 90%; max-width: 480px;
	margin: 24px auto;
	background-color: var(--bgcolor3);
	border: 1px solid var(--bgcolor2);
	border-radius: 6px;
}
#pageSignupBoxTitle {
	padding:6px 12px 0px 24px;
}
#pageSignupBoxText {
	padding:6px 24px 0px 24px;
	font-size: 125%;
}
.pageSignupBoxEmail {
	width: 60%; 
	margin: 12px 0px 24px 5%;
	float: left;
}
.pageSignupBoxButton {
	width: 30%;
	margin: 12px 0px 0px 1%;
	float: left;
}

#pageSignupBoxSignIn {
	text-align: center;
	padding:0px 0px 12px 0px;
}
#pageSignupBoxFormFieldEmail {
	margin-top:0px;
	color: var(--highlightfontcolor);
}
#pageSignupBoxFormFieldEmail:focus {
	border: 3px solid var(--highlightfontcolor);
}
#pageSignupBoxFormFieldButton {
	background-color: var(--highlightcolor);
	color: var(--whitefontcolor);
	border: 1px solid var(--highlightcolor);
	border-radius: 6px;
}
#pageSignupBoxFormFieldButton:hover {
	border: 1px solid var(--whitefontcolor);
}


#formSuccessMsg, #formErrorMsg {
	color: var(--highlightfontcolor);
	font-size: 125%;
	padding:12px 24px;
}
.formSuccessMsgTitle {
	font-size: 125%;
	font-weight: bolder;
}









/* ##### SIDE NAV ######################################## */

#pageSideNavBuyButton {
	background-color: var(--bgcolor3);
	height: 45px;
	font-size: 135%;
}
#pageSideNavBuyButton:hover {
	background-color: var(--highlightcolor);
	border: 1px solid var(--highlightfontcolor);
	color:var(--whitefontcolor);
}




.pageDinoProfileClose {
	width:60px;height:60px;
	margin: 12px auto 0px auto;

}
#pageDinoProfileCloseIcon {
	font-size: 350%;
	text-align: center;
}


.pageDinoProfileOnScreen {
	animation: moveProfileOnScreen 0.1s ease-out 0s 1 normal;
	bottom: 0px;
}
.pageDinoProfileOffScreen {
	animation: moveProfileOffScreen 0.1s ease-out 0s 1 normal;
	bottom: -1200px;
}

@keyframes moveProfileOnScreen{
    from {bottom: -1200px;} 
    to{bottom:0px;} 
}
@keyframes moveProfileOffScreen{
    from {bottom: 0px;} 
    to{bottom:-1200px;} 
}




#pageContentBuyTheBook {margin-top:80px;}
.pageContentBigBookCover {
	width: 75%; max-width: 480px;
	margin: auto; padding: auto; 
	display: block;
}
























.fa-regular {
	color: var(--fontcolor1);
	
}
.inlineIcons {display: inline; padding-right: 15px;}
.fa-chevron-down, .fa-chevron-up {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;
}


.footerIcons {
	font-size: 150%;
	padding: 0px 0px 0px 11%;
	line-height: var(--pageHeaderHeight);
	color: var(--highcontrastfontcolor);
}




@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%;} 
}










.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;
}












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





.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%;
	}
}

@media print {
	#resourcePrintButtonContainerBox {
		display: none !important;
	}
}