/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

* {
  margin: 0;
  padding: 0;
  font-family: "Open Sans", sans-serif;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.wrapper {
  max-height: 100vh;
  width: 100vw;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 2fr;
  grid-template-columns: 1fr 2fr;
  -ms-grid-rows: 1fr auto;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "imgage main  "
    "imgage footer ";
}

.image {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  -ms-grid-column: 1;
  grid-area: imgage;
  -o-object-fit: cover;
  object-fit: cover;
  height: 100vh;
  width: 100%;
}

.main {
  margin-left: 12.5%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 100%;
}

.logo {
  top: 50px;
  width: 140px;
  position: absolute;
  margin-bottom: 24px;
}

.formWrapper {
  margin-top: 105px;
  padding: 24px 16px;
  width: 525px;
  background: #ffffff;
  -webkit-box-shadow: 0px 0px 35px rgba(199, 199, 199, 0.25);
  box-shadow: 0px 0px 35px rgba(199, 199, 199, 0.25);
  border-radius: 10px;
}

h1 {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  font-size: 24px;
  line-height: 33px;
  margin-bottom: 24px;
  color: #000000;
}

.login-container label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
}
.login-container input[type="text"],
.login-container input[type="password"],
.login-container input[type="text"] {
  width: 100%;

  padding: 10px;

  border: 1px solid #d8d6de;
  border-radius: 8px;
}
.password-container {
  position: relative;
}
.password-container input {
  width: calc(100% - 40px);
}
.password-container .toggle-password {
  position: absolute;
  right: 10px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  cursor: pointer;
}

.login-container input[type="text"] {
  width: 100%;
  margin-bottom: 24px;
}
.login-container input[type="checkbox"] {
  margin-right: 5px;
  margin-top: 16px;
}
.login-container button {
  width: 100%;
  padding: 12px;
  background-color: #ff0000;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  cursor: pointer;
  margin-top: 48px;
}
.login-container button:hover {
  background-color: #d32f2f;
}

footer {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: footer;

  width: 100%;
  border-top: #f0eeee solid 1px;
}

.contact-row {
  margin-left: 12.5%;
  margin-top: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom: 17px;
}

h3 {
  font-weight: 600;
  font-size: 16px;
  line-height: 18px;
  margin-bottom: 15px;
}

.contact-column p,
.contact-column a {
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: #5e5873;
  text-decoration: none;
}

.noTitle {
  margin-top: 33px;
}

.contact-column {
  margin-right: 40px;
}

.contact {
  margin-right: 92px;
}

@media all and (max-width: 1100px) {
  .contact-row,
  .main {
    margin-left: 40px;
  }
}

@media all and (max-width: 900px) {
  .contact-row,
  .main {
    margin-left: 0;
    margin: 0 20px;
  }
  .logo {
    position: relative;
    top: 20px;
  }
  .wrapper {
    height: initial;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    grid-template-areas:
      " main  "
      "imgage  "
      "footer";
  }
  .formWrapper {
    margin-top: 40px;
    margin-bottom: 20px;

    width: 100%;
  }
  .image {
    height: 325px;
    -o-object-position: center -80vw;
    object-position: center -80vw;
  }
  .contact-row {
    margin-top: 20px;
    margin-bottom: 45px;
  }
  .contact-column {
    margin: 0;
    width: 50%;
    margin-bottom: 20px;
  }
  .image {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
  }
  footer {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }
}