* {
  box-sizing: border-box;
}
:root {
  --bgcolor1: #fff;
  --bgcolor2: #1A1F36; /* midnight blue */
  --bgcolor3: #3A96DD; /* sky blue */
  --bgcolor4: #2E2E2E; /* charcoal grey */
  --bgcolor5: #E9ECEF; /* soft light grey */
  --bgcolor6: #FDFDFD; /* warm white */
  --alertColor1: #4CAF50; /* lime green */
  --alertColor2: #FFAA00; /* warming orange */
  --alertColor2: #FF4D4D; /* alert red */
  --highlightcolor1: #7D5FFF; /* electric violet */
  --highlightcolor2: #00C7B1; /* neon mint */
  --fontcolor1: #fff;
  --fontcolor2: #1A1F36; /* midnight blue */
  --fontcolor3: #3A96DD; /* sky blue */
  --fontcolor4: #2E2E2E; /* charcoal grey */
  --fontcolor5: #E9ECEF; /* soft light grey */
  --fontcolor6: #FDFDFD; /* warm white */
  --bordercolordark: #333;
  --bordercolorlight: #444;
  --buttoncolor: red;
  --buttoncolorhover: #333;
  --contentcolorhover: #333;
  --glowR: 121;
  --glowG: 203;
  --glowB: 237;
}

body {background-color: var(--bgcolor2); width: 100%;margin: 0px;}

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

input[type=text], input[type=email], textarea {
	width: 100%;
	min-height:40px;
	margin-top:20px;
}

.floatLeft {float: left;}
.clearFix {clear: both;}
.displayNone {display: none;}
.displayBlock {display: block;}
.displayInlineBlock {display: inline-block;}
.widthHalf {width: 50%;}


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





#pageHeader {
	background-color: var(--bgcolor3);
	width: 100%; height:480px;
	position: fixed;
	left: 0px;
	z-index: 99;
}
#pageFooter {
	background-color: var(--bgcolor3);
	width: 100%; height:60px;
	position: fixed;
	left: 0px; bottom: 0px;
	z-index: 99;
}

.pageContent {
	width: 100%; max-width: 800px;
	margin:80px auto;
}

.pageHeaderOnScreen {top: 0px;}
.pageHeaderOffScreen {top: -420px;}

#pageHeaderLeft {
	width: 25%;
	position:absolute;
	bottom:4px;
	left: 0px;
}
#pageHeaderRight {
	width: 75%;
	position:absolute;
	bottom:4px;
	right: 0px;
}

.pageHeaderButton {
	border: none;
	outline: none;
	background-color: var(--bgcolor4);
	width: 40%; height:36px;
	margin-left:57%; margin-bottom: 8px;
	font-size: 100%;
	color: var(--highlightcolor);

}

.pageBodyButton {
	border: none;
	outline: none;
	background-color: var(--bgcolor4);
	width: 100%; height:40px;
	margin:20px auto;
	font-size: 120%;
	color: var(--highlightcolor);

}

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

.pageHeaderMoreInfo p {
	padding:0px;
	line-height: 20px;
	text-align: center;
}
.pageHeaderNavContentScrollable {
	background-color: var(--bordercolordark);
	height: 340px;
	margin:10px 0px 0px 0px;
}
.pageHeaderNavContentScrollable p {
	line-height: 40px;
	font-size: 140%;
	padding:0px 15px 0px 15px;

}
#pageHeader a, #pageFooter a {
	color: var(--fontcolor2);
	text-decoration: none;
}
#pageHeader a:hover, #pageFooter a:hover {color: var(--fontcolor3);}


.pageContentBox {
	width: 100%;
}



#pageContentBoxWelcome {
	
}

#pageContentBoxWelcome1, #pageContentBoxWelcome2, #pageContentBoxWelcome3 {
	
	width: 100%;

}

.pageContentBoxSectionH1, .pageContentBoxWelcomeSectionH1, .pageContentBoxFeaturedSectionH1 {
	text-align: center;	
	color: var(--fontcolor3);
}
.pageContentBoxWelcomeSectionH1, #pageContentBoxWelcomeImg1 {
	
}

.pageContentBoxFeaturedSectionH2 {
	text-align: center;	
	padding:0px 20px 0px 20px;
}

#pageContentBoxWelcomeText1 {
	font-size: 350%;
	padding:60px 0px 0px 0px;
}
#pageContentBoxWelcomeText2 {
	font-size: 150%;
	padding:130px 0px 0px 0px;
}
#pageContentBoxWelcomeText3 {
	font-size: 200%;
	padding:150px 0px 0px 0px;
}

.pageContentBoxWelcomeSectionImg {
	width: 80%;
	display:block;
    margin:auto;
}


.domainDotMe {
	color: var(--highlightcolor1);
}



#pageContentBoxFeatured {
	margin:100px 0px 0px 0px;
	position: relative
}

#pageContentBoxFeaturedVertScroll {overflow-y:hidden; overflow-x: scroll;}
.vertScrollList {
	width: 1820px;
}
.vertScrollItem {width: 299px; border-left:1px solid var(--bgcolor4);display: inline-block;}
.vertScrollItemImg {width: 80%; display: block; margin: auto;}
.vertScrollItemTitle {text-align: center;}

.vertScrollItem p {
	padding:5px 15px;
}


#pageFooterSocialLinks, #pageFooterDomainName {
	display: inline-block;
	line-height: 30px;
	padding: 0px 10px 0px 10px;
	color: var(--fontcolor2);
}

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


#pageFooterSocialLinks i {
	padding-left:20px;
}


#pageFooterExpandButton {
	width: 80px; height:80px;
	background-color: var(--bgcolor3);
	position: absolute;
	top:-40px;right:0px;
	z-index: 99;
	border-radius: 40px;
}
#pageFooterExpandButton img {
	width: 80px; padding: 4px;
}


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


.pageTextVisible {
	animation: fadeInOutText 4s ease-out 2s 1 normal;
}
.pageTextVisiblePermanent {
	animation: fadeInText 2s ease-out 2s 1 normal forwards;
}
.pageTextInvisible {
	animation: fadeOutText 0.125s ease-out 0s 1 normal;
}


@keyframes fadeInText{
    0% {opacity: 0;} 
    100% {opacity:1;} 
}
@keyframes fadeOutText{
     0% {opacity: 1;} 
    100% {opacity:0;} 
}
@keyframes fadeInOutText{
    0% {opacity: 0;} 
    20% {opacity:1;}
    80% {opacity:1;}
    100% {opacity: 0;}  
}



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

@keyframes spinningWorkingAnimation {
 	100% {-webkit-transform: rotate(360deg); transform:rotate(360deg);}
}





/* ##### FLAVORS.PHP #################  */

#pageContentBoxFlavors {
	background-color: var(--bgcolor1);
}

.pageContentFlavorListingSmall {
	width: 96%;
	margin: 0px 2% 2px 2%;
	border-bottom: 1px solid #ddd;
}
.pageContentFlavorListingSmall a {
	text-decoration: none;
	color: #000;
}


.pageContentFlavorListingSmallImg {
	width:25%;
}
.pageContentFlavorListingSmallImg img {
	width: 100%;
}
.pageContentFlavorListingSmallDetails {
	width: 74%;
}
.pageContentFlavorListingSmallDetails h2 {
	font-size: 110%;
	margin: 10px 10px 0px 10px;
}
.pageContentFlavorListingSmallDetails p {
	font-size: 96%;
	text-align: left;
	margin: 0px 10px 0px 15px;
}

.flavorListingCurrentlyUnavailable {
	background-color: var(--fontcolor2);
	border-radius: 20px;
	width: 60%; height: 24px;
	max-width: 180px;
	margin:4px 0px 0px 10px;
}
.flavorListingCurrentlyUnavailable p {
	font-size: 80%;
	line-height: 24px;
	padding:0px 0px 0px 0px;
	text-align: center;

}


.pageContentFlavorListing {
	width:47%; min-height: 160px;
	background-color: var(--bgcolor1);
	margin:2px 0px 0px 2%;
	position: relative;
}

.pageContentFlavorListing p {
	padding:0px 20px 10px 20px;
	color: var(--fontcolor5);
	text-align: center;
}
.pageContentFlavorListing h2 {
	padding:10px 20px 0px 20px;
	color: var(--fontcolor6);
	text-align: center;
}



.pageContentFlavorListing img {
	width: 100%; margin: 0px; padding:0px;
}

.pageContentFlavorListing:hover, .pageContentFlavorListingSmall:hover {
	box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.25);
}


.pageContentFlavorListingAdd {
	width: 50px; height: 50px;
	border-radius: 25px;
	background-color: var(--highlightcolor);
	position: absolute;
	right:20px; top: 120px;
}
.pageContentFlavorListingAdd p {
	text-align: center;
	line-height: 44px;
	font-size: 400%;
	color: var(--fontcolor2);
	padding:0px 0px;

}

#pageContentFullFlavorDetails {
	min-height: 300px;
}
#pageContentFullFlavorDetailsPrice {
	font-size: 150%; font-weight: bolder;
}

#pageContentFullFlavorBuyButton, #pageContentFullFlavorReview {
	width: 90%; margin-left: auto; margin-right: auto;
}
#pageContentFullFlavorDetails h1, #pageContentFullFlavorDetails p {
	text-align: center;
	text-align: left;
}
#pageContentFullFlavorDetails h1 {
	padding:50px 25px 0px 25px;
}
#pageContentFullFlavorDetails p {
	padding: 5px 15% 5px 15%;
	padding:5px 25px 5px 25px;
}

.flavorRating {font-size: 260%; padding:20px;}

#pageContentFullFlavorDetailsMore {
	position: relative;
	min-height: 50px;
}
#pageContentFullFlavorDetailsMore p {
	line-height: 44px;
	padding-left: 30px;
}
#pageContentFullFlavorDetailsMoreExpand {
	height: 40px; width: 40px; 
	border-radius: 20px; 
	border: 1px solid #aaa;
	line-height: 36px;
	position:absolute;right:10px;top:0px;
}
#pageContentFullFlavorDetailsMoreExpand i {
	text-align: center; font-size: 150%; padding: 6px 0px 0px 10px;
}

#pageContentBlockFlavorRating {
	min-height: 200px;
}
.pageContentBlockFlavorReview {
	border-top:1px solid #ccc; 
	min-height: 200px;
}

.reviewNameLeft {
	width: 50px; height: 50px; 
	border-radius: 25px; 
	background-color: #aaa; 
	margin-top:20px;margin-left: 10px;
}
.reviewNameLeft p {
	color: #fff; 
	text-align: center; 
	font-size: 170%; 
	line-height: 45px;
	font-weight: bolder;

}
.reviewNameRight {
	margin-top:20px;margin-left: 10px;
}
.reviewNameRight p {
	line-height: 20px; font-size: 80%;
}
.reviewNameRight .fa-solid {
	padding: 5px 0px 5px 0px;
}
.reviewContent {
	padding:0px 30px 5px 50px;
}
.reviewSubject {
	font-weight: bolder;
	padding:15px 30px 5px 50px;
}


#reviewContentMoreLeft {
	width: 40%; margin:30px 0px 20px 10%;
}
#reviewContentMoreRight {
	width: 45%; margin:30px 0px 20px 0px;
}
#reviewContentMoreRight p {
	text-align: right;
}
.fa-square-phone {color: var(--fontcolor2); font-size: 200%;}
.fa-square-xmark {color: red; font-size: 400%;}
.fa-arrow-up-right-from-square {color: #aaa;}
.fa-thumbs-up, .fa-thumbs-down {color: #aaa; float: right;}
.fa-arrow-down {color: #aaa;}
.fa-star, .fa-star-half-stroke, .fa-regular { color: orange; padding:25px 0px 5px 0px;}
.fa-person-digging {color: var(--fontcolor2); font-size: 600%;}

.flavorReviewStar {font-size: 200%;}
.flavorReviewNumStarSelector {width: 20%; margin-bottom: 20px; text-align: center;}


.flavorReviewUpVote:hover, .flavorReviewDownVote:hover {
	cursor: pointer; color:orange;
}


#lessFlavors {
	width: 60%;
	height:60px;
	border-radius: 30px;
	background-color: var(--fontcolor2);
	margin: 5px 20%;
}
#lessFlavors p {
	color:#000;
	line-height: 60px;
	text-align: center;
}
#lessFlavors:hover {
	background-color: red;
	cursor: pointer;
}


/* ##### END FLAVORS.PHP ############  */











/* ##### FLAVOR.PHP ################  */

/* ##### END FLAVOR.PHP ############  */




















/* ##### CONTACT US PAGE ################## */
.pageContentBlockFormMsg {
	text-align: center;
	font-size: 125%;
	padding: 20px;
}

#pageContentBlockContactUs {
	background-color: var(--bgcolor6);
}


.pageContentBlockFormFields { width:90%; margin:10px auto 0px auto; }

#pageContentBlockContactUsFormFields input[type=text], #pageContentBlockContactUsFormFields input[type=email], #pageContentBlockContactUsFormFields input[type=text], #pageContentBlockContactUsFormFields input[type=email], #pageContentBlockContactUsFormFields input[type=date], #pageContentBlockContactUsFormFields input[type=time] {
	background: transparent;
	color: var(--fontcolor2);
	font-size: 125%;
	border-top: none; border-left: none; border-right: none;
	border-bottom: 1px solid var(--bgcolor4);

}
#pageContentBlockContactUsFormFields input[type=text]:focus, #pageContentBlockContactUsFormFields input[type=email]:focus, #pageContentBlockContactUsFormFields input[type=text]:focus, #pageContentBlockContactUsFormFields input[type=email]:focus {
	outline: none;
	border-bottom: 1px solid var(--highlightcolor);
	font-size: 150%;
	color: var(--fontcolor2);
}
#pageContentBlockContactUsFormFields input[type=text]::placeholder, #pageContentBlockContactUsFormFields input[type=email]::placeholder, #pageContentBlockContactUsFormFields input[type=text]::placeholder, #pageContentBlockContactUsFormFields input[type=email]::placeholder, #pageContentBlockContactUsFormFields textarea::placeholder {
	color: #fff;
	opacity: 0.6;
}

#pageContentBlockContactUsFormFields textarea {
	background: transparent;outline: none;
	color: var(--fontcolor2);
	font-size: 125%;
	border-top: none; border-left: none; border-right: none;
	border: 1px solid var(--bgcolor4);
	min-height: 120px;
}
#pageContentBlockContactUsFormFields textarea:focus {
	outline: none;
	border: 1px solid var(--highlightcolor);
	font-size: 150%;
	color: var(--fontcolor2);
}

#contactUsFormSubmit {

}

#contactUsFormSpinningWorking {
	margin: 10px auto;
}













#videoElement {background-color: var(--bgcolor3);}





















































/* PAGE SIDE NAV */


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

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

#pageSideNavCloseBar {
	height: 100%;
	width: 100px;
	background-color: var(--bgcolor3); 
	opacity: 0.025;
	z-index: 98;
	position: fixed;
	top: 0px;
}

#pageSideNavProfileName, #pageSideNavProfileAddress, #profileFollows {
	padding-left:30px;
	line-height: 24px;
	color:var(--fontcolor5);
}

.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 {
	border-bottom: 1px solid var(--bgcolor4);
}
#pageSideNavProfileImg {
	width: 50px; height: 50px; border-radius: 25px;
	margin: 20px 0px 30px 30px;
}
#pageSideNavProfileImg img {
	width: 100%;
}


#pageSideNavProfileName, .profileFollowsNum, .pageSideNavLink h2, .pageSideNavLink h3, .rightNavIcons {color: var(--fontcolor2);}

#pageSideNavLinkHomeIcon {
	font-size: 175%;
}
#pageSideNavLinkHome h2 {font-size: 105%;}

.pageSideNavLink a {
	text-decoration: none;
	color:var(--fontcolor2);
}
.pageSideNavLink a:visited {
	color:var(--fontcolor2);
}
.pageSideNavLink a h2:hover, .pageSideNavLink a i:hover {
	color:var(--highlightcolor);
}


.pageSideNavCopyWalletAddress {
	color: var(--fontcolor1);
	font-size: 75%;
}
.pageSideNavCopyWalletAddress:hover {
	color: var(--highlightcolor);
	cursor: pointer;
}


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

.sideNavCloseBarOnScreen {
	animation: moveCloseBarOnScreen 0.1s ease-out 0s 1 normal;
	left:  360px;
}
.sideNavCloseBarOffScreen {
	animation: moveCloseBarOffScreen 0.1s ease-out 0s 1 normal;
	left: -100px;
}



@keyframes moveOnScreen{
    from {left: -360px;} 
    to{left:0px;} 
}
@keyframes moveOffScreen{
    from {left: 0px;} 
    to{left:-320px;} 
}
@keyframes moveCloseBarOnScreen{
    from {left: -100px;} 
    to{left:320px;} 
}
@keyframes moveCloseBarOffScreen{
    from {left: 320px;} 
    to{left:-100px;} 
}





.profileFollows {padding-bottom: 6px;}










































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


	#pageContentBoxWelcomeText1 {
		font-size: 275%;
		padding:60px 0px 0px 0px;
	}


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

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




	.pageHeaderNavContentScrollable p {
		font-size: 160%;
		line-height: 40px;

	}

	.pageHeaderMoreInfo p {
		line-height:25px; padding:6px 0px 0px 0px;
	}

}





@media only screen and (max-width: 480px) {
	.pageContent {width: 100%;}

	.pageHeaderNavContentScrollable p {
		font-size: 160%;
		line-height: 40px;

	}


}