@font-face {
    font-family: 'latoregular';
    src: url('fonts/lato-reg-webfont.eot');
    src: url('fonts/lato-reg-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/lato-reg-webfont.woff2') format('woff2'),
         url('fonts/lato-reg-webfont.woff') format('woff'),
         url('fonts/lato-reg-webfont.ttf') format('truetype'),
         url('fonts/lato-reg-webfont.svg#latoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'latobold';
    src: url('fonts/lato-bol-webfont.eot');
    src: url('fonts/lato-bol-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/lato-bol-webfont.woff2') format('woff2'),
         url('fonts/lato-bol-webfont.woff') format('woff'),
         url('fonts/lato-bol-webfont.ttf') format('truetype'),
         url('fonts/lato-bol-webfont.svg#latobold') format('svg');
    font-weight: normal;
    font-style: normal;
}

body, html { width:100%; height:100%; padding:0; margin:0; }
body { float:left; background:url("../images/background.jpg") no-repeat; background-size:100%;  font-family: 'latoregular', Arial, Helvetica, Sans-serif; color:#999; font-size:15px; }
h1, h2, strong { font-weight:normal; font-family: 'latobold'; margin:0;  }
.clear { clear:both; float:left; }

/*header*/
.header { float:left; width:98%; padding:4px 1%; margin:0 0 40px 0; background:#fff; }
.header img { float:left; }
.header img:last-of-type { margin:10px 0 0 0; }

/*login box*/
.wrapper { width:868px; margin:130px auto 0; }
.wrapper .login-box { float:left; background:url("../images/bg-form.png") repeat; padding:0 0 130px 0; }
.wrapper .login-box span.header { float:left; width:90%; padding:14px 5%; margin:0 0 30px 0; border-radius:10px 10px 0 0; background:#6c6c6c; color:#fff; font-family: 'latobold'; font-size:18px; text-transform:uppercase; }
.wrapper .login-box p { width:90%; margin:0 auto 10px; }
.wrapper .login-box a.forgot { clear:both; float:left; margin:20px 10px 20px 238px; color:#fff; text-decoration:none; font-family: 'latobold'; }
.wrapper .login-box .left { float:left; width:33%; padding:94px 0 0 17%; }
.wrapper .login-box .right { float:left; width:47%; }

.wrapper .login-box .top { float:left; width:100%; }
.wrapper .login-box .top .mazda { float:left; margin:25px; }
.wrapper .login-box .top .zoomzoom { display:none; float:right; margin:25px; }

/*form*/
.wrapper .login-box form { width:100%; margin:0 auto; padding:10px 0 30px; }
input[type=text] { margin:0 0 12px 0; color:#fff; border:0; padding:18px 55px 18px 20px; width: 285px; background:#363636 url("../images/user.png") 325px 20px no-repeat; font-size:18px; }
input[type=password] { margin:0 0 12px 0; color:#fff; border:0;  padding:18px 55px 18px 20px; width: 285px; background:#363636 url("../images/password.png") 325px 20px no-repeat; font-size:18px; }
input[type=submit] { 
    color: #fff;
    font-size: 18px;
    line-height: 30px;
    padding:13px 20px 14px;
    text-decoration: none; 
	text-transform:uppercase;
	border:0;
	background:#79889d;
	cursor:pointer;
	width:360px;
}

.login-screen em { display:block; margin:40px 0 0 0; font-size:12px; font-style:normal; text-align:center; }