* {
    box-sizing: border-box;
}

body{ margin:0; padding:0; line-height:20px; font-family: 'Source Sans Pro', sans-serif; font-size:16px; color:#000;}
*{ box-sizing:border-box;}
.container { max-width: 1140px; margin: 0 auto; display: block; width: 100%;}
.logo { float: left; width: 25%; margin: 10px 0 0;}
.logo img { width: 100%;}
.loginForm { float: left; width: 100%;}
.loginForm h1 { font-size: 22px; text-align: center; margin: 10px 0 30px; text-transform: uppercase; line-height: 100%;}
.formWrapper {float: left; width: 100%; background: #f5f5f5; margin-bottom: 20px; -webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.23); -moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.23); box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.23); padding: 50px; position: relative; min-height: 500px;}
.formMain{position: absolute;left: 0; right: 0; top: 50%; transform: translateY(-50%); margin: 0 auto; max-width: 300px;}
.formMain form {float: left; width: 100%; margin: 0 auto; background: #2a3740; border-radius: 20px; padding: 10px; box-sizing: border-box; z-index: 2;    -webkit-box-shadow: 3px 6px 5px 0px rgba(0,0,0,0.3); -moz-box-shadow: 3px 6px 5px 0px rgba(0,0,0,0.3); box-shadow: 3px 6px 5px 0px rgba(0,0,0,0.3); max-width: 320px;
    }
.formMain h2 { font-size: 18px; color: #fff; margin: 10px 0;  font-weight: 600; text-transform: uppercase;  padding-left: 10px;text-align: center;}
.formMain input { color: #aaaeb2; outline: none; font-size: 12px; margin: 5px 0;  padding: 0 20px; border-radius: 20px; border: 1px solid #607285;  -moz-box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.1) inset; -webkit-box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.1) inset; box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.1) inset;  line-height: 35px; height: 35px; display: block;  width: 100%;}
.formMain .agree span { padding: 0 0 0 7px; display: table-cell; vertical-align: middle;  color: #abaeb1; font-size: 12px;  line-height: 14px; font-weight: 300;}
.otpmsg{text-align:center; padding: 0 0 0 0px;  vertical-align: middle;  color: #abaeb1; font-size: 12px;  line-height: 14px; font-weight: 300;}
.formMain input[type="checkbox"] { box-sizing: border-box;  padding: 0;  width: 15px;  height: auto;  margin: 2px 0 0 10px;  vertical-align: middle;  background: #fff;}
.formMain .submit { float: left; width: 50%; text-align: center;  margin-bottom: 10px;}
.formMain .reset { float: left; width: 100%; text-align: center;  margin-bottom: 10px;padding:0px 40px 0px 40px;}
.formMain .agree { width: 50%; float: left;  padding-top: 11px;}
.formMain .submit a { text-decoration: none; display: inline-block; outline: none; border-radius: 20px; background: #ffa800; color: #2f4053;  text-transform: uppercase;
 font-size: 14px; font-weight: 600; padding: 0 30px; line-height: 30px; height: 30px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out;  width: 100%; margin: 5px 0;}
  .formMain .reset a { text-decoration: none; display: inline-block; outline: none; border-radius: 20px; background: #ffa800; color: #2f4053;  text-transform: uppercase;
 font-size: 14px; font-weight: 600; padding: 0 30px; line-height: 30px; height: 30px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out;  width: 100%; margin: 5px 0;}
.formMain .submit a:hover { background: #f0f1f2;}
.formMain .reset a:hover { background: #f0f1f2;}
.forgot { float: left; width: 100%;}
.forgot a { color: #abaeb1; text-decoration: none; font-size: 12px; padding-left: 10px;}
.forgot a:hover { text-decoration: underline;}

@media only screen and (max-width: 767px) {
	
.logo {width: 100%; padding-left: 10px;}
.logo img { width: 100%; max-width: 190px;}
.formWrapper {background: #fff; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; padding: 50px; min-height: 320px;}	
}