/*
Estilos generales
*/
/* 
    Created on : 10/08/2015, 03:37:24 PM
    Author     : Andres Velasco
*/

/* loading */

.cargando{
    position: absolute;
    /*nos posicionamos en el centro del navegador*/
    top:300px;
    left:50%;
    /*indicamos que el margen izquierdo, es la mitad de la anchura*/
    margin-left:-25px;
    /*indicamos que el margen superior, es la mitad de la altura*/
    /*margin-top:-25px;*/
                    
    margin:0 auto;  
    background-repeat:no-repeat;
    width:50px;
    height:50px;
    display:block;
    background-image:url(../images/loading.gif);    
}

.cargando2{
    position: absolute;
    /*nos posicionamos en el centro del navegador*/
    top:400px;
    left:50%;
    /*indicamos que el margen izquierdo, es la mitad de la anchura*/
    margin-left:-25px;
    /*indicamos que el margen superior, es la mitad de la altura*/
    /*margin-top:-25px;*/
                    
    margin:0 auto;  
    background-repeat:no-repeat;
    width:50px;
    height:50px;
    display:block;
    background-image:url(img/loading.gif);    
}

.cargando3{
		position: absolute;
		/*nos posicionamos en el centro del navegador*/
		top:50%;
		left:50%;
		/*determinamos una anchura*/
		width:50px;
		/*indicamos que el margen izquierdo, es la mitad de la anchura*/
		margin-left:-25px;
		/*determinamos una altura*/
		height:50px;
		/*indicamos que el margen superior, es la mitad de la altura*/
		margin-top:-25px;
		padding:5px;
		background-repeat:no-repeat;
		display:block;
		background-image:url(../images/loading.gif);    
}

.nocargando{
    margin:0 auto;
    background-repeat:no-repeat;
    width:0px;
    height:0px;
    display:none;
}

/* ventana modal artesanal desarrollada por Andres Velasco */
.test2{
        display: none; 
        position: absolute;
        top: 0px;
        left: 0%;
        width: 100%;        
        border: 3px solid white;
        box-shadow: 8px 8px 8px 8px rgba(0,0,0,.3);
        margin: 100px 20px 20px 20px;
        -webkit-border-radius: 10px 10px;  /* Safari  */
        -moz-border-radius: 10px 10px;     /* Firefox */
        z-index: 10200;        
        background-color: #fff;
        padding: 10px;
    }
    
.test{
        display: none; 
        position: absolute;
        top: 20px;
        left: 15%;
        width: 70%;        
        border: 3px solid white;
        box-shadow: 8px 8px 8px 8px rgba(0,0,0,.3);
        margin: 100px 20px 20px 20px;
        -webkit-border-radius: 10px 10px;  /* Safari  */
        -moz-border-radius: 10px 10px;     /* Firefox */
        z-index: 1002;
        background-color: #fff;
        padding: 10px;
    }

    .fadebox {
        display: none;
        position: fixed;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index:1001;
        -moz-opacity: 0.5;
        opacity:.50;
        filter: alpha(opacity=50);
        margin: 0px;
    }
    
    .imagen{
        display: none; 
        position: absolute;
        top: 0px;
        left: 0px;
        /*width: 70%;*/
        max-width: 100%;
        border: 3px solid white;
        box-shadow: 8px 8px 8px 8px rgba(0,0,0,.3);
        margin: 0px 20px 20px 20px;
        -webkit-border-radius: 10px 10px;  /* Safari  */
        -moz-border-radius: 10px 10px;     /* Firefox */
        z-index: 1002;
        background-color: #fff;
        padding: 10px;
    }
    
/* manejador de botones */    
    @media (max-width: 800px) {
        .botonAFV {
            font-size: 28px; 
        }
        
        .botonAFV2 {
            font-size: 24px; 
        }
    }
    
    @media (min-width: 801px) {
        .botonAFV {
            font-size: 16px; 
        }
        .botonAFV2 {
            font-size: 16px; 
        }
    }