.userCardPreviewItemScaleBtn {
	display: none;
}
@media (max-width: 768px) {
	.userCardPreviewItemScaleBtn {
		/*
		off 2 column button
		display: block;
		*/
	}
}

.userCardPreviewItem {
	display: inline-block;
	width: 33%;
	/*min-width: 200px;*/
	vertical-align: top;
	margin: 10px 0px;
	padding: 0;
	

	
	/*
	Remove the spaces.
	The reason you get the spaces is because, well, you have spaces between the elements.
	Tricks choice:
	1.	</div><div>
	2.	</div><!--
		--><div>
	3.	Negative margin
		You can scoot the elements back into place with negative 4px of margin (may need to be adjusted based on font size of parent). Apparently this is problematic in older IE (6 & 7), but if you don't care about those browsers at least you can keep the code formatting clean.
		margin-right: -4px;
	*/
	margin-right: -4px;
	
	overflow: hidden;
}
.userCardPreviewItemCol2 {
	width: 50%;
}
.userCardPreviewItemCol2Mob {
	
}
.userCardPreviewItemSub {
	padding: 0px 10px;
	/*min-width: 300px;*/
	width: 350px;
}
@media (max-width: 768px) {
	.userCardPreviewItem {
		width: 50%;
	}

	
	.userCardPreviewItemCol2Mob {
		width: 50%;
	}
	.userCardPreviewItem .userCardPreviewItemSub {
		/*
		padding: 0px 10px;
		min-width: 300px;	
		*/
	}
	/*
	.userCardPreviewItemCol2Mob .userCardPreviewItemSub {
		padding: 0px 10px;
		min-width: 300px;
	}
	*/
}
@media (max-width: 400px) {
	/*
	.userCardPreviewItem {
		width: 100%;
	}
	.userCardPreviewItemCol2Mob {
		width: 100%;
	}
	*/
}

.userCardPreview {
	background-color: #131718;
	padding: 20px;
	color: #fff;
}
.userCardPreview A {
	color: #fff;
}

.userCardPreview .ucpCell1 {
	height: 190px;
	position: relative;
}
.userCardPreview  .vertical-center {
	border: 1px solid red;
	margin: 0;
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
.userCardPreview .ucpFoto {
	text-align: center;
}
.userCardPreview .ucpFotoSub {
	display: block;
	width: 150px;
	height: 150px;
	margin: 0 auto;

}
.userCardPreview .ucpFoto IMG {
	border: 3px solid #727271;
	width: 150px;
	height: 150px;
	border-radius: 75px;
}
@media (max-width: 768px) {
	/*
	.userCardPreview .ucpFoto {
		padding-top: 15px;
	}
	.userCardPreview .ucpFotoSub {
		width: 120px;
		height: 120px;
	}
	.userCardPreview .ucpFoto IMG {
		width: 120px;
		height: 120px;
	}
	*/
}
.userCardPreview .ucpCity {
	text-align: center;
	padding-right: 0px;
	position: absolute;
	
	/*
	margin-left: 25px;
	right: 0;
	*/
	left: 0;
	bottom: 0px;
	width: 150px;
	height: 35px;
}

.userCardPreview .ucpCell2 {
	height: 180px;
	position: relative;
}
.userCardPreview .ucpNavButtons {
	text-align: right;
	position: absolute;
	top: 0px;
	right: 0px;
}
.userCardPreview .ucpNavButtons A {
	color: red;
}
.userCardPreview .ucpName {
	text-align: right;
	font-size: 16px;
	font-weight: bold;
	line-height: 20px;
	
	height: 80px;

	position: absolute;
	top: 35px;
	right: 0px;
	
	display: flex;
}
.userCardPreview .ucpNameSub {
	margin: auto;
}
.userCardPreview .ucpSphere {
	margin: 10px 0px;
	text-align: right;
	font-size: 11px;
	line-height: 13px;
	font-style: italic;
	
	position: absolute;
	top: 123px;
	right: 0px;
}

.userCardPreviewLine {
	height: 5px;
}
.userCardPreviewLine DIV {
	background-color: #fc685b;
	height: 5px;
	width: 70%;
	float: right;
}

.userCardPreviewBottom {
	background-color: #fff;
	padding: 10px;
}
.userCardPreviewBottom .ucpbText1 {

}
.userCardPreviewBottom .ucpbText1 SPAN {
	font-weight: bold;
}