*
{
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;	
}
body
{
	display: flex;
	flex-direction: column;
	min-height: 100vh;	
}
article
{	
	flex:1 0 auto;	
}
footer
{
	padding: 1em;		
	background-color: white;
	opacity: .8;
	min-height: 20vh;	
}
.footer
{
	position: relative;
}
/********************************************************
                The home Page 
**********************************************************/				
.bodyOne
{	
	background-image:url("bgBW4.jpg");
	background-repeat: no-repeat;	
	background-position: bottom bottom;	
	background-size:cover;
	background-attachment: fixed;	
}
.left
{	
	min-height: 100%;
	background-color: white;
	opacity: .8;
}
.right
{
	margin-top:1em;	
	margin-left: 1em;
	flex:1;
	display: flex;
	flex-direction: column;	
	opacity:.85;
}
.nav
{
	background-color: green;	
	margin: .5em;
	padding: .8em;
	border-radius:44px;
	border:.12em solid silver;
	color: white;
	font-size: 1.3em;
	font-family: 'Russo One', sans-serif;
	box-shadow: 4px 4px 2px #888888;
}
 .one
{
	width: 35%
}
.two
{
	width:40%;	
}
.three
{
	width: 45%
}
.four
{
	width: 50%;
}
.five
{
	width: 55%;
}
.six
{
	width: 60%
}
.seven
{
	width: 65%;
}
.essential 
{
	margin: 1em;
	padding: 1em;	
}
.essPic
{
	border-radius: 44px;
	border: 5px solid yellow;
}

/**************************************************
				The Product Page 
****************************************************/	
.bodyTwo
{
	background-image:url("kli.jpg");
	background-repeat: no-repeat;	
	background-position: center;	
	background-size:cover;
	background-attachment: fixed;	
}
.secOne
{
	flex: 1;
	-ms-flex:1;
}
.ph1
{
	font-size: 2em;
}
.pp
{
	font-size: 1.5em;
}
.secTwo
{
	flex: 2.5;
	-ms-flex:2.5;
	display: flex;
	flex-direction: column;
	background-color: white;
	opacity:.9;	
}
.secTwoTwo
{
	flex: 2.5;
	-ms-flex:2.5;
	display: flex;
	flex-direction: column;
	background-color: white;
	opacity:.95;
}
.asideOne
{
	flex:1;
}
.info
{	
	background-color:white;	
}
.pasideTwo
{
	flex: 3;
	-ms-flex:3 0 auto;	
	display: flex;	
}
.pleft
{
	flex: 1;	
	background-color: white;	
	padding:1em;
	font-family: 'Unna', serif;	
}
.pright
{
	flex:1;	
	background-color: white;	
}
.products
{
	padding: 1em;
	margin: .5em;
}
/*******************************************************
				The Supplier Page 
********************************************************/				
.bodyThree
{
	background-image:url("team.jpg");
	background-repeat: no-repeat;	
	background-position: center;	
	background-size:cover;
	background-attachment: fixed;
}
/***************************************************
				Special Page 
****************************************************/				
.bodyFour
{
	background-image:url("fds.jpg");
	background-repeat: no-repeat;	
	background-position: center;	
	background-size:cover;
	background-attachment: fixed;
}
.special
{
	background-color: white;	
	flex: 2;
	font-size: 2em;
	font-family: 'Diplomata SC', cursive;
	padding: 1em;
}
.h2special
{
	text-align: center;
}
/********************************************************
               Photogallery
*********************************************************/			   
.bodyfive
{	
	background-image:url("brick.jpg");
	background-repeat: no-repeat;	
	background-position: center;	
	background-size:cover;
	background-attachment: fixed;
}
.photo1
{
	width:30%;
	height:30%;
	padding:1em;
	margin:1em;
	background-image:url("fivezz.jpg");
	background-repeat: no-repeat;	
	background-position: center;	
	background-size:cover;
}
.photo2
{
	width:30%;
	height:30%;
	padding:1em;
	margin:1em;
	background-image:url("fivezz.jpg");
	background-repeat: no-repeat;	
	background-position: center;	
	background-size:cover;
}
.photo3
{
	width:30%;
	height:30%;
	padding:1em;
	margin:1em;
	background-image:url("fivezz.jpg");
	background-repeat: no-repeat;	
	background-position: center;	
	background-size:cover;
}
.bodysix
{
	background-image:url("construc.jpg");
	background-repeat: no-repeat;	
	background-position: center;	
	background-size:cover;
	background-attachment: fixed;
}
.bodyseven
{
	background-image:url("daf.jpg");
	background-repeat: no-repeat;	
	background-position: center;	
	background-size:cover;
	background-attachment: fixed;
}
.mainSection
{
	display: flex;
	flex:1 0 auto;
	-ms-flex:1 0 auto;	
}
button:focus
{
	outline:0;
}
.nav:hover
 {
	background-color: black;
	box-shadow: 10px 10px 10px #737373;		
}
.nav:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(8px);
}
.navp:active {
   transform: translateY(8px);
}
ul
{
	background-color: green;
}
.pnav
{
	display: flex;
	flex-wrap: wrap;
}
.roundNav
{
	display: flex;		
	flex-wrap: wrap;
	background-color: white;	
}
.navp
{
	padding: 1em;
	margin: 1em;
	border-radius: 88px;
	background-color: white;
	border:2px solid white;
	font-family: 'Russo One', sans-serif;
	text-shadow: 2px 2px green;
	color: white;
	width: 8em;
	height: 6em;	
	background-image: url("screw2.png");
	background-repeat: no-repeat;	
	background-position: center;	
	background-size:cover;		
}
.navp:hover
{
	background-image: url("screw4.png");
	background-repeat: no-repeat;	
	background-position: center;	
	background-size:cover;	
}
.selected
{
	background-image: url("screw4.png");
	background-repeat: no-repeat;	
	background-position: center;	
	background-size:cover;
}
.aboutAside
{
	padding: 1em;
	font-size: 1.4em;
	font-family: 'Unna', serif;
}
ol
{
	 list-style-position: inside;
}
#map
 {
        width: 95%;
        height: 400px;		
		background-color: white;
		border: 10px groove silver;
		margin: 1em;
		padding: 1em;		
}
.picOne
{
	flex:1;
	background-image:url("fivezz.jpg");
	background-repeat: no-repeat;	
	background-position: center;	
	background-size:cover;
}
/******************************************************
			The Slide Show
*******************************************************/
.theShow
{
	display: flex;
	margin:1em;		
}
#ArrowD
{
	text-align: center;	
}

#holder  /* This is the holder for Image and Buttons */
{
	height: 550px;
	width: 610px;	
}
#slideshow   /* This is the Image */
{
	height:470px;
	width: 600px;
	position: relative;		
}
/***********************************************/
/* The holder of the Thumbnails ****************/

#window  
{
	
	width:220px;
	height: 470px;
	display:flex;		
	overflow-y:scroll;	
}
#imageHolder
{
	  display: flex;	
	  flex-wrap: wrap;	  
}
#imageHolder img
{	
	width: 85px;	
	height: 100px;	
	margin-right: 5px;
	margin-top:5px;
}
/***************************************************************
						End of the Slide Show
***************************************************************/	
.contactInfo
{
	display: flex;
	flex-direction: row;
	padding: 1em;
	font-family: 'Unna', serif;
	font-size: 1.2em;
}
.divOne
{
	flex:1;
}
.divTwo
{
	flex:1;
	background-image: url("one.jpg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;	
}

/*******************************************
			Media 480px 
*********************************************/
@media(max-width:769px) 
{
	
	.mainSection
	{
		flex-direction: column;
		-ms-flex-direction: column;
	}
	.nav
	{
		font-size: 1em;
	}
	.footer
	{
		position:fixed;
	}
	#holder  /* This is the holder for Image and Buttons */
	{
		height: 275px;
		width: 305px;	
	}
	#slideshow   /* This is the Image */
	{
		height:235px;
		width: 300px;
		position: relative;		
	}
	/***********************************************/
	/* The holder of the Thumbnails ****************/
	#window  
	{		
		width:110px;
		height: 235px;
		display:flex;		
		overflow-y:scroll;	
	}
	#imageHolder
	{
		  display: flex;	
		  flex-wrap: wrap;	  
	}
	#imageHolder img
	{		
		width: 42.5px;	
		height: 50px;	
		margin-right: 2.5px;
		margin-top:2.5px;
	}
		
}
/**********************************************
		Media 1280px
*********************************************/
@media(max-width:1280px)
{
	.nav
	{
		font-size: 1em;
	}
	
	
	
}