body.schedule-body {
    height: 100%;
    min-height: 100vh;
    background-image: url('../assets/img/pre-img-2.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-origin: padding-box;
}


section#schedule {
    padding: 5rem 5rem 7rem 5rem;
}

section#schedule h1 {
    font-family: 'Poppins', sans-serif;
    font-weight: 900;
    width: 100%;
    font-size: 5rem;
    text-align: center;
    color: white;     
    filter:
        drop-shadow(4px 4px 0 rgba(92,92,92,.6))
        drop-shadow(-2px -2px 0 rgba(100,100,100,.3));
        
}


.table-responsive{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
}

.schedule{
    width:100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin-top: 4rem;
    color: var(--main-light);
    font-size: clamp(.95rem, 1.8vw, 1.05rem);
}

.schedule caption{
    text-align:left;
    font-weight:700;
    margin: 0;
    width: 100%;
    color: var(--main-light);
}

.schedule thead th{
    background: rgba(255,255,255,.06);
    color: var(--main-light);
    font-weight:700;
    text-transform: uppercase;
    letter-spacing:.02em;
    padding: 1rem .75rem;
    text-align:center;
}

.schedule th[scope="row"]{
    background: rgba(255,255,255,.04);
    font-weight:700;
    white-space: nowrap;
    width: 1%;
}

.schedule td, .schedule th{
    border: 1px solid rgba(255,255,255,.12);
    padding: 1rem .75rem;
    text-align:center;
    vertical-align: middle;
}

.schedule tbody tr:nth-child(odd) td{
    background: rgba(255,255,255,.02);
}


.schedule td strong{
    color: var(--main-light);
    font-weight:700;
}
.schedule td small{
    color: color-mix(in srgb, var(--main-light) 70%, transparent);
    font-size: .9em;
}

@media (max-width: 1268px) {
    section#schedule {
        padding: 5rem 2rem 4rem 2rem;
    }

    section#schedule h1 {
        font-size: 4rem;
    }
}

@media (max-width: 768px){
    body {
        background-repeat: repeat;
        background-size: contain;
        height: max-content;
    }

    .schedule caption {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .schedule td br { 
        display:none; 
    }

    .schedule thead { 
        position:absolute; 
        width:1px; 
        height:1px; 
        overflow:hidden; 
        clip:rect(0 0 0 0); 
        white-space:nowrap;
    }

    .schedule, .schedule tbody, .schedule tr, .schedule td, .schedule th {
        display:block; 
        width:100%;
    }

    .schedule tr {
        margin:0 0 1rem 0; 
        border:1px solid rgba(255,255,255,.12); 
        border-radius: 12px; 
        overflow:hidden; 
        background:rgba(255,255,255,.03);
    }
    
     .schedule th[scope="row"] {
        width: 100%;
        background: color-mix(in srgb, var(--text-red) 18%, transparent);
        color: var(--main-light);
        padding:.9rem 1rem; 
        text-align:left; 
        border:none;
    }

     .schedule td {
        border:none; 
        border-top:2px solid rgba(255, 255, 255, 0.1);
        padding:1rem 1rem 1.1rem; 
        text-align:left; 
        display:block;
    }

     .schedule td::before {
        content: attr(data-label);
        display:block;
        font-weight:800;
        font-size:1.05rem;
        color: var(--main-light);
        margin-bottom:.35rem;
    }

     .schedule td strong {
        display:block;
        font-size:1rem;
        font-weight:700;
        color: var(--text-red);
        margin-bottom:.1rem;
        margin-top: 20px;
    }

     .schedule td small {
        display:block;
        font-size:.95rem;
        color: color-mix(in srgb, var(--main-light) 70%, transparent);
    }
}