/*
 * Version 2.0.0 Dated 16-Jul-2015
 * HMI Technologies Mumbai (2012-15)
 ** CSS Document ** 
*/

// From: Marco Barría https://twitter.com/marco_bf
.hoja {
  color                  : red;
  position               : absolute;
  text-align             : center;
  font-size              : 35px;
  -webkit-font-smoothing : antialiased;
  max-width : 10px;
  max-height: 10px;
}                 
.hoja:after,
.hoja:before {
  content                  : "Hmit Quiz";
  border-radius            : 100%;
  position                 : absolute;
  margin-left              : 450px;
  width                    : 10%;
  height                   : 10%;
  -webkit-transform-origin : center center;
  -ms-transform-origin     : center center;
  transform-origin         : center center;
}
.hoja:after {
  box-shadow: inset 0 17.5px 0 rgba(250, 250, 0, 0.2),
              inset 17.5px 0 0 rgba(250, 20, 0, 0.6),
              inset 0 -17.5px 0 rgba(50, 250, 0, 0.6),
              inset -17.5px 0 0 rgba(250, 100, 0, 0.6);
  -webkit-animation: rotar 2s -0.5s linear infinite;
          animation: rotar 2s -0.5s linear infinite;
}
.hoja:before {
  box-shadow: inset 0 17.5px 0 rgba(0, 150, 250, 0.6),
              inset 17.5px 0 0 rgba(0, 100, 200, 0.6),
              inset 0 -17.5px 0 rgba(200, 50, 200, 0.6),
              inset -17.5px 0 0 rgba(100, 200, 250, 0.6);
  -webkit-animation: rotarIz 2s -0.5s linear infinite;
          animation: rotarIz 2s -0.5s linear infinite;
}
@-webkit-keyframes rotar {
  0% { -webkit-transform: rotateZ(0deg) scaleX(1) scaleY(1);
               transform: rotateZ(0deg) scaleX(1) scaleY(1);
  }
  50% { -webkit-transform: rotateZ(180deg) scaleX(0.82) scaleY(0.95);
               transform: rotateZ(180deg) scaleX(0.82) scaleY(0.95);
  }
  100% { -webkit-transform: rotateZ(360deg) scaleX(1) scaleY(1);
               transform: rotateZ(360deg) scaleX(1) scaleY(1);
  }
}
@keyframes rotar {
  0% { -webkit-transform: rotateZ(0deg) scaleX(1) scaleY(1);
               transform: rotateZ(0deg) scaleX(1) scaleY(1);
  }
  60% { -webkit-transform: rotateZ(180deg) scaleX(0.82) scaleY(0.95);
               transform:  rotateZ(180deg) scaleX(0.82) scaleY(0.95);
  }
  100% { -webkit-transform: rotateZ(360deg) scaleX(1) scaleY(1);
               transform:   rotateZ(360deg) scaleX(1) scaleY(1);
  }
}
@-webkit-keyframes rotarIz {
  0% { -webkit-transform: rotateZ(0deg) scaleX(1) scaleY(1);
               transform: rotateZ(0deg) scaleX(1) scaleY(1);
  }
  60% { -webkit-transform: rotateZ(-180deg) scaleX(0.95) scaleY(0.85);
                transform: rotateZ(-180deg) scaleX(0.95) scaleY(0.85);
  }
  100% { -webkit-transform: rotateZ(-360deg) scaleX(1) scaleY(1);
                transform: rotateZ(-360deg) scaleX(1) scaleY(1);
  }
}
@keyframes rotarIz {
  0% { -webkit-transform: rotateZ(0deg) scaleX(1) scaleY(1);
               transform: rotateZ(0deg) scaleX(1) scaleY(1);
  }
  60% { -webkit-transform: rotateZ(-180deg) scaleX(0.95) scaleY(0.85);
                transform: rotateZ(-180deg) scaleX(0.95) scaleY(0.85);
  }
  100% { -webkit-transform: rotateZ(-360deg) scaleX(1) scaleY(1);
                 transform: rotateZ(-360deg) scaleX(1) scaleY(1);
  }
}

/*This is coded CSS rainbow*/
.rainbow {
-webkit-animation:rainbow 10s infinite;
-ms-animation:rainbow 10s infinite;
-o-animation:rainbow 10s infinite;
animation:rainbow 10s infinite;
}

.rainbow:hover {
-webkit-animation:rainbow 1s infinite;
-ms-animation:rainbow 1s infinite;
-o-animation:rainbow 1s infinite;
animation:rainbow 1s infinite;
}
@-webkit-keyframes rainbow {
0% {color: #ff0000;}
10% {color: #ff8000;}
20% {color: #ffff00;}
30% {color: #80ff00;}
40% {color: #00ff00;}
50% {color: #00ff80;}
60% {color: #00ffff;}
70% {color: #0080ff;}
80% {color: #0000ff;}
90% {color: #8000ff;}
100% {color: #ff0080;}
}
@-ms-keyframes rainbow {
0% {color: #ff0000;}
10% {color: #ff8000;}
20% {color: #ffff00;}
30% {color: #80ff00;}
40% {color: #00ff00;}
50% {color: #00ff80;}
60% {color: #00ffff;}
70% {color: #0080ff;}
80% {color: #0000ff;}
90% {color: #8000ff;}
100% {color: #ff0080;}
}
@-o-keyframes rainbow {
0% {color: #ff0000;}
10% {color: #ff8000;}
20% {color: #ffff00;}
30% {color: #80ff00;}
40% {color: #00ff00;}
50% {color: #00ff80;}
60% {color: #00ffff;}
70% {color: #0080ff;}
80% {color: #0000ff;}
90% {color: #8000ff;}
100% {color: #ff0080;}
}
@keyframes rainbow {
0% {color: #ff0000;}
10% {color: #ff8000;}
20% {color: #ffff00;}
30% {color: #80ff00;}
40% {color: #00ff00;}
50% {color: #00ff80;}
60% {color: #00ffff;}
70% {color: #0080ff;}
80% {color: #0000ff;}
90% {color: #8000ff;}
100% {color: #ff0080;}
}

// bouncing logo, http://minimalmonkey.com/fun-animations-with-css3/
.logo:hover {
    animation-name: bounce;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-iteration-count: 3;
}

@keyframes bounce {
    45% {
        height: 130px;
        margin-top: 70px;
    }
    55% {
        height: 130px;
        margin-top: 70px;
    }
    75% {
        height: 170px;
        margin-top: 0px;
    }
}