#clickArea {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 300px;
  height: 250px;
  /*background-color: red;
  opacity: .5;*/
  cursor: pointer;
  z-index: 1000;
}

#container {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 298px;
  height: 248px;
  border: 1px solid #333;
  /*overflow: visible;*/
  overflow: hidden;
}

#backgroundColor {
  position: absolute;
  top: -120px;
  left: -220px;
  width: 600px;
  height: 500px;
  transform-origin: center;
  transform: rotate(45deg);

  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1ccff6+0,1573bc+100 */
  background: rgb(28,207,246); /* Old browsers */
  background: -moz-linear-gradient(top, rgba(28,207,246,1) 0%, rgba(21,115,188,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(28,207,246,1) 0%,rgba(21,115,188,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(28,207,246,1) 0%,rgba(21,115,188,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1ccff6', endColorstr='#1573bc',GradientType=0 ); /* IE6-9 */
}

.bgAnimate {
  animation-name: bgAnimate;
  animation-delay: 0s;
  animation-duration: 20s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  }

@keyframes bgAnimate {
  0% {
    transform: rotate(45deg);
  }
  50% {
    transform: rotate(-45deg);
  }
  100% {
    transform: rotate(45deg);
  }
}

#frameOne {

}

#textOne {
  position: absolute;
  left: 15px;
  top: 18px;
  width: 217px;
  height: 178px;
  background-image: url("textOne.png");
  transform-origin: 0 0;
  transform: scale(0.5) translateX(-100px);
  opacity: 0;
  filter: blur(15px);
}

.textOneInit {
  transform: scale(0.5) translateX(-100px);
  opacity: 0;
  filter: blur(15px);
}

.textOneAnimate {
  animation-name: textOneAnimate;
  animation-delay: 0s;
  animation-duration: .75s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

@keyframes textOneAnimate {
  0% {
    transform: scale(0.5) translateX(-100px);
    opacity: 0;
    filter: blur(15px);
  }
  40% {
    opacity: 0;
    filter: blur(15px);
  }
  87% {
    opacity: 1;
    filter: blur(0px);
  }
  100% {
    transform: scale(0.5) translateX(0px);
    opacity: 1;
    filter: blur(0px);
  }
}

#logo {
  position: absolute;
  left: 17px;
  top: 191px;
  width: 367px;
  height: 83px;
  background-image: url("logo.png");
  transform-origin: 0 0;
  transform: scale(0.5);
  z-index: 1001;
  cursor: pointer;
}

#frameTwo {

}

#textTwo {
  position: absolute;
  left: 17px;
  top: 116px;
  width: 214px;
  height: 117px;
  background-image: url("textTwo.png");
  transform-origin: 0 0;
  transform: scale(0.5) translateX(100px);
  opacity: 0;
  filter: blur(15px);
}

.textTwoInit {
  transform: scale(0.5) translateX(100px);
  opacity: 0;
  filter: blur(15px);
}

.textTwoAnimate {
  animation-name: textTwoAnimate;
  animation-delay: 2s;
  animation-duration: .75s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

@keyframes textTwoAnimate {
  0% {
    transform: scale(0.5) translateX(100px);
    opacity: 0;
    filter: blur(15px);
  }
  40% {
    opacity: 0;
    filter: blur(15px);
  }
  87% {
    opacity: 1;
    filter: blur(0px);
  }
  100% {
    transform: scale(0.5) translateX(0px);
    opacity: 1;
    filter: blur(0px);
  }
}

#frameThree {

}

#CTA {
  position: absolute;
  left: 156px;
  top: 135px;
  width: 289px;
  height: 80px;
  background-image: url("cta.png");
  transform-origin: 0 0;
  transform: scale(0.5);
  opacity: 0;
  z-index: 1002;
  cursor: pointer;
}

.CTAInit {
  opacity: 0;
}

.fadeIn {
  animation-name: fadeIn;
  animation-delay: 4s;
  animation-duration: .75s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fadeOut {
  animation-name: fadeOut;
  animation-delay: 0s;
  animation-duration: .5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
    transform: scale(0.5) translateX(0px);
  }
  100% {
    opacity: 0;
    transform: scale(0.5) translateX(0px);
  }
}