/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/


/* 
    Created on : 09-Dec-2021, 13:36:37
    Author     : Jafran Mjm
*/

@import '../config';
@media screen and (max-width: 1141px) {
    .featured-posts .post {
        p {
            display: none;
        }
        h5 {
            margin-bottom: 20px;
        }
    }
    .banner {
        .text {
            display: block;
        }
    }
    .banner .owl-nav button{
        bottom: 221px;
        &.owl-next{
            left: 41px;
        }
        &.owl-prev{
            right: auto;
            left: 87px;
        }
    }
    .featured-posts{
        display: none;
    }
}

@media screen and (max-width: 1000px) {
    .banner{
        .text{
            padding: 20px;
            height: 150px;
            .date-author{
                span {
                    bottom: 20px;
                    &.by{
                        right: 20px;
                    }
                    &.date{
                        left: 20px;
                    }
                }
            }
        }
        .owl-nav button{
            bottom: 170px;
            &.owl-next{
                left: 20px;
            }
            &.owl-prev{
                right: auto;
                left: 66px;
            }
        }
    }
}
@media screen and (max-width: 850px) {
    .banner .text{
        .title{
            display: block;
            font-size: 17px;
            line-height: 20px;
            margin-bottom: 10px;
        }
    }
}
@media screen and (max-width: 700px) {
    .content-sidebar{
    margin-top: 20px;
    }
}
@media screen and (max-width: 600px) {
    .featured-posts {
        display: none;
    }
    .banner {
        .text{
            height: 180px;
        }
        .owl-nav button{
            bottom: 200px; 
            width: 25px;
            height: 25px;
            &.owl-prev{
                left: 50px;
            }
        }
    }
} 
@media screen and (max-width: 420px) {
    .banner {
        .text{
            height: 200px;
        }
        .owl-nav button{
            bottom: 220px; 
        }
    }
}