@import url('https://fonts.googleapis.com/css2?family=Lato&family=Playfair+Display:wght@500&family=Raleway&display=swap');

/********Containter Styles*/
body {
	//background-color: #DFE0DF;
	background-image: url("img/leaves.png");
}

.store-content {
	display: grid;
	grid-template-columns: 15% 85%;
	grid-template-rows: auto;
	grid-template-areas:
		"sidebar title"
		"sidebar main1"
		"sidebar main2"
		"sidebar main3"
		"sidebar main4"
		"sidebar main5";
	padding-left: 8px;
	/*border: 3px solid lightblue;*/
	width: 90vw;

}

#category-title {
	display: none;
}


/********Side-Bar Styles*/
.side-bar {
	grid-area: sidebar;
	padding-right: 10px;
}

.side-bar-list {
	list-style-type: none;
	padding: 20px 0px 20px 0px;
	background-color: #A7655E;
	background: linear-gradient(to left top, #006b24 5%, #009933 95%);
	margin-top: 60px;
	text-align: center;
	/*border: 6px outset #fff;*/
	border-radius: 5px;
	/*position: fixed;*/
}

.side-bar-list li {
	padding-top: 10px;
	padding-bottom: 40px;
}

.side-bar-div {
	margin: 0 5%;
	padding: 7% 0;
	min-height: 36px;
	vertical-align: middle;
}

.side-bar-link {
	text-align: center;
}

.side-bar-div:hover {
	/*background: linear-gradient(to bottom, #b22600 5%,  #b82e00 100%);*/
	background-color: rgba(218, 165, 32, 0.7);
}

a .side-bar-link:visited {
	text-decoration: none;
	color: #FFF4EC;
}

.side-bar-link a,
.side-bar-list a li {
	text-decoration: none;
	color: #FFF4EC;
	font-weight: 20px;
	text-shadow: 0px 1px #000;
}

#active {
	background-color: rgba(218, 165, 32, 0.7);
}

/*Side-Bar Styles********/

/********Content Styles*/

.page-title {
	grid-area: title;
	justify-self: center;
	padding-bottom: 20px;
	font-family: 'Playfair Display', serif;
	font-size: 1.2em;
	font-style: italic;
}

.img {
	height: 90%;
	width: 100%;
}

.content {
	margin-left: 5%;
	margin-right: 5%;
}

.itemTitle {
	margin-left: 15%;
	margin-bottom: 20px;
	font-family: 'Raleway', sans-serif;
	font-weight: bold;
	background-color: #fff;

	/*border: 2px solid grey;*/
}

.itemPrice {
	justify-self: right;
	margin-bottom: 20px;
	margin-right: 15%;
	background-color: #fff;
	letter-spacing: 2px;
	font-family: 'lato', sans-serif;
	font-weight: 400px;

	/*border: 2px solid grey;*/
}

.itemImg {
	justify-self: center;
	margin-left: 8%;
	/*border: 2px solid grey;*/
}

.addToCart {
	justify-self: center;
	padding-top: 20px;
	/*border: 2px solid grey;*/
	width: 50%;
}

.addToCart button {
	height: 50px;
	background-color: #990000;
	color: white;
	border-radius: 50px;
	width: 100%;
	box-shadow: 10px 10px 14px 1px rbga(00, 00, 00, 0.2);
	border: none;
	cursor: pointer;
}

.addToCart button:hover {
	background: linear-gradient(to bottom, #990000 5%, #e60000 100%);
}

.hide {
	display: none;
}

/********Row1 Styles*/
#itemTitle1 {
	grid-area: t1;
}

#itemTitle2 {
	grid-area: t2;
}

#itemTitle3 {
	grid-area: t3;
}

#itemPrice1 {
	grid-area: p1;
}

#itemPrice2 {
	grid-area: p2;
}

#itemPrice3 {
	grid-area: p3;
}

#itemImg1 {
	grid-area: img1;
}

#itemImg2 {
	grid-area: img2;
}

#itemImg3 {
	grid-area: img3;
}

#addToCart1 {
	grid-area: cart1;
}

#addToCart2 {
	grid-area: cart2;
}

#addToCart3 {
	grid-area: cart3;
}

#row1 {
	grid-area: main1;
	display: grid;
	grid-template-columns: 8% 8% 8% 8% 8% 8% 8% 8% 8% 8% 8% 8%;
	grid-template-areas:
		"t1 t1 t1 p1 t2 t2 t2 p2 t3 t3 t3 p3"
		"img1 img1 img1 img1 img2 img2 img2 img2 img3 img3 img3 img3"
		"cart1 cart1 cart1 cart1  cart2 cart2 cart2  cart2  cart3 cart3 cart3  cart3";
	/*border: 2px solid grey;*/
}

/*Row1 Styles********/


/********Row2 Styles*/
#itemTitle4 {
	grid-area: t4;
}

#itemTitle5 {
	grid-area: t5;
}

#itemTitle6 {
	grid-area: t6;
}

#itemPrice4 {
	grid-area: p4;
}

#itemPrice5 {
	grid-area: p5;
}

#itemPrice6 {
	grid-area: p6;
}

#itemImg4 {
	grid-area: img4;
}

#itemImg5 {
	grid-area: img5;
}

#itemImg6 {
	grid-area: img6;
}

#addToCart4 {
	grid-area: cart4;
}

#addToCart5 {
	grid-area: cart5;
}

#addToCart6 {
	grid-area: cart6;
}

#row2 {
	grid-area: main2;
	display: grid;
	grid-template-columns: 8% 8% 8% 8% 8% 8% 8% 8% 8% 8% 8% 8%;
	grid-template-areas:
		"t4 t4 t4 p4 t5 t5 t5 p5 t6 t6 t6 p6"
		"img4 img4 img4 img4 img5 img5 img5 img5 img6 img6 img6 img6"
		"cart4 cart4 cart4 cart4 cart5 cart5 cart5 cart5 cart6 cart6 cart6 cart6";
	margin-top: 40px;
}



/*Row2 Styles********/

/********Row3 Styles*/
#itemTitle7 {
	grid-area: t7;
}

#itemTitle8 {
	grid-area: t8;
}

#itemTitle9 {
	grid-area: t9;
}

#itemPrice7 {
	grid-area: p7;
}

#itemPrice8 {
	grid-area: p8;
}

#itemPrice9 {
	grid-area: p9;
}

#itemImg7 {
	grid-area: img7;
}

#itemImg8 {
	grid-area: img8;
}

#itemImg9 {
	grid-area: img9;
}

#addToCart7 {
	grid-area: cart7;
}

#addToCart8 {
	grid-area: cart8;
}

#addToCart9 {
	grid-area: cart9;
}

#row3 {
	grid-area: main3;
	display: grid;
	grid-template-columns: 8% 8% 8% 8% 8% 8% 8% 8% 8% 8% 8% 8%;
	grid-template-areas:
		"t7 t7 t7 p7 t8 t8 t8 p8 t9 t9 t9 p9"
		"img7 img7 img7 img7 img8 img8 img8 img8 img9 img9 img9 img9"
		"cart7 cart7 cart7 cart7 cart8 cart8 cart8 cart8 cart9 cart9 cart9 cart9";
	margin-top: 40px;
}



/*Row3 Styles********/

/********Row4 Styles*/
#itemTitle10 {
	grid-area: t10;
}

#itemTitle11 {
	grid-area: t11;
}

#itemTitle12 {
	grid-area: t12;
}

#itemPrice10 {
	grid-area: p10;
}

#itemPrice11 {
	grid-area: p11;
}

#itemPrice12 {
	grid-area: p12;
}

#itemImg10 {
	grid-area: img10;
}

#itemImg11 {
	grid-area: img11;
}

#itemImg12 {
	grid-area: img12;
}

#addToCart10 {
	grid-area: cart10;
}

#addToCart11 {
	grid-area: cart11;
}

#addToCart12 {
	grid-area: cart12;
}

#row4 {
	grid-area: main4;
	display: grid;
	grid-template-columns: 8% 8% 8% 8% 8% 8% 8% 8% 8% 8% 8% 8%;
	grid-template-areas:
		"t10 t10 t10 p10 t11 t11 t11 p11 t12 t12 t12 p12"
		"img10 img10 img10 img10 img11 img11 img11 img11 img12 img12 img12 img12"
		"cart10 cart10 cart10 cart10 cart11 cart11 cart11 cart11 cart12 cart12 cart12 cart12";
	margin-top: 40px;
}

/*Row4 Styles********/

/********Row5 Styles*/
#itemTitle13 {
	grid-area: t13;
}

#itemTitle14 {
	grid-area: t14;
}

#itemTitle15 {
	grid-area: t15;
}

#itemPrice13 {
	grid-area: p13;
}

#itemPrice14 {
	grid-area: p14;
}

#itemPrice15 {
	grid-area: p15;
}

#itemImg13 {
	grid-area: img13;
}

#itemImg14 {
	grid-area: img14;
}

#itemImg15 {
	grid-area: img15;
}

#addToCart13 {
	grid-area: cart13;
}

#addToCart14 {
	grid-area: cart14;
}

#addToCart15 {
	grid-area: cart15;
}

#row5 {
	grid-area: main5;
	display: grid;
	grid-template-columns: 8% 8% 8% 8% 8% 8% 8% 8% 8% 8% 8% 8%;
	grid-template-areas:
		"t13 t13 t13 p13 t14 t14 t14 p14 t15 t15 t15 p15"
		"img13 img13 img13 img13 img14 img14 img14 img14 img15 img15 img15 img15"
		"cart13 cart13 cart13 cart13 cart14 cart14 cart14 cart14 cart15 cart15 cart15 cart15";
	margin-top: 40px;
}

/*Row5 Styles********/

/*Content Styles********/


/*Container Styles********/



@media screen and (max-width: 659px) {

	/********Content Styles*/
	.page-title {
		font-size: .8em;

	}

	.store-content {
		grid-template-columns: 25% 75%;
	}

	.addToCart {
		padding-top: 2px;
		margin-bottom: 30px;
	}

	#row1 {
		grid-area: main1;
		display: grid;
		grid-template-columns: 25% 25% 25% 25%;
		grid-template-areas:
			"t1 t1 t1 p1 "
			"img1 img1 img1 img1 "
			"cart1 cart1 cart1 cart1 "
			"t2 t2 t2 p2 "
			"img2 img2 img2 img2 "
			"cart2 cart2 cart2 cart2 "
			"t3 t3 t3 p3 "
			"img3 img3 img3 img3 "
			"cart3 cart3 cart3 cart3 ";
	}

	#row2 {
		grid-area: main2;
		display: grid;
		grid-template-columns: 25% 25% 25% 25%;
		grid-template-areas:
			"t4 t4 t4 p4 "
			"img4 img4 img4 img4 "
			"cart4 cart4 cart4 cart4 "
			"t5 t5 t5 p5 "
			"img5 img5 img5 img5 "
			"cart5 cart5 cart5 cart5 "
			"t6 t6 t6 p6 "
			"img6 img6 img6 img6 "
			"cart6 cart6 cart6 cart6 ";
	}


	#row3 {
		grid-area: main3;
		display: grid;
		grid-template-columns: 25% 25% 25% 25%;
		grid-template-areas:
			"t7 t7 t7 p7 "
			"img7 img7 img7 img7 "
			"cart7 cart7 cart7 cart7 "
			"t8 t8 t8 p8 "
			"img8 img8 img8 img8 "
			"cart8 cart8 cart8 cart8 "
			"t9 t9 t9 p9 "
			"img9 img9 img9 img9 "
			"cart9 cart9 cart9 cart9 ";
	}

	#row4 {
		grid-area: main4;
		display: grid;
		grid-template-columns: 25% 25% 25% 25%;
		grid-template-areas:
			"t10 t10 t10 p10 "
			"img10 img10 img10 img10 "
			"cart10 cart10 cart10 cart10 "
			"t11 t11 t11 p11 "
			"img11 img11 img11 img11 "
			"cart11 cart11 cart11 cart11 "
			"t12 t12 t12 p12 "
			"img12 img12 img12 img12 "
			"cart12 cart12 cart12 cart12 ";
	}

	#row5 {
		grid-area: main5;
		display: grid;
		grid-template-columns: 25% 25% 25% 25%;
		grid-template-areas:
			"t13 t13 t13 p13 "
			"img13 img13 img13 img13 "
			"cart13 cart13 cart13 cart13 "
			"t14 t14 t14 p14 "
			"img14 img14 img14 img14 "
			"cart14 cart14 cart14 cart14 "
			"t15 t15 t15 p15 "
			"img15 img15 img15 img15 "
			"cart15 cart15 cart15 cart15 ";
	}

	/*Content Styles********/

	/********Side-Bar Styles*/



	/*Side-Bar Styles********/
}