#contact-container {
  width: 100vw;
  height: 100vh;
  padding-top: 15vh;
  border-bottom: 1px var(--white) solid;
}

#contact-banner-container {
  width: 200vw;
  margin-top: 4vh;
}

.contact-banner {
  width: 50vw;
  color: var(--white);
  font-family: var(--ostt);
  font-size: 5vh;
  animation-name: banner;
  animation-duration: 15s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.contact-side {
  width: 50vw;
  height: 100%;
}

/********************************************************************** FORM ********************************************************************************/
.contact-form-line {
  justify-content: flex-start;
  margin-bottom: 2.5vh;
  width: 80%;
}

.contact-form-label {
  width: 13vw;
  color: var(--white);
  font-size: 2vh;
  font-family: var(--os);
  text-align: right;
  padding-right: 4vh;
}

.contact-form-input {
  width: 23vw;
  height: 4.5vh;
  border: none;
  font-size: 2vh;
  padding: 1vh;
  font-family: var(--os);
  color: var(--black);
  background-color: rgba(244, 244, 244, 0.8);
  border-radius: 0.25vh;
}

#contact-date {
  font-family: var(--os);
}

.contact-form-input::placeholder {
  color: var(--greengrey);
}

.contact-form-input:focus {
  outline: none;
  background-color: var(--white);
}

.contact-chk_icon {
  height: 3vh;
  width: 3vw;

  font-size: 1vh;
  -webkit-text-fill-color: var(--white);
}

#contact-asterisk-warning {
  font-size: 1.5vh;
  color: var(--white);
}

#contact-submit {
  background-color: var(--greengrey);
  border: none;
  border-radius: 0.25vh;
  transition: 0.2s;
  width: 7.5vw;
  padding: 1vh 2vw;
  font-size: 2vh;
  text-transform: uppercase;
  font-family: var(--os);
  cursor: pointer;
}

#contact-submit:hover {
  background-color: var(--white);
}

#contact-message {
  height: 20vh;
}

#contact-chk_icon-placeholder {
  width: 3vw;
  margin-left: 1vw;
  height: 3vh;
}

#contact-message-icon {
  height: 20vh;
}

#contact-thankyou {
  display: none;
  position: absolute;
  bottom: 0px;
  right: 0px;

  height: 88vh;
  width: 100vw;
  padding: 0px 10vw;
  cursor: default;
  font-family: var(--ostt);

  background-color: rgba(0, 0, 0, 0.5);

  color: var(--white);
  font-size: 5vh;
  line-height: 7vh;
}

/********************************************************************** IMAGE *******************************************************************************/
#contact-img {
  width: 32vw;
  height: 32vw;
  border-radius: 50%;
  overflow: hidden;
  margin-top: 4vh;
  object-fit: cover;
}

/******************************************************************** ANIMATION *****************************************************************************/
@keyframes banner {
  0% {
    transform: translateX(50vw);
    opacity: 100%;
  }

  99.997% {
    transform: translateX(0vw);
    opacity: 100%;
  }

  99.998% {
    transform: translateX(0vw);
    opacity: 0%;
  }

  99.999% {
    transform: translateX(50vw);
    opacity: 0%;
  }

  100% {
    transform: translateX(50vw);
    opacity: 100%;
  }
}