/* ///////////////////////////////// */
/*               Events              */
/* ///////////////////////////////// */

@media only screen and (min-width: 0px) {
    @keyframes spinner {
        0% {
          transform: translate3d(-50%, -50%, 0) rotate(0deg);
        }
        100% {
          transform: translate3d(-50%, -50%, 0) rotate(360deg);
        }
      }
    .g-top {
        z-index: 0;
        max-height: 288px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 1rem;
        display: block;
        width: 18rem;
    }
    .spin::before {
        top: 20%;
        animation: 1.5s linear infinite spinner;
        animation-play-state: inherit;
        border: solid 5px #cfd0d1;
        border-bottom-color: #c9301c;
        border-radius: 50%;
        content: "";
        height: 40px;
        position: absolute;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
        width: 40px;
        will-change: transform;
      }
      .no-spinner {
        display: none;
      }
      .group-info-container {
        z-index: 0;
      }
      .group-container .backgroundImg {
        position: absolute;
        left: 0;
        transform: scale(.975);
        transition: all 0.4s ease;
        opacity: 0;
        z-index: -1;
        border-radius: .33rem;
    }
      div {
        scroll-margin-top: 4rem;
      }
      main {
        margin-top: 4rem;
        padding: 2rem 1rem 3.5rem 1rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 70vh;
        height: auto;
        width: 100%;
        font-size: 1rem;
    }
    .main > div {
        height: 100%;
        width: 100%;
        max-width: 1100px;
        background-color: #fff;
        border-radius: 2rem;
        margin: 0rem;
    }
    
    .main div .bottom {
        margin-bottom: 2.75rem;
    }

    .main > div > hr {
        margin-bottom: 2.5rem;
    }

    .sm-header {
        padding-bottom: 0rem !important;
    }
    
    h1 {
        margin: 0rem 0rem 2.5rem 0rem;
        font-size: 3.5rem;
    }

    #small-groups-container {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-start;
        width: 100%;
        overflow: visible;
    }
    .no-small-groups {
        width: 100%;
        margin: 0rem 1rem 2rem 1rem;
        line-height: 1.5;
        text-align: start;
        font-weight: 500;
        font-size: 1.25rem;
    }
    .group-container {
        width: 18rem;
        height: 100%;
        position: relative;
        margin: auto;
        display: inline-block;
        margin-bottom: 2rem;
    }
    .gic-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: .5rem 0rem .25rem 0rem;
        font-weight: 400;
        overflow: visible;
        z-index: 0;
    }

    .group-name {
        font-size: 1.25rem;
        font-weight: 500;
    }

    .enrollment-status-open {
        font-size: 12px;
    line-height: 1.5rem;
    padding: 0 6px;
    white-space: nowrap;
    background-color: rgb(199, 255, 207);
    color: rgb(58, 117, 68);
    border-radius: .33rem;
    letter-spacing: 1px;
    font-weight: 700;
    position: absolute;
    top: 0;
    right: 0;
    margin: .75rem .75rem 0rem 0rem;
    }

    .enrollment-status-closed {
    font-size: 12px;
    line-height: 1.5rem;
    padding: 0 6px;
    white-space: nowrap;
    background-color: rgb(241, 212, 78);
    color: rgb(141, 101, 40);
    border-radius: .33rem;
    letter-spacing: 1px;
    font-weight: 700;
    position: absolute;
    top: 0;
    right: 0;
    margin: .75rem .75rem 0rem 0rem;
    }

    .group-container img {
        width: 100%;
        height: auto;
        min-height: 10rem;
        border-radius: .33rem;
        background: rgb(213, 213, 213);
        background: -moz-linear-gradient(49deg, rgba(213, 213, 213, 1) 50%, rgba(121, 121, 121, 1) 100%);
        background: -webkit-linear-gradient(49deg, rgba(213, 213, 213, 1) 50%, rgba(121, 121, 121, 1) 100%);
        background: linear-gradient(49deg, rgba(213, 213, 213, 1) 50%, rgba(121, 121, 121, 1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d5d5d5", endColorstr="#797979", GradientType=1);
    }

    .group-schedule {
        background: rgb(236, 236, 236);
        border-radius: 4px;
        display: inline-block;
        color: rgb(92, 92, 92);
        font-size: 1rem;
        line-height: 1.5rem;
        padding: 0px 0px 6px 0px;
        white-space: normal;
    }
    .desc-box {
        display: none;
        margin-top: .6rem;
        background-color: rgb(236, 236, 236);
        padding: 1rem;
        border-radius: .33rem .33rem 0rem 0rem;
        opacity: 0;
        transition: .5s all;
    }
    .description {
        line-height: 1.5;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
        overflow: hidden;
        transition: .5s all;
    }
    .join-button {
        display: none;
        opacity: 0;
        transition: .5s all;
        background: linear-gradient(180deg,#bb0e4b 0%,#8a226a 100%);
        font-weight: bold;
        color: white;
        text-align: center;
        padding: .75rem;
        border-radius: 0rem 0rem .33rem .33rem;
    }
}

@media only screen and (min-width: 768px) {
    .spin::before {
        top: 35%;
    }
    .main > div > hr {
        margin-bottom: 1rem;
    }
    .group-info-container {
        width: 18rem;
    }
    .group-container .backgroundImg {
        width: 18rem;
        top: 0%;
        left: 50%;
        transform: translate(-50%, 20%);
    }
    .group-container {
        margin: 0rem;
        gap: 5%;
        z-index: 0;
        width: 22rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        padding-top: 2rem;
    }
    .main > div {
        padding: 0rem 3rem 3rem 3rem;
    }
    #small-groups-container {
        padding: 0rem 1rem 3rem 1rem;
    }
    .no-small-groups {
        margin: 1rem 1rem 2rem 2rem;
    }
}

@media only screen and (min-width: 1024px) {
    .group-container:hover .backgroundImg {
        opacity: .7;
        filter: blur(15px);
    }
    .main > div {
        padding: 0rem 3rem 3rem 3rem;
    }
}

.main {
    background-color: #fff;
}