/*-- fade in animation--*/
@-webkit-keyframes fadeIn {
  0%   { 
    opacity: 0; 
    visibility: visible;
    -webkit-transform: translate(0,0);
  }
  100% { 
    opacity: 1; 
    -webkit-transform: translate(0,0);
    visibility: visible;
  }
}
@-moz-keyframes fadeIn {
  0%   { 
    opacity: 0; 
    -moz-transform: translate(0,0);
    visibility: visible;
  }
  100% { 
    opacity: 1; 
    -moz-transform: translate(0,0);
    visibility: visible;
  }
}
@keyframes fadeIn {
  0%   { 
    opacity: 0; 
    transform: translate(0,0);
    visibility: visible;
  }
  100% { 
    opacity: 1; 
    transform: translate(0,0);
    visibility: visible;
  }
}

/*-- fade out animation--*/
@-webkit-keyframes fadeOut {
  0%   { 
    opacity: 1; 
    visibility: visible;
    -webkit-transform: translate(0,0);
  }
  100% { 
    opacity: 0; 
    -webkit-transform: translate(0,0);
    visibility: visible;
  }
}
@-moz-keyframes fadeOut {
  0%   { 
    opacity: 1; 
    -moz-transform: translate(0,0);
    visibility: visible;
  }
  100% { 
    opacity: 0; 
    -moz-transform: translate(0,0);
    visibility: visible;
  }
}
@keyframes fadeOut {
  0%   { 
    opacity: 1; 
    transform: translate(0,0);
    visibility: visible;
  }
  100% { 
    opacity: 0; 
    transform: translate(0,0);
    visibility: visible;
  }
}


/*-- hide content--*/
@-webkit-keyframes hideContent {
  0%   {
    visibility: hidden;
  }
  100% { 
    visibility: hidden;
  }
}
@-moz-keyframes hideContent {
  0%   {
    visibility: hidden;
  }
  100% { 
    visibility: hidden;
  }
}
@keyframes hideContent {
  0%   {
    visibility: hidden;
  }
  100% { 
    visibility: hidden;
  }
}

/*-- fade in right --*/
@-webkit-keyframes fadeInRight {
  0%   {
    visibility: visible;
    -webkit-transform: translate(-20px, 0);
    opacity: 0;
  }
  100% { 
    visibility: visible;
    -webkit-transform: translate(0, 0);
    opacity: 1;
  }
}
@-moz-keyframes fadeInRight {
  0%   {
    visibility: visible;
    -moz-transform: translate(-20px, 0);
    opacity: 0;
  }
  100% { 
    visibility: visible;
    -moz-transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes fadeInRight {
  0%   {
    visibility: visible;
    transform: translate(-20px, 0);
    opacity: 0;
  }
  100% { 
    visibility: visible;
    transform: translate(0, 0);
    opacity: 1;
  }
}

/*-- Move Header Up --*/
@-webkit-keyframes moveHeaderUp {
  0%   {
    visibility: visible;
    -webkit-transform: translate(0, 0);
  }
  100% { 
    visibility: visible;
    -webkit-transform: translate(-124px, 1px);
  }
}
@-moz-keyframes moveHeaderUp {
  0%   {
    visibility: visible;
    -moz-transform: translate(0, 0);
  }
  100% { 
    visibility: visible;
    -moz-transform: translate(-124px, 1px);
  }
}
@keyframes moveHeaderUp {
  0%   {
    visibility: visible;
    transform: translate(0, 0);
  }
  100% { 
    visibility: visible;
    transform: translate(-124px, 1px);
  }
}

/*-- fade in up --*/
@-webkit-keyframes fadeInUp {
  0%   {
    visibility: visible;
    -webkit-transform: translate(0, 15px);
    opacity: 0;
  }
  100% { 
    visibility: visible;
    -webkit-transform: translate(0, 0);
    opacity: 1;
  }
}
@-moz-keyframes fadeInUp {
  0%   {
    visibility: visible;
    -moz-transform: translate(0, 15px);
    opacity: 0;
  }
  100% { 
    visibility: visible;
    -moz-transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes fadeInUp {
  0%   {
    visibility: visible;
    transform: translate(0, 15px);
    opacity: 0;
  }
  100% { 
    visibility: visible;
    transform: translate(0, 0);
    opacity: 1;
  }
}

/*-- bg move --*/
@-webkit-keyframes bgMove {
  0%   {
    visibility: visible;
    -webkit-transform: translate(0, 0);
  }
  100% { 
    visibility: visible;
    -webkit-transform: translate(-728px, 90px);
  }
}
@-moz-keyframes bgMove {
  0%   {
    visibility: visible;
    -moz-transform: translate(0, 0);
  }
  100% { 
    visibility: visible;
    -moz-transform: translate(-728px, 90px);
  }
}
@keyframes bgMove {
  0%   {
    visibility: visible;
    transform: translate(0, 0);
  }
  100% { 
    visibility: visible;
    transform: translate(-728px, 90px);
  }
}

/*-- bg zoom out--*/
@-webkit-keyframes bgZoomOut {
  0%   {
    visibility: visible;
    -webkit-transform: scale(1);
  }
  100% { 
    visibility: visible;
    -webkit-transform: scale(0.2);
  }
}
@-moz-keyframes bgZoomOut {
  0%   {
    visibility: visible;
    -moz-transform: scale(1);
  }
  100% { 
    visibility: visible;
    -moz-transform: scale(0.2);
  }
}
@keyframes bgZoomOut {
  0%   {
    visibility: visible;
    transform: scale(1);
  }
  100% { 
    visibility: visible;
    transform: scale(0.2);
  }
}

/*-------------------------------------------*/

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.absolute {
  position: absolute;
}

.container{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 728px;
  height: 90px;
  display: block;
}

.banner-container{
  overflow: hidden;
  background-color: #ffffff;
}

.content-container{
  -webkit-animation: hideContent 10ms ease-in-out 0s forwards;
  -moz-animation: hideContent 10ms ease-in-out 0s forwards;
  animation: hideContent 10ms ease-in-out 0s forwards;
}

.content{
  background-color: #ffffff;
  -webkit-animation: fadeIn 0.25s ease-in-out 0.1s forwards;
  -moz-animation: fadeIn 0.25s ease-in-out 0.1s forwards;
  animation: fadeIn 0.25s ease-in-out 0.1s forwards;
  overflow: hidden;
}
.content-wrapper { 
  -webkit-animation: hideContent 10ms ease-in-out 0s forwards;
  -moz-animation: hideContent 10ms ease-in-out 0s forwards;
  animation: hideContent 10ms ease-in-out 0s forwards; 
}
.bg {
  width: 7280px;
  height: 900px;
  left: -1456px;
  bottom: -180px;
  background: url('./images/puppy_pattern.png') repeat;
}
.bg-wrapper {
  background: #ffbec7;
  -webkit-animation: fadeIn 0.25s ease-in-out 0.15s forwards;
  -moz-animation: fadeIn 0.25s ease-in-out 0.15s forwards;
  animation: fadeIn 0.25s ease-in-out 0.15s forwards;
}
.header {
  background: url('./images/728x90_header.png') no-repeat center center;
  background-size: 100% auto;
  width: 179px;
  height: 29px;
  top: 30px;
  left: 274px;
  -webkit-animation: fadeIn 0.5s ease-in-out 0.15s forwards;
  -moz-animation: fadeIn 0.5s ease-in-out 0.15s forwards;
  animation: fadeIn 0.5s ease-in-out 0.15s forwards;
}
.bg-move {
  -webkit-animation: bgMove 40s linear 0.25s infinite;
  -moz-animation: bgMove 040s linear 0.25s infinite;
  animation: bgMove 40s linear 0.25s infinite;
}
.header-container {
  -webkit-animation: moveHeaderUp 0.5s ease-in-out 2s forwards;
  -moz-animation: moveHeaderUp 0.5s ease-in-out 2s forwards;
  animation: moveHeaderUp 0.5s ease-in-out 2s forwards;
}
.bg-zoom-out {
  -webkit-animation: bgZoomOut 0.25s ease-in-out 2.25s forwards;
  -moz-animation: bgZoomOut 0.25s ease-in-out 2.25s forwards;
  animation: bgZoomOut 0.25s ease-in-out 2.25s forwards;
}
.puppy {
  background: url('./images/728x90_puppy.png') no-repeat center center;
  background-size: 100% auto;
  width: 102px;
  height: 86px;
  top: 4px;
  left: 73px;
  -webkit-animation: fadeInUp 0.5s ease-in-out 2.75s forwards;
  -moz-animation: fadeInUp 0.5s ease-in-out 2.75s forwards;
  animation: fadeInUp 0.5s ease-in-out 2.75s forwards;
}
.bottle {
  background: url('./images/728x90_bottle.png') no-repeat center center;
  background-size: 100% auto;
  width: 98px;
  height: 90px;
  top: 0px;
  left: 440px;
  -webkit-animation: fadeInUp 0.5s ease-in-out 3s forwards;
  -moz-animation: fadeInUp 0.5s ease-in-out 3s forwards;
  animation: fadeInUp 0.5s ease-in-out 3s forwards;
}
.text {
  background: url('./images/728x90_text.png') no-repeat center center;
  background-size: 100% auto;
  width: 252px;
  height: 90px;
  top: 0px;
  left: 476px;
  -webkit-animation: fadeInUp 0.5s ease-in-out 3.25s forwards;
  -moz-animation: fadeInUp 0.5s ease-in-out 3.25s forwards;
  animation: fadeInUp 0.5s ease-in-out 3.25s forwards;
}
.cta {
  background: url('./images/728x90_cta.png') no-repeat center center;
  background-size: 100% auto;
  width: 183px;
  height: 27px;
  bottom: 0;
  left: 545px;
  -webkit-animation: fadeIn 0.5s ease-in-out 4s forwards;
  -moz-animation: fadeIn 0.5s ease-in-out 4s forwards;
  animation: fadeIn 0.5s ease-in-out 4s forwards;
}