/*This section outlines a the definition for a "bounding box" to contain the entire sites content*/
.mainContainer{
	font-family:arial;
	background-color: lightblue;
	width:auto;
	margin-left:auto;
	margin-right:auto;
	padding:10px;
	border-style:solid;
	border-width:5px;
	width:1200px;
	height:800px;
	
}

/*This section defines the area used as the header of the website, this can be used to standardise the header across all sites and ensure a coherent navigation feel*/
.headerSection{
	background-color: darkgrey;
	padding:10px;
}

/*Ensure that the company logo is styled consistently and located in a consistent position within the header, this will also be a link back to the home page so that it can be clicked at any time to go home*/
.companyLogo{
	font-size:50px;
	text-align:left;
	float:left
}
.logoLink{
	color:yellow;
}
.logoLink:hover{
	background-color:orange;
}

/*This section defines some classes to use for the drop down menu, this is located in the header section and will keep a consistent feel for the site nav*/
.navigationDropDown{
	position:relative;
	display:inline-block;
	left:400px;
	z-index:1;
		
}
.navigationDropDownButton{
	background-color:orange;
	color:black;
	padding:16px;
	font-size:16px;
	border:none;
	cursor:pointer;
}
.navigationDropDownContent{
	display:none;
	position:absolute;
	background-color:orange;
	min-width:160px;
	box-shadow:0px 8px 16px rgba(0,0,0,0.2)
	
}
.navigationDropDownContent a{
	color:black;
	padding:8px 30px;
	text-decoration:none;
	displays:block;
	
}
.navigationDropDownContent a:hover{
	background-color: yellow;
}
.navigationDropDown:hover .navigationDropDownContent{
	display:block;
}
.navigationDropDown:hover .navigationDropDownButton{
	background-color:lightgrey;
}

/*This is a link that will remain over on the right hand side of the header, this will allow a customer to go straight to the page to get a quote for services*/
#getQuote{
	font-size:40px;
	text-align:right;
	float:right
}
#getQuote:hover{
	background-color:orange;
}	
/*This section is used to define the blurb section of the index page. It is going to go on the left hand side of the site and contain a brief message about the company and our services*/
#blurbContainer{
	padding:10px;
	padding-left:50px;
	padding-top:50px;
	text-decoration:none;
	text-align:center;
	width:500px;
	border-width:5px;
	float:left;
	
}
.blurbHeader{
	text-decoration-line:none;
}
.underBlurb{
	clear:both;
	padding-left:100px;
	font-size:20px;
}
/*This section is used to style and align the images/gif's used on the index page*/
.index_image1{
	position:relative;
	top:20px;
	right:100px;
	width:500px;
	float:right;
}
.gifDiv{
	
	width:500px;
	height:250px;
	padding-left:400px;
}
.gif1{
	width:100%;
	margin:auto;
}

/*This section is used to style the Form that is on the QUOTE page. Some back end work is required to have the form submit and emailed to the workshop/client, but that is beyond the scope of this assignment*/
.formContainer{
	width:100%
}
.quoteForm{
	margin:auto;
	max-width:600px;
	background-color:white;
	display:flex;
	align-items:center;
	justify-content:center;
	
}
.quoteForm input,
.quoteForm textarea{
	margin-top:10px;
	width:60%
}
textarea{
	resize:vertical;
}

/*This section is going to be used to style the photo gallery. We want a 3x3 grid of photos that will fit into the mainContainer area*/
.galleryHeading{
	padding-top:20px;
	color:blue;
	text-align:center;
}
.pictureArea{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	grid-template-rows:repeat(3,15vw);
	grid-gap:0px;
	
}
.pictureAreaImage{
	width:333px;
	height:200px;
}
.pictureAreaImage div{
	position:relative;
	bottom:0;
	right:0;
	background:black;
	color:white;
	opacity:0;
	visibility:hidden;
	-webkit-transition:visibility 0s, opacity 0.5s linear;
	transition:visibility 0s, opacity 0.5s linear;
}
.pictureAreaImage:hover div{
	width:333px;
	padding:8px 15px;
	visibility:visible;
	opacity:0.7;
}
/*Use this section of the styles sheet to format the Services sheet. This sheet will have a small section detailing what we can offer the client and then some links that will take them to brief youtube videos of the different 3D printing techniques for explanation/demonstation. This should help the client decide what technique/procedure is correct for their project*/
#completed{
	text-decoration:none;
}
#serviceHeading{
	text-align:center;
	color:red;
}
.servicesPara{
	text-align:center;
}

.servicesVideos{
	max-width:1200px;
	max-height:560px;
}

.vidLeft{
	padding-top:50px;
	width:380px;
	float:left;
	text-align:center;
}

.vidMid{
	padding-top:50px;
	width:380px;
	float:left;
	text-align:center;
}
.vidRight{
	padding-top:50px;
	width:380px;
	float:left;
	text-align:center;
}