/* WATER */

.visual {
    display:flex;
    flex-wrap:wrap;
    align-items: center;
}

.visual p {
  margin: 0 0 8px;
}

.visual p.tagline {
    color:#575757;
    text-align: left;
    font-size: 2.5rem;
    letter-spacing: 0px;
    line-height: 1.15;
    padding-bottom: 0;
}

.visual .tagline span{
  font-weight: 600;
}

.visual .red {
  color: indianred;
}

.visual .green {
  color: forestgreen;
}

.visual .blue {
  color: deepskyblue;
}

@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px) {
    .visual {
      padding: 0;
    }

    .visual p.tagline {
      font-size: 3rem;
    }
}

@media only screen and (max-width: 767px) {
  .visual p.tagline {
    line-height: 1.25;
    font-size: 1.7rem;
    margin-bottom: 5px;
  }
}

.visibleDivFirst{
  opacity: 0;
  animation: fadeIn 0.2s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}

.visibleDivSecond{
  opacity: 0;
  animation: fadeIn 1s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
}

.visibleDivThird{
  opacity: 0;
  animation: fadeIn 2s;
  animation-delay: 3s;
  animation-fill-mode: forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}