/* body{
font-family:serif !important;
} */
/* 
.hero-section{
    background-image:linear-gradient(to right,rgb(19, 66, 122),rgb(25, 52, 109),rgba(16, 73, 119, 0.3)),url("../assets/images/hero-bg.jpg");
  } */


.filter{
display:flex;
justify-content:center;

}

.filter a{
margin-right:30px;
}

.col-md-6{
padding: 5;
}
.col-md-6 figure{
position:relative;
height:370px !important;
}

.col-md-6 figure img{
width:100%;
height:100%;
object-fit: cover;
object-position: center;
}

.col-md-6 figure figcaption{
  position:absolute;
  width:350px !important;
}

.col-md-6 figure span{
    background-color: red !important;
    color:white;
    padding:5px;
    position:absolute;
    top:0;

}

    .col-md-6 figure figcaption b{
        position:absolute;
        font-size:23px;
        margin-top:-80px;
        color:white !important;
        font-weight: bold;
        text-shadow: 0px 0px 3px black;}

    /* .col-md-6 figure figcaption small{
     
        font-size:14px !important;
        margin-top:-90px !important;
        color:black;
      
          } */

.p_details{
font-size:14px;
}          

.other-news{
display: flex;
justify-content:start;
align-items:center;
gap:15px;
flex-wrap: wrap;
margin:10px 0px;

}

.other-news img{
width:150px;
height:120px;
    }

    .other-news-details div{
    display:flex;
    justify-content: space-around;
    font-weight:bold;
    color:grey;
    font-size:14px;
    }

    .other-news-details h6{
      color:black;
      font-weight:bold;
        }

    .top_stories{
        display: flex;
        justify-content: start;
        align-items:center;
        gap:20px;
        flex-wrap: wrap;
    }


    .fa-check{
    background-color:grey;
    color:white;
    padding:5px;
    border-radius:50%;
    }

    .top_stories div{
     display:block;
    }

    .top_stories div h6{
      line-height:14px;
      margin-top:8px;
      font-weight:bold;

       }

    .top_stories div small{
        display:block;
       margin:1px 0px;
       font-weight: bold;
       color:grey;
         }

         
    .top_stories div{
        width:230px !important;
        height:200px !important;
        margin:5px;
         }
          
         .top_stories div img{
            width:100% !important; 
            height:100%;
            object-fit: cover;
             }


         .latest_stories {
          display:flex;
          justify-content:space-around;
          align-items:center;
          gap:10px;

         }

         .latest_stories .reporter{
            border-radius:50%;
            height:50px;
            width:50px;

         }
         .reporter_name{
        font-weight:bold;
        font-size:13px;

         }

         .latest_stories h6{
            font-weight:bold !important;
            margin:10px 0px;
           }

           .latest_stories small{
            color:grey;
            margin:10px 0px;
           }

           .latest_stories .read{
           display:flex;
           justify-content:space-between;
           margin-top:10px 0px;
          
           }

           .latest_stories p{
            font-size:14px;
            font-weight:bold;
            color:grey;
            margin-top:10px 0px !important;
            }

            .latest_stories_img img{
            width:200px;
        height:230px;
        object-fit: cover;
            }

            .upcoming_details .upcoming_read{
            display:flex !important;
            justify-content:space-around !important;
            gap:10px;

            }

            .upcoming_details .upcoming_read p{              
                color:grey;
                font-weight: bold;
                font-size:14px;
               
                }

                .upcoming_details img{              
                   width:150px;
                    }

            .upcoming_details{
                display:flex;
                justify-content:start;
                align-items:center;
                gap:20px;
                margin:10px 0px;
               
            }

            .upcoming_details h6{
              font-weight: bold; 
            }

            .ads-right{
                display:block;
                position: absolute;
                top:70px !important;
                margin-top:40px;
                right:5px;
                width:180px;
                box-shadow: 0px 0px 8px grey;
            }

            @media only screen and (max-width:767px) {
                .ads-right{
                    display:block;
                    position:relative;
                    top:0px !important;
                    margin-top:40px;
                    right:0;
                    width:100%;
                    box-shadow: 0px 0px 8px grey;
                }
            }

            .ads-right img{
             height:150px;
             width:100%;
             margin:10px 0px;
             object-fit:cover;
            }

            .positive{
                color:green
            }

            .negative{
                color:red
            }

            .comment-button{
              display:flex;  
              justify-content: center;
            }

            .comment-button a{
             color:black !important;
             padding:10px !important;
             margin-right:10px;
             border:1px solid grey !important;
             font-size:14px;
             cursor: pointer !;
            }

            .comment-button a:hover{
            background-color:rgb(43, 151, 43);
            color:white !important;
            border-radius:10px;
            cursor: pointer;
            }


             .comment-section{
                margin-top:20px;
             }

            .user-selection{
            float:right;
            }

            .user-selection select{
                border:1px solid transparent;
                box-shadow:0px 0px 3px grey;
                padding: 5px;
                font-size:14px;
                margin:8px 0px;
                }

            .commenter img{
                border-radius:50%;
                height:50px;
                width:50px;
            }

            .commenter span{
                font-size:14px;
                font-weight:bold;
                color:grey;
            }
            
            .commenter{
            margin:8px 0px;
            }

            .button-comments{
                margin-top:10px !important;
               display:flex !important;
               justify-content: end !important;
            }
            
            .commenter textarea{
              border:1px solid transparent;
              box-shadow: 0px 0px 8px grey;  
            }
            
            .comment-show{
            width:340px;
            height:380px;
            overflow-x:hidden !important;
            overflow-y:auto !important;
            background-color: #f0f0f0;
            padding:10px;
            position: relative;
            }

            .fa-circle{
            color: rgb(10, 73, 49);
            border:3px solid white;
            border-radius:50%;

            }

            .status{
              margin-left:-13px;
              margin-right:8px;
              position: relative;
              top:18px;

                
                }
            .comment-show p{
             font-size:14px;
            font-family: Arial, Helvetica, sans-serif;}

            .comment-show img{
                height:60px;
                width:60px;
                border-radius:50%;
            }

            .comment-show hr{
              border:1px solid rgb(228, 226, 226);
              width: 100%;
            }
              
            .commenter-name{
            font-weight:bold;
            font-size:14px;
            }

            .comment-options{
             display:flex;
             justify-content:space-around;
             
      
            }

            .comment-options .smiley{
                padding:4px 3px;
                color:grey;
            } 

            .comment-show .comment-likes,.comment-show .comment-ban{
                padding:3px 12px;
                cursor:pointer;
                ;

            }


            .comment-show .comment-likes:hover,.comment-show .comment-ban:hover{
                padding:3px 12px;
                cursor:pointer;
                color:blue;
                ;

            }

            .comment-show .btn-reply{
           border-right:1px solid grey;
           border-left: 1px solid grey;
           padding:2px 10px;}

           .comment-show .btn-reply:hover{
            color:blue;
           }

        .comment_reply_time .comment-time{
        opacity:0.7;
        font-size:13px;
        }

        .reply-container{
            
            display:block; 
            }  
    

        .comment-reply{
         cursor:pointer;
        }

        .btn-file{
        background-color: #7a7a7a;
        border:1px solid #7a7a7a;
        padding:3px 10px;
        }
    
        
#pop{
    background-color:whitesmoke;  
    position:fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 450px;
    height:380px;
    padding:5px;
    z-index: 9;
    box-shadow: 0 5px 30px rgba(0,0,0,.30);
    transition: 0.3s;
    display:none;
    }
    
    @media screen and (max-width:768px){
        
        
        #pop{
  
    width: 80%;
 
    } 
        
    }
    
    
    
    
   
    #close{
 
        position: absolute;
        top: -10px;
        left: 95%;
        margin-top: -10px;
        color:red;
        cursor: pointer;
        font-size:18px;
        background-color: white;
        border-radius: 50%;
        padding:0px 6px;
        }
    
    
        #close:hover, #close:focus{
        opacity: 0.6;
      
       
        
        }
    
        video{
            width:100%;
            height:100%;
        }

        .btn-play{
            cursor:pointer;
        }

        .btn-play:hover{
           opacity:0.8;
        }