@import url(https://fonts.googleapis.com/css?family=Raleway:400,900&subset=latin-ext);

#svg-icons {
    display: none;
}

.toolbuilders {
    font-family: 'Raleway', sans-serif;
    font-size: 40pt;
    font-weight: 900;
    padding: 10px;
    margin: 10px;
    /*border: 2px dotted black;*/
}

.toolbuilders > svg {
    height: 0.7em;
    vertical-align: middle;
    fill: currentColor;
}

.toolbuilders > svg.o1 {
    margin-right: -0.02em;

    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);

    -webkit-animation: gear-o1 4s steps(180) 0s infinite;
    -moz-animation: gear-o1 4s steps(180) 0s infinite;
    -o-animation: gear-o1 4s steps(180) 0s infinite;
    animation: gear-o1 4s steps(180) 0s infinite;
}

.toolbuilders > svg.o2 {
    margin-left: -0.02em;

    -webkit-transform: rotate(22.5deg);
    -moz-transform: rotate(22.5deg);
    -ms-transform: rotate(22.5deg);
    -o-transform: rotate(22.5deg);
    transform: rotate(22.5deg);

    -webkit-animation: gear-o2 4s steps(180) 0s infinite;
    -moz-animation: gear-o2 4s steps(180) 0s infinite;
    -o-animation: gear-o2 4s steps(180) 0s infinite;
    animation: gear-o2 4s steps(180) 0s infinite;
}

/* o1 animations */

@-webkit-keyframes gear-o1 {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(45deg);
    }
}

@-moz-keyframes gear-o1 {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(45deg);
    }
}

@-o-keyframes gear-o1 {
    from {
        -o-transform: rotate(0deg);
    }
    to {
        -o-transform: rotate(45deg);
    }
}

@keyframes gear-o1 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(45deg);
    }
}

/* o2 animations */

@-webkit-keyframes gear-o2 {
    from {
        -webkit-transform: rotate(22.5deg);
    }
    to {
        -webkit-transform: rotate(-22.5deg);
    }
}

@-moz-keyframes gear-o2 {
    from {
        -moz-transform: rotate(22.5deg);
    }
    to {
        -moz-transform: rotate(-22.5deg);
    }
}

@-o-keyframes gear-o2 {
    from {
        -o-transform: rotate(22.5deg);
    }
    to {
        -o-transform: rotate(-22.5deg);
    }
}

@keyframes gear-o2 {
    from {
        transform: rotate(22.5deg);
    }
    to {
        transform: rotate(-22.5deg);
    }
}