/* 
    QCFC
    Website CSS - Responsive
    By: Glimsol Web & Digital Solutions (PH)
*/
@media screen and (max-width: 768px) {

    /* Header  */
    header nav.navbar > div > div.navbar-collapse{
        background: var(--qcfc-blue);
    }
    header nav.navbar > .container {
        padding-inline: 0;
        gap: 15px;
        flex-direction: row;
    }
    #block-communication-main-navigation > ul {
        padding: 0 0px 20px;
        position: absolute;
        width: 100%;
        background: var(--qcfc-blue);
    }
    #block-communication-main-navigation ul ul { width: 100%; min-width: 100%; position: unset;}
    #block-communication-main-navigation > ul li {width: 100%;}
    main.node-1 .banner-section{height: calc(100dvh - 90px);}
    #block-communication-main-navigation > ul > li > a{margin-inline: 20px; }
    #block-communication-main-navigation .navbar-nav .dropdown-menu a {white-space: pre-wrap; text-wrap: wrap;}
    header nav.navbar > .container > button{
        margin-right: 20px;
        margin-bottom: 10px;
    }
    header nav.navbar > .container > .region-nav-branding {
        margin-left: 20px;
    }
    section.banner-section >.container{
        z-index: 1;
    }
    nav.main-nav #block-qcfc-main-navigation {
        padding-block: 15px 30px;
    }
    nav.main-nav .nav-item a.nav-link.contact-us-cta {
        margin-inline: 20px;
        width: max-content;
    }
    /* Main Content  */
    div .node-title{
        font-size: 1.2rem;
    }
    section.container-fluid .main-contents > div {
        padding-inline: 20px;
    }
    .main-contents {padding-inline: 20px !important;}
    section.banner-section{padding-inline: 20px;}
    div .banner-title{
        font-size: 2.5rem;
    }
    /* Footer  */
    div.region.region-footer{
        text-align: center;
        justify-content: center;
    }
    div.footer-ribbon{
        justify-content: center;
        gap: 10px;
    }
    div.alternate-content {
        grid-template-areas:
            'desc-wrap'
            'img-wrapper';
        grid-auto-rows: 1fr auto;
        grid-template-columns: 1fr;
    }
    div.alternate-content .image-wrapper{aspect-ratio: 1 / 1; order: 2 !important;}
    div.alternate-content .description-wrapper{padding: 30px; order: 1 !important;}
    footer > div.container { flex-direction: column; align-items: center; padding-inline: 20px;}
    div.description-wrapper > h3{font-size: 2.5rem;}
    div.footer-social{ font-size: 1.75rem;}
    div.alternate-content .plain-title{letter-spacing: 1px;}
    .region-footer ul.nav.navbar-nav{ /**flex-direction: column;*/ text-align: left; justify-content: center;}
    div.region.region-footer nav ul li:not(:last-child){border: none;}
    div.region.region-footer nav ul li a{ padding: 0 10px; font-size: 0.8rem; border-right: 1px solid var(--qcfc-white);}
    div.region.region-footer nav ul li:last-child a { border: none; padding-right: 0;}
    div.region.region-footer nav ul li:first-child a { padding-left: 0;}
    body div.navbar-brand img{ height: 40px;}

    div.layout-3-images-description > .row { flex-direction: column-reverse;}
    div.description-wrapper{ padding: 30px 0 0;}
    div.paragraph-section{overflow: hidden;}
    
    div.qcfc-statistics-wrapper {flex-wrap: wrap; gap: 25px; justify-content: center;}
    div.qcfc-statistics-wrapper > .container{ flex-wrap: wrap; gap: 10px 25px;}
    div.statistic-item img{ max-width: 35px; display: none;}
    div.statistic-item h5{ font-size: 1rem; letter-spacing: 1px;}
    div.statistic-item span { grid-area: span; font-size: 0.75rem; padding-right: 0;}
    div.statistic-item{ grid-auto-columns: auto 1fr; grid-template-areas: 'h5' 'span-text'; text-align: center; max-width: 40%;}
    .content-view-title.paragraph-section:has(.w-background) .view-header-content{margin-inline: 10px; align-items: baseline;}
    div.news-card{ padding: 10px 20px;}
    .deadlines-card-wrapper div.news-card{ padding: 10px;}
    .statistic-item:not(:nth-child(1)):not(:nth-child(2)) img{ max-width: 30px; padding: 3px;}
    article.homepage-content .banner-section{padding-bottom: 30px;}
    div.news-card-wrapper li:not(:last-child) .news-card{border: none; margin-bottom: 10px;}
    div.deadlines-card-wrapper li:not(:last-child) .news-card{border: none; margin-bottom: 10px;}
    .view-display-id-upcoming_deadlines .view-header-content { flex-direction: column;}
    div.webform-wrapper-left{    padding: 20px;}
    div.webform-wrapper{ padding: 10px 20px;}

    div.card-item-wrapper{margin-bottom: 20px;}

    div.error-wrapper h1{font-size: 6rem; margin-bottom: -5px; -webkit-text-stroke: 2px var(--qcfc-yellow);}
    div.error-wrapper h4{font-size: 1.75rem;}
    div.error-wrapper{padding-inline: 0;}
    div.error-wrapper a { font-size: 0.7rem; padding-inline: 20px;}
    body:has(.error-page) section.banner-section {height: 100dvh;}

    body:has(.thankyou-page) section.banner-section { height: max-content;}
    div.thankyou-page{padding: 20px;}
    div.thankyou-page p{padding-inline: 0;}
    div.thankyou-page a{ font-size: 0.7rem; padding-inline: 20px;}
    div.thankyou-page{margin: 0 auto;}

    div.layout-image-description-uneven .image-wrapper{padding-inline: 30px;}
    div.qpm-project-item h5{font-size: 1.2rem;}
    div.crew-wrapper,
    div.logline-wrapper { padding-inline: 10px;}
    .qpm-projects-content > .paragraph-section {
        padding-inline: 20px;
    }
    .qpm-projects-content .banner-title {font-size: 2.25rem;}
    div.news-update-item-img img{margin-bottom: 15px;}

    div.layout-views-header h3{font-size: 3rem;}
    div.vfl .owl-nav button.owl-next{right: 20px;}
    div.vfl .owl-nav button.owl-prev{left: 20px;}
    div.vfl .owl-nav button{scale: 0.8;}
    article.take-to-qc-page .banner-description{width: 100%; max-width: 100%; margin-bottom: 40px;}
    div.landing-page-content .banner-section>.container { flex-direction: column;}
    .landing-page-content.take-to-qc-page div.layout-video-w-description,
    .landing-page-content.take-to-qc-page div.layout-view-title-and-description{padding-inline: 5px;}
    div.layout-video-w-description .description-wrapper > h3{font-size: 2.5rem;}
    div.video-wrapper{padding-right: 0;}
    div.layout-video-w-description .row { flex-direction: column-reverse;}
    article.take-to-qc-page .banner-section > .container.vfl{ top: 40%;}
    article.take-to-qc-page .banner-section > .container:not(.vfl) {padding-inline: 20px;}
    div.layout-video-w-description .description-wrapper { padding: 0 0 30px 0;}
    div.film-location-wrapper-gallery { position: relative; width: 100%;}
    div.layout-view-title-and-description.paragraph-section > .container { padding: 20px;}
    div.layout-video-w-description { padding-inline: 20px; }
    div.content-search-film-location > .container { padding: 0;}    

    div.search-location-page{padding-top: 30px;}
    div.s-keyword-wrapper{margin-top: 30px;}
    div.views-field .modal-header{flex-wrap: wrap; flex-direction: column-reverse; padding: 30px;}
    h1.modal-title{ margin-bottom: 10px; line-height: 1.2;}
    div.digicat-item > h3.ui-accordion-header + .ui-accordion-content{ flex-direction: column; padding-inline: 15px;}
    div.digicat-item > h3.ui-accordion-header + .ui-accordion-content > .digicat-item{width: 100%;}
    .content-view-title.paragraph-section .container:has(.digicat-item),
    section.container-fluid .main-contents > div:has(.digicat-item) {
        padding: 0;
    }
    .node-145 .main-contents {padding-inline: 0 !important;}
    div.content-tables-items > img{bottom: 0; width: auto; height: 100%;}
    div.table-item table td{font-size: 0.8rem;}
}
@media screen and (max-width: 1000px) {
}
@media screen and (max-width: 1200px) {
    
}
@media screen and (min-width: 1200px) {

}
@media screen and (min-width: 1380px) {
}