/********************************************************
Stylesheet for kirum vieyards
********************************************************/
*{
	box-sizing: border-box;
	margin:0;
}
body{	font-family:"Sulphur Point", sans-serif;
	background-color:#ffffff;
	margin:0;
	}
header{	background-color:#cccc99;
	line-height:2em;
	border-bottom: solid #660000 .3em;
	margin:0;
	text-align:center;
	color:#330000;
	font-size:1.5em;
	font-weight: 750;
	padding: .5em;
	
	}
header .visit{
	background-color: #666600;
	color: #cccc99;
	width: fit-content;
	padding-left: 1em;
	padding-right: 1em;
	padding-bottom: .5em;
	padding-top: .5em;
}

nav{	/******image-logo******/
	background-color:#ffffff;
	
	background-repeat:no-repeat;
	padding-left:6%;
	padding-right: 6%;
	padding-top:2em;
	padding-bottom:2em;
	margin:0;
	text-align:center;
	font-weight: 600;
	
	display: flex;
	justify-content: space-around;
	align-items: center;
	}
	

	nav a{	/*****text*******/
		color:#660000;
		text-decoration:none;
		font-size: 1.5em;
		word-spacing:.5em;
		text-transform: uppercase;
	
	
		}

main{	margin:0;
	font-family:"Sulphur Point", sans-serif;

	}

footer{	background-color:#330000;
	color:#ffffcc;

	}



#finewine{	/******background-image******/
		background-color:#ffffff;
		background-image:url(images/Vineyard_Wine_Bottle_Image.jpg);
		background-repeat:no-repeat;
		background-size:cover;
		
		padding-right:0;
		width:100%;
		height:900px;
		Padding-top:8em;
		padding-left:12em;

		/*******text************/
		
		color:#ffffff;
		word-spacing:.5em;
		
		
	}
#finewine p:first-child{		
		font-size:1.5em;
					
			}
#finewine p:nth-child(2){		
		font-size:3em;
					
					text-transform:uppercase;
					font-weight: bold;
			}
#finewine p:nth-child(3){		font-size:1.5em;
					word-spacing:.5em;
					margin-top:1em;
				
			}
#style{
	width:35%;
}
.shop{
	background-color: #660000;
	color: #cccc99;
	width: fit-content;
	padding-left: 1em;
	padding-right: 1em;
	padding-bottom: .5em;
	padding-top: .5em;
	font-size: 1.5em;
	margin-top: 1em;
}

#descriptions{	/*********background*******/
		background-color:#330000;
		margin-top:.5em;
		text-align:center;
		Padding-top:3em;
		padding-bottom:0;
		padding-right: 16em;
		padding-left:16em;
		display:grid;
		grid-template-rows: 1fr .5fr;
		grid-template-columns: 1fr 1fr 1fr;
		justify-content: space-between;
	
		
		}
#descriptions figure{	margin-bottom:.2em;
		}
#descriptions p:nth-child(2){	font-size:1.4em;
				color:#cccc99;
				font-weight:25;
				margin-top:0;
				margin-bottom:.2em;
				
			}
#descriptions p:nth-child(3){	font-size:1em;
				color:#ffffff;
				word-spacing:.2em;
				margin-top:0;
			}

#vintage{	/*******image*****/
		background-color:#330000;
		
		
	}



#dining{	/*******image*****/
		background-color:#330000;
		
	}





#quote{		
		background-color: #330000;
		text-align:center;
		color:#cccc99;
		font-size:1.5em;
		padding-bottom:2em;
		padding-top:0;
		grid-column-start: 1;
		grid-column-end: 4;
		align-items: center;

}
#quote p:first-child{	font-size:1em;
			text-transform:uppercase;
			margin-bottom:.5em;
		}

#garan{		font-family:Sacramento;
		text-align:right;
		padding-right:4%;
		font-weight: 100;
	}

#numbers{	color:#660000;
		
		padding-top:2em;
		padding-bottom:2em;
		text-align:center;
		
	
		display:grid;
		grid-template-columns: 	13% 13% 13%;
		grid-template-rows: 1fr;
		column-gap: 10%;
		justify-content:center;
		
		
		
		
		
	}
#numbers h3{	border-bottom:solid rgb(102,0,0,.5);
		font-size:5em;
		font-weight:500;
		margin:0;
	}
#numbers p{ 	margin-top:.5em;
		font-size:1.7em;
	}

#family{	background-color:#ffffcc;
		margin-bottom:0;
		margin-top: 0;
		margin-left: auto;
		margin-right: auto;
		line-height:1.5em;
		padding-bottom: 2em;
		padding-top: 2em;
	
		display: grid;
		grid-template-columns:10% 10% 10% 30%; 
		grid-template-rows: 60% 28%;
		justify-content: center;
		column-gap: 1%;
		row-gap: 3%;
		 
	}
#family img{
	width: 100%;
	height: 100%;
}
#image1{
	grid-column: 1/4;
		grid-row:1;
	align-items: center;
}
#image2{
	grid-column: 1;
	grid-row: 2;
}
#image3{
	grid-column: 2;
	grid-row: 2;
}
#image4{
	grid-column: 3;
	grid-row: 2;
	 
}
#text{
	grid-column: 4;
	grid-row: 1/-1;
	width: 73%;
	align-content: space-between;
}
#family h2{	color:#666600;
		margin:0;
		margin-bottom:.5em;
		font-weight:300;
		line-height:1.5em;
		
	}
#family h3{	color:#330000;
		text-transform:uppercase;
		font-size:3em;
		margin-bottom:.6em;;
		font-weight:600;
	
	}
#family p {	color:#330000;
		word-spacing:.5em;
		font-weight: 500;
	}

#enjoy{		background-color:#cccc99;
		color:#330000;
		text-align:center;
		margin:0;
		padding-top:2em;
		padding-bottom:2em;
		font-size: 1.2em;
		display: flex;
		justify-content: center;
		align-items: center;
		/*column-gap: 2%;*/
		
	}
#enjoy h2 {	font-weight:9000;
		text-transform:uppercase;
		line-height:1.4em;
		word-spacing:.2em;
		width: 35%;
		justify-self:center;
		
		
		}
#enjoy span{	color:#660000;
		font-weight:2;
		
	}
#plan{
	background-color: #666600;
	color: #cccc99;
	width: fit-content;
	padding-left: 1em;
	padding-right: 1em;
	padding-bottom: .5em;
	padding-top: .5em;
}

#wines{		text-align:center;
		color:#330000;
		padding-top:4em;
		padding-bottom: 4em;
	
		
		
	}
#wines h2{	color:#666600;
		font-weight:400;
		margin:0;
		line-height:1.2em;
		font-size: 1.7em;
	}
#wines h3{	font-size:3em;
		text-transform:uppercase;
		margin:0;
		color:#660000;
		line-height:1.2em;
		font-weight:800;
		
		
	}
#wines img{	border:solid #330000;
		padding:0;
		margin-right:auto;
		margin-left:auto;
		width: 100%;
		height: 100%;
		
		
		
		}
#wineimages{
	padding-top: 4em;
	display: grid;
	grid-template-columns: repeat(5, 10%);
	grid-template-rows: repeat(1,100%);
	justify-content: center;
	column-gap: 1.5%;
	
}
#wines p {	line-height:1.5em;
		
		word-spacing:.5em;
		font-weight: 500;
		text-align: center;
	}
#wines figcaption{	color:#660000;
			text-align:center;
			text-transform: uppercase;
		}

#restaurant{	/*********background-image********/
		background-color:#ffffff;
		background-image:url(images/restaurant.jpg);
		background-repeat:no-repeat;
		background-size:cover;
		padding-top:5%;
		padding-bottom:5%;
		

		/*****text****/
		color:#ffffff;
		padding-left:20%;
		font-weight:400;
		font-size:2em;
		text-transform:uppercase;
		line-height: 2em;

		}
.reserve{
	background-color: #ffffcc;
	color: #330000;
	width: fit-content;
	padding-left: .5em;
	padding-right: .5em;
	padding-bottom: .5em;
	padding-top: .5em;
	font-size: 1em;
	margin-top: 1em;
	text-transform: none;
}

#recipes{	color:#330000;
		margin-right: auto;
		margin-left: auto;
	
		display: grid;
		grid-template-columns: 19% 19% 19%;
		grid-template-rows:10% 1 fr 40%;
		justify-content: center;
		column-gap: 1%;
		row-gap: 2%;
		
	}
figure{
	object-fit: fill;
}
#header{
	grid-column: 1/4;
	grid-row: 1;
}
#text2{
	grid-column: 1/3;
	grid-row: 2/3;
}
#pic1{
	grid-column: 1;
		grid-row: 3;
}
#pic2{
	grid-column: 2;
	grid-row: 3;
}
#pic3{
	grid-column: 3;
	grid-row: 2;
}
#pic4{
	grid-column: 3;
	grid-row: 3;
}
#recipes h2{	color:#660000;
		word-spacing:.7em;
		font-weight:600;
		font-size:2em;
		padding-top: 2em;
		padding-bottom: .5em;
		}
#recipes p{	word-spacing:.5em;
		line-height:1.5em;
		text-align:justify;	
		font-weight: 400;
	}
#recipes p span{
		font-weight: 800;
}
#recipes img{	
		height:100%;
		width:100%;
	}
#symbols{
	display: grid;
	grid-template-columns: repeat(4, 15%);
	
	justify-content: center;
	align-content: center;
	align-self: center;
	justify-items: center;
	padding-top: 6em;
	padding-bottom: 2em;
	margin-right: auto;
	margin-left: auto;
}
#symbols img{	
		background-color:#666600;
		width:150px;
		height:150px;
		justify-self: center;
		margin: auto;
		}	
#symbols figcaption{	color:#666600;
			font-size:1.5em;
			font-weight:400;
			text-transform:uppercase;
			text-align: center;
			line-height: 1em;
			
		}
footer h2{
	font-size:1.7em;
	font-weight: 800;
	letter-spacing: .1em; 
	
}
footer h3{
	font-size:1em;
	font-weight:300;
	line-height: 1.5em; 
	word-spacing: .2em;
}
#foot {
	text-align: center;
	padding-top: 2em;
	padding-bottom: 2em;
	display: grid;
	grid-template-columns: 30% 30% 30%;
	justify-content: center;
	align-items: baseline;
}
#botnav{	background-color:#660000;
		border-top:solid #cccc99 .2em;
		font-family:"Sacramento",sans-serif;
		text-align:center;
		font-size:2.5em;
		font-weight:1;
		padding-top: 1em;
		padding-bottom: 1em;
		display: grid;
		grid-template-columns:50% repeat(3, 40px);
		justify-content:center;
		align-items: center;
		
	}
#socialimages{
	display: flex;
	flex-direction: row;
}
#botnav img{	height:1em;
			width:1em;
	}	

@media (max-width: 600px){
	nav a{flex-wrap: wrap;}
	#finewine{height:auto; padding-left: 6em; padding-bottom:2em;}
	#style{width:100%;}
	#descriptions{ display:flex;flex-direction: column; flex-wrap: wrap; grid-gap: 2%; justify-content: center;align-content: center;  }
	.description1{ margin-bottom: 2em;  }
	#quote{ padding-top: 0; display: flex;flex-wrap: wrap; flex-direction: column;justify-content: space-around; }
	#numbers{justify-content: space-evenly; }
	#numbers p{font-size:1em;}
	#family{display: block; }
	#family #image2{display: none;}
	#family #image3 {display: none;}
	#family #image4{display: none;}
	#text{padding: 3em; align-content: center; width:100%; }
	#family h3{line-height: .9em;}
	#enjoy{display: flex; flex-direction: column;column-width: auto; }
	#enjoy h2 { width: 90%;padding-bottom: 1em;  }
	#plan{width:100%;  }
	
	#wineimages{display: flex; flex-direction:row; flex-wrap: wrap;justify-content:space-evenly;margin-top: 1em;}
	#wines img{height: auto; width: 180px;}
	#wines figure{padding: 1em;}
	#recipes{display: block;padding: 3em;}
	#recipes #pic1{display: none;}
	#recipes img{width: 150px; height: auto;display:flex; flex-direction: row; column-gap:1%;justify-content:center;margin-top: 1em;}
	#recipes #recipeimages{display:flex; flex-direction: row; column-gap:1%;justify-content:center;margin-top: 1em;}
	#symbols{display: flex;flex-direction: row; flex-wrap: wrap;justify-content: space-evenly;}
	#symbols img{width: 150px; height: auto;}
	#symbols figure{padding: 1em;font-size: }
	#foot{display: block;}
	#foot section{padding: 1em;}
	#botnav{grid-template-columns: auto; font-size: 2em;}
	#botnav section{margin-bottom: 3em;}
	#socialimages{display: flex; flex-direction: row;justify-content: center;}
	
}