@charset "UTF-8";
/* CSS Document */
.bg2 {position: absolute; right: 0; top: 50px;}

.plad {margin: -300px;float: right; position: absolute; width: 600px; height: 600px; top: 300px; right: 300px; z-index: 0;-webkit-transform: rotate(25deg); 
    -moz-transform: rotate(25deg);  
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /*for IE*/}
.scroll .plad {-webkit-transform: rotate(25deg); 
    -moz-transform: rotate(25deg);  
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /*for IE*/}    
.plad div {position: absolute; opacity: .8;}

.yell {background-color:#FFCC00; width: 40%; height: 40%; z-index: 0;}
.yell:nth-child(2) {right: 0;}
.yell:nth-child(3) {right: 0; bottom: 0;}
.yell:nth-child(4) {left: 0; bottom: 0;}

.orang {background-color: #FF9900; width: 40%; height: 40%; z-index: 10;margin: 6%}
.orang:nth-child(5) {left: 0; top: 0;}
.orang:nth-child(6) {right: 0; top: 0;}
.orang:nth-child(7) {right: 0; bottom: 0;}
.orang:nth-child(8) {left: 0; bottom: 0;}


.grn {background-color:#7eb871; width: 35%; height: 35%; z-index: 20;-webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg);  
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=5); /*for IE*/}
    
.grn:nth-child(9) {left: 33%; top: 0%;}
.grn:nth-child(10) {right: 0%; top: 33%;}
.grn:nth-child(11) {right: 33%; bottom: 0%;}
.grn:nth-child(12) {left: 0%; bottom: 33%;}

.speed {background-color: #5c7779; width: 50%; height: 50%; z-index: 30; left: 25%; top: 25%;}

.plad {
  animation-name: spin;
  animation-iteration-count: 1;
  animation-timing-function: none;
 animation-duration: 3s;
}

/*
.plad div {
  animation-name: bloat;
  animation-iteration-count: 1;
  animation-timing-function: none;
 animation-duration: 3s;
}

.plad .grn {
  animation-name: bloat2;
  animation-iteration-count: 1;
  animation-timing-function: none;
 animation-duration: 2s;
}

.plad .speed {
  animation-name: bloat3;
  animation-iteration-count: 1;
  animation-timing-function: none;
 animation-duration: 2s;
}
*/

.speed:hover { width: 53%; height: 53%; left: 23%; top: 23%;cursor: pointer; cursor: hand;}

@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(385deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(385deg); }
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(30deg);}
	/*was 385deg*/
}


@-moz-keyframes bloat {
    from { -moz-transform: rotate(0deg);  width: 0%; height: 0%;}
    to { -moz-transform: rotate(0deg);  width: 40%; height: 40%;}
}
@-webkit-keyframes bloat {
    from { -webkit-transform: rotate(0deg);  width: 0%; height: 0%;}
    to { -webkit-transform: rotate(0deg); width: 40%; height: 40%; }
}
@keyframes bloat {
    from {transform:rotate(0deg); width: 0%; height: 0%;}
    to {transform:rotate(0deg); width: 40%; height: 40%;}
}

@-moz-keyframes bloat2 {
    from { -moz-transform: rotate(0deg);  width: 0%; height: 0%;}
    to { -moz-transform: rotate(45deg);  width: 35%; height: 35%;}
}
@-webkit-keyframes bloat2 {
    from { -webkit-transform: rotate(0deg);  width: 0%; height: 0%;}
    to { -webkit-transform: rotate(45deg); width: 35%; height: 35%; }
}
@keyframes bloat2 {
    from {transform:rotate(0deg); width: 0%; height: 0%;}
    to {transform:rotate(45deg); width: 35%; height: 35%;}
}


@-moz-keyframes bloat3 {
    from {width: 0%; height: 0%;}
    to {width: 50%; height: 50%;}
}
@-webkit-keyframes bloat3 {
    from { width: 0%; height: 0%;}
    to { width: 50%; height: 50%; }
}
@keyframes bloat3 {
    from { width: 0%; height: 0%;}
    to { width: 50%; height: 50%;}
}


.plad {
  transition: all .01s ;
}
.plad div, .grn  {
  transition: all 1s ease;
}