/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   speak for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.loaderModal {
    display:    none;
    position:   fixed;
    z-index:    1001;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    border:     0;
    border-radius: 0;
    margin:     0;
    opacity:    .8;
    background-color: #333;
}

html[data-useragent*="MSIE 9.0"] .loaderModal { background-image: url('../images/loader.gif');
                                              background-repeat: no-repeat;
                                              background-position: 50% 50%;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .loaderModal {
    display: block;
}

.loaderModal h1 {
    font: 400 2em/1 "Open Sans", sans-serif;
    margin: 7.5em auto .75em;
    text-align: center;
    color: #EEE;
}
.loaderModal .loader {
    margin: 50px auto;
    text-align: center;
    position: relative;
    width: 60%;
}
/* Hack IE para centrar el efecto del loader. */
html[data-useragent*="MSIE"] .loaderModal .loader
{
    padding-left: 50%!important;
}

html[data-useragent*="MSIE 9.0"] .loaderModal .loader
{
    display: none;
}

.loader span {
    background: #EEE;
    border-radius: 6px;
    display: inline-block;
    position: relative;
    width: 15px;
    height: 12px;
    position: absolute;
}
.loaderModal .loader .dot_1 {
  margin-right: 25px;
  animation: loading 4s ease-in-out infinite;
  -ms-animation: loading 4s ease-in-out infinite;
  -webkit-animation: loading 4s ease-in-out infinite;
}
.loaderModal .loader .dot_2 {
  animation: loading 4s ease-in-out .3s infinite;
  -ms-animation: loading 4s ease-in-out .3s infinite;
  -webkit-animation: loading 4s ease-in-out .3s infinite;
}
.loaderModal .loader .dot_3 {
  animation: loading 4s ease-in-out .6s infinite;
  -ms-animation: loading 4s ease-in-out .6s infinite;
  -webkit-animation: loading 4s ease-in-out .6s infinite;
}
.loaderModal .loader .dot_4 {
  animation: loading 4s ease-in-out .9s infinite;
  -ms-animation: loading 4s ease-in-out .9s infinite;
  -webkit-animation: loading 4s ease-in-out .9s infinite;
}
.loaderModal .loader .dot_5 {
  animation: loading 4s ease-in-out .12s infinite;
  -ms-animation: loading 4s ease-in-out .12s infinite;
  -webkit-animation: loading 4s ease-in-out .12s infinite;
}

@keyframes loading {
	from {
    margin-left: -50%;
  	opacity: 0;
  }
  50% {
    margin-left: 0;
  	opacity: 1;
  }
  to {
    margin-left: 50%;
  	opacity: 0;
  }
}
@-ms-keyframes loading 
{
	from {
    margin-left: -50%;
  	opacity: 0;
  }
  50% {
    margin-left: 0;
  	opacity: 1;
  }
  to {
    margin-left: 50%;
  	opacity: 0;
  }
}
@-webkit-keyframes loading 
{
	from {
    margin-left: -50%;
  	opacity: 0;
  }
  50% {
    margin-left: 0;
  	opacity: 1;
  }
  to {
    margin-left: 50%;
  	opacity: 0;
  }
}