@media only screen and (max-width: 480px) {  
    header .top-bar,
    .top-bar .date-time {
        text-align: center;
    }

    .top-bar #date {
        margin-top: 20px;
    }

    .trending-news {
        text-align: center;
    }

    .breaking-news-title {
        float: none;
    }

    .trending-content {
        width: 100% !important;
    }

    .trending-content-marq {
        width: 100% !important;
    }

    .layout-1-category-post:first-child .content-wrapper {
        padding-left: 0;
        margin-top: 20px;
    }

    .both-sidebars .container .col-left,
    .both-sidebars .container .col-right {
        padding-left: 0;
    }

    .top-bar .date-time {
        margin-top: 0 !important;
    }

    .highlight-area-content .content-wrapper {
        padding: 110px 10px;
    }

    .featured-category-post:first-child .content-wrapper .content {
        width: 45%;
    }

    article .meta-item {
        display: inline-block;
    }

    .archive article {
        width: 100% !important;
    }

    #pre-loader {
        left: 43%;
    }

    .blog.single-no-sidebar article {
        width: 100% !important;
    }

    .style2 .top-social-wrap,
    .style2 .topbar-menu,
    .style3 .top-social-wrap,
    .style3 .topbar-menu {
        text-align: center;
    }

    .style2 .top-social-wrap,
    .style3 .top-social-wrap {
        margin: 20px 0;
    }
    
}

@media only screen and (max-width: 767px) {
    .top-menu .menu-header {
        display: block;
        position: relative;
        top: 0;
    }

    .top-menu .navbar-collapse {
        padding-top: 0px;
        width: 100%;
        margin: 0px;
        display: none;
    }

    .hd-bar.left-align.visible-sidebar {
        display: block;
    }

    .navbar-toggle {
        float: none;
    }

    button.navbar-toggle:focus {
        outline: auto 5px -webkit-focus-ring-color;
    }

    .top-menu .menu-header button {
        display: inline-block;
        height: unset;
        width: unset;
        border: 0;
        color: #000;
    }

    .top-menu .menu-header span {
        color: #000;
    }

    .both-sidebars .container .col-left,
    .both-sidebars .container .col-right {
        float: none;
        width: 100%;
    }

    .both-sidebars .container .col-middle {
        width: 100%;
    }

    .featured-category-post {
        width: 100%;
    }

    .layout-1-category-post:first-child .col-first,
    .layout-1-category-post:first-child .col-second {
        width: 100%;
    }

    .section-layout-1-area-box .col-first,
    .section-layout-1-area-box .col-second {
        width: 100%;
    }

    .featured-category-post:first-child .content h3 a {
        line-height: 0.9;
        padding-left: 5px;
        font-size: 14px;

    }

    .breaking-news-title {
        float: none;
    }

    .trending-news {
        text-align: center;
    }

    .trending-content{
        width: 100% !important;
    }

    .trending-content-marq {
        width: 100% !important;
    }

     .trending-content.owl-carousel.owl-loaded{
        float: none;
    }

    .single .title, .single .content {
        width: 100%;
        margin: 0 auto;
    }

    .single #comments {
        width: 100%;
        margin: 0 auto;
        padding-top: 0;
    }

    .top-bar .date-time {
        margin-top: -22px;
    }

    .footer-menu ul>li {
        width: 100%;
    }

    .footer-menu ul>li.dropdown {
        margin-top: 30px;
    }

    li.menu-header-search {
        display: none !important;
    }

    .archive article {
        width: 49%;
    }

    .both-sidebars .container .col-left,
    .both-sidebars .container .col-right {
        padding: 0;
    }

    .style2 .header-wrapper .logo {
        width: 70%;
    }

    .style2 .top-menu-wrapper {
        width: 30%;
    }

    .style2 .top-social-wrap,
    .style2 .topbar-menu {
        text-align: center;
    }

    .style2 .top-social-wrap {
        margin: 20px 0;
    }

    .style3 .header-wrapper .logo {
        width: 100%;
        text-align: center;
    }
}    

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .top-menu .navigation > li > ul,
    .top-menu .navigation > li > ul > li > ul {
        display: block !important;
        visibility: hidden;
        opacity: 0;
    }

    .top-menu .navigation > li {
        overflow: hidden;
    }

    .trending-news {
        text-align: center;
    }

    .trending-content-marq {
        width: 100% !important;
    }

    .trending-content {
        width: 100% !important;
    }

    .trending-content.owl-carousel.owl-loaded {
        float: none;
    }

    .both-sidebars .container .col-left,
    .both-sidebars .container .col-right {
        float: none;
        display: inline-block;
        width: 49.5%;
        clear: both;
    }

    .both-sidebars .container .col-middle {
        width: 100%;
    }

    .featured-category-post {
        width: 100%;
    }

    .layout-1-category-post:first-child .col-first,
    .layout-1-category-post:first-child .col-second {
        width: 100%;
    }

    .section-layout-1-area-box .col-first,
    .section-layout-1-area-box .col-second {
        width: 100%;
    }

    .featured-category-post:first-child .content h3 a {
        line-height: 0.9;
        padding-left: 5px;
        font-size: 14px;

    }

    .layout-1-category-post:first-child .content {
        margin-top: 20px;
    }

    .featured-posts-wrapper {
        margin-bottom: 50px;
    }

    .single .title, .single .content {
        width: 100%;
        margin: 0 auto;
    }

    .single #comments {
        width: 100%;
        margin: 0 auto;
        padding-top: 0;
    }

    .style3 .header-wrapper .logo {
        width: 40%;
    }

    .style3 .top-advertisement-wrapper {
        float: right;
         width: 60%;
    }
}


@media only screen and (max-width: 991px) {
    #navbar-collapse-2 .navigation li.dropdown .fas {
        display: block;
    }   
}

@media only screen and (max-width: 1200px) {
      .trending-content-marq {
        width: 84%;
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1400px) {
    .right-sidebar .trending-content,
    .left-sidebar .trending-content {
        width: 83% !important;
    }

    .both-sidebars .trending-content {
        width: 84% !important;
    }

    .trending-content-marq {
        width: 83% !important;   
    }
}