@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i');

.padding-less{padding-right:0; padding-left:0;}
.right-padding-less{padding-right:0;}
.left-padding-less{padding-left:0;}


/*                XDG            */
body{background:url("../img/bg.jpg") repeat scroll 0 0 / auto ;  font-family: 'Roboto Condensed', sans-serif !important;}
.login-logo {margin: auto auto 5em; width: 50%; display: table;}
.login-container {
  align-items: center; 
  -webkit-align-items: center; 
  -moz-align-items: center; 
  -o-align-items: center; 
  -ms-align-items: center;

  vertical-align: middle;
  -webkit-vertical-align:middle; 
  -moz-vertical-align:middle; 
  -o-vertical-align:middle; 
  -ms-vertical-align:middle;

/*  justify-content: center; 
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -o-justify-content: center;
  -ms-justify-content: center;*/

  display: flex; 
  -webkit-display: flex; 
  -moz-display: flex; 
  -o-display: flex; 
  -ms-display: flex; 
   /*display: -webkit-flex; 
  display: -ms-flex;
 display: -ms-flexbox;*/
    /*-webkit- 
    -moz- 
    -o- 
    -ms-*/ 
  bottom: 0; 
  height: 90%; 
  left: 0; 
  position: absolute;
   right: 0; 
   top: 0; 
  text-align: center; 
}
.login-form-container {display: table; margin: 2em auto 0; width: 65%; background-color: rgba(255,255,255,.3); box-shadow:0 0 5px 4px #111; padding:4% 2.5% 3%;
 border: 1px solid rgba(255, 255, 255, 0.5); border-top: 1px solid rgba(255, 255, 255, 0.3); border-bottom: 1px solid rgba(255, 255, 255, 0.3); border-radius: 5px; }  
.login-form-container form{padding: 0; }  
.login-form-container i.fa{margin-left: 1em; position: absolute; top: 1em;} 
.login-form-container input{width: 100%;border: 0 none; border-radius: 3px; /*line-height: 2.7em !important;*/ outline: 0 none; padding:0.7em 0 0.6em 2.5em; font-size: 16px;
	transition: all .3s ease-in-out; -webkit-transition:all .3s ease-in-out; -moz-transition:all .3s ease-in-out; -o-transition:all .3s ease-in-out;} 
.login-form-container input:focus{box-shadow:0 0 2px 4px #444;}
.login-form-container button{width: 100%; border:1px solid #d6c78c; border-radius: 3px; font-size: 18px; font-weight: bolder; line-height: 2.5em; outline: 0 none;
 background-color: #beb17c; text-transform: uppercase;
	transition: all .3s ease-in-out; -webkit-transition:all .3s ease-in-out; -moz-transition:all .3s ease-in-out; -o-transition:all .3s ease-in-out;} 
.login-form-container button:hover , .login-form-container button:focus{box-shadow:0 0 2px 4px #444;}
.login-footer {position: absolute; color: #999999; text-align: center; bottom: 2em; width: 100%;}
.forget-password {color:#beb17c; text-decoration: underline; text-align:left; font-weight: bolder; font-size: 15px;
	transition: all .3s ease-in-out; -webkit-transition:all .3s ease-in-out; -moz-transition:all .3s ease-in-out; -o-transition:all .3s ease-in-out;}
.forget-password:hover , .forget-password:focus , .forget-password:active {color:#9d9059;}

.login-form-container input[type="checkbox"]{width:auto; display: inline-block;} 
.login-form-container input[type="checkbox"]:focus{box-shadow:0 0 0 0 white;}
.login-form-container label{cursor: pointer;color:#beb17c; font-weight: bold; font-size: 15px;}

.login-form-container input[type=checkbox] { display: none; }
        .login-form-container label:before {
          color: transparent; content: "✓"; 
          display: inline-block;
          width:22px;
          height:22px;
          position: relative;
          background-color: transparent;
          top:2px;
          left:-5%;
          border:2px solid #999;
          border-radius: 3px;
        }
.login-form-container input[type=checkbox]:checked + label:before { color: greenyellow; content: "✓"; font-weight: bold; text-align: center; font-size: 13px; }

.login-form-container .padding-less{margin:1em 0 0 0;}

/*/\/\/\/\/\/\/\/\/\/\//\/\/\/\/\/\//\/\/\/\/\/\\//\/\\/\/\/\/\*/

.forget-password-container .login-form-container{padding: 3% 1.5% 2%; width: 60%;}
input#form_email {padding:0 4%; height:3.3em; font-size: 18px; 
	transition: all .3s ease-in-out; -webkit-transition:all .3s ease-in-out; -moz-transition:all .3s ease-in-out; -o-transition:all .3s ease-in-out;}
.resend{color:#333; text-decoration: underline; font-size: 18px; top:0.35em; position: relative;}
.resend:hover , .resend:focus {color:#111; }
.forget-password-container h2 { color:#BEB17C; font-size:40px; margin-top: 2em;}
.forget-password-container p { margin: 0; color:#999; font-size:18px;}

#form_email::input-placeholder {color:#a39764;}
#form_email::-webkit-input-placeholder {color:#a39764;}
#form_email::-moz-placeholder {color:#a39764;} 
#form_email:-ms-input-placeholder {color:#a39764;}
#form_email:-moz-placeholder {color:#a39764;}


.alert { margin: 1em auto 0 !important; width: 98% !important;}


/*/\/\/\/\/\/\/\/\/\/\//\/\/\/\/\/\//\/\/\/\/\/\\//\/\\/\/\/\/\*/

  @media (max-width:767px) {
  	.login-container{height: 100%; }
  	.login-form-container , .forget-password-container .login-form-container{width: 100%;}
  	.login-logo{width: 60%;}
  }

  @media (max-width:500px) {
	.login-logo{width:80%;}
	.forget-password-container h2 { margin-top: 1em; }
  }


  @media (max-width:370px) {
	.login-logo{width:100%;}
	 .login-form-container .padding-less .text-left , .login-form-container .padding-less .text-right{width: 100%; text-align: center;}
	 .forget-password, .login-form-container .padding-less label{font-size:18px;}
	 .login-form-container .padding-less .text-right{margin-top: 1em;}
	 .login-form-container label::before{font-size: 13px; top:0;}
  }