@charset "UTF-8";
/* CSS Document */
.pc-w-85-m-w-100{
	max-width: 85%;
}
.on-mobile,
.mobile-header-popup, 
header.mobile-header, 
.back-to-messages-People,
.user-profile-header ul li.on-mobile-user-menu,
.on-s-laptop
{
display: none;	
}
.off-mobile,
.off-tap,
.off-s-laptop{
display: block;	
}
.user-profile-header ul li.off-mobile-user-menu{
	display: inline-block;	
}
.no-padding-left-in-mobile,
.no-padding-right-in-mobile,
.no-padding-top-in-mobile,
.no-padding-bottom-in-mobile{
	padding-bottom: auto;
}
.signupFormStyle{
	padding: 30px 50px 15px;
    border-radius: 0;	
}

@media (max-width: 991px) {
	.off-tap{
display: none;	
}
}
@media (max-width: 995px) {
header .navbar .navbar-nav li > a .notifications-nam{
right: -10px;
}
}
@media (max-width: 653px){

header .navbar .navbar-nav li .user-header-notifications.dropdown-menu, 
header .navbar .navbar-nav li .user-header-messages.dropdown-menu {
width: 350px;
}	
.pc-w-85-m-w-100{
		max-width: 100%;
	}
}
@media (max-width: 548px){
header .navbar .navbar-nav li .user-header-notifications.dropdown-menu, 
header .navbar .navbar-nav li .user-header-messages.dropdown-menu {
width: 300px;
}

}
@media (max-width: 502px) {
		header .navbar form input{
		position: static  !important;
		width: 100% !important;
		left: 0;
		right: 0;
	}
.on-mobile{
display: block;	
}
.off-mobile{
display: none;	
}
.navbar-light .navbar-toggler {margin: 10px 12px 10px 0;}
header .navbar-nav {
display: inline-block !important;
text-align: center;	
position: relative;
}
header .navbar-nav li{
width: 22%;
display: inline-block !important;
margin: 0 !important;
position: unset;
}
header .navbar-nav li a{
}
header .navbar-nav li .user_img{
position: relative;
top: 6px;
margin: 0 auto;
}
header .navbar .navbar-nav li > a .notifications-nam{
right: 20% !important;
}
header .navbar .navbar-nav li .user-header-notifications.dropdown-menu, 
header .navbar .navbar-nav li .user-header-messages.dropdown-menu, 
header .navbar .navbar-nav li .user-header-menu.dropdown-menu{
position: absolute;
width: 100%;
}
header .navbar .navbar-nav li .user-header-notifications.dropdown-menu::after{right: 58%;}
header .navbar .navbar-nav li .user-header-messages.dropdown-menu::after{right: 36%;}
header .navbar .navbar-nav li .user-header-menu.dropdown-menu::after{right: 83%;}
.scrollable-menu-2 {
width: 100%;
height: 100%;
overflow: auto;
}
header .navbar-nav li .user-header-menu.dropdown-menu .user_img{
width: 70px;
height: 70px;
}
}
@media (min-width: 503px){	
.navbar-expand-lg .navbar-collapse {
display: -ms-flexbox!important;
display: flex!important;
-ms-flex-preferred-size: auto;
flex-basis: auto;
}
.navbar-expand-lg .navbar-nav {
-ms-flex-direction: row;
flex-direction: row;
}
.navbar-expand-lg .navbar-toggler {
display: none;
}
header .navbar .navbar-nav li .user-header-notifications.dropdown-menu, 
header .navbar .navbar-nav li .user-header-messages.dropdown-menu, 
header .navbar .navbar-nav li .user-header-menu.dropdown-menu{
position: absolute;
}
.scrollable-menu-2 {
width: 100%;
height: 100%;
overflow: auto;
}

}
@media (max-width: 1024px){
		
#headerLoginR{
	max-width: 400px;
    position: relative;
    right: 0px;
}
.btn-showLoginForm{
		display: none;
}
	#SignUp .col-lg-6{
		-ms-flex: 0 0 70%;
		flex: 0 0 70%;
		max-width: 70%;
		margin: 3em auto;
		line-height: 2;
	}
	#SignUp .col-lg-6#signupForm{
		
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
		
		margin: 0em auto 3em;
		line-height: 2;
	}
	
}
@media (max-width: 768px){
	.btn-showLoginForm{
		display: block;
	}
	header.register-header .navbar-brand{
		width: 100%;
    	text-align: center;
	}
	header.register-header .collapse {
    	display: block;
	}
	#headerLoginR{
		max-width: 100%;
    	width: 100%;
		display: none;
	}
	#headerLoginR .row.p-0.m-0{
		width: 100%;
	}
	#SignUp .col-lg-6{
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
		margin: 3em auto;
		line-height: 2;
	}
	.user-profile-header .user_img .user_img_edit {
    	bottom: 0;
	}
	
	.no-padding-left-in-mobile{
		padding-left: 15px !important;
	}	
	.no-padding-right-in-mobile {
		padding-right: 15px !important;
	}
	
	.user-profile-header ul li {
		margin-left: 0px;
		width: 100%;
		text-align: center;
	}
	.user-profile-header ul {
		display: flex;
	}		
	.user-profile-header ul.on-mobile {
    display: none;
	}
	
	.user-profile-header ul li:first-child a{
		    padding-right: 0;
    padding-left: 0;
	}
	.fixed-user-profile-menu .fixedBox .user_img{
		display: none;
	}
	
	
	header .navbar form input{
		position: absolute;
		width: 100% !important;
		left: 0;
		right: 0;
	}
	header .navbar form{
		position: relative !important;
	}
	.mob-mb-3{
		margin-bottom: 1rem!important;
	}
		.top-info-website{
		text-align: center;
		margin: 3em 0;
	}
	.top-info-website img{
		width: 100px;
		margin-top: 0%;
	}
	.top-info-website h2{
		margin: 45px 0px 25px;
	}
	.top-info-website p{
		font-size: 12px;    
		width: 100%;
		text-align: center;
		margin-bottom: 30px;
	}
	header form.loginForm input{
		position: sticky !important;
	}
	.m-w-100{
		width: 100%;
	}
}
@media (max-width: 767px){
	.Social .SocialBtn {
		margin-bottom: 0px;
		height: inherit;
	}
	.Register .btn-group, #gender>a{
		width: 100%;
	}
}
@media (max-width: 560px){
	
header.pc-header{
	display: none;
}
header.mobile-header{
	display: block;
	z-index:1000;
}

header.mobile-header .user_img{
	width: 30px;
	height: 30px;
	background-size: cover;
	background-position: center top;
	border: 2px solid #7a51a6;
}
header.mobile-header .user_img{
	float: none;
	width: 30px;
	height: 30px;
	border-width: 2px;
}
header.mobile-header .dropdown-toggle::after{
	display: none;
}

header.mobile-header .logo {
	max-height: 28px;
}

header.mobile-header .mobile-header-icon {
	position: relative
}

header.mobile-header .mobile-header-icon i {
    font-size: 1.3em;
    line-height: 1.5;
}

header.mobile-header .mobile-header-icon .notifications-nam {
    background: red;
    position: absolute;
    min-width: 22px;
    height: 22px;
    font-weight: 700;
    top: -3px;
    right: -14px;
    border: 2px solid #553d7b;
    border-radius: 50px;
    line-height: 1.6;
	    font-size: .7em;
    padding-right: 2px;
}


header.mobile-header .user-header-notifications.dropdown-menu,
header.mobile-header .user-header-messages.dropdown-menu,
header.mobile-header .user-header-menu{
	    line-height: 2.5;
    height: 100vh;
    overflow: scroll;
    position: fixed;
    width: 100%;
}

header.mobile-header .user-header-menu .user-header-menu-info h2{
	    margin-top: 13px;
	    margin-bottom: 0;
}

header.mobile-header .user-header-notifications,
header.mobile-header .user-header-messages,
header.mobile-header .user-header-menu{
	background: #f5f8fa;
	border: 0px solid #e6ecf0;
	width: 100%;
	line-height: 2.5;
	border-radius: 0;
	margin-top: 0px;
}


header.mobile-header .user-header-notifications.dropdown-menu,
header.mobile-header .user-header-messages.dropdown-menu{
	width: 450px;
}

header.mobile-header .user-header-notifications .user-header-notifications-info{
	margin-right: 80px;
	line-height: 1.5;
	margin-top: 4px;
	margin-bottom: 4px;
}

header.mobile-header .user-header-notifications a{
white-space: normal;
	position: relative;
}

header.mobile-header .user-header-notifications .scrollable-menu-1{
	    height: calc(100vh - 6.1em);
}

header.mobile-header form input{
    border: 2px solid #7a51a6;
    border-radius: 50px;
    background: #f5f8fa;
    font-weight: 600;
    font-size: 12px;
    padding: 5px 14px 5px 35px;
}
header.mobile-header form button{
	position: absolute;
    color: #999;
	left: 7px;
}

	

	

li.mobile-header-popup-userMenu::after{
    content: "";
    position: absolute;
    bottom: 50px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #fff transparent;
    right: 5px;
}
	
li.mobile-header-popup-messages::after,
li.mobile-header-popup-notifications::after{
    content: "";
    position: absolute;
    bottom: 50px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #fff transparent;
    right: 0;
}
	
li.mobile-header-popup-userMenu.mobMenuOpen::after,
li.mobile-header-popup-messages.mobMenuOpen::after,
li.mobile-header-popup-notifications.mobMenuOpen::after{
    bottom: -13px;
}	
	
	
	
	
	
	
	
	
	
	
	
	
	.user-profile-header .user-button button, 
	.user-profile-header .user-button a {
    width: 90%;
    margin-top: 1em;
	margin-left: 0 !important;		
	}
	
	.user-profile-header .user-button #shownewMessage,
	.user-profile-header .user-button #showfollow{
		width: 44.5%;
	}	
	
	.user-profile-header .user-button #shownewMessage a,
	.user-profile-header .user-button #showfollow button,
	.user-profile-header .user-button #showCopy{
		width: 100%;
	}
}
@media (max-width: 1024px){	
	.on-s-laptop{
		display: block;
	}
	.off-s-laptop{
		display: none;	
	}
	#SignUp{
		height: auto;
	}
	#SignUp .top-info-website{
		text-align: center;
		padding: 0 1.7em;
	}
	#SignUp .top-info-website p{
    font-size: 14px;
    width: 100%;
    text-align: center;
    font-weight: 600;
	}	
	
	.user-profile-header .user_cover {
		height: auto;
		background-size: cover;
		position: relative;
		padding: 1.5em 0;
		text-align: center;
		background-position: center center;
	}
	
	.user-profile-header .user_img {
		width: 160px;
		height: 160px;
		position: relative;
		right: auto;
		bottom: auto;
		margin: 0 auto;
	}
	.user-profile-header .user-name {
		position: relative;
		z-index: 999;
		right: auto;
		bottom: auto;
		margin: 1em 0;
	}
	
	.user-profile-header .user-button {
		position: relative;
		z-index: 999;
		left: auto;
		bottom: auto;
	}
	.user-profile-header ul {
    	position: relative;
    	right: auto;
	}
	.user-profile-header .user-button button, 
	.user-profile-header .user-button a {
    margin-top: 1em;
	}
	.all-user-profile-img > div img {
    height: auto;
	}
	
	
}
@media (min-width: 576px){
	.messages-page .messages-list{
		display: block !important;
	}
	.messages-page .messages-People{
		display: block !important;
	}
}
@media (max-width: 575px){
	header #headerLoginR {
    	padding-right: 15px;
    	margin-bottom: 2em;
		margin-top: 2em !important;
	}
	header #headerLoginR button{
		margin-bottom: 1em;
		width: 100%;
	}
	header #headerLoginR .form-group{
		margin-bottom: .5em
	}
	header #headerLoginR .col-sm-2.col-12.p-0{
		padding-left: 15px !important;
	}
	
	.messages-page {
		margin-left: -15px;
		margin-right: -15px;
	}
	.messages-page .messages-list{
		display: none;
	}
	.messages-page .messages-People .user-header-notifications-info{
		width: 100%;
	}
	.back-to-messages-People{
		display: block;
	}
}
/*@media (max-width: 425px){*/
@media (max-width: 503px){
.signupFormStyle{
	padding: 30px 30px 15px;
	
	-ms-transform: scale(1) !important;
    -webkit-transform: scale(1) !important;
    transform: scale(1) !important;
}
	#signupForm>div, #signupForm>div>div {
    display: block !important;
}
	
	.user-profile-header ul li.on-mobile-user-menu{
		display: inline-block;
	}	
	.user-profile-header ul li.off-mobile-user-menu,
	.user-profile-menu.fixed-user-profile-menu .user-profile-menu-list .user-profile-menu-list-user-img{
		display: none;
	}
	.user-profile-header ul li a{
		padding: 1em 0em;	
	}
	.user-profile-header ul.on-mobile {
    display: none;
	}
	.user-profile-header ul.on-mobile.show {
    display: block;
	}
	
	.user-profile-header ul.on-mobile li:first-child a{
		padding-right: 2em;
	}
	.user-profile-header ul.on-mobile li a{
		padding-right: 2em;
	}
	.user-profile-header ul.on-mobile li {
		text-align: right;
		border-top: 1px solid #eee;
	}
	
	.no-padding-left-in-mobile{
	padding-left: 0 !important;
	}
	.no-padding-right-in-mobile{
		padding-right: 0 !important;
	}
	.no-padding-top-in-mobile{
		padding-top: 0 !important;
	}
	.no-padding-bottom-in-mobile{
		padding-bottom: 0 !important;
	}

	
	.user-profile-header .user-button button, 
	.user-profile-header .user-button a {
    width: 90%;
    margin-top: 1em;
	margin-left: 0 !important;	
	}
	
	.user-profile-header .user-button #shownewMessage,
	.user-profile-header .user-button #showfollow{
		width: 44.5%;
	}	
	
	.user-profile-header .user-button #shownewMessage a,
	.user-profile-header .user-button #showfollow button,
	.user-profile-header .user-button #showCopy{
		width: 100%;
	}
	
	
	.container-body {
    padding-top: 47px;
	}
	
	.pr-4.mob-pr-4 {
    padding-right: .5em !important;
	}

	.col-6.mob-pl-0{
		padding-left: 0 !important;
	}
	
	.font-size-14.mob-font-size-12{
		font-size: 12px !important;
	}
	
	.add-new-post .nav-pills.mb-4 .nav-link {
    padding-right: 0;
    padding-left: 0;
	}
	
	.add-new-post .nav-pills.mb-4 .nav-link i{
		    display: block;
    margin-bottom: 5px;
	}
	
	
	#allPostsTimeLine.pc-w-85-m-w-100 .col-lg-6.px-2{
		padding-left: 0!important;
		padding-right: 0!important;	
	}
	
	#allPostsTimeLine.pc-w-85-m-w-100 .box{
		border-radius: 0;
		border: 0px solid #ebebeb;
	}
	
	.top-info-website img{
		animation: circleScale 1s infinite;
		/*animation-delay: 1.5s;*/
	}
	.w-456{
		width: 100%;
		margin: 15px 0 8px;
	}
	.m-w-80{
		width: 100%;
	}	
	header .navbar form.loginForm .form-group{
		width: 100%;
	}
	header .navbar form.loginForm button{
		width: 100%;
	}
	.Statistic i{
		margin-bottom: 20px;
	}

	.mob-text-center{
		text-align: center !important;
	}
	.Social .SocialBtn {
    	margin-bottom: 15px;
    	height: 36px;
    }
	#CreateTitle{
		font-size: 33px;
	}
	#privacy{
		line-height: 2;
	}
	.STitle{
		font-size: 14px;
	}
}	
@media (max-height: 670px){
	#signupForm .box{
		-ms-transform: scale(.9); /* IE 9 */
		-webkit-transform: scale(.9); /* Safari */
		transform: scale(.9);
		margin-top: -20px;
	}
	#headerLoginR{
		-ms-transform: scale(.95); /* IE 9 */
		-webkit-transform: scale(.95); /* Safari */
		transform: scale(.95);
	}
	
	@-moz-document url-prefix() {
		#secondName {
			border-right-width: 2px;
		}
	}
	
}
@media (max-width: 332px){
#EditProfilePicture > .modal-dialog{
	font-size: 12px;
}
}
@media (max-height: 630px){
	#signupForm .box{
		-ms-transform: scale(.8); /* IE 9 */
		-webkit-transform: scale(.8); /* Safari */
		transform: scale(.8);
	}
	
	#headerLoginR{
		-ms-transform: scale(.85); /* IE 9 */
		-webkit-transform: scale(.85); /* Safari */
		transform: scale(.85);
	}
}
@media (max-height: 556px){
	#signupForm .box{
		-ms-transform: scale(.7); /* IE 9 */
		-webkit-transform: scale(.7); /* Safari */
		transform: scale(.7);
		margin-top: -70px;
	}
	
	#headerLoginR{
		-ms-transform: scale(.8); /* IE 9 */
		-webkit-transform: scale(.8); /* Safari */
		transform: scale(.8);
	}
}
@keyframes circleScale {
	  0% {
		transform: scale(1.1);
	  }
	  50% {
		transform: scale(.95);
	  }
	  100% {
		transform: scale(1.1);
	  }
	}