/*!
 * Powered by DashAli
 * Copyright 2016-2021 ERPx.ir
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
 */

body{padding:0;margin:0}

.user-wall-head {
	width: 100%;
	height: 200px;
	background-color:#10ebbf;
	position: relative;
	margin-top:60px;

			mask-position-x: center;
			-webkit-mask-position-x: center;
			mask-size: cover;
			-webkit-mask-size: cover;
		}

.user-wall-head:before {
	width: 100%;
	height: 200px;	
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	display: block;
	content:"";
	box-shadow: 0 -3px #000e inset;
}

@media (max-width:767px){
	.user-wall-head {mask-size: 991px 100%; -webkit-mask-size: 991px 100%}
	.user-wall-head:before{box-shadow: 0 -3.5px #000e inset; background-size: cover}
	}
@media (max-width:569px){
	.user-wall-head {mask-size: 767px 100%; -webkit-mask-size: 767px 100%}
	.user-wall-head:before{box-shadow: 0 -4px #000e inset; background-size: cover}
	}

.user-wall-avatar {
	height: 160px;
	position: relative;
}

.user-wall-avatar:before {
	width: 140px;
	height: 140px;
	background-color: #fff;
	display: block;
	content: "";
	border: 7px solid #fff;
	border-radius: 50%;
	margin: -80px auto 0;
	box-shadow: 0 0 70px #fff, 
				0 0 20px #fff, 
				0 -1px #000 inset, 
				0 -7px 25px inset #fff9, 
				0 -7px 10px inset #fff9, 
				0 0 7px inset #0007;
	background-size: 125px;
	background-repeat: no-repeat;
	background-position: center;
}
.user-info{
	text-align: center;
	margin: 0 auto;
	width: 300px;
}
.user-info h1{
	margin: 20px auto 25px;
}
.user-info p{
	margin: 0;
}

.top-left-links{
	display: block;
	top: -108px;
	left: 10px;
	position: absolute;
	padding: 0;
	text-align: center;
}

.top-left-links a{
	display: block;
	background-color: #0002;
	color: #fff7;
	width: 50px;
	height: 50px;
	padding: 0;
	font-size: 25px;
	line-height: 46px;
	vertical-align: middle;
	border-radius: 7px;
	margin-bottom:10px;
	clear:both;
	transition:all .7s;
}

.top-left-links a:hover{
	background-color: #0005;
	color: #ffff;
	transition:all .25s;
}

@keyframes resumeBtn {
  from {background-color:#0002;color:#fff7}
  to {background-color:#0005;color:#fff}
}

.top-left-links a.resume-page{
	animation: resumeBtn .65s cubic-bezier(.9,.03,.69,.22) 1s infinite alternate;
}

.top-left-links a span{
	font-size: 14px;
	width: 70px;
	position: absolute;
	left: 55px;
	text-align: left;
	line-height: 50px;
	text-shadow: 0 1px 1px #000a;
	color: #fffc;
	transform:scale(.85) translateX(-5px);
	transition:all .7s;
}
.top-left-links a:hover span{
	transform:scale(1) translateX(2px);
	transition:all .25s;
}

.creative-icons{
	display: block;
	top: -108px;
	right: 10px;
	position: absolute;
	padding: 0;
	text-align: right;
	font-size: 12px;
	text-shadow: 0 0 1px #000,0 0 1px #000;
	color: #fff;
}
.creative-icons p span{color:#FFF0; text-shadow: 0 0 10px #0000,0 0 10px #0000;transition:all .7s;margin-right:0px}
.creative-icons p:hover span{color:#FFF; text-shadow: 0 0 2px #000,0 0 5px #000;transition:all .25s;margin-right:10px}
.creative-icons i{margin-left:5px}

.rating-box{
	display: block;
	top: 43px;
	left: auto;
	position: absolute;
	padding: 0;
	text-align: center;
	justify-content:center;
	width: 100%;
}

.rating-box .rate-sum {
	float:right
}

.rating-box .rate-likes {
	float:left
}

@media (min-width:1400px){
	.rating-box .rate-sum{margin-right: 40.5vw}
	.rating-box .rate-likes{margin-left: 40.5vw}
}
@media (min-width:1200px) and (max-width:1399px){
	.rating-box .rate-sum{margin-right: 39vw}
	.rating-box .rate-likes{margin-left: 39vw}
}
@media (min-width:992px) and (max-width:1199px){
	.rating-box .rate-sum{margin-right: 37vw}
	.rating-box .rate-likes{margin-left: 37vw}
}
@media (min-width:768px) and (max-width:991px){
	.rating-box .rate-sum{margin-right: 33vw}
	.rating-box .rate-likes{margin-left: 33vw}
}
@media (min-width:640px) and (max-width:767px){
	.rating-box .rate-sum{margin-right: 30vw}
	.rating-box .rate-likes{margin-left: 30vw}
}
@media (min-width:450px) and (max-width:639px){
	.rating-box .rate-sum{margin-right: 21vw}
	.rating-box .rate-likes{margin-left: 21vw}
}
@media (min-width:350px) and (max-width:449px){
	.rating-box .rate-sum{margin-right: 14vw}
	.rating-box .rate-likes{margin-left: 14vw}
}
@media (max-width:349px){
	.rating-box .rate-sum{margin-right: 7vw}
	.rating-box .rate-likes{margin-left: 7vw}
}


.rating-box i{text-shadow: 0 0 2px #fff,0 0 7px #fff;}

.rating-box .rate-sum i{color:#D4AF37}

.rating-box span{font-size: smaller;color: #777;transition: all .7s;}
.rating-box div:hover > span{font-size: small;color: #000;transition: all .25s;}

.rate-likes .under-10 i{transform: scale(.5);line-height: 36px;}
.rate-likes .under-40 i{transform: scale(.6);line-height: 32px;}
.rate-likes .under-110 i{transform: scale(.7);line-height: 32px;}
.rate-likes .under-200 i{transform: scale(.8);line-height: 32px;}
.rate-likes .under-500 i{transform: scale(.9);line-height: 31px;}
.rate-likes .under-1000 i{transform: scale(1);line-height: 30px;}
.rate-likes .over-1000 i{transform: scale(1.1);line-height: 31px;}
.rate-likes .over-2000 i{transform: scale(1.2);line-height: 30px;}

.rate-sum .starter i{transform: scale(.7);line-height: 31px;padding-right: 1px;}
	.rate-sum .starter i:before{content: "\E335"; color: #a6a6a6;}
.rate-sum .rate-11to20th i{transform: scale(.8);line-height: 30px;padding-right: 1px;}
	.rate-sum .rate-11to20th i:before{content: "\E049"; color:#d5c210}
.rate-sum .rate-4to10th i{transform: scale(.9);line-height: 26px;padding-right: 1px;}
	.rate-sum .rate-4to10th i:before{content: "\E050"; color: #f2e700;}
.rate-sum .rate-3rd i{transform: scale(1);line-height: 21px;padding-right: 1px;}
	.rate-sum .rate-3rd i:before{content: "\E639"; color:#DD9400}
.rate-sum .rate-2nd i{transform: scale(1.1);line-height: 26px;padding-right: 1px;}
	.rate-sum .rate-2nd i:before{content: "\E333"; color:#B3AD9B;}
.rate-sum .rate-1st i{transform: scale(1.2);line-height: 30px;}
	.rate-sum .rate-1st i:before{content: "\E075";}

.rating-box a{
	display: block;
	background-color: #fff;
	/*background-image: linear-gradient(#fff1, #fff);*/
	width: 50px;
	height: 50px;
	padding: 0;
	font-size: 25px;
	line-height: 46px;
	border: 1px solid #0001;
	border-radius: 50%;
	transition: all .7s;
}
.rating-box .rate-sum a{box-shadow: -2px 2px 0 #000;}
.rating-box .rate-likes a{box-shadow: 2px 2px 0 #000;}

button.close{padding-top: 7px; float:left}


.strong{font-weight:bold}
.light{font-weight:lighter}

.text-50{font-size:50%}
.text-70{font-size:70%}
.text-80{font-size:80%}
.text-90{font-size:90%}
.text-110{font-size:110%}
.text-120{font-size:120%}
.text-140{font-size:140%}
.text-160{font-size:160%}
.text-200{font-size:200%}

.bio{align-self: center}
.bio p{margin-bottom: 0}

.page-contents-top .well{min-height: 200px;display: flex;background-color: #f0f4f9;border: 1px solid #ccdbe8}
.page-contents-top .well hr{border-top: 1.4px solid #ccdbe8}
.page-contents-top .btn-read-more{
	padding:0 15px 6px;
	line-height: 10px;
}

.frinds .user-mini-img{margin-bottom:15px}
.frinds .col-32x32{margin: 11px 7px; padding: 3px 0}
.frinds p{margin: -35px 0 25px}

@media (max-width:767px){
	.page-contents-top .well{margin:0 15px}
	.bio h3,.frinds h3.text-left,.frinds p.text-left{text-align: center}
}

.hr-dotted{border-top: #ddd dotted 3px}
.hr-110{width: 110px}

.page-contents{margin-top:-38px}

@media (max-width:991px){.page-contents-top{margin-top: 210px;}}

.featured-box-2 .col-48x48, .liked-box .col-48x48{line-height: 30px; margin:25px auto 50px}

.skils-box{margin:50px auto 0;padding: 0 30px}

.skils-box .media-carousel {
	margin-bottom: 0;
	padding: 0 30px 30px 30px;
	margin-top: 30px;
}

.skils-box .carousel-inner .row {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: center;
	margin: 0;
	}
.skils-box .carousel-inner .row .col-md-2{
	display: inline-flex;
	}
.skils-box .carousel-inner .items{
	display: contents;
	}

.skils-box .carousel-inner img{
	width: 100%;
	}
@media (max-width:470px){.skils-box .nav-tabs{padding-right:0}}
@media (max-width:430px){.hidden-xxs{display:none}.skils-box .nav-tabs li:first-child a{padding: 10px 25px;}}
@media (max-width:370px){.skils-box .nav-tabs li:first-child a{padding: 10px 15px;}}
@media (max-width:355px){.skils-box .nav-tabs li a{padding: 10px 7px;}}

/* این کار غلطه باید با جاوا اسکریپت به صورت ایجکسی محتوای داخل کروشال را ویرایش کرد که ترتیب نمایش در اسلایدها حفظ شود*/
@media (max-width:1100px){.skils-box .carousel-inner .row div:nth-child(6){display: none}}
@media (max-width:940px){.skils-box .carousel-inner .row div:nth-child(5){display: none}}
@media (max-width:780px){.skils-box .carousel-inner .row div:nth-child(4){display: none}}
@media (max-width:620px){.skils-box .carousel-inner .row div:nth-child(3){display: none}}
@media (max-width:455px){.skils-box .carousel-inner .row div:nth-child(2){display: none}}

.skils-box .carousel-control.left {
	left: -5px;
	background: none;
	border-top: 1px solid #aaa;
	border-left: 1px solid #aaa;
	height: 40px;
	width: 40px;
	margin-top: 60px;
	transform: rotatez(-45deg);
}

.skils-box .carousel-control.right {
	right: -5px !important;
	background: none;
	border-top: 1px solid #aaa;
	border-right: 1px solid #aaa;
	height: 40px;
	width: 40px;
	margin-top: 60px;
	transform: rotatez(45deg);
}

.skils-box .thumbnail{height: 160px; width: 160px}
.skils-box .thumbnail img{height: 150px; width: 150px}

.featured-box-title{margin: 70px auto 50px}

.featured-box-title:before{
	content: "";
	background-color: transparent;
	display: block;
	height: 3px;
	position: relative;
	margin: -13px auto;
	z-index: -2;
	border-bottom: dotted #ddd 3px;
	width: 370px;
}
.featured-box-title:after{
	content: "";
	background-color: #fff;
	display: block;
	height: 14px;
	position: relative;
	margin: -13px auto;
	z-index: -1;
	width: 200px;
}

footer {
    margin: 50px 0;
}

@media (max-width:449px){}
@media (min-width:450px) and (max-width:569px){}
@media (min-width:570px) and (max-width:639px){}
@media (min-width:640px) and (max-width:767px){}
@media (min-width:768px) and (max-width:850px){}
@media (min-width:851px) and (max-width:992px){}
@media (min-width:993px) and (max-width:1199px){}
@media (min-width:1200px){}

/**********************************************************************/
/*	کاربران فعال	*/

.glyphicon-group:before{
	content: '';
}
.active-users i{
	position:absolute
	}
.active-users i.glyphicon-duplicate{
	color:green
	}
.active-users i.glyphicon-comment{
	color:yellow
	}
.active-users i.glyphicon-bullhorn{
	color:red
	}
.active-users i.glyphicon-group{
	color:pink
	}
.active-users span.glyphicon-list{
	line-height: 1.666;
	color:#777;
	}
.active-users .active-user:hover span.glyphicon-list{
	color:#000;
	transition:all .2s;
	}
.active-users .user-mini-img,
.active-users .user-mini-img .img-circle,
.active-users .more-active-user .circle,
.active-users .more-active-user span.glyphicon-list{
	transition:all 1s;
	}
.active-users .user-mini-img:hover{
	transform:scale(1.2, 1.2);
	transition:all .2s;
	}
.active-users .user-mini-img:hover .img-circle{
	box-shadow:0 5px 5px rgba(0,0,0,.25);
	transition:all .2s;
	}
.active-users .more-active-user:hover .circle{
	box-shadow:inset 0 0 5px rgba(0,0,0,.5);
	transition:all .2s;
	}
.active-user{
	margin-bottom:10px;
	}
	
@media (max-width: 767px){.liked-box .thumb-box{padding:10px 15px 0}}
@media (min-width: 768px){.liked-box .thumb-box{padding:15px 15px 0}}
@media (min-width: 992px){.liked-box .thumb-box{padding:10px 10px 0}}
@media (min-width: 1200px){.liked-box .thumb-box{padding:15px 5px}}

/*****	مطالب ویژه	*****/

.title{font-size:18px}
.sup-title{margin: 0 0 -20px 0}
.sub-title{margin: -10px 0 10px 0}

[class*='featured-box-'] .featured{padding-top:15px; }
[class*='featured-box-'] hr{margin:0}
[class*='featured-box-'] h2{margin-top:35px}
[class*='featured-box-']:hover h2{color:#f00}
.top-featured{padding-top:15px}
.featured img.pull-right {margin-left:15px}
.top-featured,.featured{border-radius:7px; border:5px solid transparent}
.top-featured:hover,.featured:hover{background-color:rgba(0,0,0,.05); border:5px solid #fff}
.top-photo h4{font-size:16px}
.top-photo .thumbnail{margin-bottom:5px}
.top-photo .caption{border-bottom: none transparent; margin-bottom: 15px; padding-bottom:0}
.top-photo .table button.circle{width:48px; height:48px; padding: 11px 8px}
.top-photo .table button span{right:auto; left:-24px; top:-45px}
.thumbnail{margin-bottom:15px}