@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Merriweather:400,700');

@keyframes fade {
	from {opacity: 1}
	to {opacity: 0.75}
}

@keyframes display {
	from {opacity: 0}
	to {opacity: 1}
}

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
}
.wrapper {
	min-height: 100%;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(6, auto);
	/*grid-template-areas:
	'header header header header header header header header header header header header'
	'main main main main main main main main side side side side'
	'footer footer footer footer footer footer footer footer footer footer footer footer';*/
	grid-gap: 1em;
	margin: 0 10em 0 10em;
	animation: display;
	animation-duration: 0.3s;
	animation-fill-mode: forwards;
	}

.header{
	grid-area: header;
	grid-row: 1;
	grid-column: 1 / span 12;
	padding: 2em 0 2em 0;
}

.headerlogo{
	float: left;
}

.headertab{
	float: right;
	font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
	font-size: 1.2em; 
	font-weight: 500;
	padding: 0.5em 1em 0.5em 1em;
	border: 2px;
	border-style: solid;
	border-color: transparent;
	color: black;
}

.headertab:hover {
	border: 2px;
	border-style: solid;
	border-color: #121212;
}

.headertabactive {
	color: #797979;
	float: right;
	font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
	font-size: 1.2em; 
	font-weight: 500;
	padding: 0.5em 1em 0.5em 1em;
	border: 2px;
	border-style: solid;
	border-color: transparent;
}

.button{
	font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
	font-size: 1.2em; 
	font-weight: 500;
	border: 2px;
	border-color: black;
	border-style: solid;
	color: black;
	padding: 0.5em 1em 0.5em 1em;
}

.button:hover {
	border: 2px;
	color: white;
	border-style: solid;
	background-color: black;
}

.main{
	grid-area: main;
	grid-column: 1 / span 9;
	grid-row: 2;
	text-align: left;
	color: rgb(82, 82, 82);
	padding: 1em 0 0 0;
	font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
}

.side {
	grid-area: side;
	grid-column: 10 / span 3;
	grid-row: 2;
	font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
	padding: 1em 1em 3em 1em;
}

.footer{
	grid-area: footer;
	grid-column: 1 / span 12;
	grid-row: 6;
	color: rgb(179, 179, 179);
	font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
	font-size: 12px;
	padding: 1em 0 0 0;
}

h1{
	color: #121212;
	font-family: 'Merriweather','Times New Roman', Times, serif;
}

h3, h4, h5, h6 {  
	font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
	color: #454545;
}

h1 { font-size: 4.0em; font-weight: 700; line-height: 1.20; margin: 0 0 1em 0; letter-spacing: -0.05em;}
h2 { font-size: 1.2em; font-weight: 700; line-height: 1.00; margin: 0 0 0.5em 0; letter-spacing: -0.02em; text-transform: uppercase; color: rgb(19, 14, 78);}
h3 { font-size: 1.4em; font-weight: 700; line-height: 1.30; margin: 0 0 0 0;}
h4 { font-size: 1.2em; font-weight: 400; line-height: 1.35; margin: 0 0 0 0;}
h5 { font-size: 1.0em; font-weight: 400;line-height: 1.50;  margin: 0 0 0 0;}
h6 { font-size: 1.4em; font-weight: 400; line-height: 1.30; margin: 0 0 3em 0;}

a {
	text-decoration: none;
  }

/*a:hover {
	animation: fade;
	animation-duration: 0.3s;
	animation-fill-mode: forwards;
}*/


p {
	font-size: 16px;
	line-height: 1.5em;
	padding: 0 0 1em 0 ;
}

ul {
	padding: 0 0 1em 1em;

  }
  
li {
	font-size: 16px;
	font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
	font-weight: 400;
	color: #454545;
  }

.download {
	font-size: 1.5em;
	font-weight: 500;
	font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
	padding: 2em 0 3.1em 0;
}

.fawesome {
	font-size: 3em;
	padding: 0.5em 0 0 0;
}

.form {
	padding: 3em 0 0 0;
}

/*.input {
	padding: 1em 0 1em 1em;
	width: 50%;
	margin: 0 0 2em 0;
	border: none;
	border-bottom: 1px solid #454545;
	background-color: #f9f9f9;
	font-size: 16px;
	outline: none;
}

.inputmsg {
	padding: 1em 0 12em 1em;
	width: 100%;
	margin: 0 0 3em 0;
	border: none;
	border-bottom: 1px solid #454545;
	background-color: #f9f9f9;
	font-size: 16px;
	outline: none;
}*/

.workimg {
	overflow: hidden;
	object-fit: scale-down;
	width: 100%;
	border: 1px solid;
	border-color: #e1e1e1;
}

.workimg:hover {
	opacity: 75%;
	animation: fade;
	animation-duration: 0.3s;
	animation-fill-mode: forwards;
}

#workimg1 {
	grid-column-start: 1;
	grid-column-end: 5;
	grid-row-start: 3;
	grid-row-end: 4;
}

#otherimg1 {
	grid-column-start: 1;
	grid-column-end: 4;
	grid-row-start: 3;
	grid-row-end: 4;
}

#workimg2 {
	grid-column-start: 5;
	grid-column-end: 9;
	grid-row-start: 3;
	grid-row-end: 4;
}

#otherimg2 {
	grid-column-start: 4;
	grid-column-end: 7;
	grid-row-start: 3;
	grid-row-end: 4;
}

#workimg3 {
	grid-column-start: 9;
	grid-column-end: 13;
	grid-row-start: 3;
	grid-row-end: 4;
}

#otherimg3 {
	grid-column-start: 7;
	grid-column-end: 10;
	grid-row-start: 3;
	grid-row-end: 4;
}

#workimg4 {
	grid-column-start: 1;
	grid-column-end: 5;
	grid-row-start: 4;
	grid-row-end: 5;
}

#otherimg4 {
	grid-column-start: 10;
	grid-column-end: 13;
	grid-row-start: 3;
	grid-row-end: 4;
}

#workimg5 {
	grid-column-start: 5;
	grid-column-end: 9;
	grid-row-start: 4;
	grid-row-end: 5;
}

#workimg6 {
	grid-column-start: 9;
	grid-column-end: 13;
	grid-row-start: 4;
	grid-row-end: 5;
}

.img {
	padding: 2em 0 2em 0;
	overflow: hidden;
	object-fit: scale-down;
	width: 100%;
}

.label {
	font-size: 16px;
	font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
	font-weight: 400;
	color: #454545;
  }

@media (max-width: 800px) {
	.wrapper {
		grid-template-areas:
		'header'
		'main'
		'side'
		'footer';
		grid-template-columns: 100%;
		margin: 0 1em 0 1em;
	}
  }

@media (max-width: 1200px) {
		.wrapper {
			margin: 0 3em 0 3em;
		}
	  }