.phx-hero {
  text-align: center;
  border-bottom: 1px solid #e3e3e3;
  background: #eee;
  border-radius: 6px;
  padding: 3em 3em 1em;
  margin-bottom: 3rem;
  font-weight: 200;
  font-size: 120%;
}
.phx-hero input {
  background: #ffffff;
}
.phx-logo {
  min-width: 300px;
  margin: 1rem;
  display: block;
}
.phx-logo img {
  width: auto;
  display: block;
}
header {
  width: 100%;
  background: #fdfdfd;

  /* //ref//
  border-bottom: 1px solid #eaeaea;
  margin-bottom: 2rem;
  */
}
header section {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
header section :first-child {
  order: 2;
}
header section :last-child {
  order: 1;
}
header nav ul,
header nav li {
  margin: 0;
  padding: 0;
  display: block;
  text-align: right;
  white-space: nowrap;
}
header nav ul {
  margin: 1rem;
  margin-top: 0;
}
header nav a {
  display: block;
}
@media (min-width: 40.0rem) {
  header section {
    flex-direction: row;
  }
  header nav ul {
    margin: 1rem;
  }
  .phx-logo {
    flex-basis: 527px;
    margin: 2rem 1rem;
  }
}

/* css/app.css */
.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}
.alert-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}
.alert-warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}
.alert-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}
.alert p {
  margin-bottom: 0;
}
.alert:empty {
  display: none;
}
.invalid-feedback {
  color: #a94442;
  display: block;
  margin: -1rem 0 2rem;
}
.phx-no-feedback.invalid-feedback,
.phx-no-feedback .invalid-feedback {
  display: none;
}
.phx-click-loading {
  opacity: 0.5;
  transition: opacity 1s ease-out;
}
.phx-loading {
  cursor: wait;
}
.phx-modal {
  opacity: 1 !important;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}
.phx-modal-content {
  background-color: #fefefe;
  margin: 15vh auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}
.phx-modal-close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.phx-modal-close:hover,
.phx-modal-close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
.fade-in-scale {
  animation: 0.2s ease-in 0s normal forwards 1 fade-in-scale-keys;
}
.fade-out-scale {
  animation: 0.2s ease-out 0s normal forwards 1 fade-out-scale-keys;
}
.fade-in {
  animation: 0.2s ease-out 0s normal forwards 1 fade-in-keys;
}
.fade-out {
  animation: 0.2s ease-out 0s normal forwards 1 fade-out-keys;
}
@keyframes fade-in-scale-keys {
  0% {
    scale: 0.95;
    opacity: 0;
  }
  100% {
    scale: 1.0;
    opacity: 1;
  }
}
@keyframes fade-out-scale-keys {
  0% {
    scale: 1.0;
    opacity: 1;
  }
  100% {
    scale: 0.95;
    opacity: 0;
  }
}
@keyframes fade-in-keys {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-out-keys {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* ------------------------------ */

/* //ref// for testing whether the annoying space is from margin or not! */
/*
*, ::before, ::after {
  margin: 0px !important;
}
*/

.mghub-banner-section {
  width: 100%;
  height: 100vh;
  background-image: url("../images/banner_reduced-b28d958e29b4972e0ec738479e070e3d.jpg?vsn=d");
  background-position: center center;
}

.mghub-banner-header {
  /* To move down the text inside Banner section a bit */
  margin-top: 150px;
}

.mghub-service-section {
  /* To move down the header inside Service section a bit */
  padding: 50px;

  /* To make it more like the original site */
  background-color: lightgray;
}

.mghub-demo-section {
  /* To move down the header inside Demo section a bit */
  padding: 50px;
}

.mghub-contact-section {
  /* To move down the header inside Contact section a bit */
  padding: 50px;

  /* To make it more like the original site */
  background-color: lightgray;

  /* min page content */
  min-height: 700px;
}

.mghub-map-section {

}


/* For easier the see the border, padding and content area */
.mghub-gutter-test-section .col-md-4,
.mghub-gutter-test-section .col-md-6 {
    background-image: linear-gradient(#F6F, #767), linear-gradient(red, pink);
    background-clip:  content-box,                     padding-box;
        /*  content-box means background area == content
            padding-box means background area == content + padding
            border-box  means background area == content + padding + border
        */
}

/* ------------------------------ */