body, html {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif; }

.info-hover {
  width: 11.1vw;
  height: 11.1vw;
  background-color: #234fa1;
  border: 0.6vw solid #49c5eb;
  border-radius: 100%;
  color: #fff;
  text-align: center;
  position: absolute;
  top: 3vw;
  left: 3.5vw; }
  @media only screen and (max-device-width: 600px) {
    .info-hover {
      width: auto;
      height: auto;
      padding: 0.5vw 2vw 1vw;
      border-radius: 2vw;
      top: 1vw;
      left: 1vw; } }
  .info-hover .arrow {
    position: relative; }
    @media only screen and (max-device-width: 600px) {
      .info-hover .arrow {
        margin: 0 1vw 0 0;
        display: inline-block;
        vertical-align: middle; } }
  .info-hover span {
    font-size: 1.2vw;
    letter-spacing: 0.05vw; }
    @media only screen and (max-device-width: 600px) {
      .info-hover span {
        font-size: 3vw; } }
  @media only screen and (max-device-width: 1000px) {
    .info-hover .desktop {
      display: none; } }
  .info-hover .mobile {
    display: none; }
    @media only screen and (max-device-width: 1000px) {
      .info-hover .mobile {
        display: inline-block; } }

.arrow {
  width: 2.8vw;
  height: 2.3vw;
  margin: 1.6vw auto 0.5vw;
  padding: 0.7vw 0 0 0.2vw;
  background-color: #2d73b9;
  border: 0.35vw solid #fff;
  border-radius: 100%;
  color: #fff;
  font-size: 2vw;
  text-align: center;
  position: absolute; }
  .arrow i.fa {
    font-size: 1.7vw; }

.popup-section:hover .popup {
  display: block; }
.popup-section .label {
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-size: 2.7vw;
  font-weight: bold;
  text-transform: uppercase;
  position: absolute; }
.popup-section .popup {
  width: 42vw;
  height: 42vw;
  background-color: #fff;
  border: 1.4vw solid #49c5eb;
  border-radius: 100%;
  text-align: center;
  position: absolute;
  display: none;
  z-index: 9; }
  @media only screen and (max-device-width: 600px) {
    .popup-section .popup {
      width: 80vw;
      height: 50vw;
      margin: auto;
      border-radius: 2vw;
      top: 2vw !important;
      left: 0 !important;
      right: 0 !important; }
      .popup-section .popup:before, .popup-section .popup:after {
        display: none; } }
  .popup-section .popup:before {
    content: '';
    width: 0;
    height: 0;
    border-top: 3vw solid transparent;
    border-bottom: 3vw solid transparent;
    border-right: 9vw solid #49c5eb;
    position: absolute; }
  .popup-section .popup:after {
    content: '';
    width: 0;
    height: 0;
    border-top: 2vw solid transparent;
    border-bottom: 2vw solid transparent;
    border-right: 6vw solid #fff;
    position: absolute; }
  .popup-section .popup img {
    width: 10vw;
    margin: 5vw 0.8vw 0.5vw; }
    @media only screen and (max-device-width: 600px) {
      .popup-section .popup img {
        width: 15vw;
        margin-bottom: 3vw; } }
  .popup-section .popup p {
    width: 40vw;
    height: 20vw;
    border-radius: 100%;
    color: #444;
    font-size: 1.25vw;
    text-align: center;
    line-height: 2;
    top: 23.5vw;
    left: 54.6vw; }
    @media only screen and (max-device-width: 600px) {
      .popup-section .popup p {
        width: 70vw;
        height: 30vw;
        margin: auto;
        font-size: 2.25vw;
        left: 0;
        right: 0;
        line-height: 1.5; }
        .popup-section .popup p br {
          display: none; } }
    .popup-section .popup p a {
      color: #234fa1;
      font-weight: bold;
      text-decoration: underline; }
      .popup-section .popup p a:hover {
        text-decoration: none; }
.popup-section .arrow:hover,
.popup-section .popup:hover + .arrow {
  border: none;
  background-color: transparent;
  background-size: contain; }
  .popup-section .arrow:hover i.fa,
  .popup-section .popup:hover + .arrow i.fa {
    display: none; }

section {
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

section#beginning {
  background-image: url(../img/the-beginning.jpg); }
  section#beginning #plankton .arrow {
    position: absolute;
    top: 43vw;
    left: 46vw;
    cursor: pointer; }
  section#beginning #plankton .popup {
    top: 9.5vw;
    left: 54.3vw; }
    section#beginning #plankton .popup:before {
      top: 30vw;
      left: -7vw;
      transform: rotate(328deg); }
    section#beginning #plankton .popup:after {
      top: 29.5vw;
      left: -3.1vw;
      transform: rotate(328deg); }
  section#beginning #plankton .arrow:hover,
  section#beginning #plankton .popup:hover + .arrow {
    width: 6vw;
    height: 6vw;
    background-image: url("../img/zooplankton.png");
    top: 41vw;
    left: 44vw; }
  section#beginning #plant .arrow {
    position: absolute;
    top: 23vw;
    left: 50vw;
    cursor: pointer; }
  section#beginning #plant .popup {
    top: 3.1vw;
    left: 3.3vw; }
    section#beginning #plant .popup:before {
      top: 19vw;
      right: -9vw;
      transform: rotate(180deg); }
    section#beginning #plant .popup:after {
      top: 20vw;
      right: -5.5vw;
      transform: rotate(180deg); }
    section#beginning #plant .popup img {
      margin-top: 3vw; }

section#decomposition {
  margin-top: 0;
  background-image: url(../img/decomposition.jpg); }
  section#decomposition #peat .label {
    top: 25.5vw;
    left: 16vw; }
  section#decomposition #peat .arrow {
    position: absolute;
    top: 24vw;
    left: 23vw;
    cursor: pointer; }
  section#decomposition #peat .popup {
    top: 6vw;
    left: 31vw; }
    section#decomposition #peat .popup:before {
      top: 17vw;
      left: -9vw;
      transform: rotate(0deg); }
    section#decomposition #peat .popup:after {
      top: 18vw;
      left: -5.5vw;
      transform: rotate(0deg); }
    section#decomposition #peat .popup img {
      width: 14vw;
      margin-top: 3vw; }
  section#decomposition #peat .arrow:hover,
  section#decomposition #peat .popup:hover + .arrow {
    width: 6vw;
    height: 6vw;
    top: 41vw;
    left: 44vw; }
  section#decomposition #kerogen .label {
    top: 34vw;
    left: 78vw; }
  section#decomposition #kerogen .arrow {
    position: absolute;
    top: 32vw;
    left: 73vw;
    cursor: pointer; }
  section#decomposition #kerogen .popup {
    top: 1.8vw;
    left: 26.8vw; }
    section#decomposition #kerogen .popup:before {
      top: 28.5vw;
      right: -7vw;
      transform: rotate(200deg); }
    section#decomposition #kerogen .popup:after {
      top: 28.8vw;
      right: -3.3vw;
      transform: rotate(200deg); }
    section#decomposition #kerogen .popup img {
      margin-top: 3vw; }

section#fossilFuelsForm {
  margin-top: 0;
  background-image: url(../img/fossil-fuels-form.png); }
  section#fossilFuelsForm #naturalGas .label {
    top: 41.4vw;
    left: 8.5vw; }
  section#fossilFuelsForm #naturalGas .arrow {
    position: absolute;
    top: 40vw;
    left: 25vw;
    cursor: pointer; }
  section#fossilFuelsForm #naturalGas .popup {
    width: 35vw;
    height: 35vw;
    top: 17.3vw;
    left: 31.6vw; }
    section#fossilFuelsForm #naturalGas .popup:before {
      top: 21vw;
      left: -8.1vw;
      transform: rotate(-14deg); }
    section#fossilFuelsForm #naturalGas .popup:after {
      top: 21.6vw;
      left: -4.5vw;
      transform: rotate(-14deg); }
    section#fossilFuelsForm #naturalGas .popup p {
      width: 35vw; }
  section#fossilFuelsForm #naturalGas .arrow:hover,
  section#fossilFuelsForm #naturalGas .popup:hover + .arrow {
    width: 6vw;
    height: 6vw;
    top: 41vw;
    left: 44vw; }
  section#fossilFuelsForm #coal .label {
    top: 31.3vw;
    left: 43vw; }
  section#fossilFuelsForm #coal .arrow {
    position: absolute;
    top: 29.8vw;
    left: 51vw;
    cursor: pointer; }
  section#fossilFuelsForm #coal .popup {
    width: 35vw;
    height: 35vw;
    top: 5.8vw;
    left: 55.8vw; }
    section#fossilFuelsForm #coal .popup:before {
      top: 22.8vw;
      right: 33.7vw;
      transform: rotate(-13deg); }
    section#fossilFuelsForm #coal .popup:after {
      top: 23.4vw;
      right: 32.8vw;
      transform: rotate(-13deg); }
    section#fossilFuelsForm #coal .popup img {
      margin: 7vw auto 2vw; }
    section#fossilFuelsForm #coal .popup p {
      width: 35vw; }
  section#fossilFuelsForm #oil .label {
    top: 51.8vw;
    left: 87vw; }
  section#fossilFuelsForm #oil .arrow {
    position: absolute;
    top: 50.5vw;
    left: 92vw;
    cursor: pointer; }
  section#fossilFuelsForm #oil .popup {
    width: 35vw;
    height: 35vw;
    top: 14.8vw;
    left: 54.5vw; }
    section#fossilFuelsForm #oil .popup:before {
      top: 30.5vw;
      right: -3.5vw;
      transform: rotate(220deg); }
    section#fossilFuelsForm #oil .popup:after {
      top: 29.6vw;
      right: 0.3vw;
      transform: rotate(220deg); }
    section#fossilFuelsForm #oil .popup p {
      width: 35vw; }

section#chemicalBreakdown {
  background-image: url(../img/the-chemical-breakdown.png); }
  section#chemicalBreakdown .label {
    color: #234fa1; }
  section#chemicalBreakdown .arrow {
    border-color: #49c5eb; }
  section#chemicalBreakdown #saturates .label {
    top: 19vw;
    left: 7.5vw; }
  section#chemicalBreakdown #saturates .arrow {
    position: absolute;
    top: 13.5vw;
    left: 11vw;
    cursor: pointer; }
  section#chemicalBreakdown #saturates .popup {
    width: 35vw;
    height: 35vw;
    top: 1.5vw;
    left: 20.6vw; }
    section#chemicalBreakdown #saturates .popup:before {
      top: 11.5vw;
      left: -9.1vw;
      transform: rotate(11deg); }
    section#chemicalBreakdown #saturates .popup:after {
      top: 12.9vw;
      left: -5.2vw;
      transform: rotate(11deg); }
    section#chemicalBreakdown #saturates .popup img {
      margin-top: 2.5vw; }
    section#chemicalBreakdown #saturates .popup p {
      width: 35vw; }
  section#chemicalBreakdown #saturates .arrow:hover,
  section#chemicalBreakdown #saturates .popup:hover + .arrow {
    width: 6vw;
    height: 6vw;
    top: 41vw;
    left: 44vw; }
  section#chemicalBreakdown #aromatics .label {
    top: 37.3vw;
    left: 31vw; }
  section#chemicalBreakdown #aromatics .arrow {
    position: absolute;
    top: 36vw;
    left: 26vw;
    cursor: pointer; }
  section#chemicalBreakdown #aromatics .popup {
    width: 35vw;
    height: 35vw;
    top: 0.5vw;
    left: 18.8vw; }
    section#chemicalBreakdown #aromatics .popup:before {
      border-top-width: 2.5vw;
      border-bottom-width: 2.5vw;
      border-right-width: 7vw;
      top: 33.7vw;
      right: 23.5vw;
      transform: rotate(-66deg); }
    section#chemicalBreakdown #aromatics .popup:after {
      top: 32vw;
      right: 22.9vw;
      transform: rotate(-66deg); }
    section#chemicalBreakdown #aromatics .popup img {
      margin: 5vw auto 2vw; }
    section#chemicalBreakdown #aromatics .popup p {
      width: 35vw; }
  section#chemicalBreakdown #resins .label {
    top: 22.3vw;
    left: 37.5vw; }
  section#chemicalBreakdown #resins .arrow {
    position: absolute;
    top: 16.5vw;
    left: 39.5vw;
    cursor: pointer; }
  section#chemicalBreakdown #resins .popup {
    width: 35vw;
    height: 35vw;
    top: 1.8vw;
    left: 47.4vw; }
    section#chemicalBreakdown #resins .popup:before {
      top: 13.5vw;
      right: 35.5vw;
      transform: rotate(11deg); }
    section#chemicalBreakdown #resins .popup:after {
      top: 15vw;
      right: 34.3vw;
      transform: rotate(11deg); }
    section#chemicalBreakdown #resins .popup img {
      margin: 6vw 0.8vw 1.5vw; }
    section#chemicalBreakdown #resins .popup p {
      width: 35vw; }
  section#chemicalBreakdown #asphaltenes .label {
    top: 30.2vw;
    left: 48.2vw; }
  section#chemicalBreakdown #asphaltenes .arrow {
    position: absolute;
    top: 28.8vw;
    left: 64vw;
    cursor: pointer; }
  section#chemicalBreakdown #asphaltenes .popup {
    width: 35vw;
    height: 35vw;
    top: 2.8vw;
    left: 24.5vw; }
    section#chemicalBreakdown #asphaltenes .popup:before {
      top: 23.5vw;
      right: -7.2vw;
      transform: rotate(205deg); }
    section#chemicalBreakdown #asphaltenes .popup:after {
      top: 23.5vw;
      right: -3.3vw;
      transform: rotate(205deg); }
    section#chemicalBreakdown #asphaltenes .popup p {
      width: 35vw; }

section#oilEnvironment {
  margin-top: 0;
  background-image: url(../img/oil-in-the-environment.png); }
  section#oilEnvironment .label {
    color: #234fa1; }
  section#oilEnvironment #oilSpill .arrow {
    top: 28.7vw;
    left: 26vw; }
  section#oilEnvironment #oilSpill .popup {
    top: 5vw;
    left: 31.6vw; }
    section#oilEnvironment #oilSpill .popup:before {
      top: 21.5vw;
      left: -9.1vw;
      transform: rotate(0deg); }
    section#oilEnvironment #oilSpill .popup:after {
      top: 22.5vw;
      left: -5.3vw;
      transform: rotate(0deg); }
    section#oilEnvironment #oilSpill .popup img {
      margin-top: 3.5vw; }
  section#oilEnvironment #oilSpill .arrow:hover,
  section#oilEnvironment #oilSpill .popup:hover + .arrow {
    width: 6vw;
    height: 6vw;
    top: 41vw;
    left: 44vw; }
  section#oilEnvironment #oilSeeps .arrow {
    top: 35.5vw;
    left: 52vw; }
  section#oilEnvironment #oilSeeps .popup {
    top: 0.5vw;
    left: 4.2vw; }
    section#oilEnvironment #oilSeeps .popup:before {
      top: 32.7vw;
      right: -4.5vw;
      transform: rotate(215deg); }
    section#oilEnvironment #oilSeeps .popup:after {
      top: 32.3vw;
      right: -1vw;
      transform: rotate(215deg); }
    section#oilEnvironment #oilSeeps .popup img {
      margin: 5vw auto 2vw; }
  section#oilEnvironment #car .arrow {
    border-color: #49c5eb;
    top: 19.8vw;
    left: 75.5vw; }
  section#oilEnvironment #car .popup {
    top: 1.2vw;
    left: 23vw; }
    section#oilEnvironment #car .popup:before {
      top: 18vw;
      right: -9.5vw;
      transform: rotate(180deg); }
    section#oilEnvironment #car .popup:after {
      top: 19vw;
      right: -5.7vw;
      transform: rotate(180deg); }
    section#oilEnvironment #car .popup img {
      margin: 3.5vw 0.8vw 0.5vw; }
  section#oilEnvironment #house .arrow {
    border-color: #49c5eb;
    top: 11.8vw;
    left: 93.5vw; }
  section#oilEnvironment #house .popup {
    top: 2vw;
    left: 43.5vw; }
    section#oilEnvironment #house .popup:before {
      top: 10.5vw;
      right: -8.2vw;
      transform: rotate(160deg); }
    section#oilEnvironment #house .popup:after {
      top: 12.4vw;
      right: -4.3vw;
      transform: rotate(160deg); }
    section#oilEnvironment #house .popup img {
      margin: 7vw 0.8vw 2vw; }

section#whatCanWeLearn {
  margin-top: 0;
  background-image: url(../img/what-can-we-learn.png); }
  section#whatCanWeLearn .label {
    color: #234fa1; }
  section#whatCanWeLearn #microbes .arrow {
    top: 41.7vw;
    left: 45vw; }
  section#whatCanWeLearn #microbes .popup {
    top: 1vw;
    left: 2vw; }
    section#whatCanWeLearn #microbes .popup:before {
      top: 34.5vw;
      left: 36.9vw;
      transform: rotate(220deg); }
    section#whatCanWeLearn #microbes .popup:after {
      top: 33.9vw;
      left: 36.6vw;
      transform: rotate(220deg); }
    section#whatCanWeLearn #microbes .popup img {
      margin-top: 3.5vw; }
  section#whatCanWeLearn #microbes .arrow:hover,
  section#whatCanWeLearn #microbes .popup:hover + .arrow {
    width: 6vw;
    height: 6vw;
    top: 41vw;
    left: 44vw; }
  section#whatCanWeLearn #plankton .arrow {
    top: 31.5vw;
    left: 62vw; }
  section#whatCanWeLearn #plankton .popup {
    top: 0.5vw;
    left: 12.5vw; }
    section#whatCanWeLearn #plankton .popup:before {
      top: 27.7vw;
      right: -7vw;
      transform: rotate(205deg); }
    section#whatCanWeLearn #plankton .popup:after {
      top: 27.8vw;
      right: -3.5vw;
      transform: rotate(205deg); }
    section#whatCanWeLearn #plankton .popup img {
      margin: 1.5vw auto 0; }
  section#whatCanWeLearn #fish .arrow {
    top: 31.8vw;
    left: 89.5vw; }
  section#whatCanWeLearn #fish .popup {
    top: 5.8vw;
    left: 37.5vw; }
    section#whatCanWeLearn #fish .popup:before {
      top: 25vw;
      right: -8.5vw;
      transform: rotate(190deg); }
    section#whatCanWeLearn #fish .popup:after {
      top: 25.7vw;
      right: -4.7vw;
      transform: rotate(190deg); }
    section#whatCanWeLearn #fish .popup img {
      margin: 7vw 0.8vw 2vw; }

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