/*@import url("/count/35add2");
*/
@font-face {
  font-family: 'Shift';
  src:  url('webfonts/Shift-Bold.eot');
  src:  url('webfonts/Shift-Bold.woff2') format('woff2'),
        url('webfonts/Shift-Bold.woff') format('woff');
}

@font-face {font-family: 'ProximaNova-Bold';src: url('webfonts/35ADD2_0_0.eot');src: url('webfonts/35ADD2_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/35ADD2_0_0.woff2') format('woff2'),url('webfonts/35ADD2_0_0.woff') format('woff'),url('webfonts/35ADD2_0_0.ttf') format('truetype');}
@font-face {font-family: 'ProximaNova-Medium';src: url('webfonts/35ADD2_1_0.eot');src: url('webfonts/35ADD2_1_0.eot?#iefix') format('embedded-opentype'),url('webfonts/35ADD2_1_0.woff2') format('woff2'),url('webfonts/35ADD2_1_0.woff') format('woff'),url('webfonts/35ADD2_1_0.ttf') format('truetype');}
@font-face {font-family: 'ProximaNova-MediumIt';src: url('webfonts/35ADD2_2_0.eot');src: url('webfonts/35ADD2_2_0.eot?#iefix') format('embedded-opentype'),url('webfonts/35ADD2_2_0.woff2') format('woff2'),url('webfonts/35ADD2_2_0.woff') format('woff'),url('webfonts/35ADD2_2_0.ttf') format('truetype');}
@font-face {font-family: 'ProximaNova-Regular';src: url('webfonts/35ADD2_3_0.eot');src: url('webfonts/35ADD2_3_0.eot?#iefix') format('embedded-opentype'),url('webfonts/35ADD2_3_0.woff2') format('woff2'),url('webfonts/35ADD2_3_0.woff') format('woff'),url('webfonts/35ADD2_3_0.ttf') format('truetype');}
@font-face {font-family: 'ProximaNova-Semibold';src: url('webfonts/35ADD2_4_0.eot');src: url('webfonts/35ADD2_4_0.eot?#iefix') format('embedded-opentype'),url('webfonts/35ADD2_4_0.woff2') format('woff2'),url('webfonts/35ADD2_4_0.woff') format('woff'),url('webfonts/35ADD2_4_0.ttf') format('truetype');}
@font-face {font-family: 'ProximaNova-SemiboldIt';src: url('webfonts/35ADD2_5_0.eot');src: url('webfonts/35ADD2_5_0.eot?#iefix') format('embedded-opentype'),url('webfonts/35ADD2_5_0.woff2') format('woff2'),url('webfonts/35ADD2_5_0.woff') format('woff'),url('webfonts/35ADD2_5_0.ttf') format('truetype');}

.container {
  width: 100%;
}

.logo {
  height:76px;
  padding-left: 20px
}
.menu {
  opacity: 0;

}

.menu-overlay {
 display: none;
}
#header {
  position: relative;
  width: 100%;
  height: 100px;
  z-index: 1000;
}

#navBar {
  height: 100px;
  font-size: 15px;
  padding-top: 28px;
  float: right;
  z-index: 100;

}

.navItemWrap {
    position: absolute;
    top: 166px;
    /* text-align: center; */
    right: 70px;
}

.navItem {
  float: left;
  padding-right:10px;
  padding-left:24px;
  overflow:hidden;
  font-family: 'ProximaNova-Bold', sans-serif;
  color: #577A7D;
  z-index: 100;
}



#navBar a {
  text-decoration: inherit;
}
/*
#footer {
  position: relative;
  width: 300px;
  height: 40px;
  margin-left:auto;
  margin-right: auto;
  font-family: 'ProximaNova-Regular';
  color: #577A7D;
  z-index: 1000;
}

#footer a {
  color: inherit;
  text-decoration: inherit;
}*/

#graphic {
  width: 600px;
  padding-left: 60px;
  padding-top: 0px;
  padding-bottom: 60px;
  font-family: 'ProximaNova-Regular', sans-serif;
  font-size: 100%;
}

#miniTL {
  display: inline-block;
  position: fixed;
  width: 80;
  z-index: 80;
  font-size: 0.9em;
  font-weight: 300;
  fill: #f6a355;
  text-anchor: middle;
  /*background: #a4abb5;*/
}

#sections {
  position: relative;
  display: inline-block;
  width: 255px;
  top: 30px;
  z-index: 90;
  padding-bottom: 200px;
  padding-right: 25px;
  /*opacity: .5;*/
  /*background: #a4abb5;*/
}

#extra-space {
  height: 350px;
}

#vis {
  display: inline-block;
  position: fixed;
  top: 0px;
  z-index: 1;
  margin-left: 0;
  /* height: 600px; */
  /* background-color: #ddd; */
}

#vis .eventYear{
  font-family: 'ProximaNova-Regular', sans-serif;
  font-size:1.7em;
  fill: #f6a355;
  text-anchor: left;
}

#vis .eventDepth{
  font-family: 'ProximaNova-Regular', sans-serif;
  font-size:1.1em;
  font-weight: 300;
  fill: #f6a355;
  text-anchor: left;
}

#vis .title {
  font-family: Shift;
  font-size:2.8em;
  line-height: 1.1em;
  /*font-weight: 500;*/
  /*text-anchor: middle;*/
}


#vis .desc{
  font-family: 'ProximaNova-Regular', sans-serif;
  font-size:1.15em;
  line-height: 1.2em;
  text-anchor: left;
}

#vis h1 {
  font-family: 'ProximaNova-Medium', sans-serif;
  font-size:1.3em;
  line-height: 1.4em;
}

#vis .quote {
  /*font-family: 'Lato', sans-serif;*/
  font-family: 'ProximaNova-MediumIt', sans-serif;
  /*font-size:1.6em;*/
  font-size:1.55em;
  line-height: 1.25em;
  text-anchor: left;
}

#vis .arrow {
  font-family: 'ProximaNova-Semibold', sans-serif;
  font-size: 1.28em;
  fill: #f6a355;
}

#vis .fReadArrow {
  font-family: 'ProximaNova-Semibold', sans-serif;
  font-size: 1.08em;
  fill: #a9a9aa;
}

#byline {
  font-family: 'ProximaNova-MediumIt', sans-serif;
  line-height: .75em;
  font-size: 0.8em;
  color: #777777;
}

#bylineLink {
  color: inherit;
  text-decoration: inherit;
  /*pointer-events: all;*/
}

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

.event0 {
  fill: #719FA3;
  opacity: 0.5;
}

.event1 {
  fill: #409BA3;
  opacity: 0.5;
}

.event2 {
  fill: #577A7D;
  opacity: 0.5;
}

.event0-1000000 {
  fill: url(#endGrad);
}

.contain-wrap {
  overflow: hidden;
  width: 100% !important;
  width: 100% !important;
  height: 90vh;
}

#noLandscape{
  opacity: 0;
  position: fixed;
  left: 34%;
  width: 33%;
  top: 40%;
  text-anchor: middle;
  font-family: 'ProximaNova-Bold', sans-serif;
  font-size: 3em;
}

#noIE{
  opacity: 0;
  position: fixed;
  left: 20%;
  width: 60%;
  top: 30%;
  text-anchor: middle;
  font-family: 'ProximaNova-Medium', sans-serif;
  font-size: 1.4em;
  z-index: 100;
}

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  /* change if the mask should have another color then white */
  z-index: 99;
  /* makes sure it stays on top */
}

#status {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  /* centers the loading animation horizontally one the screen */
  top: 50%;
  /* centers the loading animation vertically one the screen */
  background-image: url(https://raw.githubusercontent.com/niklausgerber/PreLoadMe/master/img/status.gif);
  /* path to your loading animation */
  background-repeat: no-repeat;
  background-position: center;
  margin: -100px 0 0 -100px;
  display: none;
  /* is width and height divided by two */
}

p {
  padding-top: 0;
  margin-top: 0;
  margin-bottom: 1em;
}

.fRead p {
  padding-bottom: 0;
  margin-bottom: .8em;
}

@media(max-width:480px)  {
  /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */
  navItemWrap {
    top: 100px;
  }

  body {
    overflow: hidden;
    padding-bottom: 800px;
    width: 100vw !important;
  }

  #graphic {
    width: 800px;
    padding: 0px;
    padding-top: 15px;
    padding-bottom: 800px;
  }

  tspan {
    font-size: 1.2em;
    margin-top: 20px;
  }
    .quote {
    font-size: 2.3em !important;
    overflow: inherit;
  }

    .title {
      font-size: 3.2em !important;
      overflow: inherit;
    }

    #vis svg{
      overflow: initial;
      /*overflow: visible;*/
    }

    #vis .arrow {
     fill: rgba(255, 255, 255, 0);
     pointer-events: none;
    }

    #navBar {
      display: none;
    }

    .title {
      margin-top: 20px;
    }


/* ------------- */

#header {
  display: block;
  width: 100vw;
}

.img {
  display: none;
  pointer-events: none;
  position: relative;
  width: 300px;
}

.logo {
  height: 120px;
  padding-top: 30px;

}

#vis .eventYear {
  font-size: 2.2em;
}

#vis .eventDepth{
  font-size: 1.9em; }

/*.slide0 div  p{
  font-size: .85em !important;
}*/

.tick text{
  font-size: 2em;
}

#miniYear {
  font-size: 2em;
}

#miniTL {
  /*display: none;*/
}

#sections {
  padding-left: 15px;
  padding-right: 30px;
}

#miniYear {
  display: none;
}

.navItem {
    float: left;
    display: block;
    width: 100%;
    padding-right: 15px;
    padding-left: 24px;
    font-size: 75px;
    margin-bottom: 34px;
    overflow: hidden;
    font-family: 'ProximaNova-Bold', sans-serif;
    color: #577A7D;
    z-index: 100;
}

#byline {
  display: none;
}

}

@media(max-height:400px) {

  #noLandscape {
    opacity: 1;
  }

  #graphic {
    opacity: 0.2;
  }

}