/**********************/
/*ESTILOS PANTALLA CARGA*/
/*Efectos Icono girando*/
.glyphicon-spin {
    -webkit-animation: spin 700ms infinite linear;
    animation: spin 700ms infinite linear;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

/*Fondo Gris*/
.background-gray {
    /*display: none;  Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* 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(193, 193, 193, 0.31); /* Black w/ opacity */
}

/*Contenedor de pantalla de carga*/
.loading-content {
    background-color: transparent;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: none; /*1px solid #888;*/
    width: 80%; /* Could be more or less, depending on screen size */
    color: #2d2d2d;
}

/*Texto mostrado de carga*/
.loading-info-container {
    font-size: 2em;
}

/*Icono de carga*/
.loading-icon-container {
    font-size: 3em;
}


/*Redefinir estilos dependiendo del tamaño de la pantalla*/
/*Pantallas ancho menor a 500 px*/
@media screen and (max-width : 500px) {
    .loading-info-container {
        font-size: 2em;
        margin-top: 3em;
    }

    .loading-icon-container {
        font-size: 2em;
    }
}
/**********************/