/*
font-family: "Montserrat", sans-serif;
  font-family: "Open Sans", sans-serif;
  font-family: "Quicksand", sans-serif;
*/

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;500&family=Open+Sans:wght@300;400;600&family=Quicksand:wght@300;400;600&display=swap");

* {
  outline: none;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  /* overflow: hidden; */
  background: #fefcf7;
}

a {
  color: #1a1a1a;
  outline: 0 none;
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: none;
  outline: 0 none;
}

a:active,
a:hover,
a:focus {
  color: #f49124;
}

p {
}

p a {
  color: #4c4c4c;
}

img {
  border-style: none;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

hr {
  clear: both;
}

body {
  font-family: "Quicksand", sans-serif;
}

.wrapper {
  /* background: #efefef; */
}

.login-form {
  width: 400px;
  margin: 0px auto;
  padding: 20px 30px;
  background: #fff;
  border-radius: 4px;
  /* border: 1px solid #ddd; */
  box-shadow: 0px 15px 25px -4px rgba(30, 30, 60, 0.25);
  /* box-shadow: 0px 12px 25px -4px rgb(30 30 60 / 14%), 0px 200px 4px 86px rgba(30, 30, 60, 0), 0px 19px 9px -18px rgb(30 30 60 / 26%), 0px 19px 41px -18px rgb(30 30 60 / 5%); */
  margin-top: 15%;
}

.login-form h2 {
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
  /* color: #ffc600; */
  color: #000;
  margin-bottom: 25px;
  margin-top: 0px;
}

.login-form input {
  font-weight: 500;
  color: #444;
}

.bg-box {
  background: #254a9f url(https://es6.io/images/pattern.png) fixed;
  display: flex;
  justify-content: center;
  /* min-height: 20%; */
  height: 325px;
}

.form-control {
  border: 1px solid #ddd;
  box-shadow: none;
  border-radius: 2px;
  height: 40px;
  background: #f3f3f3;
}

.btn-primary {
  color: #fff;
  background-color: #254a9f;
  border-color: #143786;
}

.btn-primary:hover {
  color: #fff;
  background-color: #143786;
  border-color: #254a9f;
}

.btn-primary:active .btn-primary:focus {
  color: #fff;
   background-color: #143786;
  border-color: #254a9f;
}
.login-bottom-img {
  background: #fff
    url(https://visme.co/blog/wp-content/uploads/2017/07/50-Beautiful-and-Minimalist-Presentation-Backgrounds-01.jpg)
    fixed;
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
  height: 300px;
}
.login-bottom-img::before {
  background-color: #333;
}

.login-window-img {
  float: right;
}
.login-window-img img {
  height: 500px;
  z-index: 9999;
  width: 500px;
  margin-top: -200px;
}

.bg-white {
  background: #fff;
  box-shadow: 0px 5px 11px -4px rgb(30 30 60 / 25%);
}

header {
  padding: 10px 0px;
  display: flex;
}

@media only screen and (min-width: 300px) and (max-width: 786px) {
  .login-window-img {
    display: none;
  }

  .login-form {
    width: 350px;
    margin-top: 47%;
  }
}