/* your custom css */

/* homeWrapper */

.homeWrapper {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.homeContainer {
  text-align: left;
}

.homeContainer h1 br {
  display: none;
}

.splashRight {
  border-left: 3px solid #e6e6e6;
  min-width: 150px;
  height: 365px;
  margin-top: 125px;
  padding-left: 10px;
  text-transform: unset;
  text-align: left;
}

.splashUpdates {
  list-style: circle;
  margin-left: -15px;
  width: 300px;
}


/* CTA buttons on landing page */

.buttonRow { margin-top:20px; }

.roleButtonWrapper {
  border: 3px solid #E6E6E6;
  border-radius: 10px;
  text-align: left;
  margin: 20px;
  width: 400px;
}

.roleButtonWrapper:hover {
  background: #F6F5F3;
}

.roleButtonWrapper a:hover {
  background: none;
  color: #000;
}

.roleButtonWrapper h3 {
  margin: 0 0 5px 0;
}

.roleButtonWrapper .button {
  display: flex;
  border: none;
  text-transform: unset;
}

.roleButtonWrapper .icon {
  margin: 10px;
  text-align: center;
  min-width: 110px;
}

.roleButtonWrapper .text {
  margin: 10px 0 10px 0;
}

.roleButtonWrapper:not(.core) .list {
  margin-left: -10px;
}

.subtle {
  font-size: 0.9em;
  color: #a6a6a6;
}

.roleButtonWrapper.core .button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.roleButtonWrapper.core {
  display: flex;
  justify-content: center;
  width: 250px;
}

.roleButtonWrapper.core .icon {
  padding-left: 5px;
    margin:20px 0;
}

.roleButtonWrapper.core .text h3 {
  text-align: center;
}

.roleButtonWrapper.core .text p {
  text-align: center;
  width: 100%;
}

.roleButtonWrapper.core .text .list {
  text-align: left;
}

@media only screen and (min-width: 1135px) {
  .buttonRow {
    display: flex;
    justify-content: center;
  }
}

@media only screen and (max-width: 1135px) {
  .homeContainer h1 br {
    display: block;
  }

  .buttonRow {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .middle {
      order: 1;
  }

  .left {
      order: 2;
  }

  .right {
      order: 3;
  }

  .middle, .left, .right {
    width: 100%;
  }

  .homeContainer .roleButtonWrapper {
    margin: 20px auto;
  }

  @media (max-width: 500px) {
    .homeContainer .roleButtonWrapper {
      width: auto !important;
      height: auto !important;
        margin:10px;
    }
      
    .left, .middle, .right { 
        margin:0; 
        padding:0;
      }
      
      .buttonRow { display:inline; }
      
      h1 { margin-top:20px; }
  }

  .roleButtonWrapper.core a * {
     text-align: left;
  }

  .roleButtonWrapper.core {
    justify-content: left;
    width: 400px;
    height: 160px;
  }

  .roleButtonWrapper.core .icon {
    padding-left: 0;
  }

  .roleButtonWrapper.core .button {
    flex-direction: row;
  }

  .roleButtonWrapper.core .text h3 {
    text-align: left;
    padding-left: 10px;
  }

  .roleButtonWrapper.core .text p {
    text-align: left;
    padding-left: 10px;
  }

}