.n-direction, .ne-direction, .e-direction, .se-direction, .s-direction, .sw-direction, .w-direction, .nw-direction, .no-direction {
    background-repeat: no-repeat !important;
    background-position: center center !important;
    width: 100% !important;
    height: 110px !important;
}
.n-direction {
    background-image: url(../Images/north.png);
}

.ne-direction {
    background-image: url(../Images/north-east.png);
}

.e-direction {
    background-image: url(../Images/east.png);
}

.se-direction {
    background-image: url(../Images/south-east.png);
}

.s-direction {
    background-image: url(../Images/south.png);
}

.sw-direction {
    background-image: url(../Images/south-west.png);
}

.w-direction {
    background-image: url(../Images/west.png);
}

.nw-direction {
    background-image: url(../Images/north-west.png);
}

.no-direction {
    background-image: url(../Images/no-direction.png);
}
#speed {
    font-weight: bold;
    padding-top: 23px;
    font-size: 16px !important;
    color: #fff;
    text-align: center;
}

#direction {
    font-weight: bold;
    font-size: 1.8em;
    margin-top: 0px;
    padding-top: 0px;
    color: #fff;
    text-align: center;
}

#direction {
    text-transform: uppercase;
}

.surface-condition-red {
    background-color: #E71316;
    color: #ffffff;
}

.surface-condition-orange {
    background-color: #B85C00;
    color: #ffffff;
}

.surface-condition-yellow {
    background-color: #ffff00;
    color: #000000;
}

.surface-condition-blue {
    background-color: #0000FF;
    color: #ffffff;
}

.surface-condition-green {
    background-color: #4A7E10;
    color: #ffffff;
}

.surface-condition-white {
    background-color: #e4e2e2;
    color: #000000;
}

.surface-condition-grey {
    background-color: #969696;
    color: #000000;
}