/**
 * CSS3 Loading Bar
 * ============================================================================
 *
 * Originally created by Lee Munroe (leemunroe) in April 2012, revised by
 * Sacha Schmid (RadLikeWhoa) in December 2012 for 24pullrequests.
 *
 * This loading bar is thought as a replacement for a .gif loading spinner and
 * is created using various CSS3 techniques (e.g. box-shadow, gradients, etc.).
 *
 * Example usage:
    <div class="bar"></div>
 *
 */

.bar {
    /**
     * The loading bar is centered both vertically and horizontally using
     * top: 50%; and left: 50%; and then pulling it back using negative margins.
     */
    position: absolute;
    top: 15px;
    left: 88px;
    height: 15px;
    width: 155px;

    border-radius: 2px;
    background-image: -webkit-linear-gradient(-45deg, #f27265 25%, rgba(255, 154, 26, 0) 25%, rgba(255, 154, 26, 0) 50%, #f27265 50%, #f27265 75%, rgba(255, 154, 26, 0) 75%);
    background-image: -moz-linear-gradient(-45deg, #f27265 25%, rgba(255, 154, 26, 0) 25%, rgba(255, 154, 26, 0) 50%, #f27265 50%, #f27265 75%, rgba(255, 154, 26, 0) 75%);
    background-image: -o-linear-gradient(-45deg, #f27265 25%, rgba(255, 154, 26, 0) 25%, rgba(255, 154, 26, 0) 50%, #f27265 50%, #f27265 75%, rgba(255, 154, 26, 0) 75%);
    background-image: linear-gradient(-45deg, #f27265 25%, rgba(255, 154, 26, 0) 25%, rgba(255, 154, 26, 0) 50%, #f27265 50%, #f27265 75%, rgba(255, 154, 26, 0) 75%);
    background-color: #d3d3d3;
    background-size: 50px 50px;
    border: 1px solid #f27265;
    border-bottom-color: #df695d;
    -webkit-box-shadow: inset 0 10px 0 rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 10px 0 rgba(255, 255, 255, 0.2);
    -webkit-animation: move 2s linear infinite;
    -moz-animation: move 2s linear infinite;
    -ms-animation: move 2s linear infinite;
    animation: move 2s linear infinite;
}

/**
 * The ::before element creates the darker box around the loading bar itself.
 */

.bar::before {
    content: " ";
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03), inset 0 1px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03), inset 0 1px 0 rgba(0, 0, 0, 0.1);
    z-index: -1;
}

/**
 * Animate the stripes.
 */

@-webkit-keyframes move {
    0%   { background-position: 0 0; }
    100% { background-position: 50px 50px; }
}

@-moz-keyframes move {
    0%   { background-position: 0 0; }
    100% { background-position: 50px 50px; }
}

@-ms-keyframes move {
    0%   { background-position: 0 0; }
    100% { background-position: 50px 50px; }
}

@-webkit-keyframes move {
    0%   { background-position: 0 0; }
    100% { background-position: 50px 50px; }
}

#loading-overlay{
    width: 100%;
    height: 100%;
    background-color: #1c94c4;
    position: absolute;
    top: 0px;
    left:0px;
    z-index: 100;
 }
#loading-logo{


}
#loading-container{
    width:389;
    height:187px;
    top: 50%; left: 50%;
    margin-top: -94px; /* ( ( width / 2 ) * -1 ) */
    margin-left: -194px; /* ( ( height / 2 ) * -1 ) */
    position:absolute;
}