:root {
  --main-board-color: rgba(255, 127, 80, 0);
  --main-page-margin: 10px;
}
/* Style for our header texts
* --------------------------------------- */
h1 {
	font-size: 4em;
	font-family: 'Lato';
	color: rgb(0, 0, 0);
	margin:0;
	padding:0;
}
h2 {
  margin: 0;
  padding: 0;
  font-size: 1.7em;
}
p {
  margin: 0;
  padding: 0;
  font-size: 1.7em;
}
li {
  margin: 0;
  padding: 0;
  font-size: 1.4em;
}

/* Centered texts in each section
* --------------------------------------- */
/* .section{
	text-align:center;
} */

/* Overwriting styles for control arrows for slides
* --------------------------------------- */
.controlArrow.prev {
	left: 50px;
}
.controlArrow.next {
	right: 50px;
}

/* Backgrounds will cover all the section
* --------------------------------------- */
.section {
	background-size: cover;
}
.slide {
	background-size: cover;
}

/* Defining each section background and styles
* --------------------------------------- */
/* Introduction
* --------------------------------------- */
#title {
	background-image: url(../imgs/title_background.jpg);
}
#title_text {
	top: 5%;
	left: 5%;
  position: relative;
  width: 1600px;
  padding: 2% 3% 2% 3%;
  background: rgba(255, 255, 255, 0.356);
}

#title_text h1,h3 {
	padding: 0;
	margin: 0;
}
/* About the Visualization
* --------------------------------------- */
#background_bw {
	background-image: url(../imgs/background.jpeg);
	padding: 3% 3% 3% 3%;
}

/* Bar Chart Page
* --------------------------------------- */
#barChart_title {
  margin: var(--main-page-margin);
  border: 1px solid var(--main-board-color);
}

#barChart_content {
  position: absolute;
  top: 55%;
  transform: translateY(-55%);

  margin: var(--main-page-margin);
  border: 1px solid var(--main-board-color);
}

#barChart_text {
  left: 5%;
  padding: 10px;
  width: 1600px;
  margin: 30px;
  position: absolute;
  top: -400px;
  float: left;
  border: 1px solid var(--main-board-color); 
  
}

#barChart_container {
  width: 700px;
  height: 610px;
  /* width: 45%; */
  margin: 10px;
  position: absolute;
  top: -250px;
  border: 1px solid var(--main-board-color);
  
}
#barChart {
  text-align: center;
}

/* pie Chart Page
* --------------------------------------- */

#pieChart_container {
  width: 700px;
  height: 520px;
  /* width: 45%; */
  margin: 10px;
  position: absolute;
  left:750px;
  top: -200px;
  /* float: inline-end; */
  border: 1px solid var(--main-board-color);
}
#pieChart {
  text-align: center;
}
/* US Map Page
* --------------------------------------- */
#usMap_title {
  margin: var(--main-page-margin);
  border: 1px solid var(--main-board-color);
}

#usMap_content {
  position: absolute;
  top: 55%;
  transform: translateY(-55%);

  margin: var(--main-page-margin);
  border: 1px solid var(--main-board-color);
}

#usMap_text {
  left: 5%;
  padding: 10px;
  width: 1600px;
  margin: 30px;
  position: absolute;
  top: -400px;
  float: left; 
  border: 1px solid var(--main-board-color); 
}

#circular_container {
  width: 700px;
  height: 650px;
  /* width: 55%; */
  /* margin: 0px; */
  position: absolute;
  top: -300px;
  left:800px;  
  float: left;
  border: 1px solid var(--main-board-color);
}
#circular {
  text-align: center;
}
#usMap_container {
  width: 750px;
  height: 650px;
  /* width: 40%; */
  /* margin: 10px; */
  position: absolute;
  top: -250px;
  /* left:1000px; */
  float: left;
  border: 1px solid var(--main-board-color);
}
#usMap {
  text-align: center;
}
/* Circular Chart Page
* --------------------------------------- */
#circularChart_title {
  margin: var(--main-page-margin);
  border: 1px solid var(--main-board-color);
}

#circularChart_content {
  position: absolute;
  top: 55%;
  transform: translateY(-55%);

  margin: var(--main-page-margin);
  border: 1px solid var(--main-board-color);
}

#circularChart_text {
  left: 5%;
  padding: 10px;
  width: 20%;
  margin: 30px;

  float: left;
  border: 1px solid var(--main-board-color); 
}

#circularChart_container {
  width: 1024px;
  height: 520px;
  width: 85%;
  margin: 10px;

  float: left;
  border: 1px solid var(--main-board-color);
}
#circularChart{
  text-align: center;
}
/* Scatter Plot Page
* --------------------------------------- */
#scatterPlot_title {
  margin: var(--main-page-margin);
  border: 1px solid var(--main-board-color);
}

#scatterPlot_content {
  position: absolute;
  top: 55%;
  transform: translateY(-55%);

  margin: var(--main-page-margin);
  border: 1px solid var(--main-board-color);
}

#scatterPlot_text {
  left: 5%;
  padding: 10px;
  width: 1600px;
  margin: 30px;

  float: left;
  border: 1px solid var(--main-board-color); 
}

#scatterPlot_container {
  width: 1024px;
  height: 520px;
  width: 90%;
  margin: 10px;

  float: left;
  border: 1px solid var(--main-board-color);
}

#logCheckbox_container {
  width: 200px;
  height: 25px;
  float: left;
  margin-left: 1275px;
  margin-top: 0px;
  margin-bottom: -20px;
  border: 1px solid var(--main-board-color); 
}

#scatterPlot {
  text-align: center;
}
/* Donut Chart Page
* --------------------------------------- */
#donutChart_title {
  margin: var(--main-page-margin);
  border: 1px solid var(--main-board-color);
}

#donutChart_content {
  position: absolute;
  top: 55%;
  transform: translate(0%, -55%);
  /* text-align: center; */
  margin: var(--main-page-margin);
  border: 1px solid var(--main-board-color);
}

#donutChart_text {
  left: 5%;
  padding: 10px;
  width: 90%;
  margin: 10px;

  float: left; 
  border: 1px solid var(--main-board-color); 
}

#donutChart_container {
  width: 1024px;
  height: 520px;
  width: 90%;
  margin: 10px;

  float: left;
  border: 1px solid var(--main-board-color);
}
#donutChart {
  text-align: center;
}

/* References
* --------------------------------------- */
#acks {
	background-image: url(../imgs/ref.jpg);
	padding: 3% 52% 6% 6%;
}

body {
  font-family: 'Roboto', sans-serif;
  color: #000000;
}

/* Add shadow effect to chart. If you don't like it, get rid of it. */
svg {
  -webkit-filter: drop-shadow( 0px 3px 3px rgba(0,0,0,.3) );
  filter: drop-shadow( 0px 3px 3px rgba(0,0,0,.25) );
}

/*Styling for the lines connecting the labels to the slices*/
polyline{
  opacity: .3;
  stroke: black;
  stroke-width: 2px;
  fill: none;
}

/* Make the percentage on the text labels bold*/
text tspan {
  font-style: normal;
  font-weight: bold;
  font-size: 1.2em;
}

/* In biology we generally italicise species names. */
text {
  font-size: 1em;
  font-style: italic;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.tooltip h4{
  margin:0;
  font-size:16px;
}

.tooltip {
  background:rgba(0,0,0,0.9);
  position: absolute;
  pointer-events: none;
  border:1px solid grey;
  border-radius:5px;
  font-size:12px;
  width:auto;
  padding:4px;
  color:white;
  opacity:0;
}

.grid line {
  stroke: lightgrey;
  stroke-opacity: 0.7;
  shape-rendering: crispEdges;
}

.buttons {
  margin-top: 70px;
}

div.controls {
  float: right;
  margin-right: 193px;
  margin-top: 100px;
}

label {
  font-size: 1em;
  font-style: italic;
  -webkit-filter: drop-shadow( 0px 3px 3px rgba(0,0,0,.3) );
  filter: drop-shadow( 0px 3px 3px rgba(0,0,0,.25) );
}