:root{
  --gg-blue:#1b4489;/* blue that matches the logo */
  --gg-footer: #000000;/*black*/
  --gg-green-opaque: rgba(58, 175, 74,.8);/*green*/
  --gg-green: rgb(58, 175, 74);/*green*/
  --gg-light: rgba(255,255,255,.95);/*white*/
  --gg-accent-dark: #000000;
  --gg-dk-grey: #333333;
}
html{
 font-size: 16px;
}
body {
  background: var(--gg-green-opaque);
  background-image: url(../img/staff-photo.jpg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
h1, h4{
  font-family: 'motter_corpus_stdregular';
}
p, ul, label{
 font-weight: bold;
}
h1{
 font-size: 2.5em !important;
}
label > small{
  color: #FFFFFF;
}
footer{
    background: var(--gg-blue);
    color: var(--gg-light);
    padding: 2em;
    text-align: center;
}
.top-row{
  background: var(--gg-light);
  display: block;
  color: var(--gg-blue);
  font-weight:bold;
  font-size: 1.5em;
  position: fixed;
  width: 100%;
}
.main-container{
  background: var(--gg-green-opaque);
}
.bg-contain{
  
}
.col-left{
  border-right: 1px solid rgba(255,255,255,.5);
  height: 100vh;
}
.col-right{
  border-left: 1px solid var(--gg-green);
  height: 100vh;
}
.phone{
    float:right;
}
.phone a {
    color: var(--gg-blue);
    text-decoration: none;
}
/* Bootstrap 5 overrides */
.form-control{
  border-radius: 0;
  height: 60px;
}
#logo-large{
    display:block;
    float:left;
}
#logo-mobile{
    display:none;
}
#main-content{
    padding-top: 3em;
}

@media (max-width: 640px) {
  .phone{
      float:none;
      text-align:center;
  }
  #logo-large{
    display:none;
}
#logo-mobile{
    display:block;
    max-width: 230px;
    margin: 15px auto 0;
}
#main-content{
    padding-top: 8.5em;
}
#large-content-logo{
    display:none;
}
.col-left{
    border-right: none;
    height: auto;
}
.col-right{
    height:auto;
}
}