* { padding: 0; margin: 0; }

/*a, a:visited { text-decoration: none; color: #7533f4; }
a:hover { text-decoration: underline; color: #f4b014; }
img, a.img, a:hover.img { border: none; }

img {
  max-width: 800px;
}

h1 { font-size: 18pt; margin:  5px 0 10px 0; line-height: 28px; }
h2 { font-size: 14pt; margin: 30px 0 15px 0; letter-spacing: 0.01em; border-bottom: 1px solid #ccc;  line-height: 20px;}
h3 { font-size: 13pt; }
h4 { font-size: 12pt; }
h5 { font-size: 11pt; }


p { margin: 0 0 10px 0; }
hr { border: 0px; border-top: 1px solid #ccc; height: 0px; }
ol { margin: 1em; }
ul { line-height: 1.4em; list-style-type: circle; list-style-image: none; margin: 0 0 0.5em 1.2em; }*/


/* Custom CSS Here*/
body {
  margin: 0 auto 0 auto;
  padding: 0;
  background-color: #710606;
  font-family: 'Open Sans', sans-serif;
  font-size: 100%;
  line-height: 1.375em;
}

h1 { font-size: 3.2em; line-height: 1.05em } 
h2 { font-size: 2.25em; line-height: 1.35em }
h3 { font-size: 1.75em; line-height: 1.35em }  
h4 { font-size: 1.55em; line-height: 1.35em } 

/*Overwrite Bootstrap margins*/ 
h1, h2, h3, h4 {
  margin-top: 0px;
  color: #353238;
}

.title {
  text-align: center;
  margin-bottom: 30px;
}

/* Overwriting Bootstrap button defaults*/
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active {
    background-color: #ccc;
    color: #710606;
}

#counter-label {
  color: #710606;
}

.subtitle h4, .subtitle svg{
  display: inline;
}

.subtitle {
  margin-bottom: 90px;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
}

#main-viz-wrapper, #filter-buttons {
  display: flex;
}

#filter-buttons {
  flex-direction: column;
}

#filter-buttons button {
  margin-bottom: 10px;
  font-size: 1.75em; 
  width: 100%;
}

#bottom-panel {
  opacity: 0;
  margin: 80px auto;
  padding-right: 20px;
  border-right: 1px solid #ccc;
}

#bottom-panel-wrapper {
  flex: 0 0 12%;
}

#filler {
  flex: 0 0 12%;
}

#canvas-wrapper {
  flex: 0 0 76%;
  position: relative;
}

.content {
  margin: 0px auto;
  padding: 50px 50px;
  background-color: #ffffff;
  width: 95%;
  /*border-radius: 5px;*/
}

.svg-canvas {
  margin-left: auto;
  margin-right: auto;
  display: block; 
}

#caption {
  margin-bottom: 10px;
}

#filter-buttons {
  display: flex;
  justify-content: space-between;
}

#counter-header {
  font-size: 2.25em;
  text-align: center;
}

#counter-label {
  font-size: 3.5em;
  width: 111px;
  margin: 0;
}

.footnote {
  margin-bottom: 30px;
}



/* Tooltip */
#tooltip {
  position: absolute;
  left: 900px;
  top: 85px;
  width: 250px;
  height: auto;
  padding: 10px;
  background-color: white;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  border: 1px solid #ccc;
}

#tooltip svg, #tooltip h4 {
  display: inline-block;
}

#tooltip.hidden {
  display: none;
}

#tooltip circle {
  fill: black;
}