/*--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
--*/
/* reset */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
dl,
dt,
dd,
ol,
nav ul,
nav li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block;
}

ol,
ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
}

blockquote,
q {
	quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* start editing from here */
a {
	text-decoration: none;
}

.txt-rt {
	text-align: right;
}

/* text align right */
.txt-lt {
	text-align: left;
}

/* text align left */
.txt-center {
	text-align: center;
}

/* text align center */
.float-rt {
	float: right;
}

/* float right */
.float-lt {
	float: left;
}

/* float left */
.clear {
	clear: both;
}

/* clear float */
.pos-relative {
	position: relative;
}

/* Position Relative */
.pos-absolute {
	position: absolute;
}

/* Position Absolute */
.vertical-base {
	vertical-align: baseline;
}

/* vertical align baseline */
.vertical-top {
	vertical-align: top;
}

/* vertical align top */
nav.vertical ul li {
	display: block;
}

/* vertical menu */
nav.horizontal ul li {
	display: inline-block;
}

/* horizontal menu */
img {
	max-width: 100%;
}

/*end reset*/
/****-----start-body----****/
body {
	background: #333;
	font-family: 'Open Sans', sans-serif;

}

.login-form {
	background: #eee;
	width: 26%;
	margin: 9% auto 4% auto;
	position: relative;
	-webkit-border-radius: 0.4em;
	-o-border-radius: 0.4em;
	-moz-border-radius: 0.4em;
}

.head {
	position: absolute;
	top: -15%;
	left: 50%;
	transform: translate(-50%,0);
}

.head img {
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-o-border-radius: 50%;
	-moz-border-radius: 50%;
	border: 6px solid rgba(221, 218, 215, 0.23);
}

.main {
	position: relative;
}

.main h1 {
	font-size: 25px;
	color: #676767;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	padding-top: 19%;
	text-align: center;
}

.main form {
	width: 80%;
	margin: 0 auto;
	padding: 6% 0 9% 0;
}

.main p {
	text-align: center;
}

.main form p a {
	color: #888;
	font-family: 'Open Sans', sans-serif;
}

form p a:hover {
	color: #21A957;
}

input[type="text"],
input[type="password"] {
	text-align: left;
	position: relative;
	width: 92%;
	padding: 3%;
	background: #D3D3D3;
	margin-bottom: 6%;
	font-family: 'Open Sans', sans-serif;
	color: #676767;
	font-weight: 600;
	font-size: 16px;
	outline: none;
	border: none;
	border-radius: 5px;
	border: 1px solid #DED6D6;
	-webkit-appearance: none;
}

input[type="text"]:hover,
input[type="password"]:hover {
	border: 1px solid #949494;
	transition: 0.5s;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	-ms-transition: 0.5s;

}

input[type="submit"] {
	width: 99%;
	padding: 3%;
	margin-bottom: 8%;
	background: #21A957;
	font-family: 'Open Sans', sans-serif;
	color: #ECECEC;
	box-shadow: inset 0px 0px 10px #666464;
	-webkit-text-shadow: 0px 0px 3px #000;
	-moz-text-shadow: 0px 0px 3px #000;
	-o-text-shadow: 0px 0px 3px #000;
	-ms-text-shadow: 0px 0px 3px #000;
	font-size: 20px;
	outline: none;
	border: none;
	cursor: pointer;
	font-weight: 500;
	border-radius: 5px;
	transition: 0.5s;
	-webkit-appearance: none;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	-ms-transition: 0.5s;
}

input[type="submit"]:hover {
	background: #128A42;
	color: #fff;
}

/****************/
.copy-right {
	position: absolute;
	bottom: -19%;
	left: 43.7%;
}

.copy-right p {
	color: #fff;
	font-size: 1em;
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
}

.copy-right p a {
	font-family: 'Open Sans', sans-serif;
	font-size: 1em;
	color: #21A957;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}

.copy-right p a:hover {
	color: #fff;
}

/*-----start-responsive-design------*/
@media (max-width:1440px) {
	.login-form {
		width: 30%;
		margin: 11% auto 4% auto;
	}

	.main h1 {
		padding-top: 23%;
	}

	.copy-right {
		bottom: -26%;
	}
}

@media (max-width:1366px) {
	.login-form {
		width: 32%;
		margin: 10% auto 4% auto;
	}
}

@media (max-width:1280px) {
	.login-form {
		margin: 8% auto 0;
		width: 34%;
	}

	.copy-right {
		left: 41%;
		bottom: -18%;
	}
}

@media (max-width:1024px) {
	.login-form {
		margin: 12% auto 0;
		width: 45%;
	}

	.copy-right {
		left: 41%;
		bottom: -18%;
	}
}