.formBox {
  position: absolute;
  width: 27%;
  top: 44%;
  right: 5%;
  z-index: 20;
}

.formBox form {
  width: 100%;
  padding: 2% 6%;
  background-color: #1a4555;
}

.formBox h3 {
  font-size: 200%;
  direction: rtl;
  text-align: center;
  color: #46673c;
  text-shadow: 1px 1px 3px #000;
}

.formBox h6 {
  font-size: 110%;
  line-height: 150%;
  direction: rtl;
  text-align: center;
  color: #fff;
}



.formBox .input_box {
  width: 100%;
  margin-top: 1.5%;
}

.formBox input[type='text'] {
  width: 100%;
  border: 1px solid #c1c1c1;
  border-radius: 4px;
  direction: rtl;
  padding: 4% 2%;
  font-size: 100%;
  color: #000000;
  outline: none;
  background: #ffffff;
}

.formBox input[type='submit'] {
  width: 100%;
  border: none;
  direction: rtl;
  padding: 4%;
  font-size: 150%;
  color: #fff;
  outline: none;
  background: #b8b51b;
  border-radius: 4px;
  font-weight: bold;
}


.formBox .container {
  display: block;
  position: relative;
  padding: 1% 10% 7% 0;
  margin-top: 5%;
  cursor: pointer;
  font-size: 0.7em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  direction: rtl;
  text-align: right;
  color: #fff;
}

/* Hide the browser's default checkbox */
.formBox .container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.formBox .checkmark {
  position: absolute;
  height: 1vw;
  width: 1vw;
  background-color: #fff;
  right: 0;
  top: 0;
  border: 0.1vw solid #c1c1c1;
}

/* On mouse-over, add a grey background color */
.formBox .container:hover input~.checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.formBox .container input:checked~.checkmark {
  background-color: #fff;
}

/* Create the checkmark/indicator (hidden when not checked) */
.formBox .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.formBox .container input:checked~.checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.formBox .container .checkmark:after {
  left: 25%;
  top: 3%;
  width: 54%;
  height: 80%;
  border: solid #000;
  border-width: 0 0.2vw 0.2vw 0;
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

.errorBox {
  position: absolute;
  top: 92%;
  width: 80%;
  direction: rtl;
  text-align: center;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  background-color: #fff;
  border-radius: 6px;
  z-index: 9999;
  padding: 0 0;
  color: red;
  font-weight: bold;
  border: 2px solid red;
  display: none;
}

/* Mobile Form*/

@media only screen and (max-width: 480px) {
  .formBox {
    position: static;
    width: 100%;
  }

  .formBox form {
    position: relative;
    margin-top: 0;
    padding: 10% 10% 11% 10%;
  }

  .formBox h6 {
    font-size: 200%;
  }


  .formBox .input_box {
    width: 100%;
    margin-top: 1.5%;
  }

  .formBox input[type='text'] {
    font-size: 180%;
    padding: 4% 3%;
  }

  .formBox .container {
    padding: 0% 8% 4% 0;
    margin-top: 3%;
    font-size: 1.2em;
  }

  /* Create a custom checkbox */
  .formBox .checkmark {
    height: 5vw;
    width: 5vw;
    background-color: #fff;
    border: 0.1vw solid #c1c1c1;
  }

  /* On mouse-over, add a grey background color */
  .formBox .container:hover input~.checkmark {
    background-color: #fff;
  }

  /* When the checkbox is checked, add a blue background */
  .formBox .container input:checked~.checkmark {
    background-color: #fff;
  }

  /* Style the checkmark/indicator */
  .formBox .container .checkmark:after {
    border-width: 0 0.8vw 0.8vw 0;
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
    transform: rotate(30deg);
    width: 45%;
    height: 70%;

  }

  .formBox input[type='submit'] {
    padding: 4%;
    font-size: 180%;
  }

  .errorBox {
    font-size: 180%;
    top: 89%;
  }

}