@charset "UTF-8";
/* CSS Document */

body { 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover; 	
background-image: url("images/petes-tractor.jpg");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed; 
background-size: cover; 
font-family: Arial, Geneva, Helvetica, sans-serif;	
}
@media only screen and (max-width: 480px) {
.loginBox { 
position: absolute; top: 53%;
left: 50%; transform: translate(-50%, -50%);
width: 355px; height: 305px;
padding: 30px 25px; box-sizing: border-box;
border-radius: 10px;	
/*background: rgba(0,0,0,.5);*/
background: rgba(0,0,0,0.75);		
}
.header div{
	text-align: center;
	position: absolute;
	top: 10px;
	left: 10px;
	right: 40px;
	bottom: 40px;
	float: right;
	color: #fff;
	font-family: 'Exo', sans-serif;
	font-size: 35px;
	font-weight: 200;
	text-shadow: 1px 1px #163c6a;
}

.header div span{
	color: #FFFFFF !important;
	text-shadow: 1px 1px #000000;
}		
}
@media only screen and (min-width: 481px) {
.loginBox { 
position: absolute; top: 60%;
left: 50%; transform: translate(-50%, -50%);
width: 400px; height: 270px;
padding: 2px 25px; box-sizing: border-box;
border-radius: 10px;	
/*background: rgba(0,0,0,.5);*/
background: rgba(0,0,0,0.75);		
}
.header div{
	text-align: center;
	position: absolute;
	top: 1px;
	left: 10px;
	right: 40px;
	bottom: 40px;
	float: right;
	color: #fff;
	font-family: 'Exo', sans-serif;
	font-size: 30px;
	font-weight: 200;
	text-shadow: 1px 1px #163c6a;
}

.header div span{
	color: #FFFFFF !important;
	text-shadow: 1px 1px #000000;
}		
}
@media only screen and (min-width: 750px) {
.loginBox { 
position: absolute; top: 25%;
left: 50%; transform: translate(-50%, -50%);
width: 550px; height: 250px;
padding: 20px 10px; box-sizing: border-box;
border-radius: 10px;	
/*background: rgba(0,0,0,.5);*/
background: rgba(0,0,0,0.75);		
}
.header div{
	text-align: center;
	position: absolute;
	top: 10px;
	left: 10px;
	right: 40px;
	bottom: 40px;
	float: right;
	color: #fff;
	font-family: 'Exo', sans-serif;
	font-size: 35px;
	font-weight: 200;
	text-shadow: 1px 1px #163c6a;
}

.header div span{
		color: #FFFFFF !important;
	text-shadow: 1px 1px #000000;
}			
}

@media only screen and (min-width: 1000px) {
.loginBox { 
position: absolute; top: 35%;
left: 50%; transform: translate(-50%, -50%);
width: 550px; height: 275px;
padding: 20px 20px; box-sizing: border-box;
border-radius: 10px;	
/*background: rgba(0,0,0,.5);*/
background: rgba(0,0,0,0.75);		
}	
.header div{
	position: absolute;
	top: 190px;
	left: 0px;
	right: 1000px;
	bottom: 40px;
	float: right;
	color: #fff;
	font-family: 'Exo', sans-serif;
	font-size: 35px;
	font-weight: 200;
	text-shadow: 1px 1px #163c6a;
}
.header div span{
	color: #FFFFFF !important;
	text-shadow: 1px 1px #000000;
}		
}

.user { 
width: 100px; height: 100px;
border-radius: 50%;
overflow: hidden;
position: absolute;
top: calc(-100px/2);
left: calc(50% - 50px);
}
h2 { margin: 0; padding: 0 0 20px; color: #efed40; text-align: center; }

.loginBox p { margin: 0; padding: 0; font-weight: bold; color: #fff;
}
.loginBox input { width: 100%; margin-bottom: 20px; 
}
.loginBox input[type="text"]{ 
border: none; border-bottom: 1px; 
outline: none; 
height: 30px; 
color: #000000; 
font-size: 16px;
}

.loginBox input[type="password"]{ 
border: none; border-bottom: 1px; 
outline: none; 
height: 30px; 
color: #000000; 
font-size: 16px;
}

.loginBox input[type="checkbox"]{
 width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: bottom;
    position: relative;
    /*top: -1px;*/
    *overflow: hidden;	
}

.loginBox input[type="submit"] { 
border: none; outline: none; height: 40px;
color: #fff; font-size: 16px; background: #163c6a;
cursor: pointer; border-radius: 25px;
}


.loginBox a {
color: #fff; font-size: 14px; 
font-weight: bold; text-decoration: none;
}
h1 {
float: left;
	color: #fff;
	font-family: 'Exo', sans-serif;
	font-size: 35px;
	font-weight: 200;
}