/* CSS Document */
/* 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;}

/* start editing from here */
a{text-decoration:none;}
img{max-width:100%;}
/*end reset*/
body{
background-color:#000;
background: #000000 url("images/login_bg.jpg") no-repeat scroll 0px 0px / cover;
font-family: 'Open Sans', sans-serif;
text-align: center;
background-size:cover;
}
.wrap{
margin: 0 auto;
width: 90%;
}
body a,form li,input[type="submit"],input[type="text"],.sixth-login input[type="submit"],.third-login input[type="submit"]{
transition: 0.1s all;
}

#error {
margin: 0px auto 5px;
width: 320px;
font-weight: bold;
color: #F00;
font-size: 17px;
background-color: rgba(0, 0, 0, 0.40);
padding: 5px;
}

#error img{
vertical-align:middle;
}

.homeButton{
width:100%;
text-align:left;
margin-top:-25px;
}

.homeButton a{
opacity:0.2;
}

.homeButton a:hover{
opacity:1;
}

.form-info {
padding-top: 1.5em;
}

h1 {
color: #fff;
font-size: 34px;
padding-top:40px;
padding-bottom:15px;
font-weight: 400;
}

.login-form {
background: #262730;
width: 20%;
max-width:380px;
margin: 1% auto 0;
padding: 25px;
height: 310px;
border-radius: 3px;
}
.login-form h2 {
text-align: left;
color: #fff;
font-size: 1.4em;
font-weight: 400;
padding-top: .4em;
}
input.username {
font-family: 'Open Sans', sans-serif;
font-size:14px;
outline: none;
border: none;
width: 86%;
margin: 0 auto;
background: #3a3a46 url(images/img_adm.png)no-repeat 95% 17px;
margin-bottom: 20px;
padding: 1.2em 3em 1.2em 1em;
color: #DBDBDB;
border-radius: 3px;
}
input.password {
font-family: 'Open Sans', sans-serif;
font-size:14px;
outline: none;
border: none;
width: 86%;
margin: 0 auto;
padding: 1.2em 3em 1.2em 1em;
background: #3a3a46 url(images/img_pass.png)no-repeat 95% 16px;
color: #DBDBDB;
border-radius: 3px;
}
ul.login-buttons {
padding-top: 1.5em;

}
ul.login-buttons li {
display: inline-block;
  float:none;
width: 50%;
}
.form-info p {
text-align: left;
padding-top: 22px;
font-size:14px;
}
.form-info p {
  color:#9D9DBF;
}
/*--hover-buttons--*/
input[type="submit"] {
background: #ff5757;
color: #fff;
padding: 15px 60px;
font-size: 1.1em;
font-weight: 600;
margin-right: 27px;
border-radius: 3px;
outline: none;
border: none;
cursor: pointer; 
}
input[type="submit"]:hover {
background: #31BCC8;
color: #fff;
transition: 0.6s all;
}

/*--hover-buttons--*/
.webdesign {
padding: 3em 0;
}
.webdesign p {
color: #fff;
}
.webdesign p a {
background-color: rgba(0, 0, 0, 0.67);
color: #fff;
padding:5px;
}
.webdesign p a:hover {
color: #FF5757;
}

/*--responsive--*/
@media (max-width:1600px){
.login-form {
width: 27%;
}
}
@media (max-width:1440px){
.login-form {
width: 25%;
}
input.username {
width: 85%;
background: #3a3a46 url(images/img_adm.png)no-repeat 95% 18px;
}
input.password {
width: 85%;
background: #3a3a46 url(images/img_pass.png)no-repeat 95% 18px;
}
}
@media (max-width:1366px){
input.username {
width: 84%;
background: #3a3a46 url(images/img_adm.png)no-repeat 95% 18px;
}
input.password {
width: 84%;
background: #3a3a46 url(images/img_pass.png)no-repeat 95% 18px;
}
}
@media (max-width:1280px){
.login-form {
width: 27%;
}
}
@media (max-width:1024px){
.login-form {
width: 33%;
}
input[type="submit"] {
padding: 15px 55px;
}
}
@media (max-width:768px){
body {
height: 929px;
}
h1 {
padding-top: 3.5em;
}
.login-form {
width: 45%;
}
}
@media (max-width:640px){
.login-form {
width: 55%;
}
input[type="submit"] {
padding: 15px 50px;
}
}
@media (max-width:480px){
h1 {
padding-top: 3em;
}
.login-form {
width: 75%;
}
input.username {
background: #3a3a46 url(images/img_adm.png)no-repeat 95% 18px;
}
input.password {
background: #3a3a46 url(images/img_pass.png)no-repeat 95% 18px;
}
input[type="submit"] {
padding: 15px 56px;
}
}
@media (max-width:414px){
input[type="submit"] {
padding: 12px 35px;
}
h1 {
padding-top: 1em;
}
input.username {
background: #3a3a46 url(images/img_adm.png)no-repeat 95% 18px;
}
input.password {
background: #3a3a46 url(images/img_pass.png)no-repeat 95% 18px;
}
}
@media (max-width:375px){
input[type="submit"] {
padding: 12px 35px;
}
h1 {
padding-top: 1em;
}
input.username {
background: #3a3a46 url(images/img_adm.png)no-repeat 95% 18px;
}
input.password {
background: #3a3a46 url(images/img_pass.png)no-repeat 95% 18px;
}
}
@media (max-width:320px){
body {
 height: 535px;
}
h1 {
padding-top: 1.5em;
  font-size: 2.2em;
font-weight: 700;
}
.login-form {
width: 82%;
margin: 5% auto 0;
padding: 12px;
height: 320px;
}
input.username {
background: #3a3a46 url(images/img_adm.png)no-repeat 95% 18px;
width: 78%;
}
input.password {
background: #3a3a46 url(images/img_pass.png)no-repeat 95% 18px;
width: 78%;
}
.form-info p a {
font-size: 13px;
}
input[type="submit"] {
margin-left: 4px;
padding: 14px 38px;
font-size: 13px;
}
.webdesign {
padding: 1.5em 0 2em;
}
.login-form h2 {
font-size: 1.1em;
}
}