#login-page {
	background: rgb(29,41,63);
	background-image: url("../img/login_page-background.png");
	background-image: url("../img/login_page-background.png"), linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 42%, rgba(29,41,63,1) 42%, rgba(29,41,63,1) 100%);
    background-position: center top;
    background-repeat: no-repeat; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

#auth-page {
	display: flex;
	align-items: center;
	justify-content: center;
}

#auth-page h1 {
	font-family: Avenir-Heavy;
	font-size:32px;
}


/*---------------------------------------------*/
input {
	outline: none;
	border: none;
}


input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }
input:focus::-moz-placeholder { color:transparent; }
input:focus:-ms-input-placeholder { color:transparent; }

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

/*---------------------------------------------*/
button {
	outline: none !important;
	border: none;
	background: transparent;
}

button:hover {
	cursor: pointer;
}


#login_form {
  width: 290px;
}


/*---------------------------------------------*/

.wrap-img-mycustom {
  position: relative;
  width: 100%;
  z-index: 1;
}

.wrap-img-mycustom img {
  max-width:100%;
}


.wrap-input-meye {
  position: relative;
  width: 100%;
  z-index: 1;
  margin-bottom: 10px;
}

.input-meye {
  font-size: 15px;
  line-height: 1.5;
  color: #666666;
  display: block;
  width: 100%;
  background: #fff;
  height: 50px;
  border-radius: 25px;
  padding: 0 30px 0 50px;
  border:2px #4a96f3 solid;
  box-shadow: 0px 0px 30px 15px rgba(0, 0, 0, 0.6);
	
}

.error-login {
  border:2px #ff0000 solid;
  box-shadow: 0px 0px 30px 15px rgba(255, 0, 0, 0.6);
}

/*------------------------------------------------------------------
[ Focus ]*/
.focus-input-meye {
  display: block;
  position: absolute;
  border-radius: 25px;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  box-shadow: 0px 0px 0px 0px;
  color: rgba(74,150,243, 0.9);

}

.input-meye:focus + .focus-input-meye {
  -webkit-animation: anim-shadow 0.5s ease-in-out forwards;
  animation: anim-shadow 0.5s ease-in-out forwards;
}

@-webkit-keyframes anim-shadow {
  to {
    box-shadow: 0px 0px 70px 25px;
    opacity: 0;
  }
}

@keyframes anim-shadow {
  to {
    box-shadow: 0px 0px 70px 25px;
    opacity: 0;
  }
}

.error-login:focus {
  border:2px #660000 solid;
  box-shadow: 0px 0px 30px 15px rgba(0, 0, 0, 0.6);
}


.symbol-input-meye {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  position: absolute;
  border-radius: 25px;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-left: 50px;
  pointer-events: none;
  color: #666666;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

.symbol-input-meye img, .login-meye-form-btn img {
	max-height:30px;
}

.input-meye:focus + .focus-input-meye + .symbol-input-meye {
  color: #1d2a3f;
  padding-left: 20px;
}

/*------------------------------------------------------------------
[ Button ]*/
.container-login-meye-form-btn {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 20px;
}

.login-meye-form-btn {
  font-size: 20px;
  line-height: 1.5;
  color: #fff;
  text-transform: uppercase;
  width: 100%;
  height: 50px;
  border-radius: 25px;
  background: #333333;
  background: -webkit-linear-gradient(left, rgba(81,172,247,1) 0%, rgba(58,104,234,1) 100%);
  background: -o-linear-gradient(left, rgba(81,172,247,1) 0%, rgba(58,104,234,1) 100%);
  background: linear-gradient(to right, rgba(81,172,247,1) 0%, rgba(58,104,234,1) 100%);
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 25px;
  border:2px #fff solid;
  box-shadow: 0px 0px 30px 15px rgba(0, 0, 0, 0.6);
}

.login-meye-form-btn:hover {
  background: #1d2a3f;
}

@media only screen and (max-width: 1400px)  {
	#login_form {
		width:20%;
	}
}

@media only screen and (max-width: 1000px)  {
	#login_form {
		width:22%;
	}
}




@media only screen and (max-width: 1400px) and (min-aspect-ratio: 0.1)  {
.wrap-img-mycustom {
  margin-top: 20vw;
}
.wrap-img-mycustom {
  margin-bottom: 12.5vw;
}
}



@media only screen and (max-width: 1400px) and (min-aspect-ratio: 1)  {
.wrap-img-mycustom {
  margin-top: 20vw;
}
.wrap-img-mycustom {
  margin-bottom: 15vw;
}
}


@media only screen and (max-width: 1400px) and (min-aspect-ratio: 10/9)  {
.wrap-img-mycustom {
  margin-top: 15vw;
}
.wrap-img-mycustom {
  margin-bottom: 12vw;
}
}



@media only screen and (max-width: 1400px) and (min-aspect-ratio: 12/9)  {
.wrap-img-mycustom {
  margin-top: 10vw;
}
.wrap-img-mycustom {
  margin-bottom: 10vw;
}
}


@media only screen and (max-width: 1400px) and (min-aspect-ratio: 13/9)  {
.wrap-img-mycustom {
  margin-top: 9vw;
}
.wrap-img-mycustom {
  margin-bottom: 9vw;
}
}


@media only screen and (max-width: 1400px) and (min-aspect-ratio: 14/9)  {
.wrap-img-mycustom {
  margin-top: 8vw;
}
}

@media only screen and (max-width: 1400px) and (min-aspect-ratio: 15/9)  {
.wrap-img-mycustom {
  margin-top: 6.5vw;
}
.wrap-img-mycustom {
  margin-bottom: 8vw;
}
}

@media only screen and (max-width: 1400px) and (min-aspect-ratio: 16/9)  {
.wrap-img-mycustom {
  margin-top: 5vw;
}
}

@media only screen and (max-width: 1400px) and (min-aspect-ratio: 17/9)  {
.wrap-img-mycustom {
  margin-bottom: 6vw;
}
}

@media only screen and (max-width: 1400px) and (min-aspect-ratio: 19/9)  {
.wrap-img-mycustom {
  margin-top: 4vw;
}
.wrap-img-mycustom {
  margin-bottom: 5vw;
}
}

@media only screen and (max-width: 1400px) and (min-aspect-ratio: 23/9)  {
.wrap-img-mycustom {
  margin-top: 2vw;
}
.wrap-img-mycustom {
  margin-bottom: 3vw;
}
}


@media only screen and (max-width: 1400px) and (min-aspect-ratio: 27/9)  {
.wrap-img-mycustom {
  margin-top: 1vw;
}
.wrap-img-mycustom {
  margin-bottom: 2vw;
}
}

@media only screen and (max-width: 1400px) and (min-aspect-ratio: 31/9)  {
.wrap-img-mycustom {
  margin-top: 0.5vw;
}
.wrap-img-mycustom {
  margin-bottom: 1.5vw;
}
}

@media only screen and (max-width: 1400px) and (min-aspect-ratio: 36/9)  {
.wrap-img-mycustom {
  margin-top: 0;
}
.wrap-img-mycustom {
  margin-bottom: 1vw;
}
}

@media only screen and (max-width: 1000px)  {
.container-login-meye-form-btn {
  padding-top: 15px;
}
}

@media only screen and (max-width: 900px)  {
.container-login-meye-form-btn {
  padding-top: 10px;
}
}

@media only screen and (max-width: 800px)  {
.container-login-meye-form-btn {
  padding-top: 5px;
}
}

@media only screen and (max-width: 700px)  {
.container-login-meye-form-btn {
  padding-top: 0;
}
}


@media only screen and (min-width: 1400px)  {
#login-page {
	align-items: center;
}
.wrap-img-mycustom {
  margin-top: 0;
}
.wrap-img-mycustom {
  margin-bottom: 12vw;
}
#login_form  {
  margin-bottom: 6vw;
}
}


@media only screen and (min-width: 1400px) and (min-aspect-ratio: 16/9)  {
.wrap-img-mycustom {
  margin-bottom: 10vw;
}
	#login_form {
  margin-bottom: 5vw;		
}
}

@media only screen and (min-width: 1400px) and (min-aspect-ratio: 21/9)  {
.wrap-img-mycustom {
  margin-bottom: 8vw;
}
	#login_form {
  margin-bottom: 4vw;		
}
}

@media only screen and (min-width: 1400px) and (min-aspect-ratio: 27/9)  {
.wrap-img-mycustom {
  margin-bottom: 7vw;
}
}

@media only screen and (min-width: 1400px) and (min-aspect-ratio: 32/9)  {
.wrap-img-mycustom {
  margin-bottom: 5vw;
}
}

@media only screen and (min-width: 1400px) and (min-aspect-ratio: 35/9)  {
.wrap-img-mycustom {
  margin-bottom: 3vw;
}
	#login_form {
  margin-bottom: 2vw;		
}
}


@media only screen and (max-width: 1000px) {

.input-meye {
  font-size: 15px;
  line-height: 1.5;
  height: 40px;
  border-radius: 20px;
  padding: 0 35px 0 40px;
  border:2px #4a96f3 solid;
  box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.6);
	
}

.focus-input-meye {
  border-radius: 20px;
}


.symbol-input-meye {
  border-radius: 20px;
  padding-left: 40px;
}

.symbol-input-meye img, .login-meye-form-btn img {
	max-height:25px;
}

.error-login:focus {
  border:2px #660000 solid;
  box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.6);
}

.error-login {
  border:2px #ff0000 solid;
  box-shadow: 0px 0px 20px 10px rgba(255, 0, 0, 0.6);
}



.input-meye:focus + .focus-input-meye + .symbol-input-meye {
  color: #1d2a3f;
  padding-left: 15px;
}

.login-meye-form-btn {
  font-size: 15px;
  line-height: 1.5;
  height: 40px;
  border-radius: 20px;
  padding: 0 20px;
  border:2px #fff solid;
  box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.6);
}
	
}


@media only screen and (max-width: 700px) {

.input-meye {
  font-size: 12px;
  line-height: 1.2;
  height: 30px;
  border-radius: 15px;
  padding: 0 25px 0 30px;
  border:2px #4a96f3 solid;
  box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.6);
	
}

.focus-input-meye {
  border-radius: 15px;
}


.symbol-input-meye {
  border-radius: 15px;
  padding-left: 30px;
}

.symbol-input-meye img, .login-meye-form-btn img {
	max-height:15px;
}

.error-login:focus {
  border:2px #660000 solid;
  box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.6);
}

.error-login {
  border:2px #ff0000 solid;
  box-shadow: 0px 0px 10px 5px rgba(255, 0, 0, 0.6);
}



.input-meye:focus + .focus-input-meye + .symbol-input-meye {
  color: #1d2a3f;
  padding-left: 10px;
}

.login-meye-form-btn {
  font-size: 12px;
  line-height: 1.2;
  height: 30px;
  border-radius: 15px;
  padding: 0 15px;
  border:2px #fff solid;
  box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.6);
}
	
}