/* Back to School */
.full-container {
    padding: 0 1rem;
}
.bts-template {
    --first-day: #008846;
    --kindergarten: #004987;
    --lunch: #AA258D;
    --student-id: #004987;
    --lockers: #996633;
    --merchandise: #0099A8;
    --registration: #00ADDA;
    --transportation: #F7941D;
    --communication: #64308F;
}

.btn-external:hover i,
.btn-external:focus i {
    box-shadow: inset 0 0 0 5em rgba(255, 255, 255, 0.3) !important;
}

.sm-icon {
    background: var(--communication);
    border-radius: 50%;
    width: 3.25rem;
    height: 3.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sm-icon img {
    object-fit: contain;
    width: 2rem;
    height: 2rem;
    margin-left: .4rem;
}

.bts-template .section-first-day {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1rem;
    row-gap: 1rem;
    margin-bottom: 1rem;
}

.first-day-title {
    color: var(--first-day);
}

.first-day-card-col,
.first-day-text-col {
    width: 100%;
}

.section-first-day .info-card-container {
    padding: 1.5rem 1rem;
    margin: 0;
    border-radius: 3px;
    border: 2px solid #d0d0d0;
    border-bottom: none;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.section-first-day .info-card-container::after {
    content: "";
    width: calc(100% + 4px);
    height: 10px;
    background-color: var(--first-day);
    position: absolute;
    bottom: 0;
    left: -2px;
    right: 0;
    border-radius: 0 0 3px 3px;
}

.first-day-card {
    text-align: center;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 0;
    border: 2px solid var(--first-day);
    border-radius: 3px;
}

.first-day-card h3 {
    color: white;
    font-weight: var(--font-medium);
}

.first-day-card .bg-label {
    border-radius: 100px;
    width: fit-content;
    display: flex;
    align-items: center;
    margin: 0 auto;
}

.first-day-card .bg-label.bg-circle {
    aspect-ratio: 1/1;
}

.first-day-card .bg-circle i {
    font-size: 1.5rem;
    width: 3.25rem;
    height: 3.25rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.first-day-card .bg-label h5 {
    margin: 0;
    padding: 0.5rem 1.5rem;
}

.bts-template .info-card-section {
    margin-bottom: 1rem;
}

.info-card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.info-card-container .bts-col {
    position: relative;
    border-radius: 3px;
    border: 2px solid #d0d0d0;
    border-bottom-width: 0;
    /* border-bottom: 10px solid var(--dark-grey); */
    width: 100%;
    background: white;
}

.info-card-container .bts-col::after {
    content: "";
    display: block;
    width: calc(100% + 4px);
    height: 10px;
    background: var(--dark-grey);
    position: absolute;
    bottom: 0;
    left: -2px;
    right: 0;
    border-radius: 0 0 3px 3px;
}

.info-card-container .bts-col.show {
    display: block;
}

.info-card-container .bts-col.hide {
    display: none;
}

.info-card-container .content-card {
    padding: 1.5rem 1rem;
    background-color: white;
    /* border: 2px solid #D0D0D0; */
    border-bottom: none;
    border-radius: 3px 3px 0 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.info-card-container .content-card.flex-row {
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
}

.info-card-container .content-card.flex-row .icon-col {
    width: 25%;
}

.info-card-container .content-card i {
    color: white;
    border-radius: 50%;
    font-size: 1.5rem;
    width: 3.25rem;
    height: 3.25rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.center-aligned .content-card {
    text-align: center;
}
.center-aligned .content-card i {
    margin: auto;
}

.center-aligned .bts-col .btn-arrow {
    margin: 0 auto;
}

.info-card-container .bts-col[data-value="Kindergarten"] .btn,
.info-card-container .bts-col[data-value="Kindergarten"] i,
.info-card-container .bts-col[data-value="Kindergarten"]::after {
    background-color: var(--kindergarten);
}

.info-card-container .bts-col[data-value="Lunch Supervision"] .btn,
.info-card-container .bts-col[data-value="Lunch Supervision"] i,
.info-card-container .bts-col[data-value="Lunch Supervision"]::after {
    background-color: var(--lunch);
}

.info-card-container .bts-col[data-value="Student ID"] .btn,
.info-card-container .bts-col[data-value="Student ID"] i,
.info-card-container .bts-col[data-value="Student ID"]::after {
    background-color: var(--student-id);
}

.info-card-container .bts-col[data-value="Lockers"] .btn,
.info-card-container .bts-col[data-value="Lockers"] i,
.info-card-container .bts-col[data-value="Lockers"]::after {
    background-color: var(--lockers);
}

.info-card-container .bts-col[data-value="Merchandise"] .btn,
.info-card-container .bts-col[data-value="Merchandise"] i,
.info-card-container .bts-col[data-value="Merchandise"]::after {
    background-color: var(--merchandise);
}

.info-card-container .bts-col[data-value="Kindergarten"] .btn::after {
    color: var(--kindergarten);
}

.info-card-container .bts-col[data-value="Lunch Supervision"] .btn::after {
    color: var(--lunch);
}

.info-card-container .bts-col[data-value="Student ID"] .btn::after {
    color: var(--student-id);
}

.info-card-container .bts-col[data-value="Lockers"] .btn::after {
    color: var(--lockers);
}

.info-card-container .bts-col[data-value="Merchandise"] .btn::after {
    color: var(--merchandise);
}

.info-card-container .bts-col[data-value="Registration"] .btn,
.info-card-container .bts-col[data-value="Registration"] i,
.info-card-container .bts-col[data-value="Registration"]::after {
    background-color: var(--registration);
}

.info-card-container .bts-col[data-value="Transportation"] .btn,
.info-card-container .bts-col[data-value="Transportation"] i,
.info-card-container .bts-col[data-value="Transportation"]::after {
    background-color: var(--transportation);
}

.info-card-container .bts-col[data-value="Communication"] .btn,
.info-card-container .bts-col[data-value="Communication"] i,
.info-card-container .bts-col[data-value="Communication"]::after {
    background-color: var(--communication);
}

.info-card-container .bts-col[data-value="Registration"] .btn-arrow::after,
.info-card-container .bts-col[data-value="Registration"] .btn-arrow:hover,
.info-card-container .bts-col[data-value="Registration"] .btn-arrow:focus {
    color: var(--registration);
}

.info-card-container .bts-col[data-value="Transportation"] .btn-arrow::after,
.info-card-container .bts-col[data-value="Transportation"] .btn-arrow:hover,
.info-card-container .bts-col[data-value="Transportation"] .btn-arrow:focus {
   color: var(--transportation);
}

.info-card-container .bts-col[data-value="Communication"] .btn-arrow::after,
.info-card-container .bts-col[data-value="Communication"] .btn-arrow:hover,
.info-card-container .bts-col[data-value="Communication"] .btn-arrow:focus{
    color: var(--communication);
}

.info-card-container .bts-col .btn:hover,
.info-card-container .bts-col .btn:focus {
    color: unset;
}

.info-card-container .bts-col .btn-arrow {
    font-weight: var(--font-bold);
    color: var(--dark-font-color);
    position: relative;
    display: block;
    width: fit-content;
    padding-right: 1rem;
}

.info-card-container .bts-col .btn-arrow::after {
    content: "⏵";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.info-card-container .bts-col .btn-arrow:hover,
.info-card-container .bts-col .btn-arrow:focus {
    text-decoration: none;
    filter: none;
}

.info-card-container .bts-col h3 {
    font-weight: var(--font-medium);
    font-size: 1.3rem;
}

.bts-schedule-calendar h2 {
    font-weight: var(--font-medium);
}


.bts-schedule-img {
    width: 100%;
    aspect-ratio: 16/9;
}

.bts-schedule-text {
    padding-top: 2rem;
    padding-bottom: 2rem;
    color: white;
    background-color: #00ADDA;
}

.bts-calendar {
    padding: 2rem 1rem;
    background-color: #EAEAEA;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bts-calendar p a {
    color: #438AA8
}

.bts-calendar .event-item-wrapper {
    padding: 0 1rem;
}

.bts-calendar .event-item {
    height: 5rem;
    box-shadow: 0 3px 5px #00000011;
    border-radius: 3px;
}

.bts-calendar .event-item:hover,
.bts-calendar .event-item:focus {
    text-decoration: none;
}

.bts-calendar .event-time {
    font-size: .8rem;
    font-weight: var(--font-regular);
}

.bts-calendar .btn {
    margin-left: 0;
}

.icon-title-row {
    text-align: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.center-aligned.icon-title-row {
    justify-content: center;
}

.icon-title-row i {
    font-size: 1.5rem;
}

.icon-title-row h2 {
    font-weight: var(--font-medium);
}

.section-bg[data-value="Registration"] .icon-title-row i {
    color: var(--registration);
}

.section-bg[data-value="Transportation"] .icon-title-row i {
    color: var(--transportation);
}

.section-bg[data-value="Communication"] .icon-title-row i {
    color: var(--communication);
}

.section-bg {
    padding-top: 3rem;
    padding-bottom: 3.5rem;
}

.section-bg[data-value="Communication"] .info-card-container.image-row .bts-col {
    width: 100%;
}

.section-bg[data-value="Communication"] .info-card-container.image-row .bts-col .content-card {
    padding: 0;
    border-left: none;
}

.section-bg[data-value="Communication"] .social-media-row img {
    width: 100%;
    aspect-ratio: 3/2;
    border-radius: 3px 3px 0 0;
}

.section-bg[data-value="Communication"] .social-media-text {
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.section-bg[data-value="Communication"] .social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.communication-text {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.btn.btn-external {
    display: flex;
    margin: 0;
}

.btn.btn-external i {
    font-size: 1rem;
    width: auto;
    height: auto;
}

.school-supplies {
    margin-top: 2rem;
}

.school-supplies .icon-title-row i {
    color: #008b46;
}

.school-supplies ul li::before, .square-list li::before {
    background: #008b46;
    width: .5rem;
    height: .5rem;
}

.school-supplies-img {
    display: none;
}

.section-clubs {
    background-color: #EAEAEA;
    padding-top: 2rem;
    padding-bottom: 2.5rem;
}

.section-clubs .row {
    row-gap: 1rem;
}

.img-card {
    background: white;
    border: 2px solid #D0D0D0;
    box-shadow: 0 3px 10px #00000029;
}

.img-card.display {
    display: block;
}

.img-card.hide {
    display: none;
}

.img-card-row {
    display: flex;
    flex-wrap: wrap;
    row-gap: 2rem;
    column-gap: 1.5rem;
    padding: 1.5rem 1rem;
    border-radius: 3px;
    /* background: white;
    border: 2px solid #D0D0D0;
    box-shadow: 0 3px 10px #00000029; */
}

.img-card-text,
.img-card-image {
    width: 100%;
}

.img-card-text h3 {
    font-weight: var(--font-medium);
    margin-top: 0;
}

.img-card-image {
    width: 100%;
    /* height: 100%; */
    border-radius: 3px;
    aspect-ratio: 1/1;
}

.img-card-row .btn {
    background-color: #0AADDB;
}

.img-card-row .btn:hover,
.img-card-row .btn:focus {
    color: unset;
}

.additional-info .icon-title-row i {
    color: #004987;
}

.additional-info ul li::before, .square-list li::before {
    background: #004987;
    width: .5rem;
    height: .5rem;
    top: 50%;
    transform: translateY(-50%);
}

@media (max-width: 62em) {
    .info-card-container.second-row .bts-col .btn {
        color: var(--dark-font-color);
        background-color: transparent!important;
        padding: 0;
        display: block;
        position: relative;
        padding-right: 1rem;
    }

    .info-card-container .bts-col .btn::after {
        content: "⏵";
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    .img-card {
        margin-bottom: 1rem;
    }

    .img-card:last-of-type {
        margin-bottom: 0;
    }

    #section-transportation .bts-col {
        width: 100%!important;
    }
}

@media (min-width:48em){
    .section-first-day .info-card-container {
        padding: 2rem;
    }
    .bts-calendar {
        padding: 2rem 5%;
    }

    .info-card-container .content-card {
        padding: 2rem;
    }

    .section-bg[data-value="Communication"] .social-media-text {
        padding: 1.5rem 2rem;
    }

    .img-card-row {
        padding: 2rem;
    }
}

@media (min-width:62em){
    .bts-template section {
        margin-bottom: 3rem;
    }

    .first-day-card-col {
        width: calc((100% - 2rem) / 3);
    }

    .first-day-text-col {
        width: calc((100% - 2rem) / 3 * 2 + 1rem);
    }

    .info-card-container .content-card.flex-row {
        gap: 3rem;
    }
    .info-card-container .bts-col {
        width: calc((100% - 1rem) / 2);
    }

    .bts-schedule-calendar {
        display: grid;
        grid-template-columns: 38% 62%;
        grid-template-rows: repeat(2, 1fr);
        grid-column-gap: 0px;
        grid-row-gap: 0px;
    }

    .bts-schedule-img { 
        grid-area: 1 / 1 / 2 / 2; 
        aspect-ratio: unset;
        height: 100%;
    }
    .bts-schedule-text { 
        grid-area: 2 / 1 / 3 / 2; 
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .bts-calendar { grid-area: 1 / 2 / 3 / 3; }

    /* .bts-schedule-img img {
        aspect-ratio: unset;
        height: auto;
    } */

    .bts-schedule-text h2 {
        margin-bottom: 1rem;
    }

    .bts-schedule-text p {
        margin-bottom: 2rem;
    }

    .bts-calendar {
        padding: 3% 8%;
    }

    .bts-calendar p,
    .bts-calendar .event-row {
        margin-bottom: 2rem;
    }

    .icon-title-row i {
        font-size: 2rem;
    }

    .section-bg[data-value="Communication"] .social-media-row {
        display: flex;
    }

    .section-bg[data-value="Communication"] .social-media-row img {
        width: 30%;
        border-radius: 3px 0 0 0;
    }

    .section-bg[data-value="Communication"] .social-media-text {
        padding: 2rem;
    }

    .bts-template .school-supplies {
        padding-top: 3rem;
        margin-top: 3rem;
        margin-bottom: 6rem;
    }

    .school-supplies-text {
        margin-top: -2rem;
    }

    .school-supplies-img {
        display: block;
        position: relative;
        height: 100%;
    }

    .school-supplies-img img {
        width: 85%;
        margin: auto;
    }

    .green-box {
        background-color: #008846;
        width: 70%;
        height: 100%;
        position: absolute;
        top: -2.5rem;
        left: 1rem;
        z-index: -1;
    }

    .blue-box {
        background-color: #00adda;
        position: absolute;
        width: 80%;
        height: 100%;
        top: 15%;
        right: 1rem;
        z-index: -1;
    }

    .section-clubs {
        padding-top: 3rem;
        padding-bottom: 3.5rem;
    }

    .img-card-text h3 {
        margin-top: 1rem;
    }

    .img-card-text,
    .img-card-image {
        width: calc((100% - 1.5rem) / 2);
    }

    .img-card-text {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
    }

    .img-card-grid {
        /* display: grid;
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 1fr;
        grid-gap: 1rem; */
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }

    .img-card {
        width: calc(50% - .5rem);
        min-height: 27rem;
    }

    .img-card-row {
        height: 100%;
        min-height: 27rem;
    }

}

@media (min-width:75em){
    .info-card-container .bts-col {
        /* width: calc((100% - 2rem) / 3); */
        flex-grow: 1;
    }

    .section-bg[data-value="Communication"] .bts-col {
        width: calc((100% - 1rem) / 2);
    }

    .info-card-container.one-row {
        flex-wrap: nowrap;
    }

    .info-card-container.second-row {
        flex-wrap: nowrap;
    }
}

@media (min-width: 99em) {
    .bts-schedule-text p,
    .bts-calendar p,
    .bts-calendar .event-row {
        margin-bottom: 2.5rem;
    }
}