.collapsing {
    transition: height .0s ease;
}

@media (max-width: 1024px) {
    
    .container-invert {
        flex-direction: column-reverse !important;
    }
    
    .container-2col .container-item {
        -ms-flex: 0 0 100.000000%;
        flex: 0 0 100.000000%;
        max-width: calc(100.000000% - 0px);
    }
    
    .container-3col .container-item {
        -ms-flex: 0 0 100.000000%;
        flex: 0 0 100.000000%;
        max-width: calc(100.000000% - 0px);
    }
    
    .container-4col .container-item {
        -ms-flex: 0 0 50.000000%;
        flex: 0 0 50.000000%;
        max-width: calc(50.000000% - 0px);
    }
    
    #pagesidenavcontent {
        width: 35%;
    }
    
    #navbar_logo {
        display: block;
        width: 100%;
        text-align: center;
    }
    
    #bar-logo .lview .w3-bar-item.w3-right {
        /*display: block;
        width: 100%;
        text-align: center;
        padding: 5px !important;
        border: 0px;*/
        padding: 5px 10px !important;
    }
    
    #bar-mainnav #offcanvasmnav {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1040;
        display: flex;
        flex-direction: column;
        max-width: 100%;
        visibility: hidden;
        background-color: #fff;
        background-clip: padding-box;
        outline: 0;
        /*transition: transform .5sease -in-out;*/
        transition: none;
    }
    
    #bar-mainnav #offcanvasmnavbg.collapse.show {
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(33, 33, 33, 0.9);
        width: 100%;
        height: 100%;
        z-index: 1000;
    } 
    
    #bar-mainnav #offcanvasmnav.collapse.show {
        visibility: visible;
        overflow: auto;
        margin: 25px 50px;
        width: calc(100% - 100px);
        border: 1px solid #777;
        max-height: calc(100vh - 50px);
    } 
    
    #bar-mainnav #offcanvasmnav.collapse.show a.w3-bar-item,
    #bar-mainnav #offcanvasmnav.collapse.show .w3-dropdown-hover > a.w3-button {
        text-align: left;
        padding: 6px 15px;
        display: table;
        width: 100%;
    } 
    
    #bar-mainnav #offcanvasmnav.collapse.show .w3-dropdown-hover > .w3-dropdown-content {
        display: block;
        position: relative;
    } 
    
    #bar-mainnav #offcanvasmnav.collapse.show .w3-dropdown-hover > .w3-dropdown-content .w3-bar-item {
        border: 0px;
        padding-left: 35px;
    } 
    
    #bar-mainnav button.w3-bar-item.w3-button {
        display: block;
    }
    
    .container-item {
        flex: 2;
    }
    
    .flex-2grids {
        flex: 3 !important;
    }
    
    .nav_active {
        border-top: 0px !important;
        border-left: 5px solid var(--theme-color) !important;
    }
    
    #bc {
        display: none;
    }
    
    .dce-statistics .ce-bodytext {
        font-size: 220%;
    }
    
    .carousel-item {
        max-height: 300px;
        height: 250px;
        background-size: cover;
    }
    
}

@media (max-width: 768px) {
    .container-4col .container-item,
    .container-item,
    .flex-2grids
     {
        -ms-flex: 0 0 100.000000%;
        flex: 0 0 100.000000%;
        max-width: calc(100.000000% - 0px);
    }
        
    #pagesidenavcontent {
        float: none;
        width: auto;
        margin: 25px;
    }
    
    .dce-contact header {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .dce-contact .avatar {
        width: 28%;
        padding: 25px 20px;
    }
    
    .dce-contact footer i.fa, .dce-contact footer span{
        font-size: 95%;
    }
    .dce-contact footer i.fa::before{
        font-size: 24px;
    }
    
    
    .dce-statistics .ce-bodytext {
        font-size: 220%;
    }
}


@media (max-width: 600px) { 
    
    .dce-statistics .ce-bodytext {
        font-size: 290%;
    }
    
    .dce-contact .avatar{
        width: 50%;
    }
    
    .dce-contact .avatar img{
        border: 5px solid var(--theme-color)
    }
}