body{
	background-color:#333333;
	letter-spacing:1px;
	font-family: Bariol;
	/*background-image: url('/img/logo/mecanico.jpg');*/
	background-size: 100% 100%;
	background-repeat: no-repeat;
	}
	
body div{
	box-sizing:border-box;
	}	
	
.title{
	position:relative;
	margin:0 auto;
	color:#333;
	font-size:22px;
	text-align:center;
	padding-bottom:30px;
	}

.title img{
	margin-bottom: 40px;
}	

.title_1{
	background: #27b3a0;
    padding: 10px 10px;
    margin-bottom: 30px;
    color: #fff;
}	
	
.title .title_2{
	position:relative;
	display:inline-block;
	font-size:18px;
	margin:15px 0;
	padding: 10px 30px;
	background: #27b3a0;
	color: #fff;
	}	

.title .title_3{
	position: relative;
    font-size: 24px;
    padding: 10px 30px;
    background: #27b3a0;
    display: block;
    width: fit-content;
    margin: 0 auto;
    color: #fff;
}

.title span{
	color: #333;
}

.error a{
	text-decoration:underlined;
	color:#fff;
	
	}

.form{
	position:relative;
	max-width:320px;
	width:100%;
	color:#fff;
	margin:0 auto;
	}
	
.access{
	position:relative;
	max-width:320px;
	width:100%;
	min-height:320px;
	color:#fff;
	margin:0 auto;
	}	

.logButton, .recoverButton{
	padding:10px;
	}
	
.logIn{
	border:1px solid #27b3a0;
	padding:15px;
	text-align:center;
	cursor:pointer;
	font-size:20px;
	transition:.3s;
	background-color:rgba(74,74,74,0.5);
	}
	
.logIn:hover{
	background-color:#4a4a4a;
	transition:.2s;
	}	
	
.recover{
	border:1px solid #27b3a0;
	padding:15px;
	text-align:center;
	cursor:pointer;
	font-size:20px;
	transition:.3s;
	background-color:rgba(74,74,74,0.5);
	}	
	
.recover:hover{
	background-color:#4a4a4a;
	transition:.2s;
	}	

.access .mailBox{
	padding:10px;
	}
	
.access .resetMailBox{
	padding:10px;
	display:none;
	}	

.access .mail{
	border:1px solid #00a3a1;
	padding:10px;
	text-align:center;
	background-color: rgba(74,74,74,0.5);
	}	
	
.access .mail i{
	position:relative;
	font-size:22px;
	display:inline-block;
	padding-right:10px;
	top:5px;
	}	
	
.access .passBox{
	padding:10px;
	text-align:center;
	}

.access .password{
	border:1px solid #00a3a1;
	padding:10px;
	background-color: rgba(74,74,74,0.5);
	}	
	
.access .password i{
	position:relative;	
	font-size:22px;
	display:inline-block;
	padding-right:10px;
	top:5px;	
	}
	
.access .input_mail{
	position:relative;
	background-color:transparent;
	line-height:36px;
	border:none;
	border-left:1px solid rgba(165,160,158,1);
	padding-left:20px;
	width:80%;
	display:inline-block;
	margin:0 auto;
	color:#cec7c4;
	}	

.access .input_mail::placeholder{
	color: #cacaca;
}

.access .input_password::placeholder{
	color: #cacaca;

}
	
.access .input_mail:focus{
	outline:0;
	color:#fff;
	}
	
.access .input_password:focus{
	outline:0;
	color:#fff;
	}		

.access .input_password{
	position:relative;
	background-color:transparent;
	line-height:36px;
	border:none;
	border-left:1px solid rgba(165,160,158,1);
	padding-left:20px;
	color:#c3c3c3;
	width:80%;
	display:inline-block;
	margin:0 auto;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
  transition: background-color 5000s ease-in-out 0s;
}



.log{
	width:100%;
	color:#fff;
	padding:10px;
	}	
	
.reset{
	width:100%;
	color:#fff;
	padding:10px;
	display:none;
	}	
		
.savePassword{
	width:100%;
	color:#fff;
	padding:10px;
	}
		
.log .signIn{
	border:1px solid #00a3a1;
	background-color:rgba(0,0,0,0.2);
	padding:10px;
	text-align:center;
	font-size:20px;
	cursor:pointer;
	transition:.3s;
	color:#fff;
	width:100%;
	max-width:300px;
	}
	
.reset .resetPassword, .savePassword .resetPassword{
	border:1px solid #00a3a1;
	background-color:rgba(0,0,0,0.2);
	padding:10px;
	text-align:center;
	font-size:20px;
	cursor:pointer;
	transition:.3s;
	color:#fff;
	width:100%;
	max-width:300px;
	}	
	
.log .signIn:hover{
	box-shadow: inset 0 0 15px rgba(0,163,161,0.6);
	transition:.2s;
	}		
	
.access .error{
	font-size:15px;
	margin:25px 0; 
	text-align:center;
	display:none;
	color: #e80000;
	}	


@font-face{
	font-family: "Bariol";
	src: url(../fonts/Bariol_Regular.otf) format("opentype");
}	

	
.clear{ clear:both; }	
	
.mod { float: left; }
.mod5 { width: 5%; }
.mod10 { width: 10%; }
.mod15 { width: 15%; }
.mod20 { width: 20%; }
.mod25 { width: 25%; }
.mod30 { width: 30%; }
.mod33 { width: 33.33%; }
.mod35 { width: 35%; }
.mod40 { width: 40%; }
.mod45 { width: 45%; }
.mod50 { width: 50%; }
.mod55 { width: 55%; }
.mod60 { width: 60%; }
.mod65 { width: 65%; }
.mod70 { width: 70%; }
.mod75 { width: 75%; }
.mod80 { width: 80%; }
.mod85 { width: 85%; }
.mod90 { width: 90%; }
.mod95 { width: 95%; }
.mod100 { width: 100%; }


@media only screen and (max-width : 480px) {
	.mod100{ width:100%;}
	.mod80{ width:100%;}	
	.mod75{ width:100%;}
	.mod70{ width:100%;}
	.mod66{ width:100%;}
	.mod60{ width:100%;}
	.mod55{ width:100%;}
	.mod50{ width:100%;}
	.mod45{ width:100%;}
	.mod40{ width:100%;}
	.mod33{ width:100%;}
	.mod30{ width:100%;}
	.mod25{ width:100%;}
	.mod20{ width:100%;} 
	

}


@media only screen and (max-width : 328px) { 
	.mod100{ width:100%;}
	.mod80{ width:100%;}	
	.mod75{ width:100%;}
	.mod70{ width:100%;}
	.mod66{ width:100%;}
	.mod60{ width:100%;}
	.mod55{ width:100%;}
	.mod50{ width:100%;}
	.mod45{ width:100%;}
	.mod40{ width:100%;}
	.mod33{ width:100%;}
	.mod30{ width:100%;}
	.mod25{ width:100%;}
	.mod20{ width:100%;} 
}