@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 400;
  src: local('Dosis Regular'), local('Dosis-Regular'), url(https://fonts.gstatic.com/s/dosis/v6/zNeyWiUm5Xx9k2OXf-SMp6CWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(https://fonts.gstatic.com/s/robotoslab/v6/y7lebkjgREBJK96VQi37ZiwlidHJgAgmTjOEEzwu1L8.ttf) format('truetype');
}
@font-face {
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  src: local('Merriweather'), local('Merriweather-Regular'), url(https://fonts.gstatic.com/s/merriweather/v13/RFda8w1V0eDZheqfcyQ4EJS3E-kSBmtLoNJPDtbj2Pk.ttf) format('truetype');
}
@font-face {
  font-family: 'Indie Flower';
  font-style: normal;
  font-weight: 400;
  src: local('Indie Flower'), local('IndieFlower'), url(https://fonts.gstatic.com/s/indieflower/v8/10JVD_humAd5zP2yrFqw6pS3E-kSBmtLoNJPDtbj2Pk.ttf) format('truetype');
}
@font-face {
  font-family: 'Exo';
  font-style: normal;
  font-weight: 400;
  src: local('Exo Regular'), local('Exo-Regular'), url(https://fonts.gstatic.com/s/exo/v4/jlbBh8YAT2HMW47EJCWocA.ttf) format('truetype');
}
div {
	margin-left: auto;
	margin-right: auto;
}
a {
	font-size: 13px;
	/*border: 2px solid blue;*/
	background-color: #C0C0C0;
	text-decoration: none;
	color: black;
	padding: 2px;
	display: inline-block;
	width: 100px;
	padding-top: 15px;
	padding-bottom: 15px;
	font-family: 'Merriweather', 'Comic Sans MS';
	cursor: default;
}
a:visited {
	/*border: 2px solid blue;*/
	background-color: #C0C0C0;
	color: black;
	text-decoration: none;
}
* {
	text-align: center;
	/*margin-top: 10px;*/
}
.chart {
	width: 600px;
	height: 500px;
}
a:hover {
	/*border: 2px solid green;*/
	background-color: #A9A9A9;
}

.tab {
	color: blue;
	background-color: green;
	font-size: 30px;
	width: 200px;
}
.tab:checked {
	color: red;
}
.selected {
	/*border: 2px solid red;*/
	background-color: #808080;
}
.head {
	font-size: 50px;
	font-family: 'Roboto Slab', 'Comic Sans MS';
}
.crace {
	width: 500px;
	height: 550px;
}
.colchart {
	width: 500px;
	height: 550px;
}
h1 {
	font-family: 'Dosis';
}
.large {
	width: 200px;
}
.raceDiv {
	font-style: italic;
	width: 600px;
}
.ending {
	font-family: 'Dosis';
	width: 620px;
}
.xl {
	width: 225px;
}
.tall {
	height: 90px;
}
.sep {
	height: 10px;
    width: 28%;
    background: url(http://ibrahimjabbari.com/english/images/hr-11.png) repeat-x 0 0;
    border: 0;
}

.topimage {
	height: 100%;
	width: 101.35%;
	margin-top: -10px;
  margin-left: -10px;
  /*margin-left: -500px;
  margin-right: -500px;
  padding: -10px;*/

}
.toptext {
	margin-top: 10px;
	margin-bottom: 10px;
	width:  75%;
	text-align: center;
	font-size: 18px;
	font-family: 'Roboto Slab';
	text-align: justify;
  padding-top: 30px;
  padding-bottom: 30px;
  width: 65%;
}
.topline {
	background-color: #fff;
    border-top: 2px dashed #8c8b8b;
}

.topcontainer {
	background-color: white;
	font-size: 16px;
	margin: 0px;
	padding: 0px;
	font-family: "Exo";
	color: black;
	display: inline-block;
	cursor:pointer;
	/*margin-left: 10px;
	margin-right: 15px;*/
}
.spacing {
	display: inline-block;
	margin-left: 10px;
	margin-right: 10px;

}

#returntospec {
	position: absolute;
	top: 25px;
	left: 30px;
	padding: 7px;
	font-size: 24px;
	background-color: black;
	color: white;
	border: 2px solid white;

	cursor: pointer;
	font-family: "Exo";
}
.switchbutton {
	font-size: 20px;
	width: 300px;
	padding-top: 20px;
	padding-bottom: 20px;
}
h3 {
  font-family: "Roboto Slab";
}
/* popup stuff*/

.box {
  width: 20%;
  margin: 0 auto;
  background: rgba(255,255,255,0.2);
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}

.button {
  font-size: 1em;
  padding: 10px;
  color: #fff;
  border: 2px solid orange;
  border-radius: 20px/50px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.button:hover {
  background: orange;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
  z-index: 10;
  margin-top: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 10;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 70%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  /*color: #333;*/
  font-family: "Merriweather",Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all .5s ease-out;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  /*color: #333;*/
}
.popup .close:visited {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all .5s ease-out;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  /*color: #333;*/
}
.popup .close:hover {
  /*color: white;*/
}
.popup .content {
  max-height: 400px;
  overflow: auto;
  text-align: justify;
  font-family: "Roboto Slab";
}
.buttonlink {
	display: block;
	width: 400px;
	font-size: 30px;
	/*color: blue;
	background-color: white;
	border: 2px solid blue;*/
	margin-left: auto;
	margin-right: auto;
	transition: all .5s ease-out;
}
.buttonlink:visited {
	display: block;
	width: 400px;
	font-size: 30px;
	/*color: blue;
	background-color: white;
	border: 2px solid blue;*/
	margin-left: auto;
	margin-right: auto;
	transition: all .5s ease-out;
}
.buttonlink:hover {
	display: block;
	width: 400px;
	font-size: 30px;
	/*color: white;
	background-color: blue;
	border: 2px solid blue;*/
	margin-left: auto;
	margin-right: auto;
}
/*Narrative coloring*/
.color1 {
  color: #7cb5ec;
  border: 2px solid #7cb5ec;
  background-color: white;
}
.color1:visited {
  color: #7cb5ec;
  border: 2px solid #7cb5ec;
  background-color: white;
}
.color1:hover {
  color: white;
  background-color: #7cb5ec;
}
.color2 {
  color: #f7a35c;
  border: 2px solid #f7a35c;
  background-color: white;
}
.color2:visited {
  color: #f7a35c;
  border: 2px solid #f7a35c;
  background-color: white;
}
.color2:hover {
  color: white;
  background-color: #f7a35c;
}
.color3 {
  color: #90ee7e;
  border: 2px solid #90ee7e;
  background-color: white;
}
.color3:visited {
  color: #90ee7e;
  border: 2px solid #90ee7e;
  background-color: white;
}
.color3:hover {
  color: white;
  background-color: #90ee7e;
}
.color4 {
  color: #7798BF;
  border: 2px solid #7798BF;
  background-color: white;
}
.color4:visited {
  color: #7798BF;
  border: 2px solid #7798BF;
  background-color: white;
}
.color4:hover {
  color: white;
  background-color: #7798BF;
}
.color5 {
  color: #aaeeee;
  border: 2px solid #aaeeee;
  background-color: white;
}
.color5:visited {
  color: #aaeeee;
  border: 2px solid #aaeeee;
  background-color: white;
}
.color5:hover {
  color: white;
  background-color: #aaeeee;
}