/* ##### Default styles for the website ##### */
body {background-color: #252A33; max-width: 1200px; margin:0 auto; font-family: 'Open Sans', 'Calibri';}
h1 {color: #FFF;}
h2 {color: #FFF; margin: 0; font-size: 1.8em;}
h3 {color: #FFF; font-size: 1.4em;}
p {color: #FFF; font-size: 1em;}
a {color: #FFC478; text-decoration: none; transition: color 0.3s ease-in-out;}
a:hover {color: #FF7400;}
hr {border: solid 2px #FF7400; width: 80%;}
/* ##################################################################### */

/* ##### Layout control classes ##### */
.left {float: left;}
.right {float: right;}
.clear {clear: both;}
.centerText {text-align: center;}
/* ##################################################################### */

/* ##### Styles relating specifically to the header ##### */
header {background-color: #FF7400; margin-top: 20px;}
header h1 {padding: 80px 0 20px 20px; margin: 0;}
/* ##################################################################### */

/* ##### Styles relating specifically to the navigation ##### */
nav {background-color: #FFC478; margin: 10px 0;}
nav ul {margin: 0; padding: 0; list-style: none; text-align: center; font-size: 1.1em; color: #FF7400;}
nav ul li {display: inline-block; margin: 5px 50px;}
nav ul li a {color: #FFF; font-weight: bold;}
/* ##################################################################### */

/* ##### Styles for all tables ##### */
table {color: #FFF; margin: 0 auto; border-collapse: collapse;}
thead tr {background-color: #FF7400 !important; font-weight: bold;}
td {padding: 5px; width: 150px;}
tr:nth-child(odd) {background-color: #FFC478;}
tr:nth-child(even) {background-color: #FFB04B;}
/* ##################################################################### */

#content {text-align: center; margin: 20px; overflow: hidden;} /* Style for div that holds each pages main content */
#apertureImg {width: 80%; border: 4px solid #FF7400; cursor: pointer;} /* Style for the aperture visual example image on the aperature page */

/* ##### Styles relating specifically to the slideshow ##### */
#homeSlideshow {margin-bottom: 20px; position: relative;}
#slideshowImage {opacity: 0; position: relative; display: block; width: 100%; transition: all 1s ease-in-out;}
#slideshowImage.fadeIn {opacity: 1;}
#slideshowOverlay {background: rgba(37, 42, 51, 0.8); position: absolute; height: 100%; width: 100%; top: 0; opacity: 0;
	-webkit-transform: scale(0);
		-ms-transform: scale(0);
			transform: scale(0);}
.slideshowControls {vertical-align: middle; margin: 0 20px; opacity: 0.6; cursor: pointer; transition: all 0.5s ease-in-out;}
.slideshowControls:hover {opacity: 1;}
#slideshowOverlayImgHolder {position: relative; top: 50%; left: 50%;
	-webkit-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);}
/* ##################################################################### */

/* ##### Styles relating specifically to the footer ##### */
footer {background-color: #FF7400; height: 80px;}
footer p {margin: 0; margin-left: 10px;}
footer div .socialLink {margin: 0 10px;}
#socialLinks {line-height: 80px; float: right;}
#copyright {line-height: 80px; float: left;}
.socialLinkImg {width: 40px; height: 40px; vertical-align: middle;}
.footerContent {margin: 0 20px;}
/* ##################################################################### */

/* ##### Styles relating specifically to the homepage modules ##### */
.homeModule {display: inline-block; width: 340px; text-align: center; background-color: #FFC478; padding: 10px; height: 450px;}
.homeModule img {width: 100%; border: 4px solid #FF7400; box-sizing: border-box;}
.homeModule p a {color: #FFF;}
.homeModule p a:hover {color: #FF7400;}
#homeAbout {margin-top: 20px;}
/* ##################################################################### */

/* ##### Styles relating specifically to the contact page form ##### */
form {width: 900px; margin: 0 auto; text-align: left;}
form div p {margin: 5px 0;}
textarea {height: 200px !important;}
button {display: block; margin: 0 auto; width: 400px; height: 30px; font-family: 'Open Sans', 'Calibri'; transition: all 0.3s ease-in-out;}
button:hover {border: 1px solid #FF7400; box-shadow: 0 0 5px #FF7400;}
.formInfo {width: 400px;}
.required {color: red; font-size: 0.8em;}
.field {width: 100%; font-family: 'Open Sans', 'Calibri'; margin-bottom: 10px; padding: 0 5px; height: 30px; font-size: 1.2em; outline: none; border: 1px solid #FFF; background: #FFF; box-sizing: border-box; transition: all 0.3s ease-in-out;}
.field:focus {border: 1px solid #FF7400; background: #FFDBAC; box-shadow: 0 0 5px #FF7400; -webkit-appearance: none;}
/* ##################################################################### */

/* ##### Styles relating specifically to the two image examples on the ISO, Shutter and Aperture pages ##### */
.imgExample {width: 100%; border: 4px solid #FF7400; cursor: pointer; box-sizing: border-box;}
.imgExampleHolder {width: 45%;}
/* ##################################################################### */

/* ##### Styles relating specifically to the images on the gallery page ##### */
.galleryModule {display: inline-block; width: 240px; padding: 10px; margin: 10px; }
.galleryModule:hover {background-color: #FFC478;}
.galleryModule img {width: 100%; border: 4px solid #FF7400; display: block; box-sizing: border-box;}
/* ##################################################################### */

/* ##### Styles relating specifically to the social media images ##### */
.contactSocialLinkImg {width: 100px;}
.socialLink {margin: 0 4%;}
.socialImgFade {width: 100px; height: 100px; margin:0 4%; display: inline-block; overflow: hidden;}
.socialImgFade img {height: 100%; transition: all 0.2s ease-in-out;}
.socialImgFade img:hover {
	-webkit-transform: translate(-50%);
		-ms-transform: translate(-50%);
			transform: translate(-50%);
}
/* ##################################################################### */

/* ##### Styles relating specifically to the full screen overlay ##### */
#overlay {position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.7);
	-webkit-transform: scale(0);
		-ms-transform: scale(0);
			transform: scale(0);}
#overlayImg {position: absolute; top: 50%; left: 50%; border: 4px solid #FF7400; max-width: 80%; max-height: 90%; width: auto; height: auto;}

.overlayShow {
	-webkit-animation: overlayShow 0.5s ease-in-out;
			animation: overlayShow 0.5s ease-in-out;
	-webkit-animation-fill-mode: forwards;
			animation-fill-mode: forwards;}
.overlayHidden {
	-webkit-animation: overlayHidden 0.5s ease-in-out;
			animation: overlayHidden 0.5s ease-in-out;
	-webkit-animation-fill-mode: forwards;
			animation-fill-mode: forwards;}
.overlayImgShow {
	-webkit-animation: overlayImgShow 0.5s ease-in-out;
			animation: overlayImgShow 0.5s ease-in-out;
	-webkit-animation-fill-mode: forwards;
			animation-fill-mode: forwards;}
.overlayImgHidden {
	-webkit-animation: overlayImgHide 0.5s ease-in-out;
			animation: overlayImgHide 0.5s ease-in-out;
	-webkit-animation-fill-mode: forwards;
			animation-fill-mode: forwards;}
/* ##################################################################### */

/* ##### Animation keyframes to show the overlay ##### */
@keyframes overlayShow {
	0% {opacity: 0;
		-webkit-transform: scale(1);
			-ms-transform: scale(1);
				transform: scale(1);}
	100% {opacity: 1;
		-webkit-transform: scale(1);
			-ms-transform: scale(1);
				transform: scale(1);}
}
/* ##################################################################### */

/* ##### Animation keyframes to hide the overlay ##### */
@keyframes overlayHidden {
	0% {opacity: 1;
		-webkit-transform: scale(1);
			-ms-transform: scale(1);
				transform: scale(1);}
	99% {opacity: 0;
		-webkit-transform: scale(1);
			-ms-transform: scale(1);
				transform: scale(1);}
	100% {opacity: 0;
		-webkit-transform: scale(0);
			-ms-transform: scale(0);
				transform: scale(0);}
}
/* ##################################################################### */

/* ##### Animation keyframes to show the image on the overlay ##### */
@keyframes overlayImgShow {
	0% {opacity: 0;
		-webkit-transform: scale(0) translate(-50%, -50%);
			-ms-transform: scale(0) translate(-50%, -50%);
				transform: scale(0) translate(-50%, -50%);
		-webkit-transform-origin: 0 0 0;
			-ms-transform-origin: 0 0 0;
				transform-origin: 0 0 0;}
	100% {opacity: 1;
		-webkit-transform: scale(1) translate(-50%, -50%);
			-ms-transform: scale(1) translate(-50%, -50%);
				transform: scale(1) translate(-50%, -50%);
		-webkit-transform-origin: 0 0 0;
			-ms-transform-origin: 0 0 0;
				transform-origin: 0 0 0;}
}
/* ##################################################################### */

/* ##### Animation keyframes to hide the image on the overlay ##### */
@keyframes overlayImgHide {
	0% {opacity: 1;
		-webkit-transform: scale(1) translate(-50%, -50%);
			-ms-transform: scale(1) translate(-50%, -50%);
				transform: scale(1) translate(-50%, -50%);
		-webkit-transform-origin: 0 0 0;
			-ms-transform-origin: 0 0 0;
				transform-origin: 0 0 0;}
	100% {opacity: 0;
		-webkit-transform: scale(0) translate(-50%, -50%);
			-ms-transform: scale(0) translate(-50%, -50%);
				transform: scale(0) translate(-50%, -50%);
		-webkit-transform-origin: 0 0 0;
			-ms-transform-origin: 0 0 0;
				transform-origin: 0 0 0;}
}
/* ##################################################################### */

/* ##### Sytles aimed at tablets ##### */
@media only screen and (max-width: 1199px) and (min-width: 700px) {
	header {margin-top: 0;}
	nav ul li {margin: 5px 2%;}
	footer {text-align: center; height: 100%;}
	footer p {margin-left: 0;}

	#copyright {float: none; line-height: 40px;}
	#socialLinks {float: none; line-height: 60px; padding-bottom: 10px;}
	.socialImgFade {width: 80px; height: 80px;}
	footer div .socialLink {margin: 0 6%;}
	form {width: 90%;}
	.formInfo {width: 48%;}
	.homeModule {width: 30%;}
}
/* ##################################################################### */

/* ##### Sytles aimed at phones ##### */
@media only screen and (max-width: 699px) {
	header {margin-top: 0;}
	nav ul li {margin: 5px 2%;}
	footer {text-align: center; height: 100%;}
	footer p {margin-left: 0;}

	#copyright {float: none; line-height: 40px;}
	#socialLinks {float: none; line-height: 60px; padding-bottom: 10px;}
	.socialImgFade {width: 40px; height: 40px;}
	footer div .socialLink {margin: 0 4%;}
	form {width: 100%;}
	button {width: 50%;}
	.formInfo {width: 100%;}
	.slideshowControls {width: 50px;}
	#slideshowOverlayMenu img {width: 30px;}
	.homeModule {width: 100%; height: 100%; margin-bottom: 20px; box-sizing: border-box;}
}
/* ##################################################################### */