@font-face {
    font-family: 'Franchise-Bold';
    src: url('../font/franchisebold.eot');
    src: url('../font/franchisebold.eot?#iefix') format('embedded-opentype'),
         url('../font/franchisebold.woff') format('woff'),
         url('../font/franchisebold.ttf') format('truetype'),
         url('../font/franchisebold.svg#brn') format('svg');
    font-weight: normal;
    font-style: normal;
    text-shadow: rgba(0, 0, 0, .01) 0 0 1px);
}
@font-face {
    font-family: 'OpenSans-CondensedBold';
    src: url('../font/opensanscondbold.eot');
    src: url('../font/opensanscondbold.eot?#iefix') format('embedded-opentype'),
         url('../font/opensanscondbold.woff') format('woff'),
         url('../font/opensanscondbold.ttf') format('truetype'),
         url('../font/opensanscondbold.svg#brn') format('svg');
    font-weight: normal;
    text-shadow: rgba(0, 0, 0, .01) 0 0 1px);
}
@font-face {
    font-family: 'OpenSans-Extrabold';
    src: url('../font/OpenSans-ExtraBold-webfont.eot');
    src: url('../font/OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/OpenSans-ExtraBold-webfont.woff') format('woff'),
         url('../font/OpenSans-ExtraBold-webfont.ttf') format('truetype'),
         url('../font/OpenSans-ExtraBold-webfont.svg#brn') format('svg');
    font-weight: normal;
    text-shadow: rgba(0, 0, 0, .01) 0 0 1px);
}
a{
  font-family: 'Franchise-Bold';
  color: #5D5D5D;
  font-size: 22px;
  text-decoration: none;
}
h1{
  font-family: 'Franchise-Bold';
  margin:0;
  color:#932E2E;
}
body {
  width:100%;
  margin:0 auto;
  padding:0px;
  border:0;
  background: url('background.svg') repeat center center;
}
#start p{
  margin-bottom:0px;
}
p.smaller{
  font-size: 25px;
}
.ie10 #graph, .ie9 #graph{
  display: inline-block;
  position: relative;
  width: 100%;
  vertical-align: middle;
  padding-bottom: 60%;
}
.ie10 #svg, .ie9 #svg{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
#graph{
  margin:0 auto;
  display: inline-block;
  position: relative;
  width: 100%;
  vertical-align: middle; /* top | middle | bottom ... do what you want */
}
svg:not(:root) {
    width:100%;
    height:100%;
}
#wrapper{
  width: 100%;
  margin:0 auto;
}
#container{
  margin: 0 auto;
  width:100%;
}
#choose{
  position:relative;
  left:43%;
  height:80px;
  bottom:60px;
  padding: 0px 0 0 3%;
  margin-top:-65px;
  width:400px;
}
.ie10 #choose, .ie9 #choose{
  left:41%;
}
#filters{
  float: left;
}
#filters li{
  float:left;
  list-style: none;
  margin-right: 10px;
}

#filters a {
  opacity: .5;
  cursor:pointer;
  width:30px;
  display:block;
}

#filters a.active {
  opacity: 1;
}
#filters a.active:hover {
  opacity: .75;
}
#mydropdown{
  margin-top: 15px;
  float:left;
}
.active {
  opacity: .5;
}
.left{
  left:0px !important;
  -webkit-animation-duration: 1s;
  -webkit-animation-name: slidein;
  -moz-animation-duration: 1s;
  -moz-animation-name: slidein;
  -o-animation-duration: 1s;
  -o-animation-name: slidein;
  -ms-animation-animation-duration: 1s;
  -ms-animation-animation-name: slidein;
  animation-animation-duration: 1s;
  animation-animation-name: slidein;
}

@-webkit-keyframes slidein {
  from {
    margin-left: 43%;
  }

  to {
    margin-left: 0px;
  }
}
@media screen and (min-width: 768px) {
  #choose{
    margin-top:-50px;
  }
}
@media screen and (min-width: 1200px) {
  #choose{
    margin-top:-150px;
  }
}