@charset "UTF-8";
/* CSS Document */

@font-face {
  font-family:Atkinson;
  src:url("../Font/AtkinsonHyperlegibleMono-Regular.ttf");
}

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

body {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	background-color:black;	
	margin: auto;
	padding:20px;
}

h1 {	
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	color: white;
	font-weight: normal;
	line-height: 95%;
	font-size: 120px;
}

h2 {	
	text-transform: uppercase;
	color: white;
	font-size: 20px;
	line-height: 1.1em;
	font-weight:normal;
	font-family:Atkinson;
}

h3 {	
	color: white;
	font-size: 1vw;
	line-height: 1.1em;
	font-weight:normal;
	
}

h4 {
    color: white;
	font-size: 35px;
	line-height: 1.1em;
	width:700px;
	padding-bottom: 75px;
	font-weight:normal;
}

h5 {color: white;
	font-size: 55px;
	line-height: 1.2em;
	width:700px;
	font-weight:normal;
}

h6 {
    color:#8F99FB;
	font-size: 15px;
	line-height: 1.3em;
	font-weight:normal;
	font-family: Atkinson;
}

h7 {
    color:#8F99FB;
	font-size: 20px;
	line-height: 1.3em;
	padding-bottom: 20px;
	font-weight:normal;
	font-family: Atkinson;
}

p {
    color: white;
	font-size: 20px;
	line-height: 1.3em;
	padding-bottom: 20px;
	width: 400px;
}

img {
	max-width:1280px;
	min-width: 400px;
	height:auto;
	display: block;
	margin:auto;
}


/* unvisited link */
a:link, a:visited {
  color: #8F99FB;
	text-decoration: none;
}

/* mouse over link */
a:hover {
  color: white;
}

.grid-container {
  display: grid;
  grid-template-areas: auto auto auto;
	column-gap: 10px;
	justify-content: center;
	grid-template-columns:400px;
	grid-template-rows:auto;
}

.grid-container> div {
  	color: white;
  	text-align: left;
	font-size: 1vw;
      align-items: center; 
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}

.item1 {grid-column:1 / span 3}

.item2 {
	grid-column-start: 1;
	grid-column-end: 2;
	padding-bottom: 25px;
	Padding-top:75px;
}

.item3 {
	grid-column-start: 2;
	grid-column-end: 3;
	padding-bottom: 25px;
	Padding-top:75px;
}  

.item4 {
	grid-column-start: 3;
	grid-column-end: 4;
	padding-bottom: 25px;
	Padding-top:75px;
	width:400px;
} 

.item10 {
	grid-column-start: 1;
	grid-column-end: 2;
	padding-bottom: 25px;
	Padding-top:75px;
}

.item11 {
	grid-column-start: 2;
	grid-column-end: 3;
	padding-bottom: 25px;
	Padding-top:75px;
}  

.item12 {
	grid-column-start: 3;
	grid-column-end: 4;
	padding-bottom: 25px;
	Padding-top:75px;
	width:400px;
} 

.header {grid-column:1 / span 3}
.Projectname {grid-column:1 / span 3;}
.intro {grid-column:1 / span 2;}
.contact {	grid-column:3 / span 1;	padding-top: 5px}
.footer {grid-column:1 / span 1;}
.phone {grid-column:2 / span 2;}

@media only screen and (max-width: 600px) {
img, .image-thumbnail {width: 85vw; height:85vw}
	p, h6 {font-size: 3.5vw; width: 85vw; padding-bottom: 10px; padding-left: 15px;}
	h2 {font-size:4vw; width: 85vw}
	h3 {font-size: 3vw; width: 85vw;}
	h4 {font-size: 5vw; line-height: 1.2em; padding-bottom: 40px; padding-left: 15px;width: 400px}
	h5 {font-size: 6vw; line-height: 1.2em; padding-bottom: 10px; padding-left: 15px; width: 400px}
	h1 {font-size:9vw;padding-left: 15px; width: 400px}
	.intro {grid-column:1 / span 3}
	.contact {grid-column:1 / span 3; }
	.projectname {grid-column:1 / span 3}
	.item1 {grid-column:1 / span 3; padding-bottom: 50px;}
	.item2{grid-column:1 / span 3; padding-top: 75px} 
	.item3{grid-column:1 / span 3; padding-top: 20px} 
	.item4{grid-column:1 / span 3; padding-top: 20px; padding-bottom: 75px;}
	.item10{grid-column:1 / span 3; padding-top: 75px}
	.item11{grid-column:1 / span 3; padding-top: 30px}
	.item12{grid-column:1 / span 3; padding-top: 30px}
	.footer {grid-column:1 / span 3}
	.phone {grid-column:1 / span 3}
}

@media only screen and (min-width: 768px){}