/***********************************************************
*** CUSTOMIZE THE LOADING SCREEN BACKGROUND + ICON COLORS
************************************************************/
/* loading screen background color */
#bonfire-pageloader {
    background-color:#000;
}


/***********************************************************
*** THE NITTY-GRITTY
************************************************************/
/* the pageloader */
#bonfire-pageloader {
    position:fixed;
    z-index:99999999999999;
    width:100%;
    height:100%;
    left:0;
    right:0;
    top:0;
    bottom:0;
    /*margin-top:-50px;*/
}
.bonfire-pageloader-fade {
    opacity:0 !important;
    
    -webkit-transition: all .75s ease;
    -moz-transition: all .75s ease;
    -o-transition: all .75s ease;
    -ms-transition: all .75s ease;
    transition: all .75s ease;
}
.bonfire-pageloader-hide {
    display:none;
}

/* the loading icon */
.bonfire-pageloader-icon {
    width:100px;
    height:100px;
    position:absolute;
    margin:0 0 0 0;
    opacity:1;
    top:0;
}
.bonfire-pageloader-icon-hide {
    opacity:0 !important;
    
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -o-transition: all .25s ease;
    -ms-transition: all .25s ease;
    transition: all .25s ease;
}

@-webkit-keyframes spin { 100% { -webkit-transform: rotate(-360deg); } }
@-moz-keyframes spin { 100% { -moz-transform: rotate(-360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }

/* lets give the page body that subtle slide-in animation */
html {
    height:100%;
    
    -webkit-backface-visibility: hidden;
    
    -webkit-transform-origin:top;
    -moz-transform-origin:top;
    -ms-transform-origin:top;
    -o-transform-origin:top;
    transform-origin:top;
    
    -webkit-transition: all .75s ease;
    -moz-transition: all .75s ease;
    -o-transition: all .75s ease;
    -ms-transition: all .75s ease;
    transition: all .75s ease;
}
.bonfire-html-onload {  
 /*   -webkit-transform: translateY(-50px);
    -moz-transform: translateY(-50px);
    -ms-transform: translateY(-50px);
    -o-transform: translateY(-50px);
    transform: translateY(-50px);*/

    -webkit-transition: all 0s ease;
    -moz-transition: all 0s ease;
    -o-transition: all 0s ease;
    -ms-transition: all 0s ease;
    transition: all 0s ease;
}

#loading-center-absolute {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 50px;
    width: 150px;
    margin-left: -75px;
    margin-top: 50px;

}
.object{
    width: 8px;
    height: 50px;
    margin-right:5px;
    background-color: #FFF;
    -webkit-animation: animate 1s infinite;
    animation: animate 1s infinite;
    float: left;
    }

.object:last-child {
    margin-right: 0px;
    }

.object:nth-child(10){
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;  
    }
.object:nth-child(9){
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;  
    }   
.object:nth-child(8){
    -webkit-animation-delay: 0.7s;
    animation-delay: 0.7s;  
    }
.object:nth-child(7){
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;  
    }
.object:nth-child(6){
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;  
    }
.object:nth-child(5){
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
    }
.object:nth-child(4){
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;      
    }
.object:nth-child(3){
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;  
    }
.object:nth-child(2){
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
    }                       
    


@-webkit-keyframes animate {
 
  50% {
    -ms-transform: scaleY(0); 
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    
      }
      
      

}

@keyframes animate {
  50% {
    -ms-transform: scaleY(0); 
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
      }

  
}