/**
 * The hero section
 */
body.page-node-4778 #hero_bg_wrapper {
  background-image: url("../asset/home-parallax.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}
body.page-node-4778 .contactus-header {
  color: #fff;
  text-align: center;
}
body.page-node-4778 .contact-item span,
body.page-node-4778 .contact-item a,
body.page-node-4778 .contact-item i {
  display: block;
  font-weight: bold;
  color: #fff;
}
body.page-node-4778 .contact-item i {
  color: #093875;
  background-color: #fff;
  display: inline-block;
  width: 40px;
  height: 40px;
  padding: 6px;
  font-size: 25px;

  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
}

/**
 * Style the map
 */
#contact-header-wrapper {
  /* margin-bottom: 9rem; */
  min-height: 52rem;
}
#contact-map-wrapper {
  margin: 3rem auto 5rem;

  aspect-ratio: 1.78; /* the aspect ration of the monitor image */
  width: 100%;
  height: auto;

  background-image: url("../asset/contact-monitor.svg");
  background-repeat: no-repeat;
  background-size: cover;

}
@media (min-width: 992px) {
  #contact-map-wrapper {
    position: absolute;
    right: 0;
    bottom: -7rem;
    margin-bottom: 0;

    width: 53.5%;
    height: auto;

    margin-right: -8.7%;
  }

  #contact-header-wrapper {
    height: 52rem;
  }
}
#contact-map-inner {
  padding: 4.2% 16.1% 8.7% 15.9%;
  width: 100%;
  height: 100%;
}
#contact-map-iframe {
  width: 100%;
  height: 100%;
}

/**
 * Style main area
 */
body.page-node-4778 .node__content {
 margin-top: 0;
}
body.page-node-4778 nav.tabs {
  /* when admin is logged in, they should be able to see the node tabs (edit/delete/etc..) */
  margin-top: 8rem;
}

/**
 * Style webform
 */
body.page-node-4778 .webform-submission-form {
  max-width: 1140px;
  width: 70%;
  margin: 0 auto;
  padding: 14rem 1rem 10rem;
  background-color: transparent;
  overflow: auto;

  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  -o-border-radius: 0;
  -khtml-border-radius: 0;
  border-radius: 0;

  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
@media (min-width: 576px) {
  body.page-node-4778 .webform-submission-form .js-form-item-fname {
    width: 50%;
    float: right;
    clear: right;
  }
  body.page-node-4778 .webform-submission-form .js-form-item-lname {
    max-width: 50%;
    float: right;
  }
  body.page-node-4778 .webform-submission-form .js-form-item-email {
    width: 50%;
    clear: right;
    float: right;
  }
  body.page-node-4778 .webform-submission-form .js-form-item-phone {
    max-width: 50%;
    float: right;
  }
  body.page-node-4778 .webform-submission-form .js-form-item-message {
    clear: right;
  }
}
body.page-node-4778 .webform-submission-form .js-form-item-fname,
body.page-node-4778 .webform-submission-form .js-form-item-lname,
body.page-node-4778 .webform-submission-form .js-form-item-email,
body.page-node-4778 .webform-submission-form .js-form-item-phone,
body.page-node-4778 .webform-submission-form .js-form-item-message {
  padding: 0.7rem;
}
body.page-node-4778 .webform-submission-form .webform-actions {
  text-align: center;
  margin-top: 3rem;
}
body.page-node-4778 .webform-submission-form .js-form-item input,
body.page-node-4778 .webform-submission-form .js-form-item textarea {
  border: 1px solid #ddd7;
  box-shadow: 0 0 2px #ddd;
  border-radius: 5px;
  padding: 1.4rem;
}
body.page-node-4778 .webform-submission-form .webform-actions input {
  width: 24rem !important;
}
body.page-node-4778 .webform-submission-form .contact-form-header {
  text-align: center;
  margin-bottom: 2.5rem;
}
body.page-node-4778 .webform-submission-form .contact-form-header h3 {
  font-weight: bold;
  font-size: 2.6rem;
  margin: 0 0 1.5rem
}
body.page-node-4778 .webform-submission-form .contact-form-header p {
  color: #555;
}

body.page-node-4778 .contact-form-wrapper {
  background-image: url('../asset/contact-form-bg.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/**
 * Style contact ways section
 */
#contact-ways {
  background-image: url("../asset/home-parallax.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;

  overflow: auto;
}
#contact-ways .way-title .way-icon {
  color: #fff;
  font-size: 50px;
  display: inline-block;
  padding: 1rem;
}
#contact-ways .way-title p {
  display: inline-block;
  color: #fff;
  font-weight: bold;
  font-size: 1.9rem;
}
#contact-ways .way-button {
  clear: both;
}
@media (min-width: 992px) {
  #contact-ways .way-button {
    margin-top: -3rem;
  }
}
#contact-ways .way-button a {
  color: #fff;
}
#contact-ways .way-text {
  background-color: #fff;
  padding: 2rem;
  text-align: justify;
  border-radius: 5px;
}
#contact-ways .way-type-metro {
  margin: 12rem 0 5rem;
}
#contact-ways .way-type-bus {
  margin: 5rem 0 18rem;
}