.headingContainer {
  display: block;
  margin-bottom: 50px !important;
}

#loginSelectionHeader {
  font-size: 40px;
  letter-spacing: normal;
  color: #323a45;
  margin-bottom: 0px !important;
  text-align: center;
}

#loginSelectionSubHeader {
  text-align: center;
  color: #323a45;
  font-style: italic;
  font-size: 20px;
  margin-top: 10px;
}

h2 {
  font-size: 1.2rem;
  font-weight: 500;
}

p {
  font-size: 18px;
  font-weight: 500;
  color: #323a45;
}

p.descriptionText {
  font-size: 16px;
  /* color: gray; */
}

.help {
    grid-row-gap: 13px;
}

.moduleContainer {
  max-width: 860px;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  justify-content: center;
}

.selectionbox {
  height: 140px;
  width:390px;
  border-radius: 0;
  text-align: center;
  padding: 0px 20px;
  transition: .3s;
  cursor: pointer; 
  /* box-shadow: 0px 0px 10px -2px rgb(215, 215, 215); */
}

.selectionbox h2 {
  color: #323a45;
  font-size: 16px;
  letter-spacing: .5px;
}

.boxicon {
  text-align: center;
  font-size: 48px;
  margin: 24px auto 0px;
  transition: .3s;
  text-decoration: none !important;
}

.iconBlue {
  color: #336a90;
}

.iconRed {
  color: #711c3b;
}

.iconGreen {
  color: #407972;
}

.iconDarkBlue {
  color:  #264a64;
}

.site-link {
  text-decoration: none !important;
}

.login-box {
  padding-left: 30px;
  padding-right: 30px;
  margin-bottom: 60px; 
}

.login-box:focus {
  outline: none;
}

a:focus {
  outline:none;
  border:none;
}

.login-box a:hover .boxicon, .login-box a:focus .boxicon {
  filter: brightness(1.3);
}

.login-box a:focus .selectionbox, .login-box :hover .selectionbox{
  text-decoration: none !important;
  filter: brightness(0.98);
}

.login-box a:focus .accentBlue, .login-box :hover .accentBlue {
  box-shadow: inset 0px -8px 0px 0px #336a90;
}

.login-box a:focus .accentRed, .login-box :hover .accentRed {
  box-shadow: inset 0px -8px 0px 0px #711c3b;
}

.login-box a:focus .accentGreen, .login-box :hover .accentGreen {
  box-shadow: inset 0px -8px 0px 0px #407972;
}

.login-box a:focus .accentDarkBlue, .login-box :hover .accentDarkBlue {
  box-shadow: inset 0px -8px 0px 0px #264a64;
}

.login-box :hover h2, .login-box :hover p {
  /* color: #264a64 !important; */
  text-decoration: none !important; 
}

/* Small Devices */
@media (min-width: 300px) { 
  .selection-container {
    margin-top: 10px; 
  }
  .site-link {
    width:100%;
  }
  .headingContainer {
    margin-bottom: 20px !important;
  }
  #loginSelectionSubHeader {
    font-size: 1.5em;
  }
  .login-box {
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 10px; 
  }
}

/* Medium Devices */
@media (min-width: 768px) { 
  .selection-container {
    margin-top: 40px; 
  }
  .site-link {
    width:90%;
  }
  .headingContainer {
    margin-bottom: 40px !important;
  }
  #loginSelectionHeader {
    font-size: 2.5em !important;
  }
  .login-box {
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 20px; 
  }
}

/* Large Devices */
@media (min-width: 992px) { 
  .selection-container {
    margin-top: 40px; 
  }
  .site-link {
    width:90%;
  }
  #loginSelectionSubHeader {
    font-size: 20px;
  }
  .headingContainer {
    margin-bottom: 40px !important;
  } 
  .login-box {
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 40px; 
  }
}

/* XL Devices */
@media (min-width: 1400px) { 
  .selection-container {
    margin-top: 100px; 
  }
  .site-link {
    width:80%;
  }
  .headingContainer {
    margin-bottom: 50px !important;
  } 
}