﻿

/* The Modal (background) */
.nerload {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 10000; /* Sit on top */  
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
}

/* Modal Content */
.nerload-content {
  position: relative;
  top:40%; 
  width:200px;
  padding:20px;
  margin: auto;      
  min-width: 50px;
  text-align:center;  
  -webkit-animation-name: nerloadanimateopa;
  -webkit-animation-duration: 0.5s;
  animation-name: nerloadanimateopa;
  animation-duration: 0.5s;  
  background: white;
  -webkit-box-shadow: 0 0 30px 20px #FFFFFF;
  box-shadow: 0 0 30px 20px #FFFFFF;    
}

#LoadBoxContenido { padding-top: 65px; font-size:15px; color: Orange; text-transform: uppercase; }

/* Add Animation */
@-webkit-keyframes nerloadanimateopa {
  from {opacity:0} 
  to {opacity:1}
}

@keyframes nerloadanimateopa {
  from {opacity:0}
  to {opacity:1}
}

.nermodal-body {padding: 2px 16px;}

.nerload-body .circle
{
    display:block;
    border-radius: 50%;
    background-color: orange;
    width: 40px;
    height: 40px;
    position: absolute;
    top:0px;
    left:0px;
    opacity: 0;
    animation: nerload-body-circle 4s infinite cubic-bezier(.36, .11, .89, .32);    
}

@keyframes nerload-body-circle {
  from {
    transform: scale(.5, .5);
    opacity: .5;
  }
  to {
    transform: scale(2.5, 2.5);
    opacity: 0;
  }
}