#oldLogo {
  z-index: 1;
  position:relative;
  height:150px;
  width:150px;
  margin:0 auto;
  -webkit-animation-name: disappear; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
  animation-name: disappear;
  animation-duration: 8s;
  animation-fill-mode: forwards;

}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes disappear {
    0% { opacity: 1.0; visibility: visible;}
    100% { opacity: 0.0; visibility: hidden;}
}

/* Standard syntax */
@keyframes disappear {
    0% { opacity: 1.0; visibility: visible;}
    100% { opacity: 0.0; visibility: hidden;}
}

#newLogo{
    z-index: 3;
    margin: 0 auto;
    -webkit-webkit-animation-name: appear;
    -moz-webkit-animation-name: appear;
    -ms-webkit-animation-name: appear;
    -o-webkit-animation-name: appear;
    webkit-animation-name: appear;
    -moz-animation-name: appear;
    -o-animation-name: appear;
    animation-name: appear;
    animation-fill-mode: forwards;
    animation-duration: 16s;
}
@-webkit-keyframes appear {
    0% { opacity: 0.0; visibility: visible;}
    100% { opacity: 1.0; visibility: visible; transform: translate(0px,-100px);}
}

/* Standard syntax */
@keyframes appear {
    0% { opacity: 0.0; visibility: visible;}
    100% { opacity: 1.0; visibility: visible; transform: translate(0px,-100px);}
}

/*#cf img{
  position:absolute;
  left:0;
}
#cf img.bottom:hover {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}*/