/* ANIMACIONES CREADAS Y DEFINIDAS*/

@keyframes rotate-gear {
    from {
        transform: rotateZ(0deg);
        -webkit-transform: rotateZ(0deg);
        -moz-transform: rotateZ(0deg);
        -ms-transform: rotateZ(0deg);
        -o-transform: rotateZ(0deg);
    }
    to {
        transform: rotateZ(360deg);
        -webkit-transform: rotateZ(360deg);
        -moz-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
        -o-transform: rotateZ(360deg);
    }
}

@keyframes fromBellow {
    0% {
        transform: translateY(0%);
        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
        -ms-transform: translateY(0%);
        -o-transform: translateY(0%);
    }
    50% {
        transform: translateY(200%);
        -webkit-transform: translateY(200%);
        -moz-transform: translateY(200%);
        -ms-transform: translateY(200%);
        -o-transform: translateY(200%);
    }
    100% {
        transform: translateY(0%);
        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
        -ms-transform: translateY(0%);
        -o-transform: translateY(0%);
    }
}

@keyframes fromRigth {
    from {
        transform: translateX(200%);
        -webkit-transform: translateX(200%);
        -moz-transform: translateX(200%);
        -ms-transform: translateX(200%);
        -o-transform: translateX(200%);
    }
    to {
        transform: translateX(0);
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
    }
}

.logo-wrapper .gear {
    font-size: 30px;
    margin-bottom: 9px;
    transition: all 600ms;
    -webkit-transition: all 600ms;
    -moz-transition: all 600ms;
    -ms-transition: all 600ms;
    -o-transition: all 600ms;
    /*ANIMACIONVINCULADA*/
    animation-name: rotate-gear;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.logo-wrapper h3 {
    font-size: 40px;
    margin-left: 8px;
    transition: all 600ms;
    -webkit-transition: all 600ms;
    -moz-transition: all 600ms;
    -ms-transition: all 600ms;
    -o-transition: all 600ms;
}

.logo-wrapper:hover {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    color: #000000;
    background-color: #cccccc;
}

.logo-wrapper:hover .gear {
    animation: fromBellow 500ms linear;
    -webkit-animation: fromBellow 500ms linear;
}

.logo-wrapper:hover h3 {
    animation: fromRigth 500ms linear;
    -webkit-animation: fromRigth 500ms linear;
}