*{
	margin:0;
	paddiing:0;
	font-family: 'poppins', sans-serif;
	box-sizing: border-box;
}

/*** dark mode ****/
/*
:root{
	--body-color: #efefef;
	--nav-color: #1876f2;
	--bg-color: #fff;
	--primary-color: #edf2fc;
	--secondary-color: #212121;
}


.dark-theme{
	--body-color: #0a0a0a;
	--nav-color: #000;
	--bg-color: #000;
}


	body{

    / background: #efefef; /

    background: var(--body-color);
	}
*/


/*... post content css ***/

    .story-gallery{
    	margin-top: 20px;
    	display:flex;
    	justify-content: space-between;
    	margin-bottom: 20px;
    	width: auto;
    }

    .story{
    	flex-basis:18%;
    	padding-top: 32%;
    	position: relative;
    	
    	background-position: center;
    	background-size: cover;
    	border-radius: 10px;
    }

    .story img{
    	width:30%;
       position: absolute;
       width:45px;
       border-radius: 50%;
       top:10px;
       left: 10px;
       border: 5px solid #1876f2;

    }
   

   .story p{
     position: absolute;
     bottom:10px;
     width: 100%;
     text-align: center;
     color: white;
     font-size: 14px;
   }

   .story1{
   	background-image: linear-gradient(transparent, rgba(0,0,0,0.7)), url(images/status-1.png);
   }
   
   .story2{
   	background-image: linear-gradient(transparent, rgba(0,0,0,0.7)), url(images/status-2.png);
   }

.story3{
   	background-image: linear-gradient(transparent, rgba(0,0,0,0.7)), url(images/status-3.png);
   }

.story4{
   	background-image: linear-gradient(transparent, rgba(0,0,0,0.7)), url(images/status-4.png);
   }

.story5{
   	background-image: linear-gradient(transparent, rgba(0,0,0,0.7)), url(images/status-5.png);
   }


.story.story1 img{
	width:30%;
	top:unset;
	left:50%;
	bottom: 40px;
	transform: translateX(-50%);
	border:0;
}



.write-post-container{
	width:100%;
	background: #fff;
	border-radius: 6px;
	padding: 20px;
	color: #626262;
}


.user-profile{
	display:flex;
	align-items: center;
}

.user-profile img{
	/*width: 45px;*/
	width:20%;
	border-radius: 50%;
	margin-right: 10px;
}


.user-profile p{
	margin-bottom: -5px;
	font-weight: 500;
	color: #626262;
}

.user-profile small{
	font-size: 12px;
}


.post-input-container{
  padding-left:55px;
  padding-top: 20px;
}

.post-input-container textarea{
   width: 100%;
   color: #333;
   border:0;
   outline: 0;
   border-bottom: 1px solid #ccc;
   background: transparent;
   resize: none;
}

.add-post-links{
	display: flex;
	margin-top:10px;
}

.add-post-links a{
 text-decoration: none;
 display:flex;
 align-items: center;
 color: #626262;
 margin-right:30px;
 font-size: 13px;
}

.add-post-links a img{
   width: 20px;
   margin-right: 10px;
}

.post-container{
	width:100%;
	background: #fff;
	border-radius: 6px;
	padding: 20px;
	color: #626262;
	margin: 20px 0;
}

.user-profile span{
	font-size: 13px;
	color:#9a9a9a;
}

.post-text{
   color: #9a9a9a;
   margin: 15px 0;
   font-size: 15px;
   font-weight: 400;
}

.post-text span{
	color:#626262;
   font-weight: 500;
}

.post-text a{
	color: #1876f2;
	text-decoration: none;
}

.post-img{
   width: 100%;
   border-radius: 4px;
   margin-bottom:5px;
}

.post-row{
	display: flex;
	align-items: center;
	justify-content: space-between;
}



.post-row a{
	color: #9a9a9a;
}


.activity-icons div{
	display: inline-flex;
	align-items: center;
	margin-right: 30px;
}

.activity-icons div img{
	width: 18px;
	margin-right: 10px;
}

.post-profile-icon{
	display: flex;
	align-items: center;
}

.post-profile-icon img{
	width: 20px;
	border-radius: 50%;
	margin-right: 5px;
}


    .footer{
    	color:#888888;
    	font-size: 12px;
    	text-align: center;
    	margin-top: 10px;
    	display: flex;
    	align-items:  flex-start;
    	justify-content: center;
    	position: fixed;
    	bottom: 0;
    }



    /*---profile page ---*/
    .profile-container{
    	padding: 20px 15%;
    	color: #626262;
    }

    .cover-img{
    	width: 100%;
    	border-radius: 6px;
    	margin-bottom: 14px;
    }

    .profile-details{
    	background: var(--bg-color);
    	padding: 20px;
    	border-radius: 4px;
    	display: flex;
    	align-items: flex-start;
    	justify-content: space-between;
    }

    .pd-row{
    	display: flex;
    	align-items: flex-start;
    }

    .pd-image{
    	width:20%;
    	/*margin-right: 20px;*/
    	margin-right: 10px;
    	border-radius: 6px;
    }


   .pd-row div h3{
   	font-size:25px;
   	font-weight: 600;
   }

   .pd-row div p{
      font-size:13px;

   }

   .pd-row div img{
     width: 25px;
     border-radius: 50px;
     margin-top: 12px;
   }


  .pd-right button{
     background: #1876f2;
     border: 0;
     outline:0;
     padding: 6px 10px;
     display: inline-flex;
     align-items: center;
     color:#fff;
     border-radius:3px;
     margin-left: 10px;
     cursor: pointer;
  }


 .pd-right button img {
   height: 15px;
   margin-right: 10px;
 }

 .pd-right button:first-child{
   background:#e4e6eb;
   color:#000;
 }

 .pd-right{
 	text-align: right;
 }

 .pd-right a{
 	background: #e4e6eb;
 	border-radius: 3px;
 	padding: 12px;
 	display: inline-flex;
 	margin-top: 30px;
 }

.pd-right a img{
	width: 20px;
}


.profile-info{
	display: flex;

	justify-content: space-between;

	/*flex-wrap:wrap;*/
	/*flex-direction: row; */
}



.info-col{
 flex-basis: 33%;
 /*
 position: sticky;
 top:70px;
 align-self: flex-start;
 */
}

.post-col{
 flex-basis:65%;
}

.profile-intro{
	background: var(--bg-color);
	padding: 20px;
	margin-top: 20px;
	/*margin-bottom: 20px;*/
	border-radius: 4px;
}

.profile-intro h3{
  font-weight: 600;
}

.profile-intro p{
	font-size:14px;
}


.intro-text{
	/*text-align: center;*/
	margin: 10px 0;
	font-size: 15px;

}

.intro-text img{
	width: 15px;
	margin-bottom: -3px;
}

.profile-intro hr{
	border:0;
	height: 1px;
	background: #ccc;
	margin: 24px 0;
}


.profile-intro ul li{
	list-style: none;
	font-size: 15px;
	margin:15px 0;
	
	display: flex;
	align-items: center;
}


.profile-intro ul li img{
	width: 26px; 
	margin-right: 10px;

}

.title-box{
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.title-box a{
  text-decoration: none;
  /*color: #fff;*/
  font-size:12px;
}

.photo-box{
	display:grid;
	grid-template-columns:repeat(3, auto);
	grid-gap:10px;
	margin-top:30px;
}

.photo-box div img{
	width: 80px;
	cursor: pointer;
}



.friends-box{
	display:grid;
	grid-template-columns:repeat(3, auto);
	grid-gap:10px;
	margin-top:15px;
}

.friends-box div img{
	width: 80px;
	cursor: pointer;
	/*border-radius: 50%;*/
	padding-bottom: 20px; 
}

.friends-box div{
	position: relative;
}

.friends-box div p{
	position: absolute;
	bottom: 0;
	left:0;
	font-size:12px;
}

.event{
    display: flex;
    font-size: 14px;
    margin-bottom: 20px;
    margin-top:20px;
}


.left-event{
   border-radius: 10px;
   height: 55px;
   width: 55px;
   margin-right: 20px;
   margin-top: 5px;
   padding-top: 10px;
   text-align: center;
   position: relative;
   overflow: hidden;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.event p{
    font-size: 11px;
}

.event a{
    font-size: 12px;
    text-decoration: none;
    
}

.left-event span{
	 
	 position: absolute;
	 bottom: 0;
	 left: 0;
	 width: 100%;
	 background: #33cc33;
	 color: #fff;
	 font-size: 10px;
	 padding: 4px 0;
}

.right-event h4{
	font-size: 14px;
	font-weight: 400;
}


.sidebar-ads{
	width: 100%;
	margin-bottom: 20px;
	border-radius: 4px;
}

.online-list{
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}

.online-list .online img{
	width:40px;
	border-radius: 50%;
}

.online-list .online{
	width:40px;
	border-radius: 50%;
	margin-right: 15px;
}

.online-list .online::after{
	top: unset;
	bottom: 5px;
}





/*Responsive layout - makes on column layout instead of a two-column layout */
/*@media (max-width: 800px){*/
	
	/* @media only screen and (max-width: 470px){ */

 /*
  .profile-info{
		flex-direction: column;
	}

	.post-col{
		flex-direction: column;
	}

	.info-col{
		flex-direction: column;
	}
	
	.profile-container img{
		width:100%;
	}
	*/
  
 
 /*
  .profile-info{
   flex-wrap:wrap;
  }

	.post-col{
		flex-basis: 100%;
	}

	.info-col{
		flex-basis: 100%;
	}
	
	
	.profile-container img{
		width: 100%;
	}
	

	.profile-container{
    	padding: 20px 0;
    }
}

*/