#preloadContent{
    height:100%;
    width:100%;
    background:rgba(42,42,42,.8);
}
#greenBar{
    position:relative;
    width:100px;
    height:2px;
    background-color:#0dd863
}
#blueBar{
    position:relative;
    width:100px;
    height:2px;
    background-color:#01b0f1
}
#grayBar{
    position:relative;
    width:100px;
    height:2px;
    background-color:#e4ebf1
}
.positionGreen{
    margin-left:0;
    margin-right:0
}
.positionBlue{
    margin-top:10px;
    margin-right:0;
    margin-bottom:10px;
    margin-left:50px
}
.positionGrey{
    margin-top:10px;
    margin-right:0;
    margin-bottom:10px;
    margin-left:100px
}
.signalsMovement{
    animation:moveSignals 2s infinite
}
@keyframes moveSignals{
    from{
        left:0
    }
    to{
        left:1700px
    }
}
#EmptyLights path{
    animation:changeColorE 2s infinite alternate
}
@keyframes changeColorE{
    0%{
        fill:#f5f5f5
    }
    20%{
        fill:#0dd863
    }
    40%{
        fill:#01b0f1
    }
    60%{
        fill:#263238
    }
    80%{
        fill:#01b0f1
    }
    100%{
        fill:#f5f5f5
    }
}
#GreenLights path{
    animation:changeColorG 2s infinite alternate
}
@keyframes changeColorG{
    0%{
        fill:#f5f5f5
    }
    20%{
        fill:#263238
    }
    40%{
        fill:#01b0f1
    }
    60%{
        fill:#0dd863
    }
    80%{
        fill:#f5f5f5
    }
    100%{
        fill:#01b0f1
    }
}
#BlueLights path{
    animation:changeColorB 2s infinite alternate
}
@keyframes changeColorB{
    0%{
        fill:#f5f5f5
    }
    20%{
        fill:#263238
    }
    40%{
        fill:#01b0f1
    }
    60%{
        fill:#263238
    }
    80%{
        fill:#0dd863
    }
    100%{
        fill:#263238
    }
}
.borderDraw{
    stroke-dasharray:500;
    stroke-dashoffset:500;
    animation:dash 1.5s linear forwards
}
@keyframes dash{
    to{
        stroke-dashoffset:0;
        stroke-dasharray:0
    }
}
.preloadlogo{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
    /* z-index:100000; */
}
@media (max-width:1200px){
    .preloadlogo{
        width:500px
    }
}
@media (min-width:600px) and (max-width:900px){
    .preloadlogo{
        width:300px
    }
}
@media (max-width:600px){
    .preloadlogo{
        width:200px
    }
}
@media (max-width:1200px){
    .preloadlogoServer{
        width:200px;
        height:200px
    }
}
@media (min-width:600px) and (max-width:900px){
    .preloadlogoServer{
        width:100px;
        height:100px
    }
}
@media (max-width:600px){
    .preloadlogoServer{
        width:50px;
        height:50px
    }
}
@media (max-width:900px){
    #greenBar{
        width:20px;
        height:1px;
        margin-top:0
    }
}
@media (max-width:900px){
    #blueBar{
        width:20px;
        height:1px;
        margin-left:8px;
        margin-top:1px;
        margin-bottom:1px
    }
}
@media (max-width:900px){
    #grayBar{
        height:1px;
        width:20px;
        margin-left:15px;
        margin-top:1px
    }
}
.signalcontainer{
    margin-top:15px
}
@media (max-width:900px){
    .signalcontainer{
        margin-top:-7px
    }
}
@media (max-width:770px){
    .m-view-salogo{
        width:500px
    }
}
@media (max-width:580px){
    .m-view-salogo{
        width:250px
    }
}
@media (min-width:200px) and (max-width:580px){
    .m-view-logo-tagline{
        font-size:17px!important
    }
}
@media (min-width:580px) and (max-width:768px){
    .m-view-logo-tagline{
        font-size:35px!important
    }
}


@media (max-width:580px){
    .m-view-bottom{
        margin-bottom:250px
    }
}
*{
    transition:all .2s ease
}


@media (max-width:575.98px){
    .w-xs-100{
        font-size:11px;
        width:100%!important
    }
    .w-xs-75{
        width:75%!important
    }
    .w-xs-50{
        width:50%!important
    }
    .w-xs-25{
        width:25%!important
    }
}
@media (min-width:576px) and (max-width:767.98px){
    .w-sm-100{
        width:100%!important
    }
    .w-sm-75{
        width:75%!important
    }
    .w-sm-50{
        width:50%!important
    }
    .w-sm-25{
        width:25%!important
    }
}
@media (min-width:768px) and (max-width:991.98px){
    .w-md-100{
        width:100%!important
    }
    .w-md-75{
        width:75%!important
    }
    .w-md-50{
        width:50%!important
    }
    .w-md-25{
        width:25%!important
    }
}
@media (min-width:992px) and (max-width:1199.98px){
    .w-lg-100{
        width:100%!important
    }
    .w-lg-75{
        width:75%!important
    }
    .w-lg-50{
        width:50%!important
    }
    .w-lg-25{
        width:25%!important
    }
}
@media (min-width:1200px){
    .w-xl-100{
        width:100%!important
    }
    .w-xl-75{
        width:75%!important
    }
    .w-xl-50{
        width:50%!important
    }
    .w-xl-25{
        width:25%!important
    }
}