@charset "utf-8";
/* CSS Document */

@import url(https://www.gstatic.com/recaptcha/releases/QENb_qRrX0-mQMyENQjD6Fuj/styles__ltr.css);

/*--------------------------------------------------------------
# Contact Banner Area
--------------------------------------------------------------*/
#contactBanner {
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 80vh;
  position: relative;
  display: flex;
}

#contactBanner .contactBannerContainer {
  width: 100%;
}

#contactBanner .contactBannerImg {
  box-sizing: content-box;
  display: flex;
  height: 80vh;
}

#contactBanner .contactBannerImg img {
  object-fit: cover;
  display: block;
  width: 100%;
  border-bottom-left-radius: 3em;
  border-bottom-right-radius: 3em;
}

@media (max-width: 575px) {
  #contactBanner {
    position: absolute;
    top: 0;
    display: block;
    height: 80vh;
  }
  
  #contactBanner .contactBannerImg {
    display: block;
  }
  
  #contactBanner .contactBannerImg img {
    height: 80vh;
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
  }
}

/*--------------------------------------------------------------
# Contact Yellow Frame Content
--------------------------------------------------------------*/
#yellowFrameArea.contactUsFrame {
  position: relative;
  top: -25em;
  display: block;
}

#yellowFrameArea.contactUsFrame .yellowFrame {
  padding: 2em;
  margin-bottom: -10em;
}

#yellowFrameArea .contactUs {
  padding: 1em 2em;
  position: relative;
  display: block;
}

.contactUs h1 {
  text-align: center;
  margin: 0 auto;
  font-weight: 600;
  margin-bottom: 0.25em;
}

.contactForm {
  margin: 1em auto;
  padding: 1em 5em;
}

.contactForm label {
  font-size: 1em;
  color: rgba(119, 108, 97, 1);
}

.contactForm input {
  margin-bottom: 1.5em;
  border-radius: 2em;
  border: none;
  height: 2.5em;
}

.contactForm textarea {
  border-radius: 1em;
  resize: none;
}

.contactForm .reCaptchaUi {
  margin: 2em auto;
  position: relative;
  display: block;
  float: left;
  margin-bottom: 2em;
}

.reCaptchaUi > .reCaptchaForm {
  display: flex;
  margin: 1em auto;
  margin-left: 5em;
}

.g-recaptcha iframe {
  border-radius: 1em;
  border: none;
}

.g-recaptcha iframe .rc-anchor {
  border: none;
}

.reCaptchaUi .contactSubmit {
  font-weight: 600;
  position: absolute;
  right: 0;
  padding: 0 5em;
  margin: 1em auto;
  background-color: rgba(119, 108, 97, 1);
  color: rgba(255,255,255,1.00)
}

.reCaptchaUi .contactSubmit:hover {
  background-color: rgba(50, 50, 50, 1);
  color: rgba(255, 255, 255, 1);
  box-shadow: 0 0 0.5em 0 rgba(0,0,0,.5);
}

.reCaptchaUi > .messageSuccess {
  text-align: right;
  position: absolute;
  right: 0;
  color: rgba(0,140,94,1.00);
  font-weight: 600;
}
.reCaptchaUi > .messageFailed {
  text-align: right;
  position: absolute;
  right: 0;
  color: rgba(111,0,1,1.00);
  font-weight: 600;
}

@media (max-width: 575px) {
  #yellowFrameArea.contactUsFrame {
    top: 10vh;
    position: relative;
    padding: 0 1em;
  }
  
  #yellowFrameArea.contactUsFrame .yellowFrame {
    padding: 0.5em;
  }
  
  #yellowFrameArea .contactUs {
    padding: 0.5em;
  }
  
  .contactForm {
    padding: 0 0.5em;
  }
  
  .contactForm label {
    padding-left: 1.5em;
  }
  
  .contactForm .reCaptchaUi {
    float: none;
    margin: 1.5em 0;
    display: block;
    position: relative;
  }
  
  .reCaptchaUi > .reCaptchaForm {
    display: block;
    margin: 0.5em auto;
  }
  
  .contactForm .reCaptchaUi .g-recaptcha {
    width: 100%;
    display: flex;
    margin: 0 auto;
    justify-content: center;
    align-content: center;
    align-items: center;
  }
  
  .contactForm .reCaptchaUi .g-recaptcha iframe {
    margin: 0 auto;
    display: flex;
    width: 100%;
  }
  
  .reCaptchaUi .contactSubmit {
    position: relative;
    display: flex;
    margin: 1em auto;
  }
  
  .reCaptchaUi > .messageSuccess,
  .reCaptchaUi > .messageFailed {
    text-align: center;
    position: relative;
    display: block;
    margin: 1em auto;
  }
  
}

/*--------------------------------------------------------------
# Contact Footer
--------------------------------------------------------------*/
#footer {
  position: relative;
  top: 0vh;
}

@media (max-width: 575px) {
  #footer {
    position: relative;
    top: 45vh;
  }
}