.header {
	position: -webkit-sticky; /* Safari */
	position: sticky;
	background-color: #ffffff;
	opacity:0.9;
	top:0;
	z-index: 1;
}


#title a{
	font-family: 'Syncopate';
	font-size: 40px;
	color: #505050;
	background-color: #ffffff;
	text-decoration: none;
}

#title {
	font-family: 'Syncopate';
	font-size: 40px;
	color: #505050;
	text-decoration: none;
}

#product {
	font-family: 'Syncopate';
	font-size: 40px;
	color: #505050;
	padding-top: 50px;
	padding-left: 20px;
	background-color: #808080;
}

.information {
	padding-left: 20px;
	background-color:#b8b8b8;
}

.productImage {
	padding-top: 50px;
	margin-left: 50px;
	padding-right: 20px;
	margin-top:0px;
	margin-right: 50px;
	z-index: 2;
}

.instruct {
	width: 90%;
	padding-left: 20px;
	background-color:#b8b8b8;
	padding-right: 20px;
}

.instruct h1 {
	color: #ffffff;
	font-family: 'Syncopate';
}

.subtitle {
	font-family: 'Cinzel Decorative';
	font-size: 20px;
	color: #707070;
	background-color: #ffffff;
	display: flex;	
}

.subtitle button {
	background-color: #505050;
	color: #ffffff;
	padding: 5px;
	font-family: 'Syncopate';
	font-size: 15px;
	border: none;
	vertical-align: middle;
	margin-left: 800px;
}

.subtitle button:hover {
	background-color:#B8B8B8;	
	padding: 5px;
	transition: 0.7s;
}
.image {
	position: relative;
}

.fade:hover {
	opacity: 0.5;
	transition: 0.4s;
	z-index: 2;
}

.image:hover {
	opacity: 0.4;
	transition: 0.4s;
	position: relative;
	z-index: 1;
}

.image p {
	opacity: 0;
	position: absolute;
	top: 0%;
	padding-top: 35%;
	left: 14%;
	text-align: center;
	height: 100%;
	width: 200px;
	color: #ffffff;
	z-index: 2;
}

.image p:hover {
	opacity: 1;
	transition: 0.4s;
	position: absolute;
	top: 0%;
	padding-top: 35%;
	background: none;
	left: 14%;
	text-align: center;
	height: 100%;
	width: 200px;
	color: #000000;
	z-index: 2;
}


.info {
	font-family: 'Cinzel Decorative';
	font-size: 20px;
	color: #000000;
}

.info sub {
	font-size: 10px;
}

.description {
	font-size: 15px;
	font-family: 'Syncopate';
}

#list {
	padding-top: 50px;
}

.names {
	font-family: 'Syncopate';
	font-size: 20px;
	color: #505050
}

.menuBar {
	font-family: 'Cinzel Decorative';
	font-size: 20px;
	color: #ffffff;
	background-color: #707070;
	opacity: 0.9;
	padding: 5px;
}

.menuBar a {
	padding: 5px;
	padding-right: 90px;
	padding-left: 90px;
}

.menuBar a:hover {
	background-color:#B8B8B8;	
	padding: 5px;
	padding-right: 90px;
	padding-left: 90px;
	transition: 0.7s;
}

.container button {
	font-size: 15px;
	font-family: 'Syncopate';
	background-color: #505050;
	color: #ffffff;
	padding: 5px;
	transition: 0.5s;
	border: 0px;
}

.container button:hover {
	background-color: #909090;
	color: #000000;
}

h1 {
	font-family: 'Syncopate';
	font-size: 20px;
	color: #ffffff;
}

p {
	font-family: 'Cutive Mono';
	font-size: 20px;
	color: #303030;
}

.recipe {
	position: relative;
	height: 1100px;
	background-image: url("tea brew.png");
	background-attachment: fixed;
}

.recipebg1 {
	background-image: url("synergy.png");
	background-attachment:fixed;
	background-position: bottom;
	z-index: 2;
}


.recipe1 {
	width: 45%;
	padding-left: 40px;
	padding-right: 40px;
	height: 425px;
	padding-top: 50px;
	background-color: rgba(255,255,255,0.4);
}

.recipe2 {
	width: 42.2%;
	padding-left: 40px;
	padding-right: 40px;
	height: 575px;
	position: absolute;
	right:0px;
	padding-top: 50px;
	background-color: rgba(0,0,0,0.6);
}

.recipe2 p {
	color: #c8c8c8;
}

.footer {
	background-color: #000000;
}

.recipe1 h1 {
	color: #000000;
}

.plan img {
	position: relative;
	opacity: 0.6;
	width: 100%;
}

.plan h1 {
	color: #101010;
}

#textbox {
	background-color: rgba(255,255,255,0.6);
	padding: 20px;
	width: 50%;
	text-align: center;
	position: absolute;
	top: 300px;
	left: 25%;
}

.textBox {
	width: 50%;
	padding: 40px;
	background-color: #000000;
	opacity: 0.8;
	z-index:-1;
}

.textbox p {
	color: #b8b8b8;
}

.page {
	background-image: url("tea plantation.png");
	background-size: cover;
}