/* ==========================================================================
   CSS Loading ICon
   ========================================================================== */

/* Css BAsed loading Icon
   ========================================================================== */

/**
<div class="loader" style="display: none;">
    <div class="load-text">Loading</div>  
        <div class="spinner">
            <div class="rect1"></div>
            <div class="rect2"></div>
            <div class="rect3"></div>
            <div class="rect4"></div>
            <div class="rect5"></div>
        </div>
</div>
 *                      
 */

.loader-container{
    width:100%;
    height:100%;
    min-height:150px;
}

.loader{
    position:absolute;
    z-index:9999;
    background:#fff;
    width:100%;
    height:100%;
    text-align:center;
    padding-top:25px;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
    filter: alpha(opacity=95);
    -moz-opacity: 0.95;
    -khtml-opacity: 0.95;
    opacity: 0.95;
}

.loader .load-text {
    font-weight:bold;
    font-size:15px;
}

.spinner {
    margin: 10px auto;
    width: 100px;
    height: 34px;
    text-align: center;
    font-size: 1px;
}

.spinner > div {
    height: 100%;
    width: 3px;
margin: 0 3px 0 0;
background-color: #550000;
display: inline-block;
-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
animation: stretchdelay 1.2s infinite ease-in-out;
    display: inline-block;
}

.spinner .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.spinner .rect3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

.spinner .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.spinner .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {
    0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
    20% { -webkit-transform: scaleY(1.0) }
}

@keyframes stretchdelay {
    0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
    }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
    }
}