@keyframes spin {
  0% { rotate: 0deg; }
  100% { rotate: 360deg; }
}

@keyframes grow {
  0% { scale: 0.5; opacity: 0; color: #CF849D; }
  50% { scale: 1; opacity: 0.4; }
  60% { scale: 1; opacity: 0.3; }
  100% { scale: 4; opacity: 0.1; color: #E6E6E6; }
}

@keyframes colour {
  0% { color: #B9C0CD; }
  25% { color: #CF849D; }
  50% { color: #719273; }
  75% { color: #DEC280; }
  100% { color: #B9C0CD; }
}

svg.spinner {
  position: absolute;
  width: 192px;
  height: 192px;
  top: -70px;
  left: -70px;
  opacity: 0.75;
  animation: grow 24s 1, spin 60s infinite;
  transform-origin: center;
  z-index: 5;
  fill: none;
}

svg.spinner path {
  stroke-width: 0.5;
  stroke: currentColor;
}


body {
  background-color: #f9f9f9;
}

svg.holder {
  display: none;
  opacity: 0.4;
}

#bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-image: url('/images/snowy.jpg');
}

#fg {
  position: absolute;
  width: 480px;
  max-width: 50%;
  top: 50%;
  left: 20%;
  color: #4d4e53;
  text-align: left;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 90%;
  line-height: 1.6;
}

#fg svg {
  position: absolute;
  width: 128px;
  height: 128px;
  top: -50px;
  left: -40px;
  stroke: #ddd;
  fill: none;
  stroke-width: 0.5;
}

#fg a {
  color: #d1005d;
  text-decoration: none;
}

#fg p {
  margin: 0 0 2em 0;
}
#fg p.address {
  color: #afafaf;
  margin-top: 2em;
}
#fg strong {
  font-weight: 700;
}

@media (orientation: portrait) {
  #bg {
    background-position: 75% center;
  }
}
@media (max-width: 480px) {
  #bg {
    background-position: 68% center;
  }
  #fg {
    width: 65%;
    max-width: 65%;
    bottom: auto;
    top: 52%;
    left: 12.5%;
    padding-bottom: 2em;
  }
}
@media (max-width: 320px) {
  #fg {
    bottom: auto;
    top: 55%;
    left: 10%;
    width: 65%;
    font-size: 80%;
  }
}
@media (max-height: 480px) {
  #bg {
    background-position: 75% center;
  }
  #fg {
    width: 52%;
    bottom: auto;
    top: 52%;
    left: 12.5%;
    padding-bottom: 2em;
  }
}