/* ================================================
   TopPage_Tablet_Small
================================================ */

@media (min-width:601px) and (max-width:820px){

/* ================================================
Hero
================================================ */

.hero{

    margin-top:140px;

    height:55vh;

}

.hero-copy{

    font-size:18px;

    margin:16px 0;

}

/* ================================================
Info Bar
================================================ */

.info-bar{

    padding:20px;

}

.info-inner{

    display:flex;

    flex-direction:column;

    gap:20px;

    text-align:center;

}

.info-left{

    justify-content:center;

    gap:40px;

}

.info-title{

    font-size:12px;

}

.info-status{

    font-size:22px;

}

.info-btn{

    width:260px;

    margin:auto;

    padding:14px;

    font-size:16px;

}

/* ================================================
Hero Slider
================================================ */

.slider-btn{

    width:42px;

    height:42px;

    font-size:22px;

}

.prev{

    left:15px;

}

.next{

    right:15px;

}

.slider-dots{

    left:50%;

    right:auto;

    transform:translateX(-50%);

    bottom:20px;

}

/* ================================================
Info Cards
================================================ */

.info-cards{

    padding:50px 20px;

}

.cards-container{

    grid-template-columns:1fr;

    gap:25px;

}

.info-card{

    display:flex;

    flex-direction:column;

}

.info-card img{

    width:100%;

    height:240px;

}

.card-text{

    padding:20px;

}

/* ================================================
Events
================================================ */

.events{

    padding:60px 20px;

}

.event-title{

    font-size:24px;

}

.event-track{

    gap:20px;

}

.event-card{

    min-width:280px;

}

/* ================================================
Next Event
================================================ */

.next-event{

    padding:60px 20px;

}

.next-event-container{

    flex-direction:column;

}

.next-event-image img{

    width:100%;

    height:260px;

}

.next-event-info{

    padding:25px;

}

.event-buttons{

    justify-content:center;

    flex-wrap:wrap;

}

/* ================================================
CTA
================================================ */

.cta-section{

    padding:60px 20px;

}

.cta-container{

    flex-direction:column;

    text-align:center;

    gap:30px;

}

.cta-image img{

    max-width:100%;

}

.cta-icons{

    justify-content:center;

    flex-wrap:wrap;

}

.cta-btn{

    width:260px;

    text-align:center;

}

/* ================================================
Related
================================================ */

.related{

    padding:40px 20px;

}

.related-container{

    grid-template-columns:1fr;

    gap:15px;

}

.related-item img{

    width:120px;

    height:80px;

}

.related-item span{

    font-size:15px;

}

}