@font-face {font-family: HoneywellAPEXRegular; src: url('../fonts/HoneywellApex.ttf');}

.blueForward {
    stroke-dasharray:30,30;
    stroke-dashoffset:600;
    stroke:#ed1c24;
    stroke-width:0.0;
    fill:none;
    -webkit-animation:dashFwd 10s linear infinite backwards;
    -ms-animation:dashFwd 10s linear infinite backwards;
    animation:dashFwd 10s linear infinite backwards
}
.blueBackward {
    stroke-dasharray:30,30;
    stroke-dashoffset:600;
    stroke:#ed1c24;
    stroke-width:0.0;
    fill:none;
    -webkit-animation:dashBkwd 10s linear infinite backwards;
    -ms-animation:dashBkwd 10s linear infinite backwards;
    animation:dashBkwd 10s linear infinite backwards
}

.redForward {
    stroke-dasharray:30,30;
    stroke-dashoffset:600;
    stroke:#ed1c24;
    stroke-width:0.0;
    fill:none;
    -webkit-animation:dashFwd 10s linear infinite backwards;
    -ms-animation:dashFwd 10s linear infinite backwards;
    animation:dashFwd 10s linear infinite backwards
}
.redBackward {
    stroke-dasharray:30,30;
    stroke-dashoffset:600;
    stroke:#ed1c24;
    stroke-width:0.0;
    fill:none;
    -webkit-animation:dashBkwd 10s linear infinite backwards;
    -ms-animation:dashBkwd 10s linear infinite backwards;
    animation:dashBkwd 10s linear infinite backwards
}

.greenForward {
    stroke-dasharray:30,30;
    stroke-dashoffset:600;
    stroke:#39b54a;
    stroke-width:0.0;
    fill:none;
    -webkit-animation:dashFwd 10s linear infinite backwards;
    -ms-animation:dashFwd 10s linear infinite backwards;
    animation:dashFwd 10s linear infinite backwards
}
.greenBackward {
    stroke-dasharray:30,30;
    stroke-dashoffset:600;
    stroke:#39b54a;
    stroke-width:0.0;
    fill:none;
    -webkit-animation:dashBkwd 10s linear infinite backwards;
    -ms-animation:dashBkwd 10s linear infinite backwards;
    animation:dashBkwd 10s linear infinite backwards
}

.yellowForward {
    stroke-dasharray:10,10;
    stroke-dashoffset:80;
    stroke:#ffd93a;
    stroke-width:0.0;
    fill:none;
    -webkit-animation:dashFwd 10s linear infinite backwards;
    -ms-animation:dashFwd 10s linear infinite backwards;
    animation:dashFwd 10s linear infinite backwards
}
.yellowBackward {
    stroke-dasharray:10,10;
    stroke-dashoffset:80;
    stroke:#ffd93a;
    stroke-width:0.0;
    fill:none;
    -webkit-animation:dashBkwd 10s linear infinite backwards;
    -ms-animation:dashBkwd 10s linear infinite backwards;
    animation:dashBkwd 10s linear infinite backwards
}

.strokeOne {
    stroke-width:1.0;
}

.strokeTwo {
    stroke-width:2.0;
}


@-webkit-keyframes dashFwd{
    to{
        stroke-dashoffset:0
    }
}
@-ms-keyframes dashFwd{
    to{
        stroke-dashoffset:0
    }
}
@keyframes dashFwd{
    to{
        stroke-dashoffset:0
    }
}
@-webkit-keyframes dashBkwd{
    to{
        stroke-dashoffset:1200
    }
}
@-ms-keyframes dashBkwd{
    to{
        stroke-dashoffset:1200
    }
}
@keyframes dashBkwd{
    to{
        stroke-dashoffset:1200
    }
}

@keyframes rotate360 {
    to { transform: rotate(360deg); }
}

@keyframes rotateBack360 {
    to { transform: rotate(-360deg); }
}

@keyframes rotateStop {
    to { transform: rotate(0deg); }
}

.clockwise { 
    transform-box: fill-box;
    transform-origin: center;
    animation: 5s rotate360 infinite linear; 
}

.cw { 
    transform-box: fill-box;
    transform-origin: center;
    animation: 3s rotateBack360 infinite linear; 
}

.stopRotation { 
    transform-box: fill-box;
    transform-origin: center;
    animation: 0s rotateStop infinite linear; 
}

.ccw { 
    transform-box: fill-box;
    transform-origin: center;
    animation: 5s rotateBack360 infinite linear; 
}