/*-------------------------------------
    Reset
---------------------------------------*/
* {
    margin: 0;
    padding: 0;
    position: absolute;
}

#banner * {
  position: absolute;
}

#banner br {
  position: static;
}

/*-------------------------------------
    Layout
---------------------------------------*/

#ad {
  width: 300px;
  height: 250px;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#banner {
  position: absolute;
  display: block;
  width: 300px;
  height: 250px;
  overflow: hidden;
  cursor: pointer;
  visibility: hidden;
  border: 1px solid #666;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.fallback {
  z-index: 4;
}

#click-btn {
  width: 300px;
  height: 250px;
  display: block;
  z-index: 4;
  cursor: pointer;
}

#frame_one, #frame_two {
  width: 300px;
  height: 250px;
}

/* ----------------------- Frame One -----------------------*/
#frame_one{
  background:url('../images/bg.png') no-repeat;
  background-position: right top;
  -webkit-animation: bg_move 1s ease 5s both;
  animation: bg_move 1s ease 5s both;
}

#frame_one .ikea_copy {
  opacity: 0;
  -webkit-animation: zoomin 0.5s ease .5s forwards, slide_left 1.1s ease 5.45s forwards;
  animation: zoomin 0.5s ease .5s forwards, slide_left 1.1s ease 5.45s forwards;
}

#frame_one .now_open_copy {
  opacity: 0;
  -webkit-animation: zoomin 0.5s ease 1s forwards, slide_left 1.1s ease 5.6s forwards;
  animation: zoomin 0.5s ease 1s forwards, slide_left 1.1s ease 5.6s forwards;
}

#frame_one .panda {
  width: 195px;
  height: 180px;
  right: -62px;
  top: 40px;
  background-image: url('../images/panda.png');
  -webkit-animation: panda .29s steps(4) 1.5s alternate 70;
  animation: panda .29s steps(4) 1.5s  alternate 70;
}

#frame_one #confetti li {
  list-style: outside none none;
  top: -20px;
  z-index: 2;  
}

#frame_one #confetti li:nth-child(1) {
  left: 30px;
  -webkit-animation: confetti1 4s 1.1s linear forwards 5, confetti1 4s 5.1s linear forwards 5;
  animation: confetti1 4s 1.1s linear forwards 5, confetti1 4s 5.1s linear forwards 5;
}

#frame_one #confetti li:nth-child(2) {
  left: 90px;
  -webkit-animation: confetti2 4s 2.9s linear forwards 5, confetti2 4s 6.9s linear forwards 5;
  animation: confetti2 4s 2.9s linear forwards 5, confetti2 4s 6.9s linear forwards 5;
}

#frame_one #confetti li:nth-child(3) {
  left: 150px;
  -webkit-animation: confetti3 4s 2.8s linear forwards 5, confetti3 4s 6.8s linear forwards 5;
  animation: confetti3 4s 2.8s linear forwards 5, confetti3 4s 6.8s linear forwards 5;
}

#frame_one #confetti li:nth-child(4) {
  left: 210px;
  -webkit-animation: confetti4 4s 1.3s linear forwards 5, confetti4 4s 5.3s linear forwards 5;
  animation: confetti4 4s 1.3s linear forwards 5, confetti4 4s 5.3s linear forwards 5;
}

#frame_one #confetti li:nth-child(5) {
  left: 60px;
  -webkit-animation: confetti5 4s 1.5s linear forwards 5, confetti5 4s 5.5s linear forwards 5;
  animation: confetti5 4s 1.5s linear forwards 5, confetti5 4s 5.5s linear forwards 5;
}

#frame_one #confetti li:nth-child(6) {
  left: 120px;
  -webkit-animation: confetti6 4s 3.3s linear forwards 5, confetti6 4s 7.3s linear forwards 5;
  animation: confetti6 4s 3.3s linear forwards 5, confetti6 4s 7.3s linear forwards 5;
}

#frame_one #confetti li:nth-child(7) {
  left: 180px;
  -webkit-animation: confetti7 4s 2.11s linear forwards 5, confetti7 4s 6.11s linear forwards 5;
  animation: confetti7 4s 2.11s linear forwards 5, confetti7 4s 6.11s linear forwards 5;
}

#frame_one #confetti li:nth-child(8) {
  left: 250px;
  -webkit-animation: confetti8 4s 1.7s linear forwards 5, confetti8 4s 5.7s linear forwards 5;
  animation: confetti8 4s 1.7s linear forwards 5, confetti8 4s 5.7s linear forwards 5;
}

#frame_one #confetti li:nth-child(9) {
  left: 50px;
  -webkit-animation: confetti9 4s 6.3s linear forwards 5;
  animation: confetti9 4s 6.3s linear forwards 5;
}

#frame_one #confetti li:nth-child(10) {
  left: 200px;
  -webkit-animation: confetti10 4s 6.2s linear forwards 5;
  animation: confetti10 4s 6.2s linear forwards 5;
}


/* ----------------------- Frame Two -----------------------*/

#frame_two .cta{
  opacity: 0;
  -webkit-animation: zoomin 0.5s ease 6.5s forwards;
  animation: zoomin 0.5s ease 6.5s forwards;
}

#frame_two .logo{
  opacity: 0;
  -webkit-animation: fade_in 1s ease 7.5s both;
  animation: fade_in 1s ease 7.5s both;
}

#frame_two .copyright{
  opacity: 0;
  -webkit-animation: fade_in 1s ease 9s both;
  animation: fade_in 1s ease 9s both;
}

#replay { z-index: 500; }

.replay {
	height: 14px;
	opacity: 0;
	right: 10px;
	top: 11px;
	width: 12px;
	cursor: pointer;
}

.replay {   
    -webkit-animation: fade_in 0.6s linear 10s forwards;
    animation: fade_in 0.6s linear 10s forwards;
}


/*-------------------------------------
    Animation
---------------------------------------*/

/* Background Move */
@-webkit-keyframes bg_move {
  0%    { background-position: -301px top; }
  100%  { background-position: 0px top; }
}
@keyframes bg_move {
  0%    { background-position: -301px top; }
  100%  { background-position: 0px top; }
}

/* Fade in animation */
@-webkit-keyframes fade_in {
  0%    { opacity: 0; }
  100%  { opacity: 1; }
}
@keyframes fade_in {
   0%   { opacity: 0; }
   100% { opacity: 1; }
}

/* Fade out animation */
@-webkit-keyframes fade_out {
  0%    { opacity: 1; }
  100%  { opacity: 0; }
}
@keyframes fade_out {
   0%   { opacity: 1; }
   100% { opacity: 0; }
}

/* Panda animation */
@-webkit-keyframes panda {
  from { background-position: 0, 0; }
  to { background-position: -780px, 0; }
}
@keyframes panda {
  from { background-position: 0, 0; }
  to { background-position: -780px, 0; }
}

/* Zoomin effect */
@-webkit-keyframes zoomin {
  0%    { -webkit-transform: scale(2); opacity:0;}
  100%  { -webkit-transform: scale(1); opacity:1;}
}
@keyframes zoomin {
  0%    { transform: scale(2); opacity:0;}
  100%  { transform: scale(1); opacity:1;}
}


/* slide left */
@-webkit-keyframes slide_left {
  0%    { transform: translateX(0); opacity: 1;}
  100%  { transform: translateX(250px); opacity: 0;}
}
@keyframes slide_left {
  0%    { transform: translateX(0); opacity: 1;}
  100%  { transform: translateX(250px); opacity: 0;}
}


/* Confetti Animation */
@-webkit-keyframes confetti1 {
  0%    { -webkit-transform: translate(0px, 0px) scale(.8) rotate(0deg); }
  25%   { -webkit-transform: translate(-10px, 65px) scale(1) rotate(45deg); }
  50%   { -webkit-transform: translate(10px, 120px) scale(.9) rotate(-90deg); }
  75%   { -webkit-transform: translate(20px, 225px) scale(1) rotate(-270deg); }
  100%  { -webkit-transform: translate(-10px, 300px) scale(.8) rotate(-300deg); } 
}
@keyframes confetti1 {
  0%    { transform: translate(0px, 0px) scale(.8) rotate(0deg); }
  25%   { transform: translate(-10px, 65px) scale(1) rotate(45deg); }
  50%   { transform: translate(10px, 120px) scale(.9) rotate(-90deg); }
  75%   { transform: translate(20px, 225px) scale(1) rotate(-270deg); }
  100%  { transform: translate(-10px, 300px) scale(.8) rotate(-300deg); } 
}

@-webkit-keyframes confetti2 {
  0%    { -webkit-transform: translate(0px, 0px) scale(.8) rotate(0deg); }
  25%   { -webkit-transform: translate(20px, 85px) scale(.9) rotate(90deg); }
  50%   { -webkit-transform: translate(40px, 150px) scale(1) rotate(180deg); }
  75%   { -webkit-transform: translate(0px, 215px) scale(1) rotate(270deg); }
  100%  { -webkit-transform: translate(-10px, 300px) scale(.6) rotate(300deg); } 
}
@keyframes confetti2 {
  0%    { transform: translate(0px, 0px) scale(.8) rotate(0deg); }
  25%   { transform: translate(20px, 85px) scale(.9) rotate(90deg); }
  50%   { transform: translate(40px, 150px) scale(1) rotate(180deg); }
  75%   { transform: translate(0px, 215px) scale(1) rotate(270deg); }
  100%  { transform: translate(-10px, 300px) scale(.6) rotate(300deg); } 
}

@-webkit-keyframes confetti3 {
  0%    { -webkit-transform: translate(0px, 0px) scale(.9) rotate(0deg); }
  25%   { -webkit-transform: translate(-10px, 85px) scale(1) rotate(-45deg); }
  50%   { -webkit-transform: translate(10px, 140px) scale(1) rotate(90deg); }
  75%   { -webkit-transform: translate(20px, 205px) scale(1) rotate(180deg); }
  100%  { -webkit-transform: translate(0px, 300px) scale(.9) rotate(270deg); }
}
@keyframes confetti3 {
  0%    { transform: translate(0px, 0px) scale(.9) rotate(0deg); }
  25%   { transform: translate(-10px, 85px) scale(1) rotate(-45deg); }
  50%   { transform: translate(10px, 140px) scale(1) rotate(90deg); }
  75%   { transform: translate(20px, 205px) scale(1) rotate(180deg); }
  100%  { transform: translate(0px, 300px) scale(.9) rotate(270deg); }
}

@-webkit-keyframes confetti4 {
  0%    { -webkit-transform: translate(0px, 0px) scale(1) rotate(0deg); }
  25%   { -webkit-transform: translate(-20px, 75px) scale(1) rotate(-45deg); }
  50%   { -webkit-transform: translate(0px, 130px) scale(1) rotate(0deg); }
  75%   { -webkit-transform: translate(20px, 220px) scale(1) rotate(90deg); }
  100%  { -webkit-transform: translate(30px, 300px) scale(1) rotate(120deg); } 
}
@keyframes confetti4 {
  0%    { transform: translate(0px, 0px) scale(1) rotate(0deg); }
  25%   { transform: translate(-20px, 75px) scale(1) rotate(-45deg); }
  50%   { transform: translate(0px, 130px) scale(1) rotate(0deg); }
  75%   { transform: translate(20px, 220px) scale(1) rotate(90deg); }
  100%  { transform: translate(30px, 300px) scale(1) rotate(120deg); } 
}

@-webkit-keyframes confetti5 {
  0%    { -webkit-transform: translate(0px, 0px) scale(1) rotate(0deg); }
  25%   { -webkit-transform: translate(-10px, 65px) scale(1) rotate(-90deg); }
  50%   { -webkit-transform: translate(0px, 140px) scale(1) rotate(0deg); }
  75%   { -webkit-transform: translate(10px, 200px) scale(.7) rotate(90deg); }
  100%  { -webkit-transform: translate(20px, 300px) scale(1) rotate(120deg); } 
}
@keyframes confetti5 {
  0%    { transform: translate(0px, 0px) scale(1) rotate(0deg); }
  25%   { transform: translate(-10px, 65px) scale(1) rotate(-90deg); }
  50%   { transform: translate(0px, 140px) scale(1) rotate(0deg); }
  75%   { transform: translate(10px, 200px) scale(.7) rotate(90deg); }
  100%  { transform: translate(20px, 300px) scale(1) rotate(120deg); } 
}

@-webkit-keyframes confetti6 {
  0%    { -webkit-transform: translate(0px, 0px) scale(.9) rotate(0deg); }
  25%   { -webkit-transform: translate(0px, 85px) scale(1) rotate(-45deg); }
  50%   { -webkit-transform: translate(0px, 160px) scale(1) rotate(90deg); }
  75%   { -webkit-transform: translate(0px, 215px) scale(1) rotate(180deg); }
  100%  { -webkit-transform: translate(0px, 300px) scale(1) rotate(270deg); }
}
@keyframes confetti6 {
  0%    { transform: translate(0px, 0px) scale(.9) rotate(0deg); }
  25%   { transform: translate(0px, 85px) scale(1) rotate(-45deg); }
  50%   { transform: translate(0px, 160px) scale(1) rotate(90deg); }
  75%   { transform: translate(0px, 215px) scale(1) rotate(180deg); }
  100%  { transform: translate(0px, 300px) scale(1) rotate(270deg); }
}

@-webkit-keyframes confetti7 {
  0%    { -webkit-transform: translate(0px, 0px) scale(.8) rotate(0deg); }
  25%   { -webkit-transform: translate(20px, 100px) scale(1) rotate(90deg); }
  50%   { -webkit-transform: translate(0px, 155px) scale(1) rotate(180deg); }
  75%   { -webkit-transform: translate(20px, 225px) scale(1) rotate(270deg); }
  100%  { -webkit-transform: translate(0px, 300px) scale(.8) rotate(300deg); }
}
@keyframes confetti7 {
  0%    { transform: translate(0px, 0px) scale(.8) rotate(0deg); }
  25%   { transform: translate(20px, 100px) scale(1) rotate(90deg); }
  50%   { transform: translate(0px, 155px) scale(1) rotate(180deg); }
  75%   { transform: translate(20px, 225px) scale(1) rotate(270deg); }
  100%  { transform: translate(0px, 300px) scale(.8) rotate(300deg); }
}

@-webkit-keyframes confetti8 {
  0%    { -webkit-transform: translate(0px, 0px) scale(1) rotate(0deg); }
  25%   { -webkit-transform: translate(10px, 65px) scale(1) rotate(45deg); }
  50%   { -webkit-transform: translate(0px, 145px) scale(1) rotate(-90deg); }
  75%   { -webkit-transform: translate(10px, 235px) scale(1) rotate(-270deg); }
  100%  { -webkit-transform: translate(0px, 300px) scale(1) rotate(-300deg); }
}
@keyframes confetti8 {
  0%    { transform: translate(0px, 0px) scale(1) rotate(0deg); }
  25%   { transform: translate(10px, 65px) scale(1) rotate(45deg); }
  50%   { transform: translate(0px, 145px) scale(1) rotate(-90deg); }
  75%   { transform: translate(10px, 235px) scale(1) rotate(-270deg); }
  100%  { transform: translate(0px, 300px) scale(1) rotate(-300deg); }
}

@-webkit-keyframes confetti9 {
  0%    { -webkit-transform: translate(0px, 0px) scale(1) rotate(0deg); }
  25%   { -webkit-transform: translate(10px, 65px) scale(1) rotate(45deg); }
  50%   { -webkit-transform: translate(0px, 150px) scale(1) rotate(-90deg); }
  75%   { -webkit-transform: translate(10px, 225px) scale(1) rotate(-270deg); }
  100%  { -webkit-transform: translate(0px, 300px) scale(1) rotate(-300deg); }
}
@keyframes confetti9 {
  0%    { transform: translate(0px, 0px) scale(1) rotate(0deg); }
  25%   { transform: translate(10px, 65px) scale(1) rotate(45deg); }
  50%   { transform: translate(0px, 150px) scale(1) rotate(-90deg); }
  75%   { transform: translate(10px, 225px) scale(1) rotate(-270deg); }
  100%  { transform: translate(0px, 300px) scale(1) rotate(-300deg); }
}

@-webkit-keyframes confetti10 {
  0%    { -webkit-transform: translate(0px, 0px) scale(.9) rotate(0deg); }
  25%   { -webkit-transform: translate(10px, 85px) scale(1) rotate(-45deg); }
  50%   { -webkit-transform: translate(0px, 150px) scale(1) rotate(90deg); }
  75%   { -webkit-transform: translate(10px, 255px) scale(1) rotate(180deg); }
  100%  { -webkit-transform: translate(0px, 300px) scale(.8) rotate(270deg); }
}
@keyframes confetti10 {
  0%    { transform: translate(0px, 0px) scale(.9) rotate(0deg); }
  25%   { transform: translate(10px, 85px) scale(1) rotate(-45deg); }
  50%   { transform: translate(0px, 150px) scale(1) rotate(90deg); }
  75%   { transform: translate(10px, 255px) scale(1) rotate(180deg); }
  100%  { transform: translate(0px, 300px) scale(.8) rotate(270deg); }
}