/* 
    Created on : Dec 18 2014, 11:45:15 AM
    Author     : uthpal
*/
html,body {
    height:100%;
    min-height: 100%;
    background: transparent;
    /*margin: 0% 0% 0% 0%;*/
    /*border: 1px solid red;*/
}

header,section,aside,article,footer{
    display: block;
    overflow: hidden;
}
.form-group{
    background: #E2E2E2;
}
.error_login{
    color:#fff;
    margin-bottom: 5px;
    text-align: center;
}
.f-icon {
    font-size: 1.2em;
    color: #38265D;
}
.login-logo{
    margin-top: 150px;

}
.login-logo img{
    width: 100px;
    height: 100px;
    margin-left: 12%;
    /* margin-left: 38%; */
    /* border: 1px solid #aaa; */
    border-radius: 5px;
   

}
/*-----------Main Body---------------*/
#section-main {
    margin: 0% 0% 0% 0%;    
    background:center no-repeat url('../img/login_body-3.jpg');
    background-size: cover;
    color:#ddd;
    min-height:calc(100% - 1px);
}
.screen_lock{        
    margin-top: 2%;    
    margin-left: 36%;
    margin-right: auto;
    margin-bottom: auto;
    width: 28%;
}
footer {
    background-color:#DBB721;
    color:#38265D;
    min-height:calc(12% - 1px);
    margin-bottom: 0%;
    font-size: 1.8em;
}
footer>.container{
    margin: 1.3% 0% 0% 5%;
}
select {
    display: block;
    width: 100%;
    height: 45px;
    padding: 6px 12px;
    font-size: 12px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    opacity: 0.6;
    border: 1px solid #ccc;
    border-radius: 0px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

input {
    display: block;
    width: 100%;
    height: 40px;
    padding: 6px 12px;
    font-size: 12px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    opacity: 0.6;
    border: 1px solid #ccc;
    border-radius: 0px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.btn-login {
    color: white;
    font-weight: bold;
    background: #89C658;
    height: 45px;
    border-radius: 0px;
}

.btn-login:hover{
    color: white;
    background-color: #DBB721;
}


/*<!----------Media Query Start Here---------------->*/

@media screen and (max-width: 1280px){
    #section-header>.row>.container>.pull-left>img{
        margin: 14% 0% 0% 0%;
    }
    #section-header>.row>.container>p{
        font-size: 2.2em;
        color: #38265D;
        margin: 4% 0% 0% 0%;
        text-align: left;
    }
    .screen_lock{
        margin-top: 8%;
        margin-left: 35%;
        margin-right: auto;
        margin-bottom: auto;
        width: 40%;
    }
    footer {
        min-height:calc(18% - 1px);
    }
    .login-logo img{
        margin-left: 25%;
        margin-top: 54px;
        margin-bottom: -68px;
    }
}

/*<!----------Media Query for 17" Screen landscreen---------------->*/
@media screen and (max-width: 1024px){
    /*    #section-main {
            min-height:calc(78% - 1px);
        }*/
    #section-header>.row>.container>.pull-left>img{
        margin: 14% 0% 0% 0%;
    }
    #section-header>.row>.container>p{
        font-size: 2em;
        color: #38265D;
        margin: 5% 0% 0% 0%;
        text-align: left;
    }
    .screen_lock{
        margin-top: 10%;
        margin-left: 35%;
        margin-right: auto;
        margin-bottom: auto;
        width: 35%;
    }
    footer {
        background-color:#DBB721;
        min-height:calc(12% - 1px);
        font-size: 1.6em;
    }
    footer>.container{
        margin: 3.0% -1% 0% 2%;
    }

    .login-logo img{
        margin-left: 8%; 
    }
}

@media screen and (max-width: 992px){
    .screen_lock{        
        margin-top: 10%;
        margin-left: 28%;
        margin-right: auto;
        margin-bottom: auto;
        width: 40%;
    }
}



/*------------Query for >=950px Portrait Screen -------------*/
@media screen and (max-width: 980px){
    .screen_lock{        
        margin-top: 10%;
        margin-left: 28%;
        margin-right: auto;
        margin-bottom: auto;
        width: 40%;
    }
}

/*---------------Query for Small Tablet Landscape & WideScreen Portrait-------------*/
@media screen and (max-width: 800px){
    #section-header{
        min-height:calc(12% - 1px);
    }

    #section-header>.row>.container>.pull-left>img{
        margin: 8% 0% 0% 0%;
    }
    #section-header>.row>.container>p{
        font-size: 2em;
        color: #38265D;
        margin: 4% 0% 0% 0%;
        text-align: left;
    }
    .login-logo img{
        margin-left: 42%; 
    }
    .screen_lock{
        margin-top: 10%;
        margin-left: 25%;
        margin-right: auto;
        margin-bottom: auto;
        width: 50%;
    }
}

/*<!-----Media Query Start Here------------>*/
@media screen and (max-width: 768px){
    #section-main {
        min-height:calc(78% - 1px);
    }
    #section-header>.row>.container>.pull-left>img{
        margin: 20% 0% 0% 0%;
    }
    #section-header>.row>.container>p{
        font-size: 2em;
        color: #38265D;
        margin: 6% 0% 0% 0%;
        text-align: left;
    }
    .screen_lock{
        margin-top: 10%;
        margin-left: 25%;
        margin-right: auto;
        margin-bottom: auto;
        width: 50%;
    }
    footer {
        background-color:#DBB721;
        min-height:calc(12% - 1px);
        font-size: 1.6em;
    }
    footer>.container{
        margin: 5.8% -1% 0% 0%;
    }
}

/*---------------Query for Small Tablet Portrait-------------*/
@media screen and (max-width: 600px){
    #section-main {
        min-height:calc(78% - 1px);
    }
    #section-header>.row>.container>p{
        font-size: 2em;
        color: #38265D;
        margin: 5% 0% 0% 0%;
        text-align: center;
    }    
    .screen_lock{
        margin-top: 10%;
        margin-left: 20%;
        margin-right: auto;
        margin-bottom: auto;
        width: 60%;
    }
    footer {
        background-color:#DBB721;
        min-height:calc(12% - 1px);
        font-size: 1.5em;
    }
    footer>.container{
        margin: 4.8% -1% 0% 0%;
    }
    .login-logo img{
        margin-left: 40%; 
        margin-bottom: auto;
    }

}

/*---------------Query for iPhone5 Landscape-------------*/
@media screen and (max-width: 568px){
    #section-header>.row>.container>p{
        font-size: 1.55em;
        color: #38265D;
        margin: 2% 0% 0% 6%;
        text-align: center;
    }
    .screen_lock{
        margin-top: 6%;
        margin-left: 20%;
        margin-right: auto;
        margin-bottom: 6%;
        width: 60%;
    }
    footer {
        background-color:#DBB721;
        color:#38265D;
        min-height:calc(12% - 1px);
        margin-bottom: 0%;
        font-size: 1.24em;
    }
    footer>.container{
        margin: 1.8% -1% 0% 0%;
    }
}

/*---------------Query for iPhone Landscape-------------*/
@media screen and (max-width: 480px){
    #section-header>.row>.container>p{
        font-size: 1.45em;
        color: #38265D;
        margin: 2% 0% 0% 0%;
        text-align: center;
    }
    .screen_lock{
        margin-top: 6%;
        margin-left: 15%;
        margin-right: auto;
        margin-bottom: 5%;
        width: 70%;
    }
    footer {
        background-color:#DBB721;
        color:#38265D;
        min-height:calc(12% - 1px);
        margin-bottom: 0%;
        font-size: 1.24em;
    }
    footer>.container{
        margin: 1.8% -1% 0% 0%;
    }
}

/*---------------Query for iPhone & iPhone5 Portrait-------------*/
@media screen and (max-width: 320px){
    #section-main {
        margin: 0% 0% 0% 0%;        
        color:#ddd;
        min-height:calc(78% - 1px);
    }
    #section-header>.row>.container>p{
        font-size: 1.35em;
        color: #38265D;
        margin: 5% 0% 0% 0%;
        text-align: center;
    }
    .screen_lock{    
        margin-top: 0%;
        margin-left: 0%;
        margin-right: auto;
        margin-bottom: auto;
        width: 100%;
    }
    .login-logo img{
        margin-left: 1%; 
    }
    footer {
        background-color:#DBB721;
        color:#38265D;
        min-height:calc(12% - 1px);
        margin-bottom: 0%;
        font-size: 1.24em;
    }
    footer>.container{
        margin: 4.2% -2% 0% 0%;
    }
}

/*---------------Query for iPhone & iPhone5 Portrait-------------*/
@media screen and (max-width: 360px){
    #section-main {
        margin: 0% 0% 0% 0%;        
        color:#ddd;
        min-height:calc(78% - 1px);
    }
    #section-header>.row>.container>p{
        font-size: 1.35em;
        color: #38265D;
        margin: 5% 0% 0% 0%;
        text-align: center;
    }
    .screen_lock{    
        margin-top: 0%;
        margin-left: 0%;
        margin-right: auto;
        margin-bottom: auto;
        width: 100%;
    }
    .login-logo img{
        margin-left: 1%; 
    }

    #section-main {
        margin: 0% 0% 0% 0%;    
        background:center no-repeat url('../img/login_body-3.jpg');
        background-size: cover;
        color:#ddd;
        min-height:calc(100% - 1px);
    }

    footer {
        background-color:#DBB721;
        color:#38265D;
        min-height:calc(12% - 1px);
        margin-bottom: 0%;
        font-size: 1.24em;
    }
    footer>.container{
        margin: 4.2% -2% 0% 0%;
    }
}

/* .screen_lock{
    width: 400px;
} */

/*---------------Query for iPhone & iPhone5 Portrait-------------*/
@media screen and (max-width: 414px){
    #section-main {
        margin: 0% 0% 0% 0%;        
        color:#ddd;
        min-height:calc(78% - 1px);
    }
    #section-header>.row>.container>p{
        font-size: 1.35em;
        color: #38265D;
        margin: 5% 0% 0% 0%;
        text-align: center;
    }
    .screen_lock{    
        margin-top: 0%;
        margin-left: 0%;
        margin-right: auto;
        margin-bottom: auto;
        width: 100%;
    }
    .login-logo img{
        margin-left: 1%; 
    }

    #section-main {
        margin: 0% 0% 0% 0%;    
        background:center no-repeat url('../img/login_body-3.jpg');
        background-size: cover;
        color:#ddd;
        min-height:calc(100% - 1px);
    }

    footer {
        background-color:#DBB721;
        color:#38265D;
        min-height:calc(12% - 1px);
        margin-bottom: 0%;
        font-size: 1.24em;
    }
    footer>.container{
        margin: 4.2% -2% 0% 0%;
    }
}