.spin{
    animation: spin;
    animation-duration: 500ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.zoom{
    animation: zoom;
    animation-duration:5000ms;
    animation-timing-function: ease-in;
}
.circle-container {
	 	opacity: 0;
  	transition: visibility 1s, opacity 0.5s linear;
      
      display: block;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top:35%;
    text-align: left;
    max-width: 1200px !important;
    
    
    /*2.8em = 2em*1.4 (2em = half the width of a link with img, 1.4 = sqrt(2))*/
    
    border-radius: 50%;
    
  
    -webkit-transition: opacity 1.5s ease-in-out;
    -moz-transition: opacity 1.5s ease-in-out;
    -ms-transition: opacity 1.5s ease-in-out;
    -o-transition: opacity 1.5s ease-in-out;
   z-index: 4;
}
.circle-container img  {
    display: inline;
    position: relative;
    width:16.66%;
    max-width: 200px;
    
     -webkit-transition: opacity .7s ease-in-out;
    -moz-transition: opacity .7s ease-in-out;
    -ms-transition: opacity .7s ease-in-out;
    -o-transition: opacity .7s ease-in-out;
     -webkit-animation: slideIn 2s forwards;
  -moz-animation: slideIn 2s forwards;
  animation: slideIn 2s forwards;

    
}
.circle-container .fast  {
     -webkit-animation: slideIn .1s none;
  -moz-animation: slideIn .1s none;
  animation: slideIn .1s none;
}

@-webkit-keyframes slideIn {
  0% {
    transform: translateX(900px);
  }
  100% {
    transform: translateX(0);
  }
}
@-moz-keyframes slideIn {
  0% {
    transform: translateX(900px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slideIn {
  0% {
    transform: translateX(900px);
  }
  100% {
    transform: translateX(0);
  }
}



@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg)  }
    to { -moz-transform: rotate(360deg)   }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg)  }
    to { -webkit-transform: rotate(360deg)  }
}
@keyframes spin {
    from {transform:rotate(0deg) }
    to {transform:rotate(360deg) }
}

@-moz-keyframes zoom {
    from { -moz-transform: rotate(0deg) scale(1.0); }
    to { -moz-transform: rotate(360deg)   scale(2.0);  }
}
@-webkit-keyframes zoom {
    from { -webkit-transform: rotate(0deg) scale(1.0);  }
    to { -webkit-transform: rotate(360deg) scale(2.0);  }
}
@keyframes zoom {
    from {transform:rotate(0deg) scale(1.0);; }
    to {transform:rotate(360deg) scale(2.0);;}
}