/* css for OSI Logo Animation */


#logo {
	float:left;
	padding: 40px 0px 0px 50px;
  }

#logo-o, #logo-s, #logo-i, #logo-onechild {
  position:absolute;
  animation-timing-function: ease-out;
  animation-fill-mode:both;
  height:75px;
}
#logo-o {
  animation-name: logoimg-o;
  animation-duration: .3s;
  animation-delay: 0s;
  }
  @keyframes logoimg-o {
    0%   {opacity: 0;}
    100%  {opacity: 1;}
    0%   {margin-left: 1000px;}
    100%  {margin-left: 0px; }
  }

#logo-s {
  margin-left:122px;
  animation-name: logoimg-s;
  animation-duration: .4s;
  animation-delay:.2s;
  }
  @keyframes logoimg-s {
    0%   {opacity: 0;}
    100%  {opacity: 1;}
    0%   {margin-left: 600px;}
    100%  {margin-left: 80px; }
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
  }

#logo-i {
  margin-left:80px;
  animation-name: logoimg-i;
  animation-duration: .3s;
  animation-delay: .6s;
  }
  @keyframes logoimg-i {
    0%   {opacity: 0;}
    100%  {opacity: 1;}
    0%   {margin-left: 800px;}
    100%  {margin-left: 122px; }
    from {transform:rotate(360deg);}
    to {transform:rotate(0deg);}
  }

#logo-onechild {
  animation-name: logoimg-child;
  animation-duration: 1s;
  animation-delay: 1.2s;
  animation-timing-function: linear;
  }
  @keyframes logoimg-child {
    0%   {opacity: 0;}
    100%  {opacity: 1;}
  }