* {
  font-family: 'Lato', sans-serif;
}

nav {
  background-color: #5d73cd;
  text-align: center;
  float: left;
  width: 100%;
}

nav a {
  display: inline-block;
  width: 25%;
  text-align: center;
  padding: 15px 0px 15px 0px;
  background-color: #5d73cd;
}

a {
  text-decoration: none;
  color: white;
  font-family: 'Lato', sans-serif;
}

a:hover {
  background-color: #c0dbff;
}

a:visited {
  /*color: black;*/
}

.social a, .intro a {
  color: black;
}

.social a:hover, .intro a:hover {
  color: #7f7f7f;
  background-color: white;
}

.hero {
  background-color: red;
  width: 50%;
  float: left;
  z-index: -1;
}

.intro {
  display: inline-block;
  text-align: justify;
  float: right;
  width: 46%;
  padding: 8% 2% 0% 2%;
  font-family: 'Lato', sans-serif;
}

#name {
  font-size: 5.25em;
  margin: 0% 0% 0% 0%;
  text-align: center;
  font-family: 'Lato', sans-serif;
}

#sub-name {
  margin: 0% 0% 0% 0%;
  text-align: center;
  color: #7f7f7f;
  font-family: 'Lato', sans-serif;
  font-size: 1.04em;
}

.icon {
  width: 30px;
  height: 30px;
  margin: 0px 0px 0px 0px;
  vertical-align: middle;
  z-index: 10;
  text-align: center;
  display: inline-block;
}

.social {
  margin-left: auto;
  margin-right: auto;
  text-decoration: none;
  text-align: center;
}

footer {
  width: 100%;
  text-align: center;
  color: #7f7f7f;
  font-size: .75em;
  float: left;
}

html, body, #map-canvas {
  height: 90%;
  margin: 0px;
  padding: 0px
}