/* RESET 

html, body, div, span, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, a, article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
     Cancel out some differences between browser defaults 
    margin: 0;
    padding: 0;
    border: 0;
}
*/
 
* {
    /* The width of an element will be the size of its border box,
       not its content box (which is the normal default). */
    box-sizing: border-box;
}

/* == END RESET =========================================== */

/*home page*/
.mainwork {
	display: flex;
	}
     
	.aside{
		 display: flex;
		 flex-direction: column;
		 align-items: center;
		 justify-content: center;
		 width:400px;
		 height:965px;
		 background-color: DimGray;
	}
	
	/*background image of the main page*/ 	
	.imagebackground{
		background-image: url("images/bghomepage.jpg");
		background-repeat: no-repeat;
		background-size: 100% 965px;
		display: flex;
		width: 80%;
		height: 965px;
	}
	 
	 /*logo at the middle of the background image in home page*/ 
	.logo{
		 width: 300px;
		 height: 80px;
		 text-align: center;
		 }
	 
	 /*navigation bar in the right side box of the home page*/ 
	 .navigation{
		 display: flex;
		 flex-direction: column;
		 align-items: center;
		 justify-content: center;
		 width: 250px;
		 height: 400px;
		 margin: 70px 70px 45px;
		 }
	 
	 /*parrent box of logo and paragraph in the middle of the background image*/ 
	 .logo-and-para{
		 display: flex;
		 flex-direction: column;
		 align-items: center;
		 justify-content: center;
		 margin: auto;
		 width: 700px;
		 height: 300px;
		}
	 
	 .middle-page-logo{
		text-align: center;
		}
	 
	 .something-about-wine{
		text-align: center;
		font-family: clavo,Georgia,serif;
		font-style: italic;
		font-size:27px;
		color: white;
		}
	 
	footer{
		text-align: center;
		width: 290px;
		height: 350px;
		
   	}
	.social-media{
		display:flex;
		justify-content: center;
	}
	
/*wine gallery and buying page*/	
.mainwork-wines{
	display: flex;
}
	
	.gallery-box{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 350px;
		height: 800px;
		text-align: center;
	}
	
	.heading{
		width: 330px;
		height: 50px;
		}
	
	.nav{
		padding: 10px;	
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 330px;
		height: 500px;
		text-align: center;
	}
	
	/*navigation list style*/ 	
	ul{
		list-style-type: none;
		text-align: center;
		font-family: Calibri;
		font-size: 30px;
		 
	}
	
	.nav-our-wines{
		color:black;
	}
	
	a{
		text-decoration: none;
		color: white;
	}
	/*setting the menu list item's color to black*/
	.nav ul li a{
		color: black;
	}
	/*setting the space between the menu list items*/
	.nav ul li{
		padding-right:20px;
	}
	
	/*creating a border with shadow around the navigation box*/
	.nav{border: 1px solid;
		margin: 15px;
		box-shadow: 5px 5px 8px black, 10px 10px 8px grey, 15px 15px 8px lightGrey;
	}
	
	/*paragraph under the navigation container*/
	.para-p1{
		padding: 10px;	
		width: 330px;
		height: 150px;
		text-align: center;
	}
	
	.wines{
		margin: 13px 20px;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		align-items: center;
		width: 100%;
		height:2100px;
	}
	
	.wine1{
		padding-top:5px;
	
	}
	
	.wine2{
		
	}
	
	.wine3{
		padding-top: 40px;
	
	}
	
	.wine4{
		
	}
	
	.wine5{
		
	}
	
	.wine6{
		
	}
	
/*this class is used to enter width and height of the */ 
	.wine-box{
		display: flex;
		margin: 20px 15px;
		width: 400px;
		height: 650px;	
		text-align: center;
	}
	
	/*footer of the wines page*/
	#footer{
		display: flex;
		flex-direction: column;	
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 300px;
		text-align: center;
	}
	
	/*paragraph in the footer*/ 
	.para2-p1{
		width: 1000px;
		height: 100px;
		text-align: center;
	}
	
	/*subscribing box*/ 
	.subscribe{
		width: 1500px;
		height: 100px;
		text-align: center;
		font-family: Arial, Helvetica, sans-serif;
	}
	
	form {
    border: 4px solid #f1f1f1;
}

/* Add some padding and a grey background color to containers */
.container {
    padding: 20px;
    background-color: #f1f1f1;
}

/* Style the input elements and the submit button */
input[type=text], input[type=submit] {
    width: 100%;
    padding: 12px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* Add margins to the checkbox */
input[type=checkbox] {
    margin-top: 16px;
}

/* Style the submit button */
input[type=submit] {
    background-color: 	#282828;
    color: white;
    border: none;
}

input[type=submit]:hover {
    opacity: 0.8;
}