:root {	
	--color-primary: #3e2a1c;
    --color-secondary: #6b4c33;
    --color-tertiary: #e9e3e1;	
	--color-primary-grey: #222;
	--color-espresso: #2c1e14;
	--color-gold: #a6936f;
	--color-no-guide: #FDF5E6;
}

body {
	margin: 0px;
	padding: 0px;
	padding-top:100px;
	font-family: 'Raleway', sans-serif;
	background-color:#3e2a1c;
}
body, p, div, span, a, li, h1, h2, h3, td {
	font-family: 'Raleway', sans-serif;
}
html, body {
	height: 100vh;
	background: linear-gradient(to bottom, #111 0%, #3e2a1c 70%);
	background-attachment: fixed;
}

.plant_row {
	margin:12px;
	margin-top:0px;
	margin-left: 10px;
	margin-right: 10px;
	padding: 9px 10px 8px 34px;	
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	font-size:17px;
	cursor: pointer;
	color: var(--color-primary);
	letter-spacing: 0px;
	
	border: solid 1px #69497370;
	COMMANDO-border: solid 1.5px var(--color-tertiary);
	border-left-color: transparent;
	border-right-color: transparent;

	text-decoration: none;

	COMMANDO-border-radius: 4px;	
	background-image: url("images/square_bullet_111.png");
	background-color: rgba(233, 227, 225, 0.5);	
	background-repeat: no-repeat;
	background-size: 16px;
	background-position: 10px center;
	display: block;
	letter-spacing: 0px !important;
}
.plant_row:hover {
	color:var(--color-primary);
	background-color: rgba(233, 227, 225, 0.5);
	background-image: url(images/square_bullet_111_ani.gif);
	letter-spacing: 0px;
	font-style: italic;
}
.container {
	max-width:500px;
	margin: auto;
	margin-top:36px;
	padding-bottom: 40px;
	padding-left:20px;
	padding-right:20px;	
}
.words {
	font-family: 'Raleway', sans-serif !important;
	font-size: 24px;
	text-align: left;
	letter-spacing: 1px;
	padding-left: 10px;
}
.navBtn {
	display: inline-block;
	padding: 3px 4px 2px 4px;	
	width:14px;
	background: var(--color-secondary);
	border-radius: 4px;
	color: #FFF;
	text-decoration: none;
	text-align: center;
	font-size: 16px;
	font-family: Helvetica, Arial, "sans-serif";
	font-weight: 200;
	margin:4px 3px;
	cursor: pointer;
	border: solid 1px var(--color-secondary);
}
.navBtn:hover {
	background-color: #111;
	border: solid 1px var(--color-tertiary);	
	color: #FFF;
}
.nav_container {
	margin: 14px auto 18px auto;
	text-align: center;
}
.logo {
	max-width:200px;
}
#banner {
	font-family: 'Raleway', sans-serif !important;
	background-color: #000;
	color: #FFF;
	font-size: 16px;
	text-align: center;
	width:100%;
	font-weight: 300;
	margin: 0px;
	padding: 12px;
	text-align: center;
	border-bottom: solid 1px #333;		
}
/*
.transition, .banner_over {
	padding: 8px;
	padding-top: 9px;
	text-align: center;
	margin-bottom: 12px;
	cursor: pointer;
	border-bottom: solid 1px #333;
	font-size: 16px;
	z-index: 1000;
	width:100%;
}
*/
.mobileBreak {
	display: inline;
}

/* CSS for text color transition */
/*
@keyframes colorTransition {
  0% {
	background-color: var(--color-primary); 
	color: #FFF;
  }
  50% {
	background-color: #88688e;
	color: #FFF;
  }
  100% {
	background-color: var(--color-primary); 
	color: #FFF;
  }
}
*/

/* Apply animation to the text */
.transition {
  animation: colorTransition 10s infinite; /* Change the duration as needed */
}
.banner_over {
	background-color: #b7aac4;
	color: #000;
	font-weight: 500;
	border-bottom: solid 1px #333;
	cursor: pointer;
}
header {
	position: fixed;
	top: 0px;
	left: 0;
	right: 0;
	z-index: 100;
	padding: 0px;
	margin: 0px;
	background-color: var(--color-primary-grey);
	border-bottom: solid 2px var(--color-gold);
	box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1); /* DROP SHADOW */
}
.subHead {
	font-size: 52px;
	line-height: 52px;
	font-family: 'Raleway', sans-serif !important;
	font-weight: 200;
	text-align: center;
	color: var(--color-tertiary);
	background-color: transparent;
	padding-left: 0px;
	padding-bottom: 6px;
	margin-top: 20px;	
	margin-bottom: 0px;
}
.subHead::before {
	content: "- ";
}

.subHead::after {
	content: " -";
}
#scrollToTop {
	position: fixed;
	bottom: 10px;
	right: 10px;
	z-index: 110;
	color: black;
}
.sectionBG {
	background: #FFF;
	width: 500px;
	margin-top: 0px;
	padding-top:12px;
	padding-bottom: 8px;
	border-radius: 6px;	
}
#logoTBL {
	margin-top:8px;
	margin-bottom:8px;
}
.logoCell {
	text-align: right; 
	Xborder-right: solid 2px #694973; 
	padding-right:20px;
	padding-top:4px;
	padding-bottom:6px;
	padding-left:0px;
}
.navCell {
	padding-left: 20px;
}
#eol {
	text-align:center;
	padding-bottom: 30px;
	font-size: 16px;
	color: #FFF;
}
@media only screen and (max-width: 768px) {
	body {
		padding-top: 140px;
	}
	.navBtn {	
		padding: 8px 9px;	
		font-size: 17px;
	}
	.subHead {
		font-size: 42px;
	}
	#banner {
		font-size: 22px;
	}
	.logo {
		width:174px;
	}
	.logoCell {
		padding-left: 24px;
		padding-right: 18px;
		width: 1%;
	}
	.navCell {
		padding-left: 0px;
	}
	.plant_row {
		font-size:18px;
		COMMANDO-border: none;		
		background-size: 22px;
		padding-left: 44px;
		text-decoration: none;
		background-image: url(images/square_bullet_111_ani.gif);
		COMMANDO-border: solid 1px #c1b5a670;
		COMMANDO-background-color:#eee;
		letter-spacing: 0px;
		border-width: 2px;
	}
	.plant_row:hover {
		font-style: normal;
	}
	.navBtn {
		padding: 3px 3px;	
		width:auto;
		border-radius: 5px;
		color: #FFF;
		text-decoration: none;
		font-size: 22px;
		line-height: 22px;
		margin:5px 6px;
		min-width: 18px;
	}
	.mobileBreak {
		display:inline-block;
	}
}