﻿body {
	width: 99%;
	height: 99%;
/*   background: url('../fondo.jpg') no-repeat fixed center center; */
    background: url('../fondo.jpg'); 
    background-size: cover;
    background-color: black;
   	line-height:24px;	
}

.logo {
    width: 384px;
    height: 126px;
	border-radius: 5px;
    //border: #e84921 3px solid;
	border: none;
    background: url('../logo.png') no-repeat;
    margin: 30px auto;
   	filter:alpha(opacity=100); 
 	opacity:1.0;

}

.logo_mettec {
    width: 100%;
 	filter:alpha(opacity=80); 
 	opacity:0.8;
}

.imagen_mettec{
    display:block;
    margin:auto;
	width: 10%;
}

.login-block {
	width: 320px;
	padding: 20px;
	background: #fff;
	border-radius: 5px;
	border-top: 5px #e84921 solid;
	margin: 0 auto;
 	filter:alpha(opacity=90); 
 	opacity:0.9;
}

.login-block h1 {
    text-align: center;
    color: #000;
 	font-family: Arial, Helvetica, sans-serif;    
    font-size: 18px;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 20px;
}

.login-block input {
    width: 100%;
    height: 42px;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    font-size: 18px;
/*    font-family: Montserrat;*/
	font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif ;
    padding: 0 20px 0 50px;
    outline: none;
}

.login-block input#email{
    background: #fff url('../usuario.png') 20px top no-repeat;
    background-size: 16px 80px;
}

.login-block input#email:focus {
    background: #fff url('../usuario.png') 20px bottom no-repeat;
    background-size: 16px 80px;
}

.login-block input#password {
	
    background: #fff url('../candado.png') 20px top no-repeat;
    background-size: 16px 80px;
}

.login-block input#password:focus {
    background: #fff url('../candado.png') 20px bottom no-repeat;
    background-size: 16px 80px;
}

.login-block input:active, .login-block input:focus {
    border: 1px solid #3366CC;
}

.login-block button {
	width: 100%;
	height: 40px;
	background: #e84921;
	box-sizing: border-box;
	border-radius: 5px;
	border: 1px Gray solid;
	color: #fff;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 14px;
	/*font-family: Montserrat;*/
 	font-family: Arial, Helvetica, sans-serif;
	outline: none;
	cursor: pointer;
}

.login-block button:hover {
    background: OrangeRed;
}

@media screen and (max-width: 63.875em) {

	/*
	html {
		margin: 0 0 0 0;
		top: 0;
		width: 100%;
		height: 100%;
	    background: url('../fondo.jpg');
        -webkit-background-size: cover;
        -moz-background-size: cover;		
		background-size: cover;
	}
*/
	
	body {
		width: 100%;
		height: 100%;
			
	    background: url('../fondo.jpg') no-repeat center center fixed;
		//background: url('../fondo.jpg'); 
		border: none;

        -webkit-background-size: cover;
        -moz-background-size: cover;		
		background-size: cover;
		
		background-color: black;
		line-height:24px;	
	}

	
	.logo {
/*	    width: 261px !important;*/
		width: 384px;
		height: 126px;
		//border-radius: 5px;
	    //border: #e84921  3px solid;
	    background: url('../logo.png') no-repeat center center;		
	    background-size: cover;
	    margin: 50px auto;
	   	filter:alpha(opacity=90); 
	 	opacity:0.9;
	}
	
	.logo_mettec {
		margin-top: 2%;
	    width: 100%;
	 	filter:alpha(opacity=50); 
	 	opacity:0.5;
	 	font-size: 2.5vmax;
	}

	.logo_mettec {
		margin-top: 2%;
	    width: 100%;
	 	filter:alpha(opacity=50); 
	 	opacity:0.5;
	 	font-size: 2.5vmax;
	}

	.logo_mettec a{
		margin-top: 2%;
	}
	
	.imagen_mettec{
	    display:block;
	    margin:auto;
		width: 15vmax;
	}
	
	.login-block {
		width: 40vmax !important;
		padding: 3vmax;
		background: #fff;
		border-radius: 1%;
		border-top: 5px #e84921  solid;
		margin: 0 auto;
	 	filter:alpha(opacity=90); 
	 	opacity:0.9;
	    line-height: 6.0vmax !important;
	 	
	}
	
	.login-block h1 {
	    text-align: center;
	    color: #000;
	 	font-family: Arial, Helvetica, sans-serif;    
	    font-size: 3.0vmax;	    
	    text-transform: uppercase;
	    margin-top: 0;
	    margin-bottom: 20px;
	}
	
	.login-block input {
	    width: 100%;
	    height: auto;
	    box-sizing: border-box;
		border-radius: 1%;
	    border: 1px solid #ccc;
/*	    margin-bottom: 20px;*/
	    font-size: 2.5vmax;	  
  
	/*    font-family: Montserrat;*/
		font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif ;
	    /*padding: 0 20px 0 50px;*/
	    padding: 10px 5px 10px 5px;
	    outline: none;
	}
	
	.login-block input#email{
		background: none;
	}

	.login-block input#email:focus {
		background: none;
	}
	
	.login-block input#password {
		background: none;
	}
	
	.login-block input#password:focus {
		background: none;
	}

		
	.login-block input:active, .login-block input:focus {
	    border: 1px solid #3366CC;
	}
	
	.error { 
	    font-size: 2.0vmax;	    
		color: red; 
	}
	
	.login-block button {
		width: 100%;
		height: 50% !important;
		background: #e84921 ;
		box-sizing: border-box;
		border-radius: 1%;
		border: 1px #0000FF solid;
		color: #fff;
		font-weight: bold;
		text-transform: uppercase;
	    font-size: 4.0vmax;	    
		/*font-family: Montserrat;*/
	 	font-family: Arial, Helvetica, sans-serif;
		outline: none;
		cursor: pointer;
	}
	
	.login-block button:hover {
	    background: #3366CC;
	}
			
}

