* {
  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;}
.textAlignCenter {text-align: center;}

.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: 100px auto var(--pageHeaderHeight) auto;
	background-color: var(--bgcolor1);
	max-width: 960px;
}

.pageBody h1, .pageBody h2, .pageBody h3, .pageBody p {
	padding-left: 24px; padding-right: 24px;
}
.pageBody p {
	font-size: 125%;
}

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

.pageBodyTitle {

}

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

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

.pageBodyTitle h3 a {
	text-decoration: none;
	color: var(--highcontrastfontcolor);
}
.pageBodyTitle h3 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);}


.pageSideNavLinkCharacter {
	height:120px;
}
.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);
}

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



.pageBodyPostFooter {
	margin:5px 0px;
}


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

}







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

}

.cityPageFeaturedContent img {
	object-fit: cover;
	width: 100%;
	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: 92%;
	margin: 16px auto;
	background-color: var(--bgcolor2);
	border-radius: 12px;
	z-index: 2;
	box-shadow: 0px 0px 6px var(--bgcolor3);
}
.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 ########################################### */

















/* ##### FLAVORS.php ################################################### */
.flavorsPageListing {
    width: 47%;
    min-height: 160px;
    background-color: var(--bgcolor1);
    margin: 2px 0px 0px 2%;
    position: relative;
    float: left;
}














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



/* ##### dino profile #############################################  */

#characterPageContentHeader {
	position: fixed;
	top:50px;
	
}
.characterPageContent {
	width: 94%; max-width: 800px;
	margin:420px auto 60px auto;
	background-color: var(--bgcolor3);
	
}
#characterPageContentTitle {
	font-size: 350%;
	line-height: 50px;
	text-align: center;
	padding-top:12px;
	color: var(--highlightfontcolor);
}
.characterPageContentSubTitle {
	padding-top:12px;
	text-align: center;
	color: var(--fontcolor3);
	font-size: 150%;
}
.characterPageContentDetails {
	padding: 30px 30px 0px 30px;
	font-size: 140%;
}
.characterPageContentDetails:last-child {
	padding-bottom: 30px;
}

.pageDinoProfile {
	height:480px;
	background-color: var(--bgcolor2);
	border-top:1px solid var(--fontcolor1);
	position: fixed;
	left: 0px;
	z-index: 99;
	
}

.pageDinoProfileContent {
	position: relative;
}

.pageDinoProfileBanner {
	height:360px;
	object-fit: cover;
	top:0px;

}
.pageDinoProfilePic {
	width: 96px; height: 96px;
	border-radius: 50%;
	margin: -48px 0px 0px 12px;
	border:6px solid var(--highlightcolor);
}

#pageDinoProfileName {
	text-align: center;
	font-size: 150%;
}




#pageContentBlockHomepageFlavorQuickPic {
	overflow-x: scroll;
  	overflow-y: hidden;
  	margin-top: 12px;
}
#pageContentBlockHomepageFlavorQuickPicList {
	width: 1500px;
 	height:360px;
 	background-color: #fff;
}
.pageContentBlockHomepageFlavorQuickPicListing {
	width: 300px;
	height:360px;
	display: inline-block;
  	position: relative;
	overflow: hidden;
	margin-right: 0px;
}
.characterPageMoreCharacterListingImg {
	border-radius: 50%;
	width: 256px;
	display: block; margin: auto;
	border:12px solid var(--highlightcolor);
}
#characterPageMoreCharactersTitle, #contactPageContentTitle, .contactPageContentSubTitle {
	padding: 0px 24px 12px 24px;
	color: var(--highcontrastfontcolor);
}
.characterPageMoreCharacterListingName h2 {
	text-align: center;
	font-size: 200%;
}



.pageContentBlockHomepageFlavorQuickPicListingDetails {
	width: 100%;
	min-height: 50px;
	position: absolute;
	left: 0px;
	bottom: 0px;
}


.pageContentBlockHomepageFlavorQuickPicListingDetails h1 {
	text-align: center;
	font-size: 150%;
}
.pageContentBlockHomepageFlavorQuickPicListingDetails p {
	text-align: center;
	padding: 6px auto;
}




/* ##### EDUCATIONAL RESOURCES ######################################## */
#pageBodyEducational h1 {
	padding:48px 12px 12px 12px;
}
#pageBodyEducational h2 {
	padding:12px;
}
.pageResourcesContentTypeListing {
	width: 48.5%; 
	margin: 24px 0px 0px 1%;
	float: left;
}
.pageResourcesContentTypeListing img {
	width:68%; display: block; margin: auto;
	border-radius: 50%;
	border: 6px solid var(--highlightfontcolor);
}
.pageResourcesContentTypeListing h3 {
	text-align: center;
	padding: 0px 6px;
}



.freeResourceDownloadListing {
	width: 48.5%;
	margin: 12px 0px 0px 1%;
	float: left;
}
.freeResourceDownloadListingThumbnailImg {
	display: block;
	width: 80%;
	margin: auto;
}
.freeResourceDownloadListingPrint {
	float: left;
	width: 44%;
	margin: 6px 0px 0px 4%;
}
.freeResourceDownloadListingDownload {
	float: left;
	width: 44%;
	margin: 6px 0px 0px 4%;
}

.freeResourceDownloadListingPrintImg {display: none;}

#resourcePrintButtonContainerBox {
	position: fixed;
	top:24px;
}
#resourcePrintButtonContainer {
	width:60%; max-width: 480px;
	margin: auto;
	background-color: var(--highlightcolor);
}
#resourcePrintButton {
	height:48px;
	font-size: 125%;
}


/* ##### CONTACT US FORM ######################################## */
.pageBodyFormTitle, .pageBodyTitle {
	padding-top: 48px;
}
#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%;
}

#pageBodyUnderConstructionIcon {
	display: block; 
	margin: 48px auto;
	text-align: center;
	font-size: 1200%;
}

#pageBodyEmailIcon {
	display: block; 
	margin: 48px auto 0px auto;
	text-align: center;
	font-size: 500%;
}



#pageBodyLowerLogo {
	width: 50%;
	margin: 48px auto;
	max-width: 320px;
}
#pageBodyLowerLogo img {
	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;
}











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

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








.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;} 
}
/* ##### end dino profile #########################################  */



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












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




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












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

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