.splash {
  transition-duration: 0.6s;
  display: block;
  margin: 1.4em auto 8em auto;
  overflow: visible;
  position: relative;
  padding-bottom: 100%;
  z-index: 1;
}
@media only screen and (min-width: 375px) {
  .splash {
    margin-bottom: 5em;
  }
}
@media only screen and (min-width: 768px) {
  .splash {
    height: 25em;
    margin-bottom: 1em;
    padding-bottom: 0;
  }
}
@media only screen and (min-width: 992px) {
  .splash {
    height: auto;
    margin-bottom: 3em;
    padding-bottom: 100%;
  }
}
.splash > svg {
  top: 0;
  bottom: 0;
  right: -50%;
  left: 50%;
  position: absolute;
  max-width: 32em;
  margin-top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
@media only screen and (min-width: 768px) {
  .splash > svg {
    max-width: 25em;
    margin-top: 25%;
  }
}
@media only screen and (min-width: 992px) {
  .splash > svg {
    max-width: 32em;
    margin-top: 50%;
  }
}
@media only screen and (min-width: 2300px) {
  .splash > svg {
    max-width: 35em;
  }
}
.splash > svg path {
  stroke: none;
}
.splash .details {
  border-radius: 50%;
  transform: translateY(-50%) translateX(-50%) scale(1);
  transition: transform 300ms ease-out;
  background: #fff;
  border: 0.8em solid #aaa;
  font-size: 2.1rem;
  height: 14.7em;
  left: 50%;
  line-height: 1.1;
  margin: 0 auto;
  padding: 0.5em 2em;
  position: absolute;
  text-align: center;
  top: 50%;
  width: 14.7em;
  will-change: transform;
  z-index: 2;
}
.splash .details:hover {
  transform: translateY(-50%) translateX(-50%) scale(1.1);
}
@media only screen and (min-width: 375px) {
  .splash .details {
    height: 16em;
    width: 16em;
  }
}
@media only screen and (min-width: 1200px) {
  .splash .details {
    height: 18em;
    width: 18em;
  }
}
@media only screen and (min-width: 1400px) {
  .splash .details {
    height: 20em;
    width: 20em;
  }
}
@media only screen and (min-width: 2300px) {
  .splash .details {
    height: 22em;
    width: 22em;
  }
}
.splash .details svg,
.splash .details img {
  display: inline-block;
  height: 4.5em;
  margin: -0.5em auto 0;
  max-width: 40%;
  width: auto;
}
@media only screen and (min-width: 1200px) {
  .splash .details svg,
  .splash .details img {
    height: 6.5em;
    margin: -2em auto 0;
  }
}
.splash .details:after {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  bottom: 0;
  content: ' ';
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 0;
}
.splash .details h3 {
  font-size: 2.2rem;
  margin: 0 0 0.2em;
  padding: 0;
}
@media only screen and (min-width: 375px) {
  .splash .details h3 {
    font-size: 2.4rem;
  }
}
@media only screen and (min-width: 992px) {
  .splash .details h3 {
    font-size: 2.1rem;
  }
}
@media only screen and (min-width: 1200px) {
  .splash .details h3 {
    font-size: 2.6rem;
  }
}
.splash .details p {
  color: #808080;
  font-size: 1.4rem;
  font-style: italic;
  line-height: 1.2;
  margin: 0;
  padding: 0;
}
@media only screen and (min-width: 375px) {
  .splash .details p {
    font-size: 1.5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .splash .details p {
    font-size: 1.8rem;
  }
}
@media only screen and (min-width: 1900px) {
  .splash .details p {
    font-size: 1.9rem;
  }
}
@media only screen and (min-width: 2300px) {
  .splash .details p {
    font-size: 2.1rem;
  }
}
.splash .details a.btn {
  color: #fff;
  display: inline-block;
  font-weight: 500;
  font-size: 1.6rem;
  letter-spacing: 0.2em;
  margin-top: 0.9em;
  padding: 0.3em 1.8em;
}
.splash .details div {
  transform: translateY(-50%) translateX(-50%);
  left: 50%;
  position: absolute;
  top: 50%;
  width: 80%;
  z-index: 1;
}
.splash-teal .details {
  border-color: rgba(121, 160, 156, 0.8);
}
.splash-teal > svg {
  fill: rgba(121, 160, 156, 0.25);
  transform: translateX(-50%) translateY(-50%) rotate(0);
}
.splash-teal .details svg polygon,
.splash-teal .details svg path {
  fill: #79a09c;
}
.splash-teal h3 {
  color: #79a09c;
}
.splash-teal a.btn {
  background: #79a09c;
}
.splash-teal a.btn:hover {
  background: #6a9591;
}
.splash-green .details {
  border-color: rgba(172, 193, 124, 0.8);
}
.splash-green > svg {
  fill: rgba(172, 193, 124, 0.25);
  transform: translateX(-50%) translateY(-50%) rotate(210deg);
}
.splash-green .details svg polygon,
.splash-green .details svg path {
  fill: #acc17c;
}
.splash-green h3 {
  color: #acc17c;
}
.splash-green a.btn {
  background: #acc17c;
}
.splash-green a.btn:hover {
  background: #a1b96b;
}
.splash-green > svg {
  margin-top: 54%;
}
@media only screen and (min-width: 768px) {
  .splash-green > svg {
    margin-top: 31%;
  }
}
@media only screen and (min-width: 992px) {
  .splash-green > svg {
    margin-top: 54%;
  }
}
.splash-blue .details {
  border-color: rgba(118, 142, 164, 0.8);
}
.splash-blue > svg {
  fill: rgba(118, 142, 164, 0.25);
  transform: translateX(-50%) translateY(-50%) rotate(0);
}
.splash-blue .details svg polygon,
.splash-blue .details svg path {
  fill: #768ea4;
}
.splash-blue h3 {
  color: #768ea4;
}
.splash-blue a.btn {
  background: #768ea4;
}
.splash-blue a.btn:hover {
  background: #67819a;
}
.splash-taupe .details {
  border-color: rgba(122, 120, 120, 0.8);
}
.splash-taupe > svg {
  fill: rgba(122, 120, 120, 0.25);
  transform: translateX(-50%) translateY(-50%) rotate(0);
}
.splash-taupe .details svg polygon,
.splash-taupe .details svg path {
  fill: #7a7878;
}
.splash-taupe h3 {
  color: #7a7878;
}
.splash-taupe a.btn {
  background: #7a7878;
}
.splash-taupe a.btn:hover {
  background: #6d6b6b;
}