/* ------ ANIMATIONS ------ */
#copy1 {
  animation: fade-in-down 1s 1, fade-out 1s 1;
  animation-delay: 1.25s, 5s;
}
#tray {
  animation: tray-swing-out 3s 1;
  animation-delay: 0s;
  animation-timing-function: cubic-bezier(0.255, 0.140, 0.275, 1.010);
}
#copy2 {
  animation: fade-in-down 1s 1;
  animation-delay: 5.80s;
}
#screen-white {
  animation: quick-flash 1s 1;
  animation-delay: 8.75s;
}
#scene1 {
  animation: fade-out 0.01s 1;
  animation-delay: 9.25s;
}
#scene2 {
  animation: fade-in 0.01s 1;
  animation-delay: 9.25s; 
}
#copy3 {
  animation: fade-in-down 1s 1;
  animation-delay: 9.75s;
}
#new {
  animation: pop-in 0.75s 1;
  animation-delay: 10.75s; 
}
/*#copy1 {
  animation: fade-in-down 0.50s 1, fade-out 0.50s 1;
  animation-delay: 0s, 2.60s;
}
#tray {
  animation: tray-swing-out 1.15s 1;
  animation-delay: 3s;
  animation-timing-function: cubic-bezier(0.255, 0.140, 0.275, 1.010);
}
#copy2 {
  animation: fade-in-down 0.50s 1, fade-out 0.01s 1;
  animation-delay: 3.25s, 6.50s;
}
#screen-white {
  animation: quick-flash 1s 1;
  animation-delay: 6.50s;
}
#logo {
  animation: fade-out 0.01s 1;
  animation-delay: 7.00s;
}
#scene2 {
  animation: fade-in 0.01s 1;
  animation-delay: 7.00s; 
}
#copy3 {
  animation: fade-in-down 1s 1;
  animation-delay: 7.50s;
}
#new {
  animation: pop-in 0.75s 1;
  animation-delay: 8.50s; 
}*/
/* ------ KEYFRAMES ------ */
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% { 
    opacity: 0; 
  } 
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% { 
    opacity: 1; 
  } 
}
@keyframes quick-flash { 
  0% {
    opacity: 0;
  }
  45% { 
    opacity: 1; 
  }
  55% {
    opacity: 1;
  } 
  100% {
    opacity: 0;
  }
}
@keyframes fade-in-down {
  0% {
    opacity: 0;
    transform: translate(0px, -10px);
  }
  100% { 
    opacity: 1;    
    transform: translate(0px, 0px); 
  } 
}
@keyframes tray-swing-out {
  to { 
    transform: translate(0px, 0px) scale(1);    
  }
}
@keyframes pop-in {
  0% {
    transform: scale(0.05);
    opacity:0;
  }
  70% {
    transform: scale(1.10);
    opacity:1;
  }
  100% {
    transform: scale(1);
    opacity:1;
  }
}
#banner div, #banner img {
  animation-fill-mode: forwards;
}