/* 
    PEMSEA
    Website CSS - Mobile
    By: Glimsol Web & Digital Solutions (PH)
*/
@media screen and (max-width: 767px) {
    .story-page.inner-page.no-banner {
        margin-top:65px !important;
    }


    :root{
        --section-padding-t-b: 3rem 30px;
        --section-inner-padding-x: 3rem 30px 0;
        --bs-breadcrumb-item-padding-x: 0rem;
    }

    /* Global  */
    .title{font-size: 2rem;}
    .region-nav-additional div.custom-search{margin-right: 0; padding-inline: 20px;}
    #views-exposed-form-search-solr-page-1 div.form-type-search-api-autocomplete{width: 100%;}
    input#edit-search-api-fulltext{opacity: 1; width: 100%;}
    .region-nav-additional .custom-search span.custom-search-btn{display: none;}
    .region-nav-additional .custom-search button.custom-search-btn{display: block;}

    /* header section  */
    div.navbar-brand img{ height: 40px;}
    header nav > .container { padding: 0;}
    .tbm.tbm--mobile .tbm-button{ display: none;}
    .tbm.tbm--mobile .tbm-collapse{ display: block; padding-top: 0;}
    .tbm.tbm--mobile .tbm-nav{ background: var(--sc-blue);}
    .tbm-submenu-toggle { background-color: var(--sc-blue); color: var(--white);}
    .tbm.tbm--mobile .tbm-submenu-toggle{ border-left: none;}
    header nav > .container > .region-nav-branding { margin-left: 20px;}
    header nav > .container > .navbar-toggler { margin-right: 20px;}
    
    .page-node-type-home-page header > nav { padding-bottom: 0 !important;}
    div.tbm-submenu.tbm-item-child > .tbm-row-wrapper > .tbm-row{justify-content: left !important;}
    .tbm-submenu.tbm-item-child > .tbm-row-wrapper > .tbm-row > div { flex-grow: 1;}
    .tbm-submenu-toggle:hover, .tbm-submenu-toggle:focus { background-color: var(--sc-blue); filter: brightness(1.1);}

    div.layout-wysiwyg h2{font-size: 1.5rem;}
    div.layout-wysiwyg h2 strong{font-size: 1.5rem;}
    /* div.card-w-img-link-desc .col-12.col-md-12.card-info{padding: 20px;} */
    div.card-w-img-link-desc .title{font-size: 1.3rem;}
    div.card-w-img-link-desc .card-info{padding: 15px;}
    div.card-image img{max-height: 150px;}
    .inner-page .section-spacing > p {font-size: 0.95rem;}

    div.person-wrapper .content-overview h2 strong{font-size: 1.5rem;}
    .person-wrapper .content-overview { padding: 0; }
    div.person-wrapper .content-overview p {font-size: 0.95rem;}
    .side-bar-filter {
        margin-bottom: 30px;
    }
    .main-pub-sidebar {
        display: none;
    }
    div.publication-card > .publication-img-body{max-width: 100%;}
    
    div.middle-box h1{font-size: 1.5rem;}
    div .inner-title{font-size: 1.5rem;}
    div.layout-center-img-description-wrapper{font-size: 0.95rem;}
    div.layout-center-img-description img{max-height: 150px;}
    div.publication-card{padding: 10px; grid-template-columns: none; grid-template-rows: auto 1fr;}
    div.publication-card .publication-title{font-size: 1.1rem; display: block; -webkit-line-clamp: unset; -webkit-box-orient:unset;}
    div.publication-img-body { margin-inline: auto;}
    .node-43.inner-page:not(.same) .c-progress-bar.section-spacing { padding-inline: 65px;}
    div.c-progress-bar .owl-nav button.owl-prev{ left: -60px;}
    div.c-progress-bar .owl-nav button.owl-next{right: -60px;}
    .owl-carousel.owl-loaded div.owl-nav button{padding: 6px 12px !important;}
    div.no-banner .inner-title{font-size: 1.5rem;}
    div.card-w-overlap-dec-wrapper img{ aspect-ratio: 1/1.3;}
    div.card-w-overlap-dec-content .title{font-size: 1.2rem;}
    div.card-w-overlap-dec-content a{font-size: 0.8rem;}
    div.carousel-half-w-pbar-content{ padding-inline: 30px;}
    div.carousel-half-w-pbar-content div.carousel-half-item .owl-nav button.owl-prev { left: -45px;}
    div.carousel-half-w-pbar-content div.carousel-half-item .owl-nav button.owl-next { right: -45px;}

    .inner-page.no-banner.node-45 { margin-top: 60px;}
    .node-45.inner-page:not(.same) .c-progress-bar.section-spacing { padding-inline: 65px;}

    /* Inner pages  */
    section.publication-inner-page .title{ font-size: 1.5rem;}
    section.publication-inner-page .publication-information{padding: 20px;}
    section.publication-inner-page .publication-information .row > div:nth-child(even) { margin-bottom: 10px;}
    section.publication-inner-page .publication-information .row > div p:last-child {margin-bottom: 5px;}
    section.publication-inner-page .publication-information .pub-title{margin-bottom: 10px;}
    div.publication-card-wrapper ul li{padding: 0;}
    h3.publication-title{font-size: 1.3rem;}
    .page-node-type-projects section.generic-page .banner-wrapper img,
    section.generic-page .banner-wrapper img,
    section.event-page .banner-wrapper img,
    section.news-page .banner-wrapper img,
    section.generic-banner .banner-wrapper img{ aspect-ratio: 1/0.8;}
    .breadcrumb-item + .breadcrumb-item { padding: 0;}
    .banner-description > .container { padding-inline: 30px;}
    section.news-page .title{font-size: 1.2rem;}
    .page-node-type-projects div.banner-description h1{ font-size: 1.5rem; text-align: left;}
    /* div.content-wrapper .row > div {padding-inline: 0;} */
    .special-page div.banner-wrapper img,
    .news-landing-page.special-page div.banner-wrapper img{ aspect-ratio: 1/0.9;}
    section.event-page .title{font-size: 1.5rem;}
    .view-empty { text-align: center; padding: 20px;}
    div.event-card-body h3{font-size: 1.1rem;}
    .node-44 .title { font-size: 1.5rem; text-wrap: balance;}
    .special-page.node-44 { padding-inline: 30px; }
    div.page-description{padding: 0;}
    div.timeline-wrapper { grid-template-areas: "tl-img tl-s" "tl-d tl-s"; grid-template-columns: 1fr 10px; column-gap: 20px;}
    .timeline-main-wrapper:nth-child(even) div.timeline-wrapper{grid-template-areas: "tl-img tl-s" "tl-d tl-s";}
    .node-44 .inner-page:not(.same) .section-spacing{padding-inline: 0;}
    div.timeline-description{padding: 5px;}
    div.timeline-image{padding: 40px 0px; padding-right: 10px;}
    div.layout-center-img-description img{ margin-bottom: 30px}
    .cards-w-overlap-description-content > .row { row-gap: 15px;}
    .node-134 .layout-wysiwyg img { margin-bottom: 15px;}


    /* Banner section  */
    div.banner-wrapper img{height: auto; aspect-ratio: 1/1.8;}
    div.banner-description{text-align: center;}
    div.banner-description h1, .banner-description h2{font-size: 2rem;}
    div.banner-carousel .owl-dots{text-align: center;}
    div.owl-nav button.owl-next{right: 25px;}
    div.owl-nav button.owl-prev{left: 25px;}
    div.banner-description p{width: 100%; font-size: 1rem;}
    a.cta-btn{ display: block; text-align: center; width: fit-content;}

    /* Partnership for east asian seas */
    div.partnership-description p{width: 100%;}
    div.partnership-half > p:not(.small-title),
    div.partnership-half.right > p:not(.small-title){padding: 0; margin-bottom: 30px;}
    span.title-w-ctr-value{font-size: 4rem; margin-top: 10px;}
    div.partnership-half{margin-top: 30px; text-align: center;}
    div.partnership-half.left {border-right: none; border-top: 1px solid rgba(75,75,75,0.4); padding-top: 30px;}
    div.partnership-half.right{padding-left: 15px;}
    div.coastline-ctr .coastline-value{font-size: 3.5rem; text-align: center; margin-bottom: 30px;}
    div.title-w-counter .small-title{margin-bottom: 10px;}
    .title-w-counter { text-align: center; display: flex; flex-direction: column; justify-content: space-between;}
    div.partnership-for-east .small-title{text-align: center;}
    .cp-wrapper ul.row{ row-gap: 10px;}

    div.our-works-content{width: 90%; padding: 3rem 1rem;}
    div.view-grouping .view-grouping-header.collapsed svg{right: 5px;}
    div.view-grouping .view-grouping-header svg{right: 5px;}

    /* Where we are section  */
    div.map-info-wrapper{height: auto;}

    /* Footer  */
    div.footer-container{text-align: center; padding: 50px 30px;}
    div.footer-container .row{gap: 30px;}
    div.footer-description{margin-top: 0;}
    div#block-customfooterlogo img{height: 70px; margin-bottom: 0;}

    div.basic-cta-btn .cta-btn { padding: 10px 20px; font-size: 1rem;}
    div.basic-cta-btn .cta-btn::before{ display: none;}
    div.basic-cta-btn .cta-btn::after{ display: none;}

    div.section-spacing.download-section { padding: 20px !important; margin: 3rem 30px 0;}
    div.download-section .download-links a { padding: 10px 20px;}
}
@media screen and (max-width: 476px) {
    
    .promo-img-banner .content h3 { font-size: 1.25rem; }
    .promo-img-banner .content h2 {font-size: 1.50rem; }
    .promo-img-banner .content h2 strong { font-size: 1.50rem; }
    .promo-img-banner .content span{ font-size: 1.125rem; }
    .promo-img-banner .register-button a{ font-size: 1.125rem; }
    .promo-img-banner .register-button { padding-top: 1em; }

}
@media screen and (min-width: 768px) {
    div.banner-carousel .owl-dots{ max-width: 720px;}
    .banner-carousel-body div.owl-dots{ max-width: 720px;}
}
@media screen and (min-width: 992px) {
    div.banner-carousel .owl-dots{ max-width: 960px;}
    .banner-carousel-body div.owl-dots{ max-width: 960px;}
}
@media screen and (max-width: 1200px) {
    .region-footerlogo{text-align: center;}
    #block-customfooterlogo img{max-width: 300px;}
    .footer-description{text-align: center; margin-top: 50px;}
}
@media screen and (min-width: 1200px) {
    .container{max-width: 1240px;}
    div.banner-carousel .owl-dots{ max-width: 1240px;}
    .banner-carousel-body div.owl-dots{ max-width: 1240px;}
}
@media screen and (min-width: 1380px) {
    .container,
    div.banner-carousel .owl-dots{max-width: 1400px;}
    div.highlights.container,
    div.projects .container{max-width: calc(1400px + 70px)}
    
    div.page-description{font-size: 20px; padding: 0;}
    div.content-description{font-size: 20px}
    div.carousel-w-pbar-content .icon-label-wrapper .title{font-size: 20px;}

    div.card-w-img-link-desc .title{font-size: 1rem;}
    .banner-carousel-body div.owl-dots{max-width: 1400px;}
}




@media (min-width: 320px) and (max-width: 568px) 

{
    .block-title-description{ padding-top: 1.5rem; padding-bottom: 0.5rem;}
    .block-description-w-img-wrapper{padding: 0;margin: 0;}
    .block-description-w-img-wrapper img{padding-left: 20px; padding-right: 20px;
    }

.text-content-block .container{
      padding-left: 20px;
      padding-right: 20px;
    }

    /* .story-page.inner-page.no-banner{margin-top: 65px;} */

    .text-content-block  .text-center {
    text-align: center !important;
    }

    .block-hero-banner-description{
        width: 100%;
        padding: 10px;
    }

    .block-hero-banner-description h2{
        font-size: 30px;
        margin: 0;
    }

    .block-hero-banner-description h5{
        font-size: 16px;
    }

    .parallax{ height: 500px; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; transition: all 1200ms; aspect-ratio: 0}

    .one-col-img img {
    max-width: 100%;
    height: auto;
    width: auto;
    object-fit: cover; 
    }

 .block-text-content-overlap {
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    margin-top: -200px;
    position: relative;
    z-index: 2;
    }

    .block-text-content-overlap-2 {
    display: flex;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    margin-top: -194px;
    height: 194px;
    max-height: 194px;
    position: relative;
    z-index: 2;
    }

    .block-text-content-overlap-2 p{
    margin:0;
    }

    .block-text-content-overlap-2 .text-head {
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
    }

.block-text-content-overlap .text-head {
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
}

.photo-quote {
  position: relative;
  object-fit: cover;

    margin-left: 20px ;

    margin-right: 20px;

    background-color: white;

}

.photo-quote img {

  height: auto;

  width: 100%;

  position: relative;

  z-index: 1;

   object-fit: cover;

  object-position: cover;

}





.photo-quote .quotes h2{

  font-size: 16px;

  text-align: left !important;

    margin-top: 20px !important;

}

.photo-quote .quotes {

  padding: 15px;

  height: 100%;

  position: absolute;

  z-index: 2;

  top: 0;

  background-color: rgba(0, 0, 0, 0.6);

  color: white;

  display: flex;

  justify-content: center;

  align-content: center;

}









    .block .block-description-w-img-wrapper .block-description-w-img-description{ padding-top: 10px;padding-bottom: 0px; padding-left: 20px; padding-right: 20px;}



    .block .block-description-w-img-wrapper .block-description-w-img-description p{

        padding: 0;

        margin: 0;

        font-size: 16px;

        text-align: center;

    }



    /* General styling for the block container */

    .block-image-collage {

    display: flex;

    flex-direction: column;

    gap: 10px; /* Space between rows */

    }



    /* Single column layout */

    .one-col-img {

    display: flex;

    justify-content: center;

    margin-bottom: 0px;

    padding-left: 10px;

    padding-right: 10px;

    }



    .one-col-img img {

    max-width: 100%;

    height: auto;

    width: auto;

    object-fit: cover; 

    }



    /* Two column layout */

    .two-col-img {

    display: grid;

    grid-template-columns: repeat(1, 1fr); 

    gap: 10px; 

    padding-left: 10px;

    padding-right: 10px;

    }

    



    .two-col-img img {

    max-width: 100%;

    height: auto;

    width: 500px;

    object-fit: cover; 

    }



    .collage-three-img img {

    max-width: 100%; 

    height: auto;

    }



    .collage-one-col-img img {

    max-width: 100%;

    padding-left: 10px;

    padding-right: 10px;

    object-fit: cover; 

    height: auto;

    }



}



/* @media screen and (max-width: 768px) */

/* @media (max-width: 768px) */

@media (min-width: 390px) and (max-width: 844px) 

{
    /* .story-page.inner-page.no-banner{margin-top: 65px;} */

    .text-content-block .container{

      padding-left: 30px;

      padding-right: 30px;

    }

    .text-content-block  .text-center {

    text-align: l !important;

    }

    .block-hero-banner-description{

        width: 100%;

        padding: 10px;

    }

    .block-hero-banner-description h2{

        font-size: 30px;

        margin: 0;

    }

    .block-hero-banner-description h5{

        font-size: 16px;

    }

    .block-description-w-img-wrapper{

    padding: 0;

    margin: 0;

    }



    .block .block-description-w-img-wrapper .block-description-w-img-description{ padding-top: 10px;padding-bottom: 0px; padding-left: 20px; padding-right: 20px;}



    .block .block-description-w-img-wrapper .block-description-w-img-description p{

        padding: 0;

        margin: 0;

        font-size: 16px;

        text-align: center;

    }

    .photo-quote .quotes h2{

        font-size: 16px;

        text-align: left !important;

            margin-top: 65px !important;

        }

    

    .parallax{ height: 500px; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; transition: all 1200ms; aspect-ratio: 0}

    

    .photo-quote .quotes h2{

    font-size: 16px;

    text-align: left !important;

    margin-top: 50px;

    }

     .block-text-content-overlap {

    padding-top: 20px;

    padding-bottom: 20px;

    background-color: rgba(0, 0, 0, 0.3);

    color: white;

    margin-top: -175px ; 

    position: relative;  

    z-index: 2;

    }

    

    .block-text-content-overlap .text-head {

    padding-left: 30px;

    padding-right: 30px;

    text-align: center;

    }

    .block-text-content-overlap-2 {

    display: flex;

    align-items: center;

    background-color: rgba(0, 0, 0, 0.3);

    color: white;
    height: 170px;
    max-height: 170px;
    margin-top: -170px;
    position: relative;
    z-index: 2;
    }

    .block-text-content-overlap-2 p{
    margin:0;
    }

    .block-text-content-overlap-2 .text-head {
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
    }

    /* General styling for the block container */

    .block-image-collage {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Space between rows */
    }

    /* Single column layout */
    .one-col-img {
    display: flex;
    justify-content: center; 
    margin-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    }

    .one-col-img img {
    max-width: 100%;
    height: auto;
    width: auto;
    object-fit: cover; 
    }

    /* Two column layout */
    .two-col-img {
    display: grid;
    grid-template-columns: repeat(1, 1fr); 
    gap: 10px; 
    padding-left: 20px;
    padding-right: 20px;
    }

    .two-col-img img {
    max-width: 100%;
    height: auto;
    width: 500px;
    object-fit: cover; 
    }

    .collage-three-img img {
    max-width: 100%; 
    height: auto;
    }

    .collage-one-col-img img {
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    object-fit: cover; 
    height: auto;
    }

    .block-title-description {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}