CybroAddons/theme_splash/static/src/scss/layout/_sidebar.scss

.sidebar {
    .sidebar_content {
        padding: 30px 30px;
        border: 1px solid;
        border-radius: 5px;
        border-color: $color-border;
        margin-bottom: 30px;
        h4 {
            color: $color-brand;
            font-size: 20px;
            font-weight: 600;
            padding-bottom: 10px;
        }

        form {
            border: 1px solid;
            border-color: $color-border;
            border-radius: 5px;
            display: flex;
            align-items: center;
            padding: 10px 20px;
            a {
                color: $color-brand;
                text-decoration: none;
            }
            input {
                border: none !important;
         
            }
        }

        .all_categories {
            padding-left: 0;
            a {
                display: flex;
                justify-content: space-between;
                align-items: baseline;
                color: $color-font2;
                border: 1px solid;
                border-color: transparent;
                border-bottom-color: $color-border;
                text-decoration: none;
                &:hover {
                    color: $color-sub-head;
                }

                li {
                    padding-bottom: 15px;
                    margin-top: 20px;
                    font-size: 18px;

                    &:hover {
                        animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
                        transform: translate3d(0, 0, 0);
                        backface-visibility: hidden;
                        perspective: 1000px;
                    }
                    span {
                        color: $color-font2;
                        &:hover {
                            color: $color-sub-head;
                        }
                    }
                }
            }
        }

        .recent_wrapper{
            display: flex;
          
            .img_wrapper{
                max-width: 100px;
                @media screen and(max-width:996px) {
                    margin-bottom: 30px
                }

                @media screen and(max-width:996px) {
                    max-width:200px
                }

                img{
                    width: 100%;
                    border-radius: 5px;
                }
            }
            .rec_post_info{
                margin-left: 10px;
                padding-top: 20px;

                @media screen and(max-width:1200px) {
                    padding-top: 0;
                }

                @media screen and(max-width:996px) {
                   padding-top: 50px;
                }

                @media screen and(max-width:394px) {
                    padding-top: 10px;
                }
                h4{
                    color: $color-brand;
                    font-size: 20px;
                    font-weight: 600;

                    @media screen and(max-width:1200px) {
                        font-size: 16px;
                    }

                    @media screen and(max-width:996px) {
                        font-size: 20px;
                    }

                    @media screen and(max-width:394px) {
                        font-size: 18px;
                    }
                    &:hover{
                        color:$color-sub-head;
                    }
                }
            }
        }

        .insta_wrapper{

            display: grid;
            grid-template-columns: 1fr 1fr 1fr;

            .insta_img{
                max-width: 88px;

                @media screen and(max-width:1200px) {
                    max-width:70px
                }

                @media screen and(max-width:996px) {
                    max-width:200px
                }

                @media screen and(max-width:786px) {
                    max-width:135px
                }
                @media screen and(max-width:520px) {
                    max-width:115px
                }
                @media screen and(max-width:450px) {
                    max-width:100px
                }
                @media screen and(max-width:400px) {
                    max-width:80px
                }
                img{
                    width: 100%;
                    border-radius: 5px;
                }
            }
        }

        .adv_img{
            img{
                width: 100%;
                border-radius: 5px;
            }
        }

        .blog_social_icon {
            margin-top: 30px;
            ul {
                display: flex;
                padding-left: 0;
                li {
                    color: $color-white;
                    font-size: 14px;
                    width: 36px;
                    height: 36px;
                    border-radius: 50%;
                    margin-right: 20px;
                    text-align: center;
                    padding-top: 11px;

                    &:hover {
                        background-color: $color-sub-head;
                    }
                }

                .fb {
                    background: #3b5998;
                    color: #fff;
                    &:hover {
                        background: #2a4b92;
                    }
                }
                .tw {
                    background: #1da1f2;
                    color: #fff;
                    &:hover {
                        background: #0a8ee0;
                    }
                }
                .in {
                    background: #f44336;
                    color: #fff;
                    &:hover {
                        background: #f12c1d;
                    }
                }
            }
        }

        p{
            color: $color-font2;
            font-size: 16px;
            letter-spacing: 0.1rem;
        }
    }
}

@keyframes shake {
    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}