body {
  background-image: url(../img/loginBG.png);
  background-repeat: no-repeat;
  background-position: top left;
  background-size: cover;
}

.container {
  max-width: 92.5%;
}
.container h1 {
  color: #dfebf0;
  font-weight: 600;
  text-shadow: 5px 5px 3px #0f0f0f;
}

.login-section {
  background-image: url(../img/aaa.svg);
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  box-shadow: 5px 5px 5px #0f0f0f;
}
.login-section .form-check {
  color: white;
}

.btn {
  margin-top: 30px;
  color: white;
  font-size: 18px;
}

.btn-login {
  background-color: #00a29a;
}

.btn-regist {
  background-color: #2ea7e0;
}

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

.btn-regist:hover {
  background-color: #2387b6;
  color: white;
}

.btn-search, .btn-download {
  background-image: url(../img/button.png);
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  text-shadow: 0 0 3px #ffffff;
  color: #2b2525;
  font-size: 22px;
  font-weight: 500;
  border-radius: 10px;
}

.btn-search:hover, .btn-download:hover {
  box-shadow: 5px 5px 7px #000000;
  color: #000000;
}

footer {
  background-image: url(../img/footer.png);
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
}

@media (min-width: 360px) {
  body {
    background-image: url(../img/loginBG.png);
    background-repeat: repeat-y;
    background-position: top left;
    background-size: cover;
  }

  .logoBg {
    width: 300px;
  }
  .leftDiv{
    padding: 100px 15px 15px;
  }

  .frontLogo {
    width: 138px;
    position: absolute;
    top: 15px;
    left: 30px;
  }

  .container h1 {
    font-size: 36px;
    margin-bottom: 40px;
    margin-top: 30px;
  }

  .login-section {
    padding: 25px;
    border-radius: 18px;
  }
  .login-section h3 {
    color: white;
    font-size: 2rem;
  }
  .login-section .login-title {
    margin-bottom: 30px;
  }

  .map {
    display: none;
  }

  .btn-search, .btn-download {
    margin-bottom: 45px;
  }
}

@media (min-width: 1000px) {
  body {
    height: 768px;
  }

  .logoBg {
    width: 380px;
  }
  .leftDiv{
    padding: 126px 15px 15px;
  }

  .frontLogo {
    width: 165px;
    position: absolute;
    top: 18px;
    left: 50px;
  }

  .container h1 {
    font-size: 65px;
    margin-left: 130px;
    margin-bottom: 45px;
    margin-top: 0;
  }

  .login-section {
    padding: 50px;
    max-width: 360px !important;
    max-height: 400px;
  }
  .login-section .login-title {
    margin-bottom: 30px;
  }
  .login-section h3 {
    font-size: 2rem;
  }
  .login-section form {
    font-size: 18px;
  }
  .login-section form input {
    font-size: 18px;
  }

  .map {
    position: absolute;
    top: 220px;
    left: 570px;
    display: block;
  }
  .map img {
    max-width: 420px;
  }

  .btn-search {
    position: absolute;
    left: 520px;
    top: 420px;
  }

  .btn-download {
    position: absolute;
    left: 600px;
    top: 500px;
  }
}
@media (min-width: 1200px) {
  .logoBg {
    width: 380px;
  }

  .frontLogo {
    width: 165px;
    position: absolute;
    top: 18px;
    left: 50px;
  }

  .container h1 {
    font-size: 65px;
    margin-left: 130px;
    margin-bottom: 45px;
  }

  .login-section {
    padding: 50px;
    max-width: 360px !important;
    max-height: 400px;
  }
  .login-section .login-title {
    margin-bottom: 30px;
  }
  .login-section h3 {
    font-size: 2rem;
  }
  .login-section form {
    font-size: 18px;
  }
  .login-section form input {
    font-size: 18px;
  }
  .map {
    position: absolute;
    top: 110px;
    left: 720px;
    display: block;
  }
  .map img {
    max-width: 480px;
  }

  .btn-search {
    position: absolute;
    left: 640px;
    top: 350px;
  }

  .btn-download {
    position: absolute;
    left: 780px;
    top: 435px;
  }
}
@media (min-width: 1400px) {
  .logoBg {
    width: 420px;
  }

  .frontLogo {
    width: 180px;
    position: absolute;
    top: 25px;
    left: 50px;
  }

  .container h1 {
    font-size: 80px;
    margin-left: 120px;
    margin-bottom: 70px;
  }

  .login-section {
    max-width: 400px !important;
    max-height: 420px;
  }
  .login-section .login-title {
    margin-bottom: 30px;
  }
  .login-section h3 {
    font-size: 2.2rem;
  }

  .map {
    position: absolute;
    top: 110px;
    left: 920px;
  }
  .map img {
    max-width: 520px;
  }

  .btn-search {
    position: absolute;
    left: 785px;
    top: 375px;
  }

  .btn-download {
    position: absolute;
    left: 930px;
    top: 465px;
  }
}
@media (min-width: 1800px) {
  .logoBg {
    width: 570px;
  }
  .leftDiv{
    padding: 165px 15px 15px;
  }

  .frontLogo {
    width: 250px;
    position: absolute;
    top: 25px;
    left: 60px;
  }

  .container {
    max-width: 92.5%;
  }
  .container h1 {
    font-size: 90px;
    margin-left: 240px;
    margin-bottom: 90px;
  }

  .login-section {
    max-width: 440px !important;
    margin-left: 45px;
    max-height: 420px;
  }
  .login-section .login-title {
    margin-bottom: 30px;
  }
  .login-section h3 {
    color: white;
    font-size: 40px;
  }

  .map {
    position: absolute;
    top: 100px;
    left: 1205px;
  }
  .map img {
    max-width: none;
  }

  .btn-search {
    position: absolute;
    left: 1097px;
    top: 468px;
  }

  .btn-download {
    position: absolute;
    left: 1273px;
    top: 583px;
  }
}