@import url(font-awesome.min.css);
/* Spinning loading modal created by Chris Ward Uses font-awesome diamond */
body {
    margin: 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: #636b6f
}

*,:after,:before {
    box-sizing: border-box
}

.loader {
    position: absolute;
    z-index: 999;
    min-width: 100%;
    min-height: 100%;
    opacity: .75 !important;
    background-color: #010101;
    filter: alpha(opacity=75) !important;
    font-size: 12pt;
}
.loader-logo {
    position: fixed;
    left: 45%;
    top: 45%;
    width:100px;
    height:100px;
    margin: auto;
}
.loader-circle {
    background-color: #555;
    border-radius: 100%;
    width: 100%;
    height: 100%;
    background: -moz-radial-gradient(circle at center, rgba(147,147,147,1) 47%, rgba(87,87,87,1) 63%, rgba(0,0,0,0.38) 86%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(circle at center, rgba(147,147,147,1) 47%,rgba(87,87,87,1) 63%,rgba(0,0,0,0.38) 86%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(circle at center, rgba(147,147,147,1) 47%,rgba(87,87,87,1) 63%,rgba(0,0,0,0.38) 86%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#939393', endColorstr='#00000000',GradientType=0 );

}

.loader-spinner {
    position: absolute;
    top: 15px;
    left: 15px;
    border-radius: 100%;
    border-top: 4px solid #303030;
    border-left: 5px solid #202020;
    border-bottom: 6px solid #101010;
    border-radius: 49%;
    color: #F0F0F0;
    background: #DDD;
    cursor: default;
    display: inline-block;
    font-size: 2em;
    height: 2.25em;
    line-height: 2.25em;
    text-align: center;
    width: 2.25em;
    animation: spin 5s linear infinite;
    transform: translate(-50%, -50%);
}


.loader-icon{
    position: absolute;
    top: 35px;
    left: 30px;
    font-size: 1em;
    z-index: 1000;
}

.loader-icon .icon{
    top: 0;
    left: 0;
     font-size: 2em;
}

.logo .icon {
    border-radius: 100%;
    border-top: 4px solid #303030;
    border-left: 5px solid #202020;
    border-bottom: 6px solid #101010;
    border-radius: 49%;
    cursor: default;
    display: inline-block;
    font-size: 2em;
    height: 2.25em;
    width: 2.25em;
    line-height: 2.25em;
    text-align: center;
}

@media (max-width: 768px) {
    .loader-spinner {
        top: 23px;
        left: 20px;
    } 
    .loader-icon{
        top: 45px;
        left: 35px;
    }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}