#tree-wrapper {
  width: 80%;
  margin: 9vw auto 19vw;
  padding-left: 7vw;
  position: relative; }
  #tree-wrapper h1 {
    width: 27vw;
    margin: 4vw auto;
    padding-right: 6vw;
    color: #2651a1;
    font-family: "Anton", sans-serif;
    font-size: 3.8vw;
    text-align: center;
    line-height: 1; }
    @media (max-width: 600px) {
      #tree-wrapper h1 {
        width: auto; } }
  #tree-wrapper h2 {
    color: #2651a1;
    font-family: "Anton", sans-serif;
    font-size: 2.5vw;
    position: absolute; }
  #tree-wrapper h3 {
    margin: 0 0 -0.5vw;
    color: #2651a1;
    font-family: "Open Sans", sans-serif;
    font-size: 1.7vw;
    font-weight: 700;
    line-height: 1; }
  #tree-wrapper p {
    max-width: 14vw;
    color: #2651a1;
    font-family: "Open Sans", sans-serif;
    font-size: 1.2vw;
    font-weight: 700;
    text-align: center;
    line-height: 1;
    position: absolute;
    cursor: pointer; }
  #tree-wrapper a {
    text-decoration: none; }
    #tree-wrapper a:hover {
      text-decoration: underline; }
  #tree-wrapper #hover-notice {
    padding: 1.3vw 1.5vw;
    background: #e8eff7;
    border-radius: 1vw;
    color: #2651a1;
    font-family: "Open Sans", sans-serif;
    font-size: 1vw;
    font-weight: 800;
    text-transform: uppercase;
    position: absolute;
    top: -5vw;
    left: -3vw; }
    #tree-wrapper #hover-notice i {
      margin-right: 0.8vw;
      font-size: 1.5vw; }
    @media (max-width: 1100px) {
      #tree-wrapper #hover-notice .desktop-notice {
        display: none; } }
    #tree-wrapper #hover-notice .mobile-notice {
      display: none; }
      @media (max-width: 1100px) {
        #tree-wrapper #hover-notice .mobile-notice {
          display: inline-block; } }
  #tree-wrapper #tree-background {
    width: 100%; }
  #tree-wrapper .container {
    position: absolute; }
    #tree-wrapper .container .popup {
      width: 20vw;
      padding: 1.2vw 1.2vw 0.2vw;
      background: #fff;
      border: 0.5vw solid #2651a1;
      border-radius: 1vw;
      text-align: left;
      position: absolute;
      top: 5vw;
      display: none;
      z-index: 9; }
      #tree-wrapper .container .popup:before {
        content: "";
        width: 0;
        height: 0;
        border-left: 1.5vw solid transparent;
        border-right: 1.5vw solid transparent;
        border-bottom: 2vw solid #2651a1;
        position: absolute;
        top: -2.3vw;
        left: 0vw; }
      #tree-wrapper .container .popup:after {
        content: "";
        width: 3vw;
        height: 3vw;
        position: absolute;
        top: -3vw;
        left: 0vw;
        cursor: pointer; }
      #tree-wrapper .container .popup img {
        width: 100%;
        margin: 0 auto 1vw; }
      #tree-wrapper .container .popup .floated-image {
        width: 30%;
        margin-right: 1.5vw;
        float: left;
        position: relative;
        z-index: 9; }
        #tree-wrapper .container .popup .floated-image p.credit {
          float: left; }
      #tree-wrapper .container .popup p {
        max-width: none;
        color: #000;
        font-size: 1.3vw;
        font-weight: 400;
        font-style: normal;
        text-align: left;
        line-height: 1.3;
        position: relative;
        cursor: auto; }
        #tree-wrapper .container .popup p a {
          color: #3076b6; }
      #tree-wrapper .container .popup p.credit {
        margin: -0.8vw 0 0;
        color: #999;
        font-size: 0.8vw;
        font-style: italic;
        float: right; }
    #tree-wrapper .container .popup.bottom-left:before,
    #tree-wrapper .container .popup.bottom-right:before {
      content: "";
      border-top: 2vw solid #2651a1;
      border-bottom: 0;
      top: initial;
      bottom: -2.3vw; }
    #tree-wrapper .container .popup.bottom-left:after,
    #tree-wrapper .container .popup.bottom-right:after {
      top: initial;
      bottom: -3vw; }
    #tree-wrapper .container .popup.top-right:before,
    #tree-wrapper .container .popup.bottom-right:before {
      left: initial;
      right: 0; }
    #tree-wrapper .container .popup.top-right:after,
    #tree-wrapper .container .popup.bottom-right:after {
      left: initial;
      right: 0; }
  #tree-wrapper .container p:hover ~ .popup,
  #tree-wrapper .popup:hover {
    display: block; }
  #tree-wrapper h2#bacteria-label {
    top: 32vw;
    left: -2vw; }
  #tree-wrapper #SAR86 {
    top: 15vw;
    left: 20vw; }
  #tree-wrapper #Beggiatoa {
    top: 19vw;
    left: 14.7vw; }
    #tree-wrapper #Beggiatoa .popup {
      left: 4vw; }
      #tree-wrapper #Beggiatoa .popup:after {
        width: 6vw;
        height: 5vw;
        left: -5vw; }
  #tree-wrapper #Pelagibacter {
    top: 22vw;
    left: 28vw; }
    #tree-wrapper #Pelagibacter .popup {
      width: 25vw;
      top: 6vw;
      left: 1vw; }
      #tree-wrapper #Pelagibacter .popup:after {
        width: 8vw;
        left: -2vw; }
      #tree-wrapper #Pelagibacter .popup .floated-image {
        width: 50%; }
  #tree-wrapper #Desulfobacterium {
    top: 25vw;
    left: 12vw; }
    #tree-wrapper #Desulfobacterium p:after {
      content: "";
      width: 5.5vw;
      height: 0.12vw;
      background: #2651a1;
      position: absolute;
      top: 5.1vw;
      right: -3.2vw;
      transform: rotate(56deg); }
    #tree-wrapper #Desulfobacterium .popup {
      width: 30vw;
      top: 11vw;
      left: 11vw; }
      #tree-wrapper #Desulfobacterium .popup:after {
        width: 8vw;
        height: 12vw;
        top: -8vw;
        left: -6.5vw; }
      #tree-wrapper #Desulfobacterium .popup p:after {
        width: 0; }
  #tree-wrapper #Roseobacter {
    top: 31vw;
    left: 30vw; }
    #tree-wrapper #Roseobacter .popup {
      width: 40vw; }
      #tree-wrapper #Roseobacter .popup:after {
        width: 7vw; }
  #tree-wrapper #Marinimicrobia {
    top: 28.5vw;
    left: 7vw; }
    #tree-wrapper #Marinimicrobia .popup {
      width: 50vw;
      top: 3vw;
      left: 8vw; }
      #tree-wrapper #Marinimicrobia .popup:after {
        width: 8vw;
        height: 2vw;
        top: -1vw;
        left: -8vw; }
  #tree-wrapper #Procholorococcus_marina {
    top: 32vw;
    left: 7vw; }
    #tree-wrapper #Procholorococcus_marina .popup {
      width: 30vw;
      top: 6vw;
      left: 3vw; }
      #tree-wrapper #Procholorococcus_marina .popup:after {
        width: 12vw;
        left: -4vw; }
  #tree-wrapper #SAR202 {
    top: 40vw;
    left: 5vw; }
    #tree-wrapper #SAR202 .popup {
      width: 40vw;
      top: 3vw;
      left: 4vw; }
      #tree-wrapper #SAR202 .popup:after {
        width: 6vw;
        height: 8vw;
        top: -1vw;
        left: -5vw; }
  #tree-wrapper #Polaribacter {
    top: 44vw;
    left: 17vw; }
    #tree-wrapper #Polaribacter .popup {
      top: -46.5vw;
      left: 4vw; }
      #tree-wrapper #Polaribacter .popup:after {
        width: 8vw;
        height: 3vw;
        left: -4vw;
        bottom: -2.5vw; }
  #tree-wrapper #archaea-section h2#archaea-label {
    color: #55c7e9;
    top: -7vw;
    left: 37vw; }
  #tree-wrapper #archaea-section p,
  #tree-wrapper #archaea-section h3 {
    color: #55c7e9; }
  #tree-wrapper #archaea-section .container .popup {
    border: 0.5vw solid #55c7e9; }
    #tree-wrapper #archaea-section .container .popup:before {
      border-bottom-color: #55c7e9; }
    #tree-wrapper #archaea-section .container .popup p {
      color: #000; }
    #tree-wrapper #archaea-section .container .popup p.credit {
      color: #999; }
  #tree-wrapper #archaea-section #Nitrosopelagicus_brevis {
    top: 0vw;
    left: 28vw; }
    #tree-wrapper #archaea-section #Nitrosopelagicus_brevis .popup {
      top: 4vw;
      left: 11vw; }
      #tree-wrapper #archaea-section #Nitrosopelagicus_brevis .popup:after {
        width: 13vw;
        height: 8vw;
        top: -2vw;
        left: -11vw; }
  #tree-wrapper #archaea-section #Methanocaldocococcus_jannaschii {
    top: 2vw;
    right: 33vw; }
    #tree-wrapper #archaea-section #Methanocaldocococcus_jannaschii .popup:after {
      width: 14vw;
      height: 2vw;
      top: -2vw;
      left: 0vw; }
  #tree-wrapper #archaea-section #Lokiarchaea {
    top: 15vw;
    right: 30vw; }
    #tree-wrapper #archaea-section #Lokiarchaea .popup {
      top: 6vw;
      left: 2vw; }
      #tree-wrapper #archaea-section #Lokiarchaea .popup:after {
        width: 9vw;
        height: 4vw;
        top: -4vw;
        left: -3vw; }
  #tree-wrapper #eukaryotes-section h2 {
    color: #3076b6;
    top: 16vw;
    right: -2vw; }
  #tree-wrapper #eukaryotes-section p,
  #tree-wrapper #eukaryotes-section h3 {
    color: #3076b6; }
  #tree-wrapper #eukaryotes-section .container .popup {
    border: 0.5vw solid #3076b6; }
    #tree-wrapper #eukaryotes-section .container .popup:before {
      border-bottom-color: #3076b6;
      border-top-color: #3076b6; }
    #tree-wrapper #eukaryotes-section .container .popup p {
      color: #000; }
    #tree-wrapper #eukaryotes-section .container .popup p.credit {
      color: #999; }
  #tree-wrapper #eukaryotes-section #Eupelagonema_oceanica {
    top: 21.5vw;
    right: 20vw; }
    #tree-wrapper #eukaryotes-section #Eupelagonema_oceanica .popup {
      width: 40vw;
      top: 5.5vw;
      left: -41vw; }
      #tree-wrapper #eukaryotes-section #Eupelagonema_oceanica .popup:after {
        width: 12vw;
        top: -2.5vw;
        right: -7vw; }
  #tree-wrapper #eukaryotes-section #Emiliana_huxleyii {
    max-width: 10vw;
    top: 27vw;
    right: 20vw; }
    #tree-wrapper #eukaryotes-section #Emiliana_huxleyii .popup {
      width: 40vw;
      top: 5vw;
      right: -1vw; }
      #tree-wrapper #eukaryotes-section #Emiliana_huxleyii .popup:after {
        width: 6vw;
        top: -2vw;
        right: -5vw; }
  #tree-wrapper #eukaryotes-section #Acantharia {
    top: 25vw;
    right: 5vw; }
    #tree-wrapper #eukaryotes-section #Acantharia .popup {
      width: 40vw;
      right: -1vw; }
      #tree-wrapper #eukaryotes-section #Acantharia .popup:after {
        width: 6vw;
        right: -2vw; }
  #tree-wrapper #eukaryotes-section #Thalassiosira_pseudonana {
    top: 33vw;
    right: 5vw; }
    #tree-wrapper #eukaryotes-section #Thalassiosira_pseudonana .popup {
      width: 40vw;
      top: 5vw;
      left: -43vw; }
      #tree-wrapper #eukaryotes-section #Thalassiosira_pseudonana .popup:after {
        width: 3vw;
        height: 5vw;
        top: -5vw;
        right: 0vw; }
  #tree-wrapper #eukaryotes-section #Solenicola_setigera {
    top: 36vw;
    right: 8vw; }
    #tree-wrapper #eukaryotes-section #Solenicola_setigera p.hover-text {
      max-width: 10vw;
      text-align: left; }
    #tree-wrapper #eukaryotes-section #Solenicola_setigera .popup {
      width: 40vw;
      top: -24.5vw;
      right: -1.5vw; }
      #tree-wrapper #eukaryotes-section #Solenicola_setigera .popup:after {
        width: 9vw;
        height: 3.5vw;
        right: -2vw;
        bottom: -3.5vw; }
  #tree-wrapper #eukaryotes-section #Cafeteria_roenbergensis {
    top: 39.5vw;
    right: 11vw; }
    #tree-wrapper #eukaryotes-section #Cafeteria_roenbergensis .popup {
      width: 40vw;
      top: -19.5vw;
      left: -40.5vw; }
      #tree-wrapper #eukaryotes-section #Cafeteria_roenbergensis .popup:after {
        width: 5vw;
        right: -0.5vw; }
  #tree-wrapper #eukaryotes-section #Ceratium {
    top: 40.5vw;
    right: 18vw; }
    #tree-wrapper #eukaryotes-section #Ceratium .popup {
      width: 40vw;
      top: -24.5vw;
      right: -6vw; }
      #tree-wrapper #eukaryotes-section #Ceratium .popup:after {
        width: 7vw;
        height: 4vw;
        bottom: -3.5vw;
        right: -1vw; }
  #tree-wrapper #eukaryotes-section #Ostreococcus_taurii {
    max-width: 10vw;
    top: 39vw;
    right: 26.5vw; }
    #tree-wrapper #eukaryotes-section #Ostreococcus_taurii .popup {
      top: -46vw;
      right: -4vw; }
      #tree-wrapper #eukaryotes-section #Ostreococcus_taurii .popup:after {
        width: 10vw;
        height: 4vw;
        right: -5vw;
        bottom: -3.8vw; }
  #tree-wrapper #eukaryotes-section #Salpingoeca_rosetta {
    top: 44.5vw;
    right: 34vw; }
    #tree-wrapper #eukaryotes-section #Salpingoeca_rosetta .popup {
      width: 40vw;
      top: -26vw;
      right: -5vw; }
      #tree-wrapper #eukaryotes-section #Salpingoeca_rosetta .popup:after {
        width: 10vw;
        height: 3vw;
        right: -5vw;
        bottom: -3vw; }
  #tree-wrapper #related-resources h3 {
    margin: 100px 0 20px;
    color: #000;
    font-style: normal; }
  #tree-wrapper #related-resources p {
    max-width: none;
    color: #333;
    font-style: normal;
    text-align: left;
    position: relative; }
    #tree-wrapper #related-resources p a {
      color: #3076b6;
      font-weight: normal;
      display: inline-block; }
  #tree-wrapper #related-resources p#thanks {
    margin-top: 2vw;
    color: #333;
    font-style: italic;
    font-weight: lighter; }

/*# sourceMappingURL=style.css.map */