/* Site CSS */
/*Color Variables*/
 :root {
    /*primary colors*/
     --cherry: #BA0C2F;
     --silver: #A7A8AA;
     --turquoise: #007A86;
     --lobo-gray: #63666A;
    /*secondary colors*/
     --high-noon: #FFC600;
     --sandia-sunset: #ED8B00;
     --terra: #C05131;
     --mesa: #D6A461;
     --green-chile: #A8AA19;
     --deep-dusk: #8A387C;
     --white: #FFFFFF;
     --secondary-white: #F5F5F5;
     --black: #222222;
    /*primary colors @ 50% transparency*/
     --cherry50: #BA0C2F80;
     --silver50: #A7A8AA80;
     --turquoise50: #007A8680;
     --lobo-gray50: #63666A80;
    /*secondary colors @ 50% transparency*/
     --high-noon50: #FFC60080;
     --sandia-sunset50: #ED8B0080;
     --terr50a: #C0513180;
     --mesa50: #D6A46180;
     --green-chile50: #A8AA1980;
     --deep-dusk50: #8A387C80;
     --black50: #22222280;
}
.turquoise {
background-color: var(--turquoise)!important;
border-color: var(--turquoise)!important;
color: var(--white)!important;
}
.lobo-gray {
background-color: var(--lobo-gray)!important;
border-color: var(--lobo-gray)!important;
}
.black{
background-color: var(--black)!important;
border-color: var(--black)!important;
}
.silver {
background-color: var(--silver)!important;
border-color: var(--silver)!important;
color: var(--black)!important;
}

.banner{
    color: white;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.banner img{
    min-width: 100%;
    object-fit: cover;
    min-width: 100%;
    height: 300px;
    
}
.banner h2, .banner p{
text-shadow: 3px 3px 5px #000, -1px -1px 5px #000;}
#banner-text{
    position: absolute;
}
.center{
    text-align: center;
}
/*Cards Start*/
.cards{
    width: 100%;
    display: flex;
    gap: 35px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 5%;
}
.cardContainer{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
      min-width: 30%;
    max-width: 47%;
    gap: 20px;
    margin-bottom: 20px;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, .2);
}

.cardItem{
  background-color: white;
  position: relative;
  display: flex;
  flex-direction: row;
  height: auto;
  border-radius: 5px;
    gap:20px;
    isolation: isolate;
}

.cardImage{
  width: 30%; /* width of container */
    height: 100%; /* height of container */
    object-fit: cover;
    object-position: 20% 40%;
  border-radius: 5px 0 0 5px;
    filter: grayscale(100%);
}

.cardTitle, .cardText {
  padding: 0 10px;
}

.card-btn {
    margin: 0 10px;
    margin-bottom: 15px;
    text-wrap: wrap;
}


.cardItem::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;          /* matches .cardImage width */
  height: 100%;        /* matches .cardImage height: 100% */
  border-radius: 5px 0 0 5px; /* matches .cardImage border-radius */
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: multiply;  /* tints the image; remove for a flat wash */
}

.cards .cardContainer:nth-child(1) .cardItem::before {
  background: var(--cherry);
}

.cards .cardContainer:nth-child(2) .cardItem::before {
  background: var(--silver);
}

.cards .cardContainer:nth-child(3) .cardItem::before {
  background: var(--turquoise50); 
}

.cards .cardContainer:nth-child(4) .cardItem::before {
  background: var(--deep-dusk);
}

.cards .cardContainer:nth-child(5) .cardItem::before {
  background: var(--high-noon);
}

.cards .cardContainer:nth-child(6) .cardItem::before {
  background: var(--green-chile);
}

.cards .cardContainer:nth-child(6) .cardItem::before {
  background: var(--mesa);
}

.cards .cardContainer:nth-child(6) .cardItem::before {
  background: var(--terra);
}

.card-large{
    min-width: 100% !important;
}
/*Cards End*/
.callout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f7f7f7;
    padding: 40px;
    margin: 50px 0;
}

.callout .btn+.btn{
    margin-left: 20px;
}
#steering-callout{
    display: block!important;
}
/*News Cards Start*/
.news{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10%;
}

.news-card{
    display: flex;
    flex-direction: column;
    width: 50%;
}

.news-card img{
    width: 100%;
    height: auto;
}
/*News Cards End*/
/*Event Grid Start*/
.event-grid{
    display:flex;
    flex-direction:column;
}
.event-row{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 25px 0;
    align-items: center;

}
.event-row+.event-row{
    border-top: 1px solid #949494;
        padding-top: 4.5%;
}
.event-details{
    border: 1px solid #949494;
    border-radius: 10px;
    padding 20px;
    width: 75%;
    padding: 25px;
}
.event-tag{
    border-radius: 50px;
    padding: 5px 10px;
}
.event-tag-row{
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
}
/*Event Grid End*/

 @media (max-width: 992px){
    .cardContainer{
        max-width: 100%;
    }
}