h1, h2, h3, h4, h5, h6 {
  font-family: 'Nunito', sans-serif; }

navbar + div {
  padding-top: 80px; }

html, body, .content {
  height: 100%; }

.fa.fa-fw.fa-github {
  border-radius: 150%;
  border-color: red;
  color: #FF33FF; }

.fa.fa-fw.fa-github:hover {
  color: purple; }

#info {
  height: 100%;
  background-color: black;
  /*small view*/ }
  #info .bubble {
    opacity: .7;
    display: block;
    position: absolute;
    background-color: white;
    z-index: 10; }
  #info .fa.fa-fw {
    font-size: 30px; }
  #info h1 {

    color: #E3ECFF; }
  #info .main-content {
    height:100%; }
  #info .container-fluid {
    height:100%; }
    #info .row {
      height:100%; }
  #info .container-fluid {
    font-size: 1.5em;
    color: #E3ECFF; }
  #info img.center {
    display: block;
    margin-left: auto;
    margin-right: auto; }
  #info .img-circular {
    opacity: .6;
    border-radius: 50%;
    width: 220px;
    height: 220px;
    background: url(../img/profile.jpg) no-repeat;
    background-position: 50% 0%; }
  #info .vertical-middle {
    position: relative;
    top: 40%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(40%);
    -ms-transform: translateX(-50%) translateY(40%);
    -o-transform: translateX(-50%) translateY(40%);
    -webkit-transform: translateX(-50%) translateY(40%);
    transform: translateX(-50%) translateY(40%);}

  #info .links {
    padding-top: 25px;
    padding-bottom: 25px; }

#googlemap, #googlemap #map, #googlemap .container-fluid {
  height: 100%; }

#googlemap .map-container {
  height: calc(100% - 100px);
  padding-top: 15px; }

#googlemap .col-sm-2, #googlemap .col-sm-4 {
  margin-top: 10px; }

#googlemap p {
  margin: 8px 0 0px; }

@media (min-width: 768px) {
  #googlemap .map-container {
    height: calc(100% - 50px); } }

#socket {
  height: 100%; }
  #socket .container-fluid {
    height: 100%; }
    #socket .container-fluid .row {
      height: 100%; }
  #socket .chat-wrapper {
    position: relative;
    height: 100%; }
  #socket .chat-box {
    border: 1px solid #848282;
    background-color: #e5e5e5;
    padding: 10px 0;
    top: 10%;
    left: 0;
    right: 5%;
    bottom: 0;
    height: 80%;
    position: absolute; }
  #socket #message-box {
    position: absolute;
    width: auto !important;
    height: auto !important;
    top: 15px;
    bottom: 115px;
    left: 0;
    right: 0;
    overflow-y: scroll; }
  #socket #message-box::-webkit-scrollbar {
    width: 10px; }
  #socket #message-box::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: grey; }
  #socket #input-box {
    resize: none;
    height: 75px;
    margin: 20px 0px 0px 0px;
    padding: 0;
    bottom: 5%;
    width: 90%;
    position: absolute;
    box-sizing: border-box;
    left: 5%; }
  @media (max-width: 760px) {
    #info h1 {
      font-size:24px;
    }
    #socket .chat-box {
      right: 0; }
    #socket .chat-wrapper {
      height: 300px; } }
#d3 h3{
  color:white;
}
#d3 .main-content {
  background-color: black;
height:100%;
}
#d3 .container-fluid{
  background-color: black;
}
#d3{
  height:100%;
}
#d3 .fill {
  fill: #3987c9; }

#d3 .graticule {
  fill: none;
  stroke: #777;
  stroke-width: .5px;
  stroke-opacity: .5; }
#flappy h3{
  color:white;
  text-align: center;
  margin-bottom: 25px;
}
#d3 .land {
  fill: #222; }

#d3 .boundary {
  fill: none;
  stroke: #fff;
  stroke-width: .5px; }

#d3 #tooltip {
  display: none;
  position: absolute;
  text-align: center;
  width: 150px;
  height: 75px;
  line-height: 90px;
  font: 12px sans-serif;
  background: lightsteelblue;
  border: 0;
  border-radius: 8px;
  pointer-events: none; }
  #d3 #tooltip p {
    position: relative;
    top: 50%;
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%); }

#d3 #timeline {
  overflow: auto; }
  #d3 #timeline circle {
    r: 7px; }
  #d3 #timeline text {
    font-size: 15px;
    fill: white; }
  #d3 #timeline path.domain {
    stroke: white; }

#d3 #globe g circle {
  r: 2px; }

#d3 .links {
  padding-top: 25px;
  padding-bottom: 25px; }

#babylon {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0; }
  #babylon #renderCanvas {
    width: 100%;
    height: 100%;
    -ms-touch-action: none;
    touch-action: none; }

#nike .btn {
  width: 100%; }

#nike a {
  color: white; }
#nike .shoe{
  padding: 10px 0px 10px 0px;
}
#nike .row {
  padding:10px 0px 10px 0px;
}
@media (min-width: 768px) {
  #nike .btn {
    width: 150px; } }

#login {
  position: relative; }

#game {
  height: 100%; }
  #game .container-fluid {
    height: 100%; }
    #game .container-fluid .row {
      height: 100%; }
      #game .container-fluid .row .col-sm-7 {
        height: 100%; }
  #game .chat-wrapper {
    position: relative;
    height: 100%; }
  #game .chat-box {
    border: 1px solid #848282;
    background-color: #e5e5e5;
    padding: 10px 0;
    top: 25%;
    left: 0;
    right: 5%;
    bottom: 0;
    height: 70%;
    position: absolute; }
  #game #message-box {
    position: absolute;
    width: auto !important;
    height: auto !important;
    top: 15px;
    bottom: 115px;
    left: 0;
    right: 0;
    overflow-y: scroll; }
  #game #message-box::-webkit-scrollbar {
    width: 10px; }
  #game #message-box::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: grey; }
  #game #input-box {
    resize: none;
    height: 75px;
    margin: 20px 0px 0px 0px;
    padding: 0;
    bottom: 5%;
    width: 90%;
    position: absolute;
    box-sizing: border-box;
    left: 5%; }
  @media (max-width: 760px) {
    #game .chat-box {
      right: 0; }
    #game .chat-wrapper {
      height: 300px; } }

#flappy {
  background-color: black; }

#whereami, #whereami #map, #whereami .container-fluid {
  height: 100%; }

#whereami .map-container {
  height: calc(100% - 100px);
  padding-top: 15px; }

@media (min-width: 768px) {
  #whereami .map-container {
    height: calc(100% - 50px); } }

#projects h2 {
  text-shadow: 5px 0px 8px grey; }

#projects .col-xs-6 {
  min-height: 100px; }

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; }

.navbar-inverse {
  margin: 0;
  background-color: black;
  border-color: white;
  z-index: 1; }
  .navbar-inverse .navbar-nav > li > a {
    color: white;
    font-size: 22px; }
    .navbar-inverse .navbar-nav > li > a:hover {
      color: #4582ec; }