/* animated header */
@keyframes cloud-move {
  0% {
    left: -100px;
  }   
  100% {
    left: 120%;
  }
}
header {
  background-image: linear-gradient(#4facfe, #c2e9fb);
  border-bottom: 1px solid #c2e9fb99;
  margin-top: 35px;
  width: 100%;
  position: relative;
  overflow: hidden;
}
header a {
  display: block;
  text-decoration: none;
  color: #fff;
}
header a h1 {
  font: bold 2em Verdana, sans-serif;
  padding: 0.5em;
  text-shadow: 1px 1px 1px #000, 5px 5px 15px #000;
}
header h1::before {
  position: absolute;
  top: 30px;
  left: -100px;
  content: url(/css/small-cloud2.gif);
  opacity: 0.6;
  animation-name: cloud-move;
  animation-duration: 40s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
}
header h1::after {
  position: absolute;
  top: 10px;
  left: -100px;
  content: url(/css/large-cloud.gif);
  opacity: 0.3;
  animation-name: cloud-move;
  animation-duration: 20s;
  animation-timing-function: linear;
  animation-delay: 5s;
  animation-iteration-count: infinite;
}
header a p {
  padding: 0 0 1em 1em;
  color: #fff;
  font: bold 1em 'Asap Condensed', sans-serif;
  letter-spacing: 1px;
  text-shadow: 0px 0px 1px #000, 1px 1px 3px #000;
}
header p::before {
  position: absolute;
  top: 50px;
  left: -100px;
  content: url(/css/small-cloud.gif);
  opacity: 0.6;
  animation-name: cloud-move;
  animation-duration: 40s;
  animation-timing-function: linear;
  animation-delay: 20s;
  animation-iteration-count: infinite;
}
header p::after {
  position: absolute;
  top: 60px;
  left: -100px;
  content: url(/css/large-cloud2.gif);
  opacity: 0.3;
  animation-name: cloud-move;
  animation-duration: 20s;
  animation-timing-function: linear;
  animation-delay: 15s;
  animation-iteration-count: infinite;
}
header h1, header p { z-index: 1; }
header h1::before, header h1::after, header p::before, header p::after { z-index: 0;}