* {
  box-sizing: border-box;
}

body {
  margin: 0;
  /* background-color: rgb(37, 40, 66); */
  background-color: #002142;
}

.logo {
  position: absolute;
  top: 0;
  right: 0;
  height: 35px;
  margin: 20px;
}

.vis-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  top: 0;
  text-align: center;
  padding: 20px;
  font-family: 'Open Sans';
  font-size: 20pt;
  font-weight: 300;
  color: white;
  z-index: 10;
}

.vis-description {
  position: absolute;
  width: 270px;
  bottom: auto;
  top: calc(10% + 65px);
  left: 2.5%;
  text-align: inherit;
  padding: 20px;
  font-family: 'Open Sans';
  font-size: 10pt;
  color: white;
  /* font-weight: 700; */
}

.vis-description a {
  color: #2185d0;
}

#bubbles-timeline {
  position: absolute;
  top: 2.5%;
  left: 2.5%;
  width: 95%;
  height: 97.5%;
  color: white;
}

@media (max-width: 800px) {
  .vis-title {
    width: 55%;
    padding: 5px;
    font-size: 10pt;
  }

  .logo {
    height: 18px;
    margin: 5px;
  }

  #bubbles-timeline {
    /* top: 10%; */
    /* height: 83%; */
    top: 2.5%;
    height: 90.5%;
  }

  .vis-description {
    width: 100%;
    bottom: 0px;
    top: auto;
    left: auto;
    text-align: center;
    font-size: 8pt;
  }
}

@media (max-width: 800px) and (orientation: landscape) {
  .vis-description {
    position: absolute;
    width: 270px;
    bottom: auto;
    top: calc(10% + 65px);
    left: 2.5%;
    text-align: inherit;
    padding: 20px;
    font-size: 8pt;
  }

  #bubbles-timeline {
    /* top: 13%; */
    /* height: 85%; */
    top: 2.5%;
    height: 97.5%;
  }
}

@media (max-width: 320px) {
  .logo {
    height: 12px;
    margin: 5px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  #bubbles-timeline {
    /* top: 15%; */
    /* height: 76%; */
    top: 2.5%;
    height: 88.5%;
  }

  .vis-description {
    width: 100%;
    bottom: 0px;
    top: auto;
    left: auto;
    text-align: center;
    font-size: 10pt;
  }
}

@media (min-width: 375px) and (max-width: 768px) and (orientation: portrait) {
  #bubbles-timeline {
    /* top: 13%; */
    /* height: 70%; */
    top: 2.5%;
    height: 80.5%;
  }

  .vis-description {
    font-size: 8pt;
  }
}

@media (min-width: 300px) and (max-width: 375px) and (orientation: portrait) {
  #bubbles-timeline {
    /* top: 13%; */
    /* height: 72%; */
    top: 2.5%;
    height: 85.5%;
  }

  .vis-description {
    font-size: 6pt;
  }
}