* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}


/*
 * header and header content
 */

header {
	width: 100%;
}

#banner {
	background: url(images/logo.png) no-repeat center center;
	background-size: 60% auto;
	height: 88vh;
	position: fixed;
	right: 0;
	top: 0;
	width: 100%;
	z-index: -1;
}

.inner #banner {
	background-size: 40% auto;
	height: 25vh;
}

nav {
	background-color: white;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	height: 12vh;
	opacity: .9;
	padding: 0 5vw;
	position: relative;
	top: 88vh;
}

nav a {
	border-left: solid black .1em;
	border-right: solid black .1em;
	color: black;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.4em;
	font-weight: 500;
	letter-spacing: 2px;
	object-fit: fill;
	padding: 3vh 0;
	text-align: center;
	text-decoration: none;
}

nav a:hover {
	background-color: #f8f8f8;
}

.inner nav {
	top: 25vh;
}

/*nav li {
	color: inherit;
	font: inherit;
	display: grid;
	height: 100%;
	text-align: center;
}*/

#navLeft {
	border-left: none;
}

#navRight {
	border-right: none;
}


/*
 * main and main content
 */

main {
	background-color: #f2f2f2;
	border-bottom: solid black 3px;
	border-top: solid black 2px;
	padding: 10vh 15vw;
	position: relative;
	top: 88vh;
}

main.inner {
	top: 25vh;
}

main h2 {
	font-family: 'Montserrat', sans-serif;
	font-size: 1.5em;
	font-weight: 500;
	padding-top: 1em;
}

main p {
	font-family: 'Montserrat', sans-serif;
	font-size: 1.2em;
	line-height: 2;
}

/* carousel image animation on homepage */

main #carousel {
	margin: 0 auto;
	overflow: hidden;
}

main #carousel img {
	animation-name: fading;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	margin: 0 auto;
	overflow: hidden;
	width: 100%;
}

@keyframes fading {
	0%{opacity: 0}
	60%{opacity: 1}
	75%{opacity: 1}
	100%{opacity: 0}
}

.home blockquote {
	border-left: solid black 3px;
	border-right: solid black 3px;
	font-family: 'Montserrat', sans-serif;
	font-size: 1.8em;
	font-style: italic;
	font-weight: 500;
	margin: 15vh auto 5vh;
	padding: 2vh 2vw 3vh;
	width: 60%;
}

/* left and right aligning elements to create contrast on the services page */

#services div {
	display: inline-block;
	margin-bottom: 4vh; 
}

.inner .left {
	text-align: left;
}

#services img {
	display: inline-block;
	position: relative;
	top: 0;
	width: 20vw;
}

.inner .left img {
	float: right;
}

.inner .right {
	text-align: right;
}

.inner .right img {
	float: left;
}

/* grid formatting for photo gallery on projects page */

.inner .projects {
	display: grid;
	grid-gap: 5px;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(3, 1fr);
	padding: 10vh 0;
	width: 100%;
}

.inner .projects img {
	width: 100%;
}

.projects #image1 {
	grid-column: 1;
	grid-row: 1;
}

.projects #image2 {
	grid-column: 2;
	grid-row: 1;
}

.projects #image3 {
	grid-column: 3;
	grid-row: 1;
}

.projects #image4 {
	grid-column: 4;
	grid-row: 1;
}

.projects #image5 {
	grid-column: 1;
	grid-row: 2;
}

.projects #image6 {
	grid-column: 2/4;
	grid-row: 2/4;
}

.projects #image7 {
	grid-column: 4;
	grid-row: 2;
}

.projects #image8 {
	grid-column: 1;
	grid-row: 3;
}

.projects #image9 {
	grid-column: 4;
	grid-row: 3;
}

.projects #image10 {
	grid-column: 1;
	grid-row: 4;
}

.projects #image11 {
	grid-column: 2;
	grid-row: 4;
}

.projects #image12 {
	grid-column: 3;
	grid-row: 4;
}

.projects #image13 {
	grid-column: 4;
	grid-row: 4;
}

/*
.projects #image14 {
	
}

.projects #image15 {
	
}

.projects #image16 {
	
}

.projects #image17 {
	
}

.projects #image18 {
	
}

.projects #image19 {
	
}

.projects #image20 {
	
}

.projects #image21 {
	
}

.projects #image22 {
	
}

.projects #image23 {
	
}

.projects #image24 {
	
}

.projects #image25 {
	
}

.projects #image26 {
	
}

.projects #image27 {
	
}

.projects #image28 {
	
}

.projects #image29 {
	
}

.projects #image30 {
	
}

/* formatting of elements for contact page */

.inner .contact {
	display: grid;
	grid-template-columns: 70% 30%;
	grid-template-rows: 100%;
	margin: 0 auto;
	padding: 5vh 0;
}

.inner .contact iframe {
	grid-column: 1;
	grid-row: 1;
	margin: 0;
}

.inner .contact ul {
	grid-column: 2;
	grid-row: 1;
}

.inner .contact li, a {
	color: black;
	font-family: 'Montserrat', sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
}

.inner .contact a {
	text-decoration: none;
}

.inner .contact a:hover {
	text-decoration: underline;
}

.inner .contact br {
	width: 100%;
}

.inner .contact iframe {
	max-width: 45vw;
}


/*
 * footer and footer content
 */

footer {
	background: url(images/background.png);
	color: #eee;
	padding: 2vh 1vw;
	position: relative;
	top: 88vh;
}

footer.inner {
	top: 25vh;
}

footer .foot {
	display: grid;
	grid-gap: 8vw;
	grid-template-columns: 40% 60%;
	padding: 5vh 0;
}

footer .info {
	grid-column: 1;
	text-align: right;
}

footer .info ul {
	list-style-type: none;
	margin-bottom: .3vh;
}

footer .info li {
	font-size: calc(.5em + 5px);
	font-weight: 400;
}

footer .info a, li {
	color: white;
	display: block;
	font-family: 'Montserrat', sans-serif;
	font-size: calc(.6em + 6px);
	font-weight: 500;
	letter-spacing: 1px;
	text-decoration: none;
}

footer .info li a {
	font-size: inherit;
	font-weight: inherit;
}

footer .info a:hover {
	text-decoration: underline;
}

footer .foot iframe {
	grid-column: 2;
}

footer #copyright {
	font-family: sans-serif;
	font-size: .8em;
	font-style: italic;
	font-weight: 300;
	text-align: right;
}