padding: 100px 0 150px 0;
margin: 50px 100px 0 150px;
-moz-transition: 1.5s ease;
-webkit-transition: 1.5s ease;
.fly-menu:hover .fly-main {
-moz-transform: rotate(490deg);
-webkit-transform: rotate(490deg);
transform: rotate(490deg);
-moz-transition: 0.3s ease;
-webkit-transition: 0.3s ease;
.fly-menu:hover .fly-hover {
-moz-transform: scale(5);
-webkit-transform: scale(5);
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
-moz-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-moz-transition-timing-function: linear;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
background-color: #D4F25C;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
-moz-transition-delay: 0.2s;
-webkit-transition-delay: 0.2s;
border-color: transparent transparent #577305;
background-color:#577305;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-moz-animation: home 1s 1 linear;
-webkit-animation: home 1s 1 linear;
animation: home 1s 1 linear;
0% {-moz-transform: rotate(-360deg); top: 15px; left: 15px;}
50% {-moz-transform: rotate(0deg); top: -70px; left: -70px;}
100% {-moz-transform: rotate(360deg); top: -60px; left: -60px;}
@-webkit-keyframes home {
0% {-webkit-transform: rotate(-360deg); top: 15px; left: 15px;}
50% {-webkit-transform: rotate(0deg); top: -70px; left: -70px;}
100% {-webkit-transform: rotate(360deg) top: -60px; left: -60px;;}
0% {transform: rotate(-360deg); top: 15px; left: 15px;}
50% {transform: rotate(0deg); top: -70px; left: -70px;}
100% {transform: rotate(360deg); top: -60px; left: -60px;}
background-color: #02BDF4;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
-moz-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
background-color:#21383E;
background-color:#21383E;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-moz-animation: it-2 1.1s 1 linear;
-webkit-animation: it-2 1.1s 1 linear;
animation: it-2 1.1s 1 linear;
0% {-moz-transform: rotate(-360deg); top: 15px;}
50% {-moz-transform: rotate(0deg); top: -110px;}
100% {-moz-transform: rotate(360deg); top:-100px;}
@-webkit-keyframes about {
0% {-webkit-transform: rotate(-360deg); top: 15px;}
50% {-webkit-transform: rotate(0deg); top: -110px;}
100% {-webkit-transform: rotate(360deg); top:-100px;}
0% {transform: rotate(-360deg); top: 15px;}
50% {transform: rotate(0deg); top: -110px;}
100% {transform: rotate(360deg); top:-100px;}
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
-moz-transition-delay: 0.4s;
-webkit-transition-delay: 0.4s;
background-color:#693E13;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border:6px solid #693E13;
border-radius:0px 0px 10px 10px;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
.fly-menu:hover .setting {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-moz-animation: it-3 1.2s 1 linear;
-webkit-animation: it-3 1.2s 1 linear;
animation: it-3 1.2s 1 linear;
@-moz-keyframes setting {
0% {-moz-transform: rotate(-360deg); top: 15px; right: 15px;}
50% {-moz-transform: rotate(0deg); top: -70px; right: -70px}
100% {-moz-transform: rotate(360deg); top:-60px; right: -60px; }
@-webkit-keyframes setting {
0% {-webkit-transform: rotate(-360deg); top: 15px; right: 15px;}
50% {-webkit-transform: rotate(0deg); top: -70px; right: -70px}
100% {-webkit-transform: rotate(360deg); top:-60px; right: -60px; }
0% {transform: rotate(-360deg); top: 15px; right: 15px;}
50% {transform: rotate(0deg); top: -70px; right: -70px}
100% {transform: rotate(360deg); top:-60px; right: -60px; }
background-color:#FDE674;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
-moz-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
.fly-menu:hover .portfolio {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-moz-animation: portfolio 1.2s 1 linear;
-webkit-animation: portfolio 1.2s 1 linear;
animation: portfolio 1.2s 1 linear;
@-moz-keyframes portfolio {
0% {-moz-transform: rotate(-360deg); bottom: 15px; right: 15px;}
50% {-moz-transform: rotate(0deg); bottom: -70px; right: -70px}
100% {-moz-transform: rotate(360deg); bottom:-60px; right: -60px; }
@-webkit-keyframes portfolio {
0% {-webkit-transform: rotate(-360deg); bottom: 15px; right: 15px;}
50% {-webkit-transform: rotate(0deg); bottom: -70px; right: -70px}
100% {-webkit-transform: rotate(360deg); bottom:-60px; right: -60px; }
0% {transform: rotate(-360deg); bottom: 15px; right: 15px;}
50% {transform: rotate(0deg); bottom: -70px; right: -70px}
100% {transform: rotate(360deg); bottom:-60px; right: -60px; }
background: url(http://cahcepu.com/v3/anim/plus2.png) no-repeat center top;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
-moz-transition-delay: 0.6s;
-webkit-transition-delay: 0.6s;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-moz-animation: it-5 1.3s 1 linear;
-webkit-animation: it-5 1.3s 1 linear;
animation: it-5 1.3s 1 linear;
0% {-moz-transform: rotate(-360deg); bottom: 15px;}
50% {-moz-transform: rotate(0deg); bottom: -110px;}
100% {-moz-transform: rotate(360deg); bottom:-100px; }
@-webkit-keyframes it-5 {
0% {-webkit-transform: rotate(-360deg); bottom: 15px;}
50% {-webkit-transform: rotate(0deg); bottom: -110px;}
100% {-webkit-transform: rotate(360deg); bottom:-100px; }
0% {transform: rotate(-360deg); bottom: 15px;}
50% {transform: rotate(0deg); bottom: -110px;}
100% {transform: rotate(360deg); bottom:-100px; }
background: url(http://cahcepu.com/v3/anim/plus2.png) no-repeat center top;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
-moz-transition-delay: 0.7s;
-webkit-transition-delay: 0.7s;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
-moz-animation: it-6 1.4s 1 linear;
-webkit-animation: it-6 1.4s 1 linear;
animation: it-6 1.4s 1 linear;
0% {-moz-transform: rotate(-360deg); bottom: 15px; left: 15px;}
50% {-moz-transform: rotate(0deg); bottom: -70px; left: -70px}
100% {-moz-transform: rotate(360deg); bottom:-60px; left: -60px; }
@-webkit-keyframes it-6 {
0% {-webkit-transform: rotate(-360deg); bottom: 15px; left: 15px;}
50% {-webkit-transform: rotate(0deg); bottom: -70px; left: -70px}
100% {-webkit-transform: rotate(360deg); bottom:-60px; left: -60px; }
0% {transform: rotate(-360deg); bottom: 15px; left: 15px;}
50% {transform: rotate(0deg); bottom: -70px; left: -70px}
100% {transform: rotate(360deg); bottom:-60px; left: -60px; }