html, body {
  height: 100%; }

body {
  color: #6f6f6f;
  font-family: 'Fira Sans', sans-serif;
  -webkit-font-smoothing: antialiased; }

@media screen and (min-width: 1224px) {
  #colLeft {
      position: relative;
      z-index:2;
    display: flex;
    flex-direction: column;
    width: 35%; }

  @keyframes moveTitle {
    0% {
      left: 0; }
    100% {
      left: 15%; } }
  #contactImg {
    position: relative;
    animation-name: moveTitle;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    top: 20%; }

  #colRight {
      position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 65%;
    background-image: url("/img/pattern.png");
    background-repeat: repeat repeat;
    background-color: transparent; }

  @keyframes moveForm {
    0% {
      top: 0; }
    100% {
      top: 35%; } }
  #form {
    position: relative;
    animation-name: moveForm;
    animation-duration: 1s;
    animation-fill-mode: forwards; }

  @keyframes moveFormRules {
    0% {
      top: 100%; }
    100% {
      top: 40%; } }
  #formRules {
    position: relative;
    animation-name: moveFormRules;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    font-style: italic; }

  #contact_form_message {
    border-style: solid;
    padding: 10px; }

  #front {
    display: flex;
    width: 99%;
    height: 98%; }

  #paraText {
    position: relative;
    top: 30%;
    margin-left: 8%;
    margin-right: 8%; }

  .contactCoord {
    position: relative;
    top: 12%;
    margin-left: 8%; }

  #faxNumber {
    position: relative;
    top: 35%;
    font-weight: bold; }

  #phoneNumber {
    position: relative;
    top: 33%;
    font-weight: bold; }

  #email {
    position: relative;
    top: 37%;
    font-weight: bold; }

  #aMail {
    color: #6f6f6f; }

  #aMail:hover {
    color: #ee3967; }

  .inputForm {
    border: none;
    border-bottom: solid;
    border-bottom-width: thin;
    background: transparent;
    width: 70%;
    margin-bottom: 8%; }
    .inputForm.error {
        border-bottom-color: red;
        color: red;
    }

  #contact_form_message {
    margin-top: 4%;
    background: transparent;
    margin-bottom: 6%;
    padding: 10px; }

  #formButton {
    width: 25%;
    background-color: #494949;
    color: white;
    border: none;
    font-weight: lighter;
    padding: 8px 10px; } }
@media screen and (min-width: 751px) and (max-width: 1223px) {
  #colLeft {
      position: relative;
      z-index:2;
    display: flex;
    flex-direction: column;
    width: 35%; }

  @keyframes moveTitle {
    0% {
      top: 0; }
    100% {
      top: 20%; } }
  #contactImg {
    position: relative;
    left: 30%;
    animation-name: moveTitle;
    animation-duration: 1s;
    animation-fill-mode: forwards; }

  #colRight {
      position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 65%;
    background-image: url("/img/pattern.png");
    background-repeat: repeat repeat;
    background-color: transparent; }

  @keyframes moveForm {
    0% {
      top: 0; }
    100% {
      top: 35%; } }
  #form {
    position: relative;
    animation-name: moveForm;
    animation-duration: 1s;
    animation-fill-mode: forwards; }

  #contact_form_message {
    border-style: solid;
    padding: 10px; }

  #front {
    display: flex;
    width: 99%;
    height: 98%; }

  #paraText {
    position: relative;
    top: 30%;
    margin-left: 8%;
    margin-right: 8%; }

  .contactCoord {
    position: relative;
    top: 12%;
    margin-left: 8%; }

  #faxNumber {
    position: relative;
    top: 35%;
    font-weight: bold; }

  #phoneNumber {
    position: relative;
    top: 33%;
    font-weight: bold; }

  #email {
    position: relative;
    top: 37%;
    font-weight: bold; }

  #aMail {
    color: #6f6f6f; }

  #aMail:hover {
    color: #ee3967; }

  @keyframes moveFormRules {
    0% {
      top: 100%; }
    100% {
      top: 50%; } }
  #formRules {
    position: relative;
    animation-name: moveFormRules;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    font-style: italic; }

  .inputForm {
    border: none;
    border-bottom: solid;
    border-bottom-width: thin;
    background: transparent;
    width: 70%;
    margin-bottom: 8%; }

  #contact_form_message {
    margin-top: 4%;
    background: transparent;
    margin-bottom: 6%;
    padding: 10px; }

  #formButton {
    width: 25%;
    background-color: #494949;
    color: white;
    border: none;
    font-weight: lighter;
    padding: 8px 10px; } }
@media screen and (min-width: 321px) and (max-width: 750px) {
  #colLeft {
    position: relative;
      z-index: 2;
    height: 50%;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center; }

  @keyframes moveTitle {
    0% {
      top: 0; }
    100% {
      top: 30%; } }
  #contactImg {
    display: flex;
    position: relative;
    animation-name: moveTitle;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    margin-left: auto;
    margin-right: auto; }

  #contactTitle {
    width: 80%;
    height: 80%;
    margin-left: auto;
    margin-right: auto; }

  #colRight {
    position: relative;
    height: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background-image: url("/img/pattern.png");
    background-repeat: repeat repeat;
    background-color: transparent; }

  #form {
    position: relative;
    top: 10%;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
    text-align: center; }

  #contact_form_message {
    border-style: solid;
    width: inherit;
    padding: 10px; }

  #front {
    display: flex;
    width: 100%;
    height: 130%;
    flex-direction: column;
    align-items: center; }

  #paraText {
    position: relative;
    top: 30%;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 6%;
    margin-bottom: 4%; }

  .contactCoord {
    position: relative;
    top: 12%;
    margin-left: auto;
    margin-right: auto; }

  #faxNumber {
    position: relative;
    top: 35%;
    font-weight: bold; }

  #phoneNumber {
    position: relative;
    top: 33%;
    font-weight: bold; }

  #email {
    position: relative;
    top: 37%;
    font-weight: bold;
    margin-bottom: 3%; }

  #aMail {
    color: #6f6f6f; }

  #aMail:hover {
    color: #ee3967; }

  @keyframes moveFormRules {
    0% {
      top: 100%; }
    100% {
      top: 14%; } }
  #formRules {
    position: relative;
    animation-name: moveFormRules;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    font-style: italic; }

  .inputForm {
    border: none;
    border-bottom: solid;
    border-bottom-width: thin;
    background: transparent;
    width: 70%;
    margin-bottom: 8%; }

  #contact_form_message {
    margin-top: 4%;
    background: transparent;
    margin-bottom: 6%;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    padding: 10px; }

  #formButton {
    width: 25%;
    background-color: #494949;
    color: white;
    border: none;
    font-weight: lighter;
    padding: 8px 10px; } }
@media screen and (max-width: 320px) {
  #colLeft {
    position: relative;
      z-index: 2;
    height: 50%;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center; }

  @keyframes moveTitle {
    0% {
      top: 0; }
    100% {
      top: 25%; } }
  #contactImg {
    display: flex;
    position: relative;
    animation-name: moveTitle;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    margin-left: auto;
    margin-right: auto; }

  #contactTitle {
    width: 80%;
    height: 80%;
    margin-left: auto;
    margin-right: auto; }

  #colRight {
    position: relative;
    height: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background-image: url("/img/pattern.png");
    background-repeat: repeat repeat;
    background-color: transparent; }

  #form {
    position: relative;
    top: 10%;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
    text-align: center; }

  #contact_form_message {
    border-style: solid;
    width: inherit;
    padding: 10px; }

  #front {
    display: flex;
    width: 100%;
    height: 115%;
    flex-direction: column;
    align-items: center; }

  #paraText {
    position: relative;
    top: 30%;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 6%;
    margin-bottom: 4%; }

  .contactCoord {
    position: relative;
    top: 12%;
    margin-left: auto;
    margin-right: auto; }

  #faxNumber {
    position: relative;
    top: 35%;
    font-weight: bold; }

  #phoneNumber {
    position: relative;
    top: 33%;
    font-weight: bold; }

  #email {
    position: relative;
    top: 37%;
    font-weight: bold;
    margin-bottom: 3%; }

  #aMail {
    color: #6f6f6f; }

  #aMail:hover {
    color: #ee3967; }

  @keyframes moveFormRules {
    0% {
      top: 100%; }
    100% {
      top: 14%; } }
  #formRules {
    position: relative;
    animation-name: moveFormRules;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    font-style: italic; }

  .inputForm {
    border: none;
    border-bottom: solid;
    border-bottom-width: thin;
    background: transparent;
    width: 70%;
    margin-bottom: 8%; }

  #contact_form_message {
    margin-top: 4%;
    background: transparent;
    margin-bottom: 6%;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    padding: 10px; }

  #formButton {
    width: 30%;
    background-color: #494949;
    color: white;
    border: none;
    font-weight: lighter;
    padding: 8px 10px; } }

#errors-list {
    position: absolute;
    top: 200px;
    left: 50%;
    transform: translateX(-50%);
}
#errors-list li {
    font-size: 14px;
    color: red;
}
#contact_form_message.error {
    border-color: red;
}