/*Site grid layout*/

.grid {
  display: grid;
  grid-template-areas:
    "left header right"
    "left content right"
    "left footer right";
  grid-template-rows: auto 1fr 50px;
  grid-template-columns: 15% 70% 15%;
  grid-row-gap: 0px;
  grid-column-gap: 0px;
  height: 100vh;
  margin: 0;
  }

/* Stack the layout on small devices/viewports. */
@media all and (max-width: 700px) {
  .grid {
      grid-template-areas:
        "left header right"
        "left content right"
        "left footer right";
      grid-template-columns: 2.5% 95% 2.5%;
 }
}

.whole-page {
    display: grid;
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 3;
    grid-template-columns: 1fr;
}

.main-head {
    display: grid;
    grid-row: 1;
    grid-column-start: 1;
    grid-column-end: 4;
    grid-template-columns: 1fr;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1rem;
}

.main-content {
    grid-area: content;
    background: transparent;
    z-index: 2;
    padding: 1rem;
}

.main-left {
    grid-area: left;
    background: transparent;
  }

.main-right {
    grid-area: right;
    background: transparent;
  }

.main-footer {
  grid-area: footer;
}

.background {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row: 2;
    z-index: 1;
    clear: both;
    position: relative;
}

.form-wrapper {
    position: relative;
    padding: 1rem;
}