#nav {
  width: 280px;
  margin: 0 auto;
}

.navContainer {
  float: left;
  margin-top: 15px;
  margin-bottom: 20px;
}

.btn {
  float: left;
  border: 1px solid #222;
  margin: 0 0 0 10px;
}

.desktop_interactive, .section_C, #controls {
  display: none;
}

.activeBtn {
  background-color: #fff;
}

#gallery {
  clear: both;
}

#tooltip {
  font-size: 12pt;
  visibility: hidden;
  position: absolute;
  background-color: #eee;
  padding: 10px;
  opacity: 0.9;
}

.name, .country, .elevation {
  font-size: 8pt;
  font-weight: 500;
  padding: 3px;
  margin-bottom: 10px;
}

.populated {
  font-weight: 800;
  color: #222;
  display: block;
  margin: 3px 0 10px 3px;
  padding: 3px;
  background-color: rgba(226, 240, 240, 0.7);
}

.circle_map {
  border-radius: 50%;
  width: 5px;
  height: 5px;
  position: absolute;
  display: block;
}

#elevationGraph svg {
  margin: 10px 0 5px 0;
  border: 1px solid #ddd;
}
#elevationGraph svg .yAxis path {
  fill: none;
}
#elevationGraph svg .yAxis line {
  stroke-width: 1pt;
  fill: none;
  stroke: #222;
  shape-rendering: crispEdges;
}
#elevationGraph svg .yAxis text {
  font-size: 7pt;
}

#controls {
  float: left;
  margin-bottom: 40px;
}

.subinfo {
  width: 350px;
}

#key {
  clear: left;
  display: block;
  margin: 0 0 -80px 20px;
  font-family: "Helvetica", Arial, sans-serif;
}

.circle {
  border-radius: 50%;
  display: inline-block;
}

/*controls*/
#capitals {
  color: #222;
  font-size: 10pt;
  padding: 5px;
  border-bottom: 1px dotted #999;
  margin: 3px 0 0 30px;
  width: 90px;
  cursor: pointer;
  float: left;
  font-family: "Times New Roman", serif;
}

#capitals:hover {
  opacity: 0.7;
  transition: background-color 0.5s ease;
  transition: border-bottom 0.5s ease;
  border-bottom: 1px solid #222;
}

#selectTitle {
  font-family: "Times New Roman", serif;
  float: left;
  margin: 4px 10px 10px 20px;
  font-size: 16pt;
}

.littleNote {
  font-family: "Times New Roman", serif;
  font-size: 9pt;
  float: left;
  display: block;
  margin: 9px 0 20px 10px;
}

form {
  float: left;
  margin-bottom: 20px;
}

select option {
  font-size: 16pt;
}

select optgroup {
  font-size: 26pt;
}

#map {
  height: 1100px;
  width: 1200px;
}
#map .loading {
  position: absolute;
  color: #222;
  margin: 380px 0 0 550px;
  width: 200px;
  height: 50px;
  background-color: #fff;
  padding: 10px 20px;
  opacity: 0.7;
  display: none;
}
#map .loading img {
  padding: 10px;
  float: left;
}
#map .loading span {
  display: block;
  margin-top: 10px;
}

#draw_maps {
  float: left;
}

#map-controls {
  width: 70px;
  height: 330px;
  position: absolute;
  opacity: 0.8;
  margin: 20px 0 0 0px;
  float: left;
  color: #999;
}
#map-controls .slider-mark {
  /*background-color: #333;*/
  position: absolute;
  padding: 0px 5px 0px 5px;
}
#map-controls .reset {
  font-size: 9pt;
  display: block;
  cursor: pointer;
  margin: 20px 0 0 24px;
  font-weight: 600;
}
#map-controls .reset:hover {
  opacity: 0.5;
}
#map-controls .zoom_in {
  margin: 15px 0 0 25px;
}
#map-controls .zoom_out {
  margin: 260px 0 0 25px;
}
#map-controls .ui-slider .ui-slider-handle {
  width: 20px;
  height: 20px;
  background: url("../../assets/images/slide_handle_2.png") no-repeat;
  overflow: hidden;
  position: absolute;
  margin-left: -4px;
  border-style: none;
  cursor: pointer;
  box-shadow: 2px 2px 3px #111;
}
#map-controls .ui-slider-range {
  background: #111;
  border-radius: 0px;
}
#map-controls .ui-slider a {
  outline: none;
}
#map-controls .ui-slider {
  clear: both;
}
#map-controls .ui-widget-content {
  background: #f2f2f2;
}

#slider-vertical {
  position: absolute;
  margin: 40px 0 0 32px;
  height: 200px;
  width: 5px;
}