@media (min-width: 521px) {
  .wrap-login-mobile-portrait {
    display: none;
  }

  .wrap-login {
    /* position:fixed; */
    /* width:1200px;
		max-width:1200px; */
    /* height:100%; */
    /* top:0px;
		left:0px; */
    /* width:1920px;
	height:900px; */
    width: 100vw;
    min-width: 100%;
    height: 100vh;
    min-height: 100%;
    overflow: hidden;
  }

  .background-login {
    position: absolute;
    left: 0px;
    bottom: 0px;
    /* filter: blur(12px); */
    width: 100%;
  }
  .background-login img {
    width: 100%;
	filter: blur(1px);
  }

  .sky-login {
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    filter: blur(8px);
  }
  .sky-login img {
    width: 100%;
  }

  .clouds-login {
    display: none;
    position: absolute;
    /* margin: 10% 0; */
    top: 50%;
    z-index: 100;
    width: 80%;
    left: 10%;
  }
  .clouds-login img {
    width: 100%;
  }

  .castle-login {
    display: none;
    position: absolute;
    /* width: 414px; */
    /* height: 844px; */
    /* left: 1511px;
		top: 100px; */
    right: 0;
    bottom: 0;
    z-index: 2;
    width: 20%;
  }
  
  
  .castle-login img {
    width: 100%;
  }

  .wheel-login {
    /* left: 220px;
		right: 61.72%;
		top: 90px;
		bottom:  20%;*/
    display: none;
    position: absolute;
    left: 10%;
    top: 10%;
    width: 30%;
  }
  .wheel-login img {
    width: 100%;
  }

  .logo-login {
    display: none;
    position: absolute;
    /* width: 317px;
		height: 212px; */
    left: 0px;
    top: 0px;
    filter: drop-shadow(0px 0px 180px #ffffff);
    transform: rotate(-0.11deg);
    width: 30%;
  }
  .logo-login img {
    width: 100%;
  }

  .logo2-login {
    display: none;
    position: absolute;
    /* width: 1343.96px;
    height: 708.04px; */
    /* left: 318px;
		top: -51px; */
    width: 60%;
    left: 20%;
  }
  .logo2-login img {
    width: 100%;
  }

  .balls-login {
    display: none;
    z-index: 101;
    position: absolute;
    /* left: 1809px;
		top: 508px; */
    right: 0px;
    bottom: 0px;
    width: 6%;
    filter: blur(3px);
  }
  .balls-login img {
    width: 100%;
  }

  .exit-login {
    position: absolute;
    left: 1700px;
    top: 50px;
    cursor: pointer;
    z-index: 5;
  }

  .exit-login > img {
    cursor: pointer;
  }

  .form-login {
    display: none;
    z-index: 101;
    position: absolute;
    left: 15%;
    top: 51%;
    width: 70%;
  }

  input[type="text"].login {
    padding: 1%;
    margin: 0px;
    width: 30%;
    font-size: 22px;
    font-size: 2.2vh;
    border: 0.5vh solid #ff9900;
    box-sizing: border-box;
    border-radius: 5px;
    height: 3.2vw;
  }

  input[type="text"].login:focus {
    border: 0.5vh solid red;
    outline: none;
    box-shadow: 1px 1px 2px 0 red;
  }

  input[type="text"].pass, input[type="password"].pass{
    padding: 1%;
    margin: 0px;
    width: 30%;
    font-size: 22px;
    font-size: 2.2vh;
    border: 0.5vh solid #3bb303;
    margin-left: 3%;
    box-sizing: border-box;
    border-radius: 5px;
    position: relative;
    height: 3.2vw;
  }

  input[type="text"].pass:focus, input[type="password"].pass:focus{
    border: 0.5vh solid red;
    outline: none;
    box-shadow: 1px 1px 2px 0 red;
  }

  .password-control {
    position: absolute;
    top: 22%;
    /* right: 6px; */
    left: 59%;
    display: inline-block;
    width: 2.5%;
    height: 2.5%;
    /* background: url(/svg/view_.svg) 0 0 no-repeat; */
  }

  #password {
    /* position: absolute; */
    width: 30%;
    /* height: 82px; */
    background: linear-gradient(
      180deg,
      rgba(255, 185, 80, 0.94) 0%,
      #ff7a00 100%
    );
    color: white;
    font-size: 22px;
    font-size: 2.2vh;
    border-radius: 5px;
    border: 0.5vh solid #ff7a00;
    outline: none;
    padding: 1% 0;
    margin-left: 3%;
    cursor: pointer;
  }

  #password:hover {
    border: 0.5vh solid #ff7a0099;
    background: linear-gradient(
      180deg,
      rgba(255, 185, 80, 0.8) 0%,
      #ff7a00aa 100%
    );
  }

  #password:active {
    border: 0.5vh solid red;
  }
}

/* @media   (min-width: 1200px) and (max-width: 1919px) {
	.wrap-login{
		display:none;
	}
	.wrap-login-mobile-portrait{
		display:none;
	}
}

@media   (max-width: 1199px) {
	.wrap-login{
		display:none;
	}
	.wrap-login-mobile-portrait{
		display:none;
	}
} */

/* portrait mode */
/* @media screen and (orientation: portrait) and (max-width : 320px) { */
@media (max-width: 520px) {
  .wrap-login-mobile-portrait {
    display: block;
    width: 100%;
  }

  .wrap-login {
    display: none;
  }

  .background-login {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    filter: blur(2px);
    z-index: 2;
  }
  .background-login img {
    width: 100%;
  }

  .sky-login {
    position: absolute;
    top: 0px;
    left: 0px;
    filter: blur(8px);
    z-index: 1;
    width: 100%;
  }
  .sky-login img {
    width: 100%;
  }

  .logo-login {
    position: absolute;
    z-index: 3;
    left: 0px;
    top: 0px;
    filter: drop-shadow(0px 0px 180px #ffffff);
    transform: rotate(-0.11deg);
  }

  .logo2-login {
    position: absolute;
    left: 0px;
    top: 14%;
    z-index: 4;
    width: 100%;
  }
  .logo2-login img {
    width: 100%;
  }

  .form-login {
    z-index: 101;
    position: absolute;
    left: 0;
    top: 40vh;
  }

  input[type="text"].login-mobile {
    padding: 3vw;
    margin: 0;
    margin-right: 0px;
    margin-left: 0px;
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    font-size: 4.2vw;
    border: 1vw solid #f90;
    box-sizing: border-box;
    border-radius: 1vw;
    height: 11.2vw;
  }

  input[type="text"].login-mobile::placeholder{
    color: #212529;
    opacity: 0.9;
  }

  input[type="text"].login-mobile:focus {
    border: 3px solid red;
    outline: none;
    box-shadow: 1px 1px 2px 0 red;
  }

  input[type="text"].pass-mobile::placeholder, input[type="password"].pass-mobile::placeholder{
    color: #212529;
    opacity: 0.9;
  }

  input[type="text"].pass-mobile, .pass-mobile {
    padding: 3vw;
    margin: 0;
    width: 90%;
    margin-top: 5%;
    margin-left: 5%;
    margin-right: 5%;
    font-size: 4.2vw;
    border: 1vw solid #3bb303;
    box-sizing: border-box;
    border-radius: 1vw;
    height: 11.2vw;
  }

  input[type="text"].pass-mobile:focus, .pass-mobile:focus {
    border: 3px solid red;
    outline: none;
    box-shadow: 1px 1px 2px 0 red;
  }

.password-control-mobile {
	position: absolute;
  top: 18vw;
  right: 10vw;
  display: inline-block;
  width: 8vw;
  height: 8vw;
   /*  background: url(/svg/view_.svg) 0 0 no-repeat; */
	
  }

#password-mobile {
    /* position: absolute; */
    width: 90%;
    /* height: 82px; */
    background: linear-gradient(
      180deg,
      rgba(255, 185, 80, 0.94) 0%,
      #ff7a00 100%
    );
    color: white;
    font-size: 22px;
    border-radius: 5px;
    border: 3px solid #ff7a00;
    outline: none;
    padding: 10px 0px;
    margin-top: 5%;
    margin-left: 5%;
    margin-right: 5%;
    cursor: pointer;
  }

  #password-mobile:hover {
    border: 3px solid #ff7a0099;
    background: linear-gradient(
      180deg,
      rgba(255, 185, 80, 0.8) 0%,
      #ff7a00aa 100%
    );
  }

  #password-mobile:active {
    border: 3px solid red;
  }
}

/* album mode */
/* @media screen and (orientation: landscape) and (max-width : 800px) {
	.wrap-login-mobile-portrait{
		display:none;
	}
	
	.wrap-login{
		display:none;
	}
} */