/* styles for the home page */

.home .cols .left {display:block !important;}

#ifp.home > header > section {
  width:100%;
}

#ifp.home section.events {
  width:100%;
}

/* events, news, spotlight layout overrides */

section.events ul,
section.news ul,
section.member_spotlight ul {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap:15px;
}

section.events .listing_events_sm li,
section.news .listing_news_sm li,
section.member_spotlight .listing_spotlights li {
  width:100%;
  float:none;
  margin:0px;
}

/* membership section */

#membership-row-layout {
  display:grid;
  grid-template-columns:1fr 300px;
  grid-gap:20px;
}

.membership_intro {
  padding-right:10px;
}

.membership_newsletter {
  width:100%;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
}

.membership_newsletter_icon {
  text-decoration:none;
  padding-right:5px;
  font-size:30px !important;
}

#ifp.home section.membership .large {
  float:none;
}

#ifp.home section.membership .membership_options {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  float:none;
  height:auto;
  width:100%;
  max-width:500px;
  margin-top:0px;
  margin-bottom:15px;
}

#ifp.home section.membership .membership_options li {
  width:90%;
  display:inline;
}


#ifp.home section.membership .membership_options a.btn {
  padding-top:13px;
  padding-bottom:13px;
  font-size:14px;
}

#home-webbox {
  padding: 45px 0 20px 0;
}

/* alumni on screen */

#alumni-grid-wrapper {
  margin-top:30px;
  border-top: 1px solid var(--main-line-break-color);
}

#alumni-grid {
  display:grid;
  grid-gap:15px;
  grid-template-columns:repeat(auto-fit, minmax(100px, 1fr));
  width:100%;
  margin:0px auto !important;
  border-top:0px !important;
}

#alumni-grid.listing_poster a {
  width:100%;
}

#alumni-grid.listing_poster img {
  width:100%;
}


/* general mobile breakpoint  */

@media (max-width: 970px) {

  /* mobilize video */

  #ifp.home > header.has_video {
    padding-top:55%;
  }

  #ifp.home .homepage_video {
    width:95%;
    margin:0px auto;
  }

  #ifp.home section.membership .large {
    width:100%;
  }
  #ifp.home section.membership .medium {
    width:100%;
  }

  /* events */

  #ifp.home section.events {
    width:100%;
  }

  .listing_events_sm li {
    float:none;
    display:block;
    margin:0px auto;
    width:100%;
    max-width:500px;
    margin-bottom:30px;
    min-height:0;
  }

  .listing_events_sm li:first-child {
    margin-left:auto;
  }

  .listing_events_sm li .event-image img {
    max-height:none;
    width:100%;
  }


  /* news */

  .listing_news_sm li {
    float:none;
    display:block;
    margin:0px auto;
    width:100%;
    max-width:500px;
    margin-bottom:30px;
    min-height:0;
  }

  .listing_news_sm li:first-child {
    margin-left:auto;
  }

  .listing_news_sm li img {
    max-height:none;
    width:100%;
  }

  /* member spotlight */

  .listing_spotlights li {
    float:none;
    display:block;
    margin:0px auto;
    width:100%;
    max-width:500px;
    margin-bottom:30px;
    min-height:0;
  }

  .listing_spotlights li:first-child {
    margin-left:auto;
  }

  .listing_spotlights a {
    width:100%;
    display:block;
    padding-top:0px !important;
  }

  .listing_spotlights li img {
    max-height:none;
    width:100%;
  }

  .listing_spotlights a > img {
    position:relative;
  }

}


/* different mobile breakpoint for ads, tablets */
@media only screen and (max-width: 767px) {

  /* reconfigure membership row, including ad */

  #membership-row-layout {
    grid-template-columns:1fr;
  }

  #home-webbox {
    padding-top:0px;
  }

  #home-webbox {
    width:300px;
    margin:0px auto;
    margin-bottom:20px;
  }

  #ifp.home section.membership {
    padding-bottom:0px;
  }

  /* events, news, spotlight layout overrides */

  section.events ul,
  section.news ul,
  section.member_spotlight ul {
    grid-template-columns: 1fr;
  }

  section.events ul li,
  section.news ul li,
  section.member_spotlight ul li  {
    display:block;
    max-width:500px;
    margin:auto !important;
  }

  /* alumni on screen */

  #alumni-grid {
    margin:0px auto;
    padding-top:16px;
    max-width:500px;
    grid-template-columns:repeat(auto-fit, minmax(130px, 1fr));
  }

  .modal-content {
    margin-top: 20%;
  }
}


/* very small screens */

@media only screen and (max-width: 350px) {

    #alumni-grid {
    grid-template-columns:1fr;
    }

    #ifp.home section.membership .membership_options a.btn {
      font-size:13px;
    }

    #ifp.home section.membership .membership_options li {
      width:90%;
    }

}