/*
*******************
* $=Animation
*******************
*/

#logo_container {
  position: relative;
  width: 431px;
  height: 368px;
  margin: 4% auto;
}



#redcircle {
  background-origin: border-box;
  background: url(../img/logo_red.png) no-repeat center;
  position: absolute;
  width: 431px;
  height: 368px;
  z-index: 5;
  opacity: 0;

  -webkit-animation: redmation 1.5s;   
  animation: redmation 1.5s;

  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;

  -webkit-animation-fill-mode: forwards;  
  animation-fill-mode: forwards;  
}

#greycircle {
  background: url(../img/logo_grey.png) no-repeat center;
  position: absolute;
  width: 431px;
  height: 368px;
  z-index: 4;
  opacity: 0;

  -webkit-animation: greymation 1.5s;
  animation: greymation 1.5s;

  -webkit-animation-delay: 1.0s;
  animation-delay: 1.0s;

  -webkit-animation-fill-mode: forwards;  
  animation-fill-mode: forwards;  
}

#blackcircle {
  background: url(../img/logo_black.png) no-repeat center;
  position: absolute;
  width: 431px;
  height: 368px;
  z-index: 3;
  opacity: 0;

  -webkit-animation: blackmation 1.5s;
  animation: blackmation 1.5s;

  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;

  -webkit-animation-fill-mode: forwards;  
  animation-fill-mode: forwards;  
}

/*
*******************
* $=Animation-Webkit-Prefix
*******************
*/

@-webkit-keyframes redmation {
  0%   { -webkit-transform: rotate(-90deg); opacity: 0;}
  100% { -webkit-transform: rotate(0deg); opacity: 1;}
}

@-webkit-keyframes greymation {
  0%   { -webkit-transform: rotate(-180deg); opacity: 0;}
  100% { -webkit-transform: rotate(0deg); opacity: 1;}
}

@-webkit-keyframes blackmation {
  0%   { -webkit-transform: rotate(-270deg); opacity: 0;}
  100% { -webkit-transform: rotate(0deg); opacity: 1;}
}


/*
*******************
* $=Animtion-No-Prefix
*******************
*/

@keyframes redmation {
  0%   { transform: rotate(-90deg); opacity: 0;}
  100% { transform: rotate(0deg); opacity: 1;}
}

@keyframes greymation {
  0%   { transform: rotate(-180deg); opacity: 0;}
  100% { transform: rotate(0deg); opacity: 1;}
}

@keyframes blackmation {
  0%   { transform: rotate(-270deg); opacity: 0;}
  100% { transform: rotate(0deg); opacity: 1;}
}