/*..::::::::::::::::::::================  ESTILOS LOGIN  ================::::::::::::::::::::..*/

.bg-backstretch {
    background: no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
        background-size: cover;
}

a, .btn-default, .btn-primary {
	text-decoration: none;
	-webkit-transition: color 300ms, background-color 300ms;
	-moz-transition: color 300ms, background-color 300ms;
	-o-transition:  color 300ms, background-color 300ms;
        transition:  color 300ms, background-color 300ms;
}

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.login-content {
    width: 460px;
    height: 340px;
    padding-right: 0px;
    padding-left: 0px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -230px;
    margin-top: -230px;
    background: #f2f2f2;
	border-color: #f2f2f2;
    -webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 6px 6px 4px 4px;
    -webkit-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.35), inset 0 0 2px rgba(255, 255, 255, .90);
    -moz-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.35), inset 0 0 2px rgba(255, 255, 255, .90);
        box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.35), inset 0 0 2px rgba(255, 255, 255, .90);
}

.panel {
  margin-bottom: 20px;
  background: none;
  border: none;
  border-radius: 0px;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.panel-default {
  border-color: none;
}

.panel-heading {
  padding: 15px 15px;
  border-bottom: 1px solid transparent;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.login-content .panel-default > .panel-heading {
  color: #333;
    min-height: 60;
  background-color: #6b7ca8;
  border-color: none;
}

.panel-body {
    padding: 30px 30px;
}

.form-control {
  color: #555;
  background-color: #f5f5f5;
  border-color: #ccc;
  border-radius: 4px;
    -moz-box-shadow: 0 1px 0px rgba(255, 255, 255, .90);
    -webkit-box-shadow: 0 1px 0px rgba(255, 255, 255, .90);
            box-shadow: 0 1px 0px rgba(255, 255, 255, .90);
  -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;
}

.form-control:focus {
    background-color: #fafafa;
    border-color: #b8b8b8;
    -moz-box-shadow: inset 2px 2px 2px 0px rgba(0,0,0,0.10), 0 1px 0 #fff;;
    -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0,0,0,0.10), 0 1px 0 #fff;;
            box-shadow: inset 2px 2px 2px 0px rgba(0,0,0,0.10), 0 1px 0 #fff;;
}

.panel-body .input-lg {
    background-color: none;
    padding: 10px 40px 10px 10px;
    line-height: 1.33;
    border-radius: 4px;
}

.form-control::-moz-placeholder {
  color: #b8b8b8;
  opacity: 1;
}

.form-control:-ms-input-placeholder {
  color: #b8b8b8;
}

.form-control::-webkit-input-placeholder {
  color: #b8b8b8;
}

.usuario-field { background: #f8f8f8 url(../Images/icons-metro/icon-User.png) right no-repeat; }

.password-field { background: #f8f8f8 url(../Images/icons-metro/icon-Locked.png) right no-repeat; }

.panel-body .btn-default, 
.panel-body .btn-primary {
    border-radius: 4px;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .40);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 3px rgba(0, 0, 0, .10); 
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 3px rgba(0, 0, 0, .10); 
            box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 3px rgba(0, 0, 0, .10); 
}

.panel-body .btn-default, .login-body .btn-primary {
    color: #fff;
    background-color: #6b7ca8;
    border-color: #5a6b97;
}

.panel-body .btn-primary:hover,
.panel-body .btn-primary:focus,
.panel-body .btn-primary:active,
.panel-body .btn-primary.active,
.panel-body .btn-default:hover,
.panel-body .btn-default:focus,
.panel-body .btn-default:active,
.panel-body .btn-default.active,
.panel-body .open > .dropdown-toggle.btn-default {
    background-color: #4d5d87;
    border-color: #455378;
}

.panel-body a {
    color: #6b7ca8;
    text-decoration: none;
    padding: 10px 0px;
}

.panel-body a:hover {
    color: #4d5d87;
}

/*..::::::::::::::::::::================  MEDIA QUERIES  ================::::::::::::::::::::..*/
@media (min-width: 992px) {

}
@media (min-width: 768px) and (max-width: 991px) {
    .login-content {
        margin-top: -20px;
        top: 10%;
	}
}

@media (max-width: 430px) {
	
	.login-content {
		width: 280px;	
        margin-left: -140px;
        margin-top: -20px;
        top: 10%;
	}
}