/* Small devices (landscape phones, 768px and down) */
/*
@media (max-width: 579px) {
    header .nav .left .logo .environment{
        background-color: rgba(255,255,255,.3);
        padding: 2px 4px;
        font-size: 9px;
        border-radius: 2px;
        left: 78px;
        top: 22px;
        right: unset;
        box-shadow: none;
    }
    header .nav{
        width: 320px;
        height: 70px;
    }
    header .nav .left .logo{
        width: 100px;
    }
    header .nav .left .menu .mobile-menu-button{
        margin-left: 16px;
    }
    header .nav .left .menu > ul{
        left: 0;
    }
    header .nav .right select{
        display: none;
    }
    header .nav .right > ul > li.link-with-label > a{
        max-width: 100px;
    }
    header .nav .right > ul > li > a{
        padding: 0 4px;
        font-size: 14px;
    }
    .container{
        width: 320px;
    }
    .container-small{
        width: 320px;
        margin: 0 auto;
    }

    section#one-page .one-page-container{
        width: 320px;
        min-width: 280px;
    }

    .blocker{
        padding: 0;
    }
    .modal{
        padding: 24px;
    }
    .modal .small-modal{
        width: 260px;
    }
    .modal .large-modal{
        width: 280px;
    }

    header .slogan{
        min-width: auto;
        max-width: none;
    }
    header .slogan p{
        font-size: 24px;
    }
    
    section#mobile-app .mobile-app{
        display: block;
        text-align: center;
    }
    section#mobile-app .mobile-app .app-image{
        width: auto;
        margin-bottom: 16px;
    }
    section#mobile-app .mobile-app .app-presentation{
        width: auto;
    }

    .form-column-2{
        display: block;
    }
    .form-column-2 fieldset{
        width: 100%;
    }
    section#form h1{
        font-size: 24px;
    }

    section#help .help ul li h2{
        padding: 16px 40px 16px 16px;
    }

    section#content .presentation{
        display: block;
        text-align: center;
    }
    section#content .presentation .item{
        width: auto;
    }

    .news-container{
        display: block;
    }
    .news-container .news{
        margin: 0 auto 16px auto !important;
    }
    .news-detail{
        display: block;
    }
    .news-detail img{
        width: 100%;
        height: auto;
        margin-right: 0;
        margin-bottom: 32px;
        position: relative;
        top: unset;
    }

    .home-section-title h1{
        font-size: 20px;
    }

    section#wallet .wallet{
        display: block;
    }
    section#wallet .wallet > div{
        width: auto;
        margin-bottom: 16px;
    }

    section#list .table-container{
        width: 100%;
        min-height: 200px;
        overflow-x: auto;
    }
    section#list table thead{
        position: relative;
        top: unset;
    }
    section#list table th, section#list table td{
        white-space: nowrap;
    }

    section#bakikart .bakikarts-container{
        display: block;
    }
    section#bakikart .bakikarts-container .bakikart-item,
    section#bakikart .bakikarts-container .bakikart-add-more-button{
        width: 265px;
        height: 150px;
        margin: 0 auto 16px auto;
    }

    section#bakikart-detail .bakikart-detail{
        display: block;
        padding: 16px;
    }
    section#bakikart-detail .bakikart-detail > div{
        width: inherit;
    }
    .bakikart-item.bakikart-item-single{
        margin: 0 auto 16px auto;
    }
    section#bakikart-detail .bakikart-detail > div:last-child{
        width: auto;
        justify-content: space-evenly;
    }
    section#bakikart-detail .bakikart-detail a{
        font-size: 14px;
    }
    section#bakikart-detail .bakikart-detail a i{
        font-size: 16px;
    }

    footer{
        padding: 32px 0 64px 0;
    }
    footer .top{
        display: block;
        text-align: center;
    }
    footer .top .logo{
        margin: auto;
    }
    footer .top select{
        margin: 0 auto 16px auto;
    }

    footer .middle{
        padding: 16px 0;
    }
    footer .middle .menu ul li{
        display: block;
        margin: 8px 0;
    }
    footer .middle .menu ul li a{
        text-align: center;
    }
    footer .middle .social{
        width: 150px;
    }
    footer .middle .social ul li{
        display: block;
        margin: 0 0 8px 0;
    }

    footer .middle .stores{
        width: 150px;
    }
    footer .middle .stores ul li{
        display: block;
        margin: 0 0 8px 0;
    }
    
    footer .bottom{
        height: 160px;
        padding-bottom: 32px;
    }
}
*/

/* Small devices (landscape phones, 768px and down) */
/*@media (min-width: 580px) and (max-width: 775px) {*/
@media (max-width: 775px) {
    header .nav{
        width: 570px;
    }
    .container{
        width: 570px;
    }
    .container-small{
        width: 420px;
        margin: 0 auto;
    }

    section#mobile-app .mobile-app .app-image{
        width: 300px;
    }
    section#mobile-app .mobile-app .app-presentation{
        width: 270px;
    }

    .form-column-2{
        display: block;
    }
    .form-column-2 fieldset{
        width: 100%;
    }

    .news-container{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .news-container .news:nth-child(2n+1){
        margin: 0 16px 32px 0;
    }
    .news-container .news:nth-child(2n+2){
        margin: 0 0 32px 16px;
    }
    .news-detail{
        display: block;
    }
    .news-detail img{
        width: 100%;
        height: auto;
        margin-right: 0;
        margin-bottom: 32px;
        position: relative;
        top: unset;
    }

    section#bakikart .bakikarts-container{
        grid-template-columns: repeat(2, 1fr);
    }
    section#bakikart .bakikarts-container .bakikart-item,
    section#bakikart .bakikarts-container .bakikart-add-more-button{
        width: 265px;
        height: 150px;
    }

    section#promotional-video-two-column .videos{
        display: block;
    }
    section#promotional-video-two-column .videos .video-container{
        margin: 0 0 16px 0 !important;
    }

    footer .top select{
        display: none;
    }

    footer .middle{
        padding: 16px 0;
    }
    footer .middle .menu ul li{
        display: block;
        margin: 8px 0;
    }
    footer .middle .menu ul li a{
        text-align: center;
    }
    footer .middle .social{
        width: 150px;
    }
    footer .middle .social ul li{
        display: block;
        margin: 0 0 8px 0;
    }

    footer .middle .stores{
        width: 150px;
    }
    footer .middle .stores ul li{
        display: block;
        margin: 0 0 8px 0;
    }
    
    footer .bottom{
        height: 160px;
        padding-bottom: 32px;
    }

    .modal .large-modal{
        width: 400px;
    }
    section#bakikart-detail .bakikart-detail-container .bakikart-detail-subdata .last-financial-activities{
        padding-bottom: 16px;
    }
    section#bakikart-detail .bakikart-detail-container .bakikart-detail-subdata .last-financial-activities p em{
        display: block;
    }
}

/* Small devices ~ Medium devices (landscape phones, 992px and down) */
@media (max-width: 1005px) {
    header .nav .left .menu .mobile-menu-button{
        display: flex;
        justify-content: space-evenly;
        flex-direction: column;
    }
    header .nav .left .menu > ul{
        position: absolute;
        display: none;
        background-color: #fff;
        padding: 16px 0;
        border-radius: 5px;
        box-shadow: 0 3px 5px rgb(0 0 0 / 20%);
    }
    header .nav .left .menu > ul > li {
        margin: 0;
        display: block;
    }
    header .nav .left .menu > ul > li > a {
        color: #00468C;
        display: block;
        padding: 0 16px;
        line-height: 36px;
        border-radius: 0;
    }
    header .nav .left .menu > ul > li > a:hover,
    header .nav .left .menu > ul > li > a.active {
        background: #ddd;
    }
    header .nav .left .menu > ul > li > ul {
        display: block;
        position: relative;
        padding: 0;
        background: none;
        border-radius: 0;
        box-shadow: none;
    }
    header .nav .left .menu > ul > li.dropdown-menu > a{
        display: none;
    }
    header .nav .left .menu .mobile-menu-button:hover + ul,
    header .nav .left .menu > ul:hover{
        display: block;
    }

    section#mobile-app .mobile-app .app-presentation > p{
        max-width: 100%;
    }
    section#mobile-app .mobile-app .app-presentation ul{
        width: 100%;
        display: block;
        grid-template-columns: none;
    }
    section#mobile-app .mobile-app .app-presentation ul li{
        margin-bottom: 16px;
    }

    section#bakikart-detail .bakikart-detail-container .bakikart-detail-header .button-list a{
        font-size: 14px;
        margin-left: 16px;
    }
    section#bakikart-detail .bakikart-detail-container .bakikart-detail-header .button-list a i{
        font-size: 18px;
    }
    section#bakikart-detail .bakikart-detail-container .bakikart-detail-subdata .last-financial-activities{
        top: 0;
        left: 260px;
        padding-top: 16px;
    }
    section#bakikart-detail .bakikart-detail-container .bakikart-detail-subdata .last-financial-activities h1{
        margin-bottom: 16px;
        color: #00468C;
    }
    section#bakikart-detail .bakikart-detail-container .bakikart-detail-subdata .last-financial-activities h1 i{
        color: #00468C;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 776px) and (max-width: 1005px) {
    header .nav{
        width: 760px;
    }
    .container{
        width: 760px;
    }
    .container-small{
        width: 580px;
        margin: 0 auto;
    }
    section#bakikart .bakikarts-container{
        grid-template-columns: repeat(3, 1fr);
    }
    section#bakikart .bakikarts-container .bakikart-item,
    section#bakikart .bakikarts-container .bakikart-add-more-button{
        width: 230px;
        height: 130px;
    }

    footer .middle{
        padding: 16px 0;
    }
    footer .middle .social{
        width: 150px;
    }
    footer .middle .social ul li{
        display: block;
        margin: 0 0 8px 0;
    }

    footer .middle .stores{
        width: 150px;
    }
    footer .middle .stores ul li{
        display: block;
        margin: 0 0 8px 0;
    }

    .modal .large-modal{
        width: 500px;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 1006px) and (max-width: 1220px) {
    header .nav{
        width: 990px;
    }
    .container{
        width: 990px;
    }
    section#bakikart .bakikarts-container{
        grid-template-columns: repeat(3, 1fr);
    }
    section#bakikart .bakikarts-container .bakikart-item,
    section#bakikart .bakikarts-container .bakikart-add-more-button{
        width: 310px;
        height: 170px;
    }
}