#post-306 .about-cards .col{ flex: auto}

@media (pointer: coarse) and (hover: none){
    header {
        background: url('../assets/images/banner.jpg') black no-repeat center top scroll;
        background-size: cover;
    }
    header video {
        display: none;
    }
}

/* ============ desktop view ============ */
@media all and (min-width: 992px) {
    .navbar .has-megamenu{position:static!important;}
    .navbar .megamenu{left:0; right:0; width:100%; margin-top:0;}
}

/*Portrait phones is ung main css mo kaya wag ka mag hanap here*/
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .navbar .megamenu .col-megamenu{ border-right: 1px solid #DDD;}
    .navbar .megamenu .col-megamenu:nth-child(2){ border:none}
    .nav-tabs .nav-item{ width: auto}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .navbar .megamenu .col-megamenu{ border-right: 1px solid #DDD;}
    .navbar .megamenu .col-megamenu:nth-child(3){ border:none}
    #graphic_divider1{ margin-top: 50px}
    footer a.footer-brand{ margin: 0}
   .about-cards{margin-bottom: 90px}



    header .navbar a.navbar-brand, footer a.footer-brand, .brand{
        font-size: 27px;
        background-position: 162px top;
        width:350px;
        padding-top: 39px;
        margin-top: -40px;
        color: #FFF;
    }


}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px){
    .page-template-login{overflow: hidden}
    #login-text{ height: 100%; }
    #login-text .login-text-content{max-width: 70%;}
    #login-form{ overflow-y: auto; height: 100%}

    .btn-lg{ padding:1em 1.5em}
    .modal-md {
        --bs-modal-width: 600px;
    }
    .max-width-600{ max-width: 520px; margin-right:auto}
    h1.xl, h1.xxl{font-size: 75px;}
    h1.xxxl {
        font-size: 100px;
        line-height: 1;
        font-family: 'Arimo', sans-serif;
        font-weight: 800;
        margin: -10px 0 30px 0;
        padding: 0;
    }
    h1.xxxl sup{ font-size: 40px; top: -1.2em;  text-decoration: underline;}

    h1{ font-size: 60px}
    .h5, h5 {
        font-size: 1.25rem;
    }

    .gutter-margin-top{ margin-top: 100px}
    .gutter-margin-bottom{ margin-bottom: 100px}

    header h1{ font-size:50px }

    #live-banner #live-banner-announcement{ display: flex; align-items: center; flex-grow: 1}
    #live-banner .live-banner-msg{ display: flex}


    .home header {

        height: 100vh;
        min-height: 25rem;
        width: 100%;
    }
    .home header .header-content{ padding-bottom:122px; margin-top: 0}
    header{ min-height: 400px;}
    header .header-content {
        margin-top: 20px;

    }


    .home header video{ display: block}

    header .navbar .navbar-collapse{ margin-left: 0; margin-right: 0; margin-top: 0px; background: none; box-shadow: none}
    header .navbar .navbar-collapse li.nav-item{ border-bottom: none}
    header .navbar .navbar-collapse li.nav-item a.nav-link{color: #fff}
    header .navbar.fixed-top .navbar-collapse li.nav-item a.nav-link{color: #222}

    header .navbar .nav-item.has-megamenu a.btn-exclusive-project{ width: 100%; margin-left:15px; border-radius: 5px}

    header .navbar.fixed-top{ background: #fff; box-shadow: 0px 10px 21.25px 3.75px rgba(0, 0, 0, 0.06);
        top:-50px;
        opacity: 1;
        -webkit-transform: translateY(50%);
        transform: translateY(50%);
        -webkit-transition: all .4s ease;
        transition: all .4s ease;
        position: fixed;
    }
    header .navbar.fixed-top a.navbar-brand{ color: #222}

    header .navbar.fixed-top .navbar-brand img{ margin-top: -5px; margin-bottom: 5px; width: 80%}

    header .navbar.navbar-light a.navbar-brand{
        background: url(../assets/images/brand-dark1.png) 130px top no-repeat;
        width: 295px;
        font-size: 22px;
        padding-top: 38px;
        display: block;
        margin: 0;
        }

    header .navbar.navbar-light .nav-item a.nav-link{
        color:#222
    }
    header .navbar.navbar-light a.navbar-brand sup{ font-size: 10px;}
    header .navbar.navbar-light a.navbar-brand span{ font-size: 7px; line-height: 12px; padding-right: 0; }
    .home header .header-content h4{ font-size: calc(1.275rem + .3vw);}

    .navbar .megamenu .col-megamenu:nth-child(3), .navbar .megamenu .col-megamenu:nth-child(2){border-right: 1px solid #DDD;}


   #live-banner .dropdown:hover .dropdown-menu,
   #navbar .dropdown:hover .dropdown-menu{
        display: block;
    }

    #content{ margin-right: 40px}
    section{ margin: 150px auto;}

    .hands-bg{ display: block}

    .mission{background: #D3E3FA; margin-bottom: 100px; padding: 100px  0 50px 0}
    .mission h3{ font-size: 25px}
    .mission i{font-size: 70px}

    .nav-tabs .nav-item .nav-link:before {
        content: '';
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: #E3171D;
        opacity: 0;
        -webkit-transition: all 500ms ease;
        transition: all 500ms ease;
    }

    .nav-tabs .nav-item .nav-link:after {
        content: '';
        background-image: url(../assets/images/tab-arrow-1.png);
        background-repeat: no-repeat;
        background-position: bottom center;
        width: 19px;
        height: 10px;
        position: absolute;
        bottom: -7px;
        left: 50%;
        z-index: 10;
        background-color: #fff;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        opacity: 0;
        -webkit-transition: all 500ms ease;
        transition: all 500ms ease;
    }

    footer .footer-lead .socials{ justify-content: end }

    #offcanvass-form .referral-meta ul{ margin: 0; padding: 0 30px ; display: flex; justify-content: space-between}
    #offcanvass-form .referral-meta ul li{display: block; justify-content: normal; padding: 0; border-bottom: none }
    #offcanvass-form .referral-meta ul li:last-child{padding-bottom: 0}
    #offcanvass-form .referral-meta ul li label{ display: block; font-size: 12px; color:#a9a7a7; font-weight: 500}
    #offcanvass-form form.coordinator_notes label{text-align: right}

    /*
    #offcanvass-form form.coordinator_notes label{ margin-top:0px; margin-bottom: 15px; text-align: right}
    #offcanvass-form form.coordinator_notes .input-right{ margin-top: 0px; margin-bottom: 15px; text-align: right}
     */

    .back-to-home-btn{
        top: 50%;
        bottom: auto;
    }


}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  }