/* CSS Document */
body {
  background-color:#fdfdfe;
  color: #000080;
  font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1 {
	text-align:center;
}

h2 {
	text-align:center;
	padding:8px;
}

h3 {
	text-align:center;
}

.header {
  border-radius: 8px;
  grid-area: header;
  vertical-align:central;
  text-align: center;
  padding: 5px;
  font-size: 36px;
}

.header:hover {
  color: #00a;
}

.who {
  grid-area: who;
}

.what {
  grid-area: what;
}

.expertise {
  grid-area: expertise;
}

.projects {
  grid-area: projects;
}

.roadmap {
  grid-area: roadmap;
}

.picwho {
  border-radius: 10px;
  border-style:none;
  grid-area: image1;
  display: block;
  width: auto;
  height: auto;
  margin-left: auto; 
  margin-right: auto;
}

.picwhat {
  border-radius: 10px;
  border-style:none;
  grid-area: image2;
  width: auto;
  height: auto;
  display: block;
  margin-left: auto; 
  margin-right: auto;
}

.picexpertise {
  border-radius: 10px;
  border-style:none;
  grid-area: image3;
  width: auto;
  height: auto;
  display: block;
  margin-left: auto; 
  margin-right: auto;
}

.picprojects {
  border-radius: 10px;
  border-style:none;
  grid-area: image4;
  width: auto;
  height: auto;
  display: block;
  margin-left: auto; 
  margin-right: auto;
}

.picroadmap {
  border-radius: 10px;
  border-style:none;
  grid-area: image5;
  width: auto;
  height: auto;
  display: block;
  margin-left: auto; 
  margin-right: auto;
}

.content1 {
	border-radius: 10px;
	grid-area: content1;
	vertical-align: text-top;
	font-size: 20px;
	color: #707070;
	margin: 8px;
}

.content2 {
	border-radius: 10px;
	grid-area: content2;
	vertical-align: text-top;
	font-size: 18px;
	color: #707070;
	margin: 8px;
}

.overview {
  border-radius: 10px;
  grid-area: subimg;
  /* display: block;  */
  width: 90%;
  height: auto;
  margin-left: auto; 
  margin-right: auto;
}

.footer {
  grid-area: footer;
  border-radius: 10px;
  padding: 10px;
  background-color:#fdfdfe;
  color: #c0c0c0;
  text-align:center;
}

.box {
  background-color: #006;
  color: #eee;
  border-radius: 8px;
  padding: 10px;
  max-height: 50px;
  text-align:center;
}

.box:hover {
  background-color: #009 !important;
  color: #fff;
}

.logo{  
  height: 64px;
  vertical-align: middle;
}    

.grid-home {
  background-color:#fff;
  /*border-radius: 10px;*/
  margin-left:2%;
  margin-right:2%;
  margin-bottom:0px;
  display: grid;
  grid-gap: 1em;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 72px 40px 148px 7fr 1fr;
  grid-template-areas:
    "header header header header header"
    "who what expertise projects roadmap"
    "image1 image2 image3 image4 image5"
    "content1 content1 content1 content1 content1"
    "footer footer footer footer footer";
}

.grid-subsec {
  background-color:#fff;
  /*border-radius: 10px;*/
  margin-left:2%;
  margin-right:2%;
  margin-bottom:0px;
  display: grid;
  grid-gap: 1em;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 72px 40px 148px 7fr auto auto;
  grid-template-areas:
  	"header header header header header"
    "who what expertise projects roadmap"
    "image1 image2 image3 image4 image5"
    "content2 content2 content2 content2 content2"
    "subimg subimg subimg subimg subimg"
    "footer footer footer footer footer";
}

@media only screen and (max-width: 800px)  {
  .grid-home {
	display: grid;
	grid-gap: 1em;
	grid-template-columns: auto;
	grid-template-rows: auto;
	grid-template-areas:
	"header"
	"who"
	"what"
	"expertise"
	"projects"
	"roadmap"
	"content1"
	"footer";
  } 

  .grid-subsec 
  {	
	display: grid;
	grid-gap: 1em;
	grid-template-columns: auto;
	grid-template-rows: auto auto auto auto auto auto auto auto auto;
	grid-template-areas:
	"header"
	"who"
	"what"
	"expertise"
	"projects"
	"roadmap"
	"content2"
	"subimg"
	"footer";
  }

  .picroadmap,
  .picprojects,
  .picwhat,
  .picwho,
  .picexpertise {
	  display: none;
  }
}