.registerWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  width: 100%;
  height: auto;
  padding: 80px 40px;
}

.registerWrapper h2, .registerWrapper h4 {
  text-align: center;
  font-size: 20px;
  color: var(--darkColor);
  font-family: poppins;
}

.registerWrapper h2 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
}

/*form*/

.registerWrapper form {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 20px;

  height: auto;
  padding: 10px;
  width: 500px;
}

.registerWrapper form div.formBlock {
  margin: 15px;
  width: 100%;

  display: flex;
  align-items: center;
  flex-direction: column;
}

.registerWrapper form div.formBlock p {
  color: #D14949;
  text-align: center;
  margin: 5px 0;
}

.registerWrapper form div.formBlock input {
  height: 40px;
  width: 100%;
  border-radius: 5px;
  color: var(--darkColor);
  padding-left: 10px;
  padding-right: 10px;
  width: 100%;
  border: 1px solid #F1F1F1;
  outline: none;
  border: 1px solid var(--mainYellow);

  transition: .1s ease-in-out;
  font-size: 15px;
}

.registerWrapper form div.formBlock input:focus {
  background: #ECECEC;
}

#registerBtn {
  margin-top: 15px;
  height: 38px;
  width: 100%;
  border-radius: 5px;
  color: var(--darkColor);
  padding-left: 10px;
  padding-right: 10px;
  width: 100%;
  -moz-transition: all .4s ease 0s;
  transition: all .4s ease 0s;
  background: var(--mainYellow);
  border: 1px solid transparent;
  outline: none;
  cursor: pointer;
  font-weight: 700;

  font-size: 15px;
}

#registerBtn:hover {
  background: #E7A802;
}

/*Login*/

.orLoginWrapper {
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
}

.orLoginWrapperInner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.orLoginWrapperInner div {
  width: 20%;
  height: 1px;
  background: var(--darkColor);
}

.orLoginWrapperInner h6 {
  font-size: 18px;
  margin: 0 20px;
  color: var(--darkColor);
}

.orLoginWrapper a {
  margin-top: 20px;
  height: 38px;
  width: 100%;
  border-radius: 5px;
  color: var(--darkColor);
  padding-left: 10px;
  padding-right: 10px;
  width: 100%;
  -moz-transition: all .4s ease 0s;
  transition: all .4s ease 0s;
  background: transparent;
  border: 2px solid var(--mainYellow);
  outline: none;
  cursor: pointer;
  font-weight: 700;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  font-weight: 700;
  text-decoration: none;
  font-size: 22px;

  font-size: 15px;
}

.orLoginWrapper a:hover {
  background: var(--mainYellow);
}

/*confirm form*/

.registerWrapper form {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 20px;

  height: auto;
  padding: 10px;
  width: 500px;
}

.registerWrapper form p {
  color: #D14949;
  text-align: center;
  margin: 5px 0;

  display: none;
}

.registerWrapper form input {
  height: 40px;
  width: 100%;
  border-radius: 5px;
  color: var(--darkColor);
  padding-left: 10px;
  padding-right: 10px;
  width: 100%;
  border: 1px solid #F1F1F1;
  outline: none;
  border: 1px solid var(--mainYellow);

  transition: .1s ease-in-out;
  font-size: 15px;
}

.registerWrapper form input:focus {
  background: #ECECEC;
}

#confirmBtn {
  margin-top: 15px;
  height: 38px;
  width: 100%;
  border-radius: 5px;
  color: var(--darkColor);
  padding-left: 10px;
  padding-right: 10px;
  width: 100%;
  -moz-transition: all .4s ease 0s;
  transition: all .4s ease 0s;
  background: var(--mainYellow);
  border: 1px solid transparent;
  outline: none;
  cursor: pointer;
  font-weight: 700;

  font-size: 15px;
}

#confirmBtn:hover {
  background: #E7A802;
}


/*media*/

@media (max-width: 768px) {

  .registerWrapper {
    height: auto;
    padding: 80px 15px;
  }

  .registerWrapper form {
    width: 100%;
    padding: 5px;
  }

}