.search-box {width:100%; height:100%; border:1px solid #ccc;}
.search-box a {height: 35px; line-height: 70px; padding: 0 15px; color: var(--pba-blue); font-weight: 500;}
.search-box span {padding: 0 20px; font-weight: bold; height: 70px; line-height: 70px; font-size: 18px;}
.search-box input {border-bottom: 1px solid #ccc; border-top: none; border-left: none; border-right: none; width: 70%;}
.search-box .active {background-color: var(--pba-pink); color: #fff; padding: 4px 10px; border-radius: 5px;}
.search-box form {height: 70px; float: right; width: 35%; margin: 10px 0;}
.search-box form input {margin: 20px 0; line-height: 30px; font-size: 16px; font-weight: bold;}
.search-box button {margin: 0px 10px; border-radius: 5px; background-color: var(--pba-blue); color: var(--white); border: none; padding: 5px 10px; font-weight: 500; width: 20%;}

.event-box {width:100%; height:auto; background-color: #fff; border:1px solid #ccc; display:block; text-decoration:none; color: #384044; margin-bottom:40px;}
.event-box:hover {color:#384044; text-decoration:none;}
.event-box div {text-align:center;}
.event-img {background-color: #384044;}
.event-img img {width:100%; height:auto; display:block;}
.event-box:hover img {opacity:0; background-color:#384044;}

.event-head {display: table; width: 100%;}
.event-title {height: 90px; display: table-cell; vertical-align: middle; font-size: .8vw; font-weight: 500; border-bottom:1px solid #ccc;}

.event-date {line-height:60px; font-size:22px; font-size: 1vw; border-top:1px solid #ccc;}
.event-text {font-size:20px; font-size: 1vw; margin:20px; position:absolute; top:90px; color: #fff; opacity:0; left: 15px; right: 15px;}
.event-location {margin-bottom: 15px;}
.event-box:hover .event-text {opacity:1;}

.no-programs-text {border:1px solid #ccc; text-align: center; font-size: 24px; font-weight: bold; padding: 50px 20px;}

.sort-category {margin: 30px 1%; width: 30%; border: none; color: var(--white); background: var(--pba-pink); padding: 8px 5px; font-weight: bold;}

.event-display-text {line-height:60px; font-size:22px; font-size: 1vw; width: 100%; height: auto;}
.event-display-text p {margin: 15px 0 0 0;}
.event-display-text img {width: 50%; height: auto;}


@media (max-width: 1200px) {
    .sort-category {width: 25%;}
    .search-box form {width: 40%}
    .search-box input {width: 60%;}
    .search-box button {width: 30%;}

    .event-text {font-size: 1.5vw;}
    .event-title,.event-title-two {font-size: 1.5vw;}
    .event-date {font-size: 1.5vw;}
}

@media (max-width: 992px) {

    .event-text {font-size: 2.5vw;}
    .event-title,.event-title-two {font-size: 2.5vw;}
    .event-date {font-size: 2.5vw;}
}

@media (max-width: 768px) {
    .sort-category:first-of-type {width: 40%; margin: 30px 15px 10px 30px;}
    .sort-category:last-of-type {width: 40%; margin: 30px 30px 10px 15px; float: right;}
    .search-box form {margin: 20px 5% 10px 5%; width: 90%;}
    .search-box input {width: 70%;}
    .search-box button {width: 20%; margin: 20px 0 20px 5%; float: right;}
}

@media (max-width: 576px) {
    .sort-category:first-of-type, .sort-category:last-of-type {width: 90%; margin: 30px 5% 0 5%;}
    .search-box input {width: 60%}
    .search-box button {width: 30%;}

    .event-text {font-size: 5vw;}
    .event-title,.event-title-two {font-size: 5vw;}
    .event-date {font-size: 5vw;}
}