_events.scss

.content-hack-night {
  margin: 40px 0px 83px 0px;
  padding: 25px;
  @media #{$bp-below-tablet} {
    margin: 0;
    padding: 0;
  }
}

.header-container--events {
  padding: .2rem 4rem 5.5rem 4rem;
}

.events--head-content {
  margin: 2% 0 0% 4%;
  text-align: initial;
}

.header-text-margin--events{
  max-width: 520px;
  margin: 0;
}

.header-desc {
  text-align: initial;
  font-weight: 530;
  font-size: 1.125rem;
  margin: 2% 0 20px 5%;

  @media #{$bp-below-tablet} {
    font-size: 16px;
    line-height: 19px;
    margin-bottom: 20px;
  }
}

.show-desc {
  margin-left: 43%;
  @media #{$bp-below-tablet} {
    margin: 74px 0px;
    font-size: 13px;
    line-height: 15px;
  }
}
.show-video {
  display: flex;
  flex-direction: row-reverse;
  margin-left: 40px;
  margin-bottom: -7%;
  justify-content: center;
  @media #{$bp-below-tablet} {
    flex-direction: row-reverse;
    flex-grow: 6;
    margin: 0;
  }
}

.flex-page-card {
  display: flex;
  justify-content: center;
  margin-left: 45px;
  margin-right: 45px;

  @media #{$bp-below-tablet} {
    flex-direction: column;
    width: 90%;
  }

  @media #{$bp-below-mobile}{
    width: 95%;
  }

  & > .column-card-lg--events {
    background: $color-white;
    border: 0 solid rgba(51, 51, 51, 0.06);
    border-radius: 20px;
    box-shadow: 0 0 8px 0 rgba(51, 51, 51, 0.2);
    overflow: hidden;
    max-width: 637px;
    width: 100%;
    padding: 32px;
    margin-top: 8px;
    margin-bottom: 8px;
    font-family: "Roboto" sans-serif;

    &:first-child{
      margin-right: 16px;
    }

    &:last-child{
      margin-left: 16px;
    }

    // NEW MOBILE FRIENDLY RULES
    @media #{$bp-below-tablet} {
      padding: 5px 15px;
      max-width: 100%;

      &:first-child, &:last-child{
        margin-left: auto;
        margin-right: auto;
      }
    }
  }

}

#head-content::before {
  content: "\226A";
  float: left;
  transition: transform 0.25s ease-in;
  color: $color-black;
  font-weight: normal;
  font-size: 18px;
  margin: 0 6px 65px 6px;

  @media #{$bp-below-desktop} {
    content: "\226A";
    transform: rotate(90deg);
    transition: transform 0.25s ease-in;
    font-size: 22px;
    font-weight: normal;
  }
}
.step-img-1 {
  height: 134px;
  text-align: center;
  max-width: 150px;
}
.step-img-2 {
  height: 134px;
  text-align: center;
  max-width: 150px;
}

.fullwidth-background-container {
  background-color: $color-gold;
  margin: 0 -2em;
}
.add-padding-container {
  padding: 0 2.5em;
}

.getting-started-mobile-page {
  @media #{$bp-below-mobile} {
    padding: 0 2em;
    display: inline;
    margin: 20px;
    border: 0 solid rgba(51, 51, 51, 0.06);
    border-radius: 16px;
  }
}
.video-size {
  left: 0;
  top: 0;
  width: 387px;
  height: 250px;

  @media #{$bp-below-mobile} {
    left: 0;
    top: 0;
    width: 325px;
    height: 215px;
  }
}

.meetup-steps {
  display: flex;
  align-items: center;
  margin: 24px 0;

  @media #{$bp-below-mobile} {
    flex-direction: column;
    text-align: center;
  }
}
.meetup-steps-2 {
  display: flex;
  align-items: center;
  margin: 24px 0;
  @media #{$bp-below-mobile} {
    flex-direction: column;
    text-align: center;
  }
}

#text-content {
  padding: 28px;
  font-size: 16px;
  line-height: 19px;

  @media #{$bp-below-mobile} {
    padding: 0;
    text-align: initial;
    margin: 37px;
  }
}
#text-content-1 {
  padding: 28px;
  font-size: 16px;
  line-height: 19px;

  @media #{$bp-below-mobile} {
    padding: 8px;
    text-align: initial;
    margin-bottom: 25px;
  }
}

.notification-banner {
  background-color: $color-gold;
  width: 100%;
  display: flex;
  justify-content: center;
  align-content: center;

  @media #{$bp-below-tablet} {
    flex-direction: column;
  }
}

.notification-banner p {
  text-align: center;
  margin: auto 29%;
  padding: 20px;
  font-size: 1rem;
  font-weight: 700;

  @media #{$bp-below-mobile} {
    margin: 0;
    padding: 1em 2em;
    font-size: 16px;
    line-height: 19px;
  }
}

.meetings-message {
  text-align: center;
}

.event-card {
  width: 414px;
  height: 414px;
  margin-right:16px;
  margin-left:16px;
  margin-bottom:32px;
  text-align: center;

  @media #{$bp-below-tablet} {
    margin: 0 auto 24px auto;
    width: 100%;
	height: min-content;
	display: flex;
	justify-content: center;
  }

}

.location-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: 414px;
  @media #{$bp-below-tablet} {
    /* Positions image so location text is visible */
    object-position: center 80%;
    border-radius: 5.8%;
  }
}



.getting-started-locations-only {
  max-width: 1338px;
  width: 100%;
  height: fit-content;
}

.events-card-container {
  display: flex;
  justify-content:center;
  flex-wrap:wrap;
  margin-top: 48px;
  align-content: center;

  @media #{$bp-below-tablet} {
    flex-direction: column;
    height: min-content;
	text-align: center;
	margin-right: 16px;
	margin-left: 16px;
	margin-bottom: 16px;
	margin-top: 4px;
  }
}
.location-content {
  margin: 24px;
  overflow: scroll;
  overflow-x: hidden;
  @media #{$bp-below-mobile} {
    margin: 40px 0;
    padding: 0;
  }
}

.mini-projects {
  display: flex;
  flex-wrap: wrap;

  @media #{$bp-below-mobile} {
    margin: 11px;
    font-size: 12px;
    line-height: 14px;
  }
}
#mini-img {
  width: 90px;
  height: 66px;
  border-radius: 5px 5px 0 0;
}
.img-dis {
  width: 92px;
  border: 1px solid gray;
  margin: 10px;
  height: 120px;
  border-radius: 5px;
}
.proj-desc {
  text-align: center;
  font-size: 15px;
}

.days-display {
  font-size: 0.9rem;
  margin: 22px 32px;

  @media #{$bp-below-mobile} {
    font-size: 0.7rem;
    margin: 0;
  }
}

.title-meetup {
  font-size: 1.25rem;
  text-align: left;
  font-weight: 700;
  margin-bottom: 16px;
  color: $color-black;
}

.class-btn {
  text-align: center;
  margin-top: 8px;

  @media #{$bp-below-mobile} {
    margin: 0;
  }
}

.btn--events {
  margin-bottom: 32px;
}

.event-title-1 {
  display: none;
  text-align: center;
  font-size: 30px;
  margin-top: 20px;
  line-height: 35px;
  font-weight: normal;

  @media #{$bp-below-tablet} {
    font-size: 17px;
    display: flex;
    justify-content: space-around;
    margin-bottom: 16px;

  }
}

.event-title-1::after {
  content: "\221F";

  @media #{$bp-below-tablet} {
    content: "\221F";
    float: right;
    transform: rotate(-45deg);
    transition: transform 0.25s ease-in;
    color: $color-red;
    font-weight: bolder;
    font-size: 24px;
  }
}
.active::after {
  @media #{$bp-below-tablet} {
    content: "\221F";
    transform: rotate(135deg);
    transition: transform 0.25s ease-in;
  }
}
.event-title {
  text-align: center;
  font-size: 1.5rem;
  margin-top: 20px;
  font-weight: 700;
  margin-bottom: 15px;

}

@media #{$bp-below-tablet} {
  .event-title {
    font-size: 17px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .event-title::after {
    content: "\221F";
    float: right;
    transform: rotate(-45deg);
    transition: transform 0.25s ease-in;
    color: $color-red;
    font-weight: bolder;
    font-size: 24px;
  }

  .event-title span span {
    display: block;
  }
  .active::after {
    content: "\221F";
    transform: rotate(135deg);
    transition: transform 0.25s ease-in;
  }
}

.vector-img {
  display: none;

  @media #{$bp-below-tablet} {
    display: initial;
  }
}

.mobile-dropdown {
  @media #{$bp-below-tablet} {
    display: none;
  }
}

.mobile-locations-dropdown {
  @media #{$bp-below-tablet} {
    display: none;
    background: $color-gold;
    width: 100vw;
  }
}

.days-display-1 {
  margin: 22px 32px;

  @media #{$bp-below-tablet} {
    margin: 0;
  }
}

.schedule-list-1 {
  list-style: none;
  font-size: 16px;
  line-height: 19px;

  grid-template-columns: .95fr 1.15fr;
  display: grid;
  padding-left: 0;

  @media #{$bp-below-tablet} {
    font-size: 13px;
    line-height: 15px;
  }
}

.day-header-1 {
  text-transform: uppercase;
  margin-block-end: 0.25em;
  font-size: 1rem;
  font-weight: 700;
  margin: 30px 0 10px 0;
  color: $color-black;
  padding:0;
  @media #{$bp-below-tablet} {
    font-size: 15px;
    line-height: 18px;
  }
}

.description {
  margin: 0;

  @media #{$bp-below-mobile} {
    text-align: initial;
    margin: 57px;
    font-size: 16px;
  }
}

/* These styles are for the mobile view of the events page */

@media #{$bp-below-desktop} {
  .header-container--events {
    padding: 2rem 2rem 2rem 2rem;
  }

  //This hides the fullscreen positioned video for mobile
  .mobile--hide-video {
    display:none;
  }

  .hacknights--head-content {
    margin: 20px 0 0 0;
  }
}

//This hides the mobile positioned video on displays larger than mobile
@media #{$bp-desktop-up} {
  .fullscreen--hide-video {
    display:none;
  }
}

.fullscreen-video {
  margin-right: 5rem;
}

.events-video-fullscreen-container {
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
}

/* The below styles were moved from _hack-nights.scss, which has been deleted along with it's page namesake.
    They have been saved because they are still being used in other places on the site. */
    .section-hack-nights {
      background: $color-darkblue;
      color: $color-white;
    }


/* This specific selector is created to maintain a total top-margin + top-padding of 44px for .events-page-header (below) without altering
or overriding .content-section. See Issue #1609. If this comment is no longer relevant, please remove. */
.content-section--events + .events-page-header {
  @media #{$bp-below-tablet} {
    padding-top: 12px;
  }
}

.events-page, .content-section--events {
  background: $color-darkblue;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: "Roboto"sans-serif;
  font-style: normal;
  font-weight: normal;
}

.userTimeZone {
  text-align: center;
  font-weight: 700;
}

.events-page-header {
  color: $color-white;
  margin-top: 48px;
  font-size: 36px;
  @media #{$bp-below-desktop} {
    font-size: 2rem;
  }
  @media #{$bp-below-tablet} {
    font-size: 1.75rem;
    margin-top: 32px;
    margin-bottom: 44px;
    }
}