﻿body {
}

/*set Gauge Icon Animation*/
.SGIA {
    height: 80px;
    width: 80px;
    position: absolute;
    left: 50%;
    margin-left: -40px;
    top: 50%;
    margin-top: -40px;

    /*    position: absolute;
    left: 50%;
    top: 50%;*/
}

/*set Gauge Animation*/
.SGA {
    height: 160px;
    width: 160px;
    position: absolute;
    left: 50%;
    margin-left: -80px;
    top: 50%;
    margin-top: -80px;
}

.rnd0 {
    transform: rotate(0deg);
}

.rnd1 {
    transform: rotate(45deg);
}

.rnd2 {
    transform: rotate(90deg);
}

.rnd2 {
    transform: rotate(135deg);
}

.rnd4 {
    transform: rotate(180deg);
}



.Gauge1 {
    animation: G1 20s infinite;
}

@keyframes G1 {
    0% {
        opacity: 0.5;
    }

    100% {
        transform: rotate(180deg);
        opacity: 1;
    }
}

.Gauge2 {
    animation: G2 14s infinite;
}

@keyframes G2 {
    0% {
        opacity: 0.5;
    }

    100% {
        transform: rotate(-180deg);
        opacity: 1;
    }
}

.Gauge3 {
    animation: G3 10s infinite;
}

@keyframes G3 {
    50% {
        transform: rotate(-180deg);
    }
}

.Gauge4 {
    animation: G4 20s infinite;
}

@keyframes G4 {
    50% {
        transform: rotate(180deg);
    }
}
