/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Aug 10, 2015, 1:29:45 PM
    Author     : zohaib
*/
body{
    background:url("../_layout/images/login-logo.jpg") no-repeat center center fixed;
    background-size:cover;
    font-family: 'Open Sans', sans-serif;

}
.login-form {
    background:#ECBC3D;
    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: 35%;
}
.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: #000;
    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:#fff;
    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: #513D32;
    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: #74472E;
    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;
        background-color: #ECBC3D;
    }
}
@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%;
    }
}
@media (max-width:768px){
    .login-form  {
        margin: 16% auto 0;
        width: 59%;
    }
    .copy-right {
        left:38%;
        bottom:-14%;
    }
}
@media (max-width:640px){                                  
    .login-form {
        margin: 20% auto 0;
        width: 63%;
    }
    .copy-right {
        left:36%;
        bottom:-18%;
    }
}
@media (max-width:480px){                                  
    .login-form {
        margin: 32% auto 0;
        width: 74%;

    }
    .copy-right {
        left:30%;
        bottom:-17%;
    }
    .main h1 {
        font-size: 22px;
    }
    .head img {
        width: 78%;
    }
    .head {
        top: -15%;
        left: 34%;
    }
    input[type="text"], input[type="password"], input[type="submit"] {
        font-weight: 600;
        margin-bottom: 4%;
    }

}
@media (max-width:320px){                                  

    .main h1 {
        padding-top: 20%;
        font-size: 20px;
    }
    .head img {
        width: 60%;
        border: 5px solid rgba(221, 218, 215, 0.23);
    }
    .head {
        top: -15%;
        left: 36%;
    }
    input[type="text"], input[type="password"],input[type="submit"] {
        font-weight:600;
        font-size: 15px;
    }
    .main form p a {
        font-size: 15px;
    }
    input[type="submit"] {
        padding: 4%;
    }

}

.login_head_1 {
    font-size: 30px;
    margin: auto;
    width: 390px;
    text-align: center;
    padding-top: 45px;
}
.login_head_2 {
    font-size: 60px;
    margin: auto;
    width: 390px;
    text-align: center;
    padding-top: 10px;
}
.login-form a {  
    text-decoration: none;
    color: #74472E;
}