.section-title{
    background-image:url("/img/title_programs.svg");
    height:116px;
    width:293px
}
.col-3 .col-1{
    background:#FF9119;
    color:white
}
.col-3 .col-1 .btn.orange:hover,.col-3 .col-1 .btn.orange:focus,.col-3 .col-1 .btn.orange:active{color:#FF9119}
.col-3 .col-1.even{background:#FFB143}
.col-3 .col-1.even .btn.orange:hover,.col-3 .col-1.even .btn.orange:focus,.col-3 .col-1.even .btn.orange:active{color:#FFB143}
@media screen and (min-width: 766px) and (max-width: 1280px){
    .col-3{grid-template-columns:1fr}
    .col-3 .col-1{
        grid-template-columns:1fr 1fr;
        background:#FFB143
    }
    .col-3 .col-1 .btn.orange:hover,.col-3 .col-1 .btn.orange:focus,.col-3 .col-1 .btn.orange:active{color:#FFB143}
    .col-3 .col-1.even{background:#FF9119}
    .col-3 .col-1.even .bg-img{
        grid-column-start:2;
        grid-row-start:1
    }
    .col-3 .col-1.even .btn.orange:hover,.col-3 .col-1.even .btn.orange:focus,.col-3 .col-1.even .btn.orange:active{color:#FF9119}
    .col-3 .arrow,.col-3 .even .arrow,.col-3 .row-odd .arrow,.col-3 .row-odd.even .arrow{background:none}
    .col-3 .bg-img{min-height:460px}
}
@media screen and (min-width: 1281px){
    .col-3{
        grid-template-columns:repeat(3, calc(100%/3))
    }
    .col-3 .col-1.row-odd{background:#FFB143}
    .col-3 .col-1.row-odd .bg-img{grid-row-start:2}
    .col-3 .col-1.row-odd .btn.orange:hover,.col-3 .col-1.row-odd .btn.orange:focus,.col-3 .col-1.row-odd .btn.orange:active{color:#FFB143}
    .col-3 .col-1.row-odd .text{grid-row-start:1}
    .col-3 .col-1.row-odd.even{background:#FF9119}
    .col-3 .col-1.row-odd.even .bg-img{grid-row-start:1}
    .col-3 .col-1.row-odd.even .btn.orange:hover,.col-3 .col-1.row-odd.even .btn.orange:focus,.col-3 .col-1.row-odd.even .btn.orange:active{color:#FF9119}
    .col-3 .col-1.row-odd.even .text{grid-row-start:2}
    .col-3 .text,.col-3 .bg-img{
        height:calc((100vw - 4rem ))
    }
}
@media screen and (min-width: 1281px) and (min-width: 766px){
    .col-3 .text,.col-3 .bg-img{
        height:calc((100vw - 4rem )/ 2)
    }
}
@media screen and (min-width: 1281px) and (min-width: 1022px){
    .col-3 .text,.col-3 .bg-img{
        height:calc((100vw - 14rem )/ 3)
    }
}
@media screen and (min-width: 1281px) and (min-width: 1281px){
    .col-3 .text,.col-3 .bg-img{
        height:calc((1281px - 14rem) / 3)
    }
}
@media screen and (min-width: 1022px){
    #dropdown-programs .dropbtn{
        background:#FF9119;
        border-top-color:white;
        border-left-color:white;
        border-right-color:white
    }
}
.container .detail-cal{border-color:#FF9119}
.container .detail-cal h1{background:#FF9119}
.container .detail-cal .calendar th.h2,.container .detail-cal .calendar .nav-btns a,.container .detail-cal .calendar td a,.container .detail-cal .event-list .btn,.container .detail-cal .event-list h2,.container .detail-cal .event-list h3{color:#FF9119}
@media screen and (min-width: 766px){
    .col-2-6040{
        grid-template-rows:minmax(400px, auto)
    }
}
@media screen and (min-width: 1022px){
    .col-2-6040{
        grid-template-rows:minmax(550px, auto)
    }
}
@media screen and (min-width: 1281px){
    .col-2-6040{
        grid-template-rows:minmax(700px, auto)
    }
}
@media screen and (max-width: 1280px){
    .col-2#get-involved{grid-template-columns:1fr}
}
body .container .details h2,body .container .text h2{
    font-family:poppins,sans-serif;
    font-weight:700;
    font-style:normal
}
@media screen and (min-width: 1022px){
    body .container .text{padding:4rem}
}
.col-1.featured-image{height:600px}


.programs-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.program-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background: #FFB143;
    color: white;
}

.program-row.even {
    background: #FF9119;
}

.program-image {
    flex: 0 0 auto;
    width: 320px;
    height: 320px;
}

.program-image .bg-img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.program-text {
    flex: 1;
    padding: 2rem;
}

.program-row .btn.orange:hover,
.program-row .btn.orange:focus,
.program-row .btn.orange:active {
    color: #FF9119;
}

.program-row.reverse .btn.orange:hover,
.program-row.reverse .btn.orange:focus,
.program-row.reverse .btn.orange:active {
    color: #FFB143;
}

@media screen and (max-width: 765px) {
    .program-row,
    .program-row.even {
        flex-direction: column;
        align-items: center;
    }

    .program-image {
        width: 100%;
        max-width: 320px;
        height: 320px;
        margin-top: 2rem;
    }
    
    .program-image .bg-img {
        min-height: 220px;
    }
}