#map {
    height: 400px;
    width: 100%;
    margin: 16px;
    display: inline-block;
}

#side-bar {
    width: 100%;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    line-height: 16px;
}

#under-bar {
    padding: 20px;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    line-height: 16px;
}

#panel-slider {
    width: 100%;
    padding: 0px;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    line-height: 16px;
}

#title-panel {
    width: 100%;
    padding: 16px;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    line-height: 16px;
}

#info-panel {
    width: 100%;
    padding: 16px;
    display: inline-block;
    vertical-align: top;
    text-align: left;
    line-height: 16px;
}

#scale-slider {
    width: 100%;
    padding: 0px;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    line-height: 16px;
}

#color-picker {
    width: 100%;
    padding: 0px;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    line-height: 16px;
}

#panel-label {
    width: 16%;
    padding: 20px;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    line-height: 42px;
}

.range-slider {
    width: 50%;
}

.rescaler-slider {
    width: 50%;
}


#forward {
    float: right;
}

#reverse {
    float: left;
}

#grow {
    float: right;
}

#shrink {
    float: left;
}


#positive {
    float: center;
}

#negative {
    float: center;
}

.leaflet-popup-content p {
    margin: 0.2em 0;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
  color: white;
  padding: 15px;
  font-size: 30px;
  width: 65px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
  padding: 15px;
  font-size: 30px;
  width: 65px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}

.fa-linkedin {
  background: #0076A8;
  color: white;
  padding: 15px;
  font-size: 30px;
  width: 65px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}

.fa-github {
  background: #333;
  color: white;
  padding: 15px;
  font-size: 30px;
  width: 65px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}


.hero-image-banner {
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3)), url("https://github.com/kylefeffer/leaflet-lab/blob/master/assets/Aircraft-Banner.jpg?raw=true");
  height: 150px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

h1 {
    color:white;
    text-shadow: 0.1em 0.1em 0.1em black;
    font-size: 45px;
    padding-left: 16px;
}

h2 {
    color: #000000;
    font-size: 35px;    
}

h3 {
    color: #000000;
    font-size: 25px;    
}

h4 {
    color: #000000;
    font-size: 20px;    
}
h5 {
    color: #000000;
    font-size: 15px;    
}
h6 {
    color: #000000;
    font-size: 12px;    
}


body {

    background-color: white;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    width: auto;
}

p {
    color: darkslategrey;
    font-size: 12px;    
}