@charset "UTF-8";



@media screen and (max-width:960px) {
  #mainwrapper{
    width: 360px;
  }
}

@media screen and (min-width:960px) {
  #mainwrapper{
    width: 960px;
  }
}

#mainwrapper{
  font-size: 0;
  margin: auto;
  z-index: 1;
  overflow: hidden;
  animation-name: init;
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-timing-function: linear;
  animation-duration: 3s;
  transition: 0.5s;
}



.circle{
  display:inline-block;
  border-radius: 50%;
  margin: 5px 5px;
  width:110px;
  height:110px;
  overflow: hidden;
}



.circle img{
  width:inherit;
  height: inherit;
  border-radius: 50%;
}

.image{
  display: inline-block;
  animation-name: imagerotationZ;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  border-radius: 50%;
}

.image:hover{
  cursor: pointer;
}


@keyframes init {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

@keyframes ops {
  100%{
    opacity: 1;
  }
}

@keyframes imagerotationZ{
  100%{
    transform: rotateZ(360deg);
  }
}