/* Modal */
.modal-header {
    border-bottom: 0px solid #dee2e6;
    padding: 0 !important;
    position: absolute;
    right: 0;
    z-index: 1;
}

.modal-xl {
    max-width: 1440px;
}

.program-info {
    border: 1px solid #E6E6E6
}

.filter-program-category {
    font-family: 'Avenir Regular';
    font-size: 13px;
    width: 100%;
    height: 100%;
    color: #333;
    background-color: unset;
    border: transparent !important;
    cursor: pointer;
}

option {
    padding: 1em;
}

.f-s20 {
    font-size: clamp(1px, 1.041665vw, 26px) !important;
}

.cta-content .f-s20 {
    font-size: clamp(1px, 1.041665vw, 26px) !important;
}

.program-search input,
.program-search input:focus {
    border: none !important;
    padding: 10px 15px;
    border-radius: 50px;
    box-shadow: none !important;
}

.program-search button,
.program-search button:focus {
    font-size: 1.9em;
    box-shadow: none !important;
}

.nav-link {
    font-family: Avenir Bold;
    color: white;
    font-size: 14px !important;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: #fff;
    width: 100%;
    text-align: left;
    background-color: #c3c3c3;
}

.nav-pills .nav-link {
    background: 0 0;
    border: 0;
    text-align: left;
    width: 100%;
    color: #333;
    border-radius: 0.25rem;
}

#program_type,
#program_type:focus {
    border: 1px solid black !important;
    border-radius: 20px;
    padding: 14px 0;
    height: 100% !important;
    box-shadow: none !important;
}

.program-search i {
    color: black !important;
}

.program-search {
    border: 1px solid #000;
}

.close-container {
    background-color: #8E1536;
    padding: 20px;
}

.modal p {
    font-size: 1.3em;
}

.modal-body {
    padding: 0 !important;
}

.modal-content {
    border-radius: 0 !important;
    border: 0 !important
}

.accordion-button:not(.collapsed) {
    background-color: transparent;
}

.accordion-body {
    padding: 1rem 1.25rem;
    border-left: 5px solid #0A4523;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("../../images/global/red-carret.svg");
    transform: rotate(-180deg);
}

.accordion-button:not(.collapsed) {
    color: #8E1536;
    box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);
}

.close-modal {
    position: relative;
    width: 60px;
    height: 60px;
    padding: 30px;
    margin: 0;
}


/* Carousel */
#gallery_carousel .carousel-overlay:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.2);
}

#main_carousel .carousel-item {
    height: 600px !important;
}

#main_carousel .carousel-caption {
    top: 18vh !important;
    padding: 0 30px !important;
}

#main_carousel .carousel-indicators [data-bs-target] {
    border-radius: 50%;
    height: 10px !important;
    width: 10px !important;
}

#main_carousel .banner-title {
    font-family: Optima Medium;
    font-size: 4em;
    text-transform: capitalize;
    margin-bottom: 40px;
}

#main_carousel .banner-description {
    font-family: Avenir Regular;
    font-size: 1.7em;
}

#main_carousel .carousel-item:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.4);
}

/* CTA */
.cta-container {
    width: 100%;
    background: #8e1536;
}

.cta-container label {
    cursor: pointer;
}

.cta a {
    text-transform: uppercase;
    font-size: 1em;
    color: white;
    text-decoration: none;
}

.cta:hover {
    background: #5B071E;
}

.cta-content {
    width: 100%;
    border-radius: 50px;
    height: clamp(1px, 7.57vw, 120px);
}

/* .program-icon,
.program-arrow {
    padding-right: 20px;
} */

.program-icon img {
    height: 100% !important;
    width: 30px !important;
}

.program-arrow img {
    height: 100% !important;
    width: 30px !important;
}

.program-arrow img {
    height: 100% !important;
    width: 20px !important;
}

.ns {
    overflow: hidden;
}

select:-internal-list-box option:hover {
    background-color: #a6a6a6 !important;
}

/* Feature News */
.featured-news-bg {
    background: #F5F5F5;
    border-radius: 20px 20px 0 0;
}

.featured-news-container {
    position: relative;
    display: inline-block;
}

.featured-news-img {
    height: clamp(300px, 29vw, 500px);
}

.featured-news-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;

}

.featured-news-container:hover .featured-news-img img {
    transform: scale(1.05);
    transition: all ease 0.4s;
}

.featured-news-container .featured-news-img {
    border-radius: 20px 20px 0 0;
    overflow: hidden;
    display: block;
}


@media(min-width: 992px) {
    .featured-news-content {
        background: #F5F5F5;
        border-radius: 0 0 20px 20px;
        height: clamp(1px, 19.62vw, 300px);
    }
}

.featured-news-content .news-descriptions {
    font-family: Avenir Regular;
    font-size: clamp(1em, 1.1vw, 1.3em);
}

.author img,
.date img {
    width: 20px;
    margin-right: 8px;
}

.btn-read-more {
    width: 20px !important;

}

/* sub */
.border-sub-featured-news-hide {
    padding: 0 0 clamp(.5rem, 0.83333vw, 1.5rem) 0;
}

.border-sub-featured-news {
    border-top: 1px solid rgb(0, 0, 0, .15);
    padding: clamp(.5rem, 0.83333vw, 1.5rem) 0;
}

/* .sub-featured-news-content {
    padding: 20px 20px 10px 20px;
    color: white;
} */
.sub-featured-news-container {
    position: relative;
    display: inline-block;
}

.sub-featured-news-img {
    height: clamp(1px, 13.612vw, 220px) !important;
    width: clamp(1px, 15.625vw, 260px) !important;
}

.sub-featured-news-container:hover .sub-featured-news-img img {
    transform: scale(1.05);
    transition: all ease 0.4s;
}

.sub-featured-news-container .sub-featured-news-img {
    border-radius: 20px;
    overflow: hidden;
    display: block;
}

.sub-featured-news-img img {
    height: 100%;
    width: 100%;
    border-radius: 20px;
    object-fit: cover;
}

.zoom-container:hover .zoom-img img {
    transform: scale(1.05);
    transition: all ease 0.4s;
}

.zoom-container .zoom-img {
    border-radius: 20px;
    overflow: hidden;
    display: block;
}

.zoom-img img {
    height: 100%;
    width: 100%;
    border-radius: 20px;
    object-fit: cover;
}

.sub-featured-news-content .sub-featured-news-heading {
    font-family: Avenir Bold;
    font-size: 1.5em;
}

/* news content */
.news-featured-img img {
    width: 100%;
    height: 100%;
}

.news-content .news-heading {
    font-family: Avenir Regular Bold;
    font-size: 1.8em;
}

.news-content .news-descriptions {
    font-family: avenir regular;
    font-size: clamp(1em, 1vw, 1.3em);
}


/* News from other Sources */
.slick-prev:before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 800;
    font-size: 36px !important;
    content: '\f053';
    color: #000;
}

.slick-next:before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 800;
    font-size: 36px !important;
    content: '\f054';
    color: #000;
}

.other-source-container {
    position: relative;
    overflow: hidden;
    border-radius: 20px;

}

.other-source-img {
    width: 100%;
    height: clamp(1px, 18.8vw, 360px);
    object-fit: cover;
    transition: all 0.3s ease;
}

.hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

}

.watermark-bg {
    background: linear-gradient(90deg, rgba(51, 51, 51, 1) 0%, rgba(85, 84, 84, 1) 100%);
    height: clamp(1px, 2.7vw, 50px);
    width: 100%;
}

.watermark-bg .f-s14 {
    font-size: clamp(1px, .8vw, 14px) !important;
}

.hover-overlay:hover {
    background-color: rgb(0, 0, 0, 0.2);
}

.news-os-logo {
    width: auto;
    height: clamp(1px, 1.9vw, 35px);
}

.other-source-container:hover .other-source-img {
    transform: scale(1.05);
}

/* recent news */
.recent-img {
    width: 300px !important;
}

.recent-news-content {
    min-height: 100px;
    padding: 8px 15px;
    color: white;
    background: #F5F5F5;
}

.recent-news-content .recent-news-heading {
    font-family: Avenir Regular;
    font-size: clamp(1em, 1vw, 1.3em);
}

.recent-news-container {
    border-top: 1px solid rgb(0, 0, 0, .15);
    padding: 15px 0;
}

.a-list:last-child {
    border-bottom: 2px solid #c3c3c3;
}

.recent-news:not(:last-child) {
    border-bottom: 2px solid grey;
}

.recent-news:first-child {
    padding: 0px 0px 2px 0px !important;
}

.recent-news-list .recent-news {
    padding: 20px 0;
}

.recent-news-list .meta-data {
    margin-bottom: 0 !important;
}

.author img,
.date img {
    font-family: Avenir Bold;
    width: 20px;
    margin-right: 8px;
}

/* This is UP Manila */
.up-manila-container {
    background-image: url("../../images/home/this-is-up-manila.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.up-manila-container .row {
    /* width: 770px; */
}

.up-manila-container .yt-container {
    padding: 30px 50px;
    border-right: 3px solid white;
}

.up-manila-container .yt-icon img {
    width: 230px;
    height: auto;
}

.play-yt-btn,
.play-yt-btn:hover {
    text-transform: capitalize !important;
    font-size: 2em;
    font-family: Optima Normal;
}

.up-description .main-heading {
    text-transform: none;
    font-size: 3.5em;

}

.up-description .description {
    font-family: Avenir Regular;
    font-size: 1.4em;
}

/* SDG */
.sdg-container {
    min-width: 150px;
}

.sdg-section {
    background: #F2F2F2;
}

.sdg-section .description {
    font-size: 1.4em;
}

.up-manila-container .yt-container {
    border-right: none !important;
}

.sdg-img {
    height: clamp(1px, 9.375vw, 200px);
    border-radius: 20px;
}

/* 
.trim-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    -webkit-line-clamp: 2;
} */

.category-icon {
    width: 10px;
    height: 10px;
    margin-right: 5px;
}

.category-container img {
    width: 50px;
    height: 50px;
}

/* .sdg-content {
    background: white !important;
    padding: 20px;
} */

.sdg-content .sdg-heading label {
    font-family: Avenir Bold;
    font-size: clamp(1rem, 1.1vw, 1.7em);
}

.meta-data {
    color: #828282;
}


.read-more-link {
    font-family: Avenir Bold;
    font-size: 1em;
}

.read-more-link img {
    width: 14px;
    height: 10px;
    margin-left: 5px;
}

.filter-program-category:focus option.option1:focus {
    background: #333 !important;
    border: 1px solid red;
    z-index: 9999999999999999999999999999999999999999999999999999999;
}

/* sdg icons */
.sdg-icons {
    /* padding: 20px 10px; */
}

.sdg-icons img {
    width: clamp(1px, 1.563vw, 40px);
    height: clamp(1px, 1.563vw, 40px);
    margin: 3px !important;
}

.sdg-no {
    font-family: 'Avenir Bold';
    font-size: clamp(1px, .7vw, 12px);
    color: white;
    margin: 3px !important;
    width: clamp(1px, 1.563vw, 40px);
    height: clamp(1px, 1.563vw, 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    transition: transform 0.5s ease;
}

.sdg-green {
    background-color: #20963C;
}

.sdg-red {
    background-color: #C31F34;
}

.sdg-pink {
    background-color: #E01E83;
}

.sdg-light-green {
    background-color: #0FA81B;
}

.sdg-dark-blue {
    background-color: #06125A;
}

/* Quick links */
.ql-title {
    min-height: 70px;
    font-size: 2em;
}

.ql-description {
    font-size: 1em;
}

.ql-description {
    font-size: 1em;
    text-align: justify;
}

.ql-container {
    padding: 30px;
}

/* Events */
/* .events-container .row {
    display: flex !important;
    flex-wrap: wrap !important;
}


.events-container {
    background-color: #F9F9F9;
}

.event {
    background-color: #F0F0F0;
    border-top-left-radius: 40px;
}

.date-container-latest {
    background-color: #0A4523;
    padding: 20px;
    width: 85px;
    margin-bottom: 20px;
    border-top-left-radius: 20px;
    color: white;
}

.date-container {
    background-color: white;
    border: 2px solid #8E1536;
    padding: 20px;
    width: 85px;
    margin-bottom: 20px;
    border-top-left-radius: 20px;
    color: #8E1536;
}

.date-month {
    font-family: Avenir Bold;
    text-transform: uppercase;
    font-size: 1em;
}

.date-day {
    line-height: 30px;
    font-family: Avenir Bold;
    text-transform: uppercase;
    font-size: 3em;
}

.location {
    font-family: Avenir Bold;
} */

/* student life */
/* .student-life-container {
    background-image: url('../../images/stock_images/stock3.png');
}

.eoc-container .carousel-caption {
    width: 1000px !important;
    left: 5%;
    right: 0;
    text-align: left;
    z-index: 99 !important;
}

.eoc-container .carousel-caption h5 {
    font-family: Optima Bold;
    font-size: 3em;
}

.eoc-container .carousel-caption a {
    font-size: 1.3em;
} */

/* PGH */
/* .pgh-container {
    margin-top: 80px;
}

.pgh-cover {
    padding: 50px 50px 0 0;
} */

/* history */
.history-cover {
    background-image: url("../../images/home/history-cover.png");
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}

.history-details-container {
    background-image: url("../../images/home/history-gradient.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    /* background-color: rgba(10, 69, 35, 0.7); */
}

.history-details {
    height: 300px !important;
}

/* Careers */
/* .job-container {
    background: #F0F0F0;
    border-top-right-radius: 40px;
    padding: 30px;
    height: 320px;
    width: 280px !important;

}

.job-position {
    font-size: 2.5em;
}

.job-description {
    font-size: 1.3em;
    color: #666666;
}

.btn-careers a {}

.btn-careers img {
    height: 15px;
    margin-left: 8px;
} */

/* Covid Response */
/* .covid-container {
    background-image: url("../../images/home/covid-banner.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.covid-container .row {
    margin: 0 !important;
}

.covid-ql-container {
    padding: 20px 0;
}

.covid-ql {
    padding: 20px 0;
}

.covid-ql a {
    font-family: Avenir Bold;
    font-size: 1.7em;
    text-decoration: none;
}

.covid-ql a:hover {
    text-decoration: underline;
}

.covid-ql img {
    height: 13px;
    margin-left: 5px;
} */

.modal-with-border {
    border-radius: 0.3rem !important;
    padding: 10px;
    background-color: white;
}

.btn-close {
    width: 100% !important;
    height: 100% !important;
    opacity: 1 !important;
    position: relative;
    z-index: 1;
}

#modalCarousel {
    position: relative;
    z-index: 0;
}

.book-pub {
    position: relative;
    width: clamp(1px, 10.417vw, 160px);
    height: clamp(1px, 13.889vw, 220px);
    transform-style: preserve-3d;
    transform: perspective(2000px);
}

.book-pub .cover-pub {
    position: relative;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    transform-origin: left;
    z-index: 1;
    transition: 1s;
    object-fit: cover;
}

.book-pub:hover {
    z-index: 1;
    transform: perspective(2000px);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5)
}

.book-pub:hover .cover-pub {
    transform: rotateY(-30deg);
}

.announcement-img {
    position: relative;
    width: clamp(1px, 16.389vw, 300px);
    height: clamp(1px, 8.681vw, 150px);
}

.announcement-img img {
    position: relative;
    height: 100%;
    width: 100%;
    z-index: 1;
    object-fit: cover;
}

.events-container {
    background: #F5F5F5;
    border-radius: 20px;
    padding: 3rem;
}

.bg-events {
    background-color: #8E1536;
    width: clamp(1px, 6.945vw, 125px);
    height: clamp(1px, 6.945vw, 125px);
    border-radius: 20px;
}

.bg-events:hover {
    background-color: #0A4523 !important;
}

.bg-events .f-s30 {
    font-size: clamp(1px, 1.6vw, 30px) !important;
}

.font-events {
    font-family: Avenir Bold;
    font-size: clamp(1em, 1vw, 1.3em);
}

.events-border-top {
    padding: 0 0 1.4rem 0;
}

.events-border {
    border-top: 1px solid rgb(0, 0, 0, .15);
    padding: 1.4rem 0;
}

.publications {
    background: white;
    border-radius: 20px;
    height: 100%;
    width: clamp(1px, 20.834vw, 350px);
}

/* width */
.sdg-scroll::-webkit-scrollbar {
    height: 5px;
}

/* Track */
.sdg-scroll::-webkit-scrollbar-track {
    background: #f5f5f5;
}

/* Handle */
.sdg-scroll::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 20px !important;
}

/* Handle on hover */
.sdg-scroll::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.bg-sdg {
    background: white;
    border-radius: 20px;
    height: 100%;
}