/* 
    Created on : 29/07/2016, 11:46:37
    Author     : Patricio Toala
*/
html,body{
    margin:0px;
    height:100%;
    font-family: Roboto,Arial,Helvetica;         
}

	
#ft_principal{
    font-size: 10px;
}

#header{
    height: 50px;
}

#banner{
    float: left; 
    width: 50%; 
    height:100%
}

#bienvenido{
    border-left-width: 0; 
    border-top-width: 0; 
    border-bottom-width: 0; 
    border-right-width: 1px;     
    border-color: #0000FF; 
    border-style: solid; 
    padding-left: 15px; 
    float: left;  
    width: 20%; 
    height:90%; 
    margin-top: 3px;
}

#foto{
    float: left;  
    width: 55%; 
    height:100%;
     
}

#foto_usuario{
    float:right; 
    height: 90%; 
    margin-top: 3px;
}

#info_usuario{
    float: left;  
    width: 50%; 
    height:100%        
}

.centrado {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);		
}

#div_login{
	height:35%; 
	width: 25%; 
	padding:40px;
	background:#fafafa;
	border-radius: 3px;
	-webkit-box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
	box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
}

#img_login{
    width: 100%;
    
}

#btn_login{
    width: 40%;
}

#btn_reset{
    width: 56%;
}

 


/* para 980px o menos */
@media screen and (max-width:980px) {
	.centrado {
		position: absolute;
		left: 50%;
		top: 10%;
		transform: translate(-50%, -10%);
		-webkit-transform: translate(-50%, -10%);		
	}
	
	#div_login{
		height:30%; 
		width: 55%; 
		padding:20px;
		background:#fafafa;
		border-radius: 3px;
		-webkit-box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
		box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
	}
        
         #img_login{            
            width:  50%;          
        }
        
        #btn_login{
            width: 100%;
            margin-bottom: 5px;
        }
        
         #foto{
            display: none;
        }
        
        #btn_reset{
            width: 100%;
        }
        
        #bienvenido{                
           width: 53%; 
          
        } 
        
        #btn_logout{
            position: absolute;
            left: 83%;
            height: 80%;
		
        }                                      
        
        
        
        .l-btn-large .l-btn-icon {
            margin-top: 3px;
            top: 0;
        }
        
}

/* para 700px o menos */
@media screen and (max-width:700px) {
	.centrado {
		position: absolute;
		left: 50%;
		top: 10%;
		transform: translate(-50%, -10%);
		-webkit-transform: translate(-50%, -10%);		
	}
	
	#div_login{
		height:78%; 
		width: 65%; 
		padding:20px;
		background:#fafafa;
		border-radius: 3px;
		-webkit-box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
		box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
	}
        
         #img_login{            
            width:  50%;          
        }
        
        #btn_login{
            width: 100%;
            margin-bottom: 5px;
        }
        
        #btn_reset{
            width: 100%;
        }
        
         #foto{
            display: none;
        }
                        
        #bienvenido{                
           width: 53%; 
          
        } 
        
        #btn_logout{
            position: absolute;
            left: 80%;
            height: 80%;
		
        }                                      
        
        
        
        .l-btn-large .l-btn-icon {
            margin-top: 3px;
            top: 0;
        }
}

/* para 480px o menos */
@media screen and (max-width:480px) {
	.centrado {
		position: absolute;
		left: 50%;
		top: 10%;
		transform: translate(-50%, -10%);
		-webkit-transform: translate(-50%, -10%);		
	}
	
	#div_login{
		height:78%; 
		width: 85%; 
		padding:20px;
		background:#fafafa;
		border-radius: 3px;
		-webkit-box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
		box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
	}
        
        #img_login{            
            width:  50%;          
        }
        
        #btn_login{
            width: 100%;
            margin-bottom: 5px;
        }
        
        #btn_reset{
            width: 100%;
        }
        
        #banner{
            float: left; 
            width: 25%; 
            height:70%
        }
        
        #info_usuario{
            float: left;  
            width: 75%; 
            height:100%;             
        }
        
        #foto{
            display: none;
        }
                        
        #bienvenido{                
           width: 40%; 
           display: none;
        } 
        
        #btn_logout{
            position: absolute;
            left: 70%;
            height: 80%;
		
        }                                      
        
        
        
        .l-btn-large .l-btn-icon {
            margin-top: 3px;
            top: 0;
        }
}

/* para 320px o menos */
@media screen and (max-width:320px) {
	.centrado {
		position: absolute;
		left: 50%;
		top: 10%;
		transform: translate(-50%, -10%);
		-webkit-transform: translate(-50%, -10%);		
	}
	
	#div_login{
		height:78%; 
		width: 85%; 
		padding:20px;
		background:#fafafa;
		border-radius: 3px;
		-webkit-box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
		box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
	}
        
        #img_login{            
            width:  50%;          
        }
        
        #btn_login{
            width: 100%;
            margin-bottom: 5px;
        }
        
        #btn_reset{
            width: 100%;
        }
        
        #banner{
            float: left; 
            width: 25%; 
            height:70%
        }
        
        #info_usuario{
            float: left;  
            width: 75%; 
            height:100%;             
        }
        
        #foto{
            display: none;
        }
                        
        #bienvenido{                
           width: 40%; 
           display: none;
        } 
        
        #btn_logout{
            position: absolute;
            left: 70%;
            height: 80%;
		
        }
                
        .l-btn-large .l-btn-text {
            line-height: 23px;
        }
        
      
}