.small{
	font-size: calc(10px + (14 - 10) * ((100vw - 300px) / (1600 - 300)));
}


.card-container {
	-webkit-perspective: 100vmax;
	   -moz-perspective: 100vmax;
		 -o-perspective: 100vmax;
			perspective: 100vmax;
	margin-bottom: 30px;
	position: relative;
	margin: 1vmax;
}
/* flip the pane when hovered */
.card-container:not(.manual-flip):hover .card,
.card-container.hover.manual-flip .card{
	-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
 -o-transform: rotateY( 180deg );
	transform: rotateY( 180deg );
}


.card-container.static:hover .card,
.card-container.static.hover .card {
	-webkit-transform: none;
-moz-transform: none;
 -o-transform: none;
	transform: none;
}
/* flip speed goes here */
.card {
-webkit-transition: -webkit-transform .5s;
   -moz-transition: -moz-transform .5s;
	 -o-transition: -o-transform .5s;
		transition: transform .5s;

-webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
	 -o-transform-style: preserve-3d;
		transform-style: preserve-3d;
	position: relative;
}

/* hide back of pane during swap */
.front, .back {
-webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
	 -o-backface-visibility: hidden;
		backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;
	border-radius: 20px;
	box-shadow: -1px 15px 30px -12px #000;

	background-color: #FFF;
	background-color: var(--card-bg-color);
}

/* front pane, placed above back */
.front {
	z-index: 2;
}

/* back, initially hidden pane */
.back {
-webkit-transform: rotateY( 180deg );
   -moz-transform: rotateY( 180deg );
	 -o-transform: rotateY( 180deg );
		transform: rotateY( 180deg );
		z-index: 3;
}



.front .ctrl,
.back .ctrl
{
	position: absolute;
	top:8px;
	right: 8px;
}




.back .btn-simple{
	position: absolute;
	left: 0;
	bottom: 4px;
}
/*		Style	   */


.card{
	background: none repeat scroll 0 0 #FFFFFF;
	color: var(--text-color);
}
.card-container, .front, .back {
	width: 24vmax;
	height: 34vmax;
	min-width: 300px;
	min-height: 400px;
	display: inline-block;
}


.card .cover{
	height: 25%;
	overflow: hidden;
	border-radius: 20px 20px 0 0;

background: rgb(193,207,207);
background: -moz-radial-gradient(bottom, ellipse cover, rgba(193,207,207,1) 0%, rgba(86,157,197,1) 33%, rgba(54,124,173,1) 67%, rgba(21,57,117,1) 100%);
background: -webkit-radial-gradient(bottom, ellipse cover, rgba(193,207,207,1) 0%,rgba(86,157,197,1) 33%,rgba(54,124,173,1) 67%,rgba(21,57,117,1) 100%);
background: radial-gradient(ellipse at bottom, rgba(193,207,207,1) 0%,rgba(86,157,197,1) 33%,rgba(54,124,173,1) 67%,rgba(21,57,117,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c1cfcf', endColorstr='#153975',GradientType=1 );

}
.card .cover img{
	width: 100%;
}
.card .cover.large{
	height: 40%;
}



.card .oversized{
	position: absolute;
	width: 240px;
	height: 240px;
	top: -4.5vmax;
	left: calc(50% - 120px);
}

@media only screen and (max-width: 600px) {

	.card .oversized{
		width: 180px;
		height: 180px;
		left: calc(50% - 90px);
	}


}



.card .user{
	display: block;
	position: relative;
	height: 100px;
	margin: -50px auto 0;
	overflow: hidden;
	width: 100px;
}
.card .user img{
	background: none repeat scroll 0 0 #FFFFFF;
	border: 4px solid #f93;
	border-radius: 50%;
	width: calc(100% - 8px);
}

.card .user.large{
	height: 15vmax;
	margin: -7.5vmax auto 0;
	width: 15vmax;
}

.card .content{
	background-color: rgba(0, 0, 0, 0);
	box-shadow: none;
	padding: 0 1vmax;
}
.card .content .main {
	min-height: 38%;
}

.card .back .content .main {
	height: 215px;
}
.card .name {
	text-align: center;
	text-transform: capitalize;
}

.card h3{
	font-size: calc(26px + (32 - 26) * ((100vw - 300px) / (1600 - 300)));
	line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));

/* 
	font-size: 3.3vmax;
	line-height: 3.5vmax;
 */
}

.card h4{
	font-size: 18px;
	line-height: 24px;
}



.card h3,
.card h4{
	margin: 1vmin 0 0;
}


.card h5{
	margin: 5px 0;
	font-weight: 400;
	line-height: 20px;
}
.card .profession{
	color: #999999;
	text-align: center;
	margin-bottom: 1vmax;

	font-size: calc(14px + (18 - 14) * ((100vw - 300px) / (1600 - 300)));
	line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));

}
.card .footer {
	border-top: 1px solid var(--text-color);
/* 	color: #999999; */
	padding: 1vmax 0;
	text-align: center;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}

.card .footer.stats {
	padding: 1vmax 0 0;
	border-top: unset;
}

.card .header {
	padding: 1.5vmax 2vmax;
	height: auto;
}
.card .motto{
	border-bottom: 1px solid #EEEEEE;
	color: #999999;
	font-size: 14px;
	font-weight: 400;
	padding-bottom: 1vmax;
	text-align: center;
}

.card .stats-container{
	width: 100%;
	top: 50%;
	position: relative;
	transform: translateY(-50%);
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax(7.5vmax,1fr) );
}


.card .statistics{
	width: 100%;
	border-radius: 0 0 20px 20px;
}

.card .statistics.orange{
	background-color: #f93;
	color: #fff;
}


.card .statistics .statistic{
	display: inline-block;
	padding: 0.5vmax;
}

.card .statistics .statistic.acrossFull{
	border-bottom: 1px solid #ccc;
	width: calc(100% - 1vmax);
}

.card .statistics .statistic.half{
	width: calc(50% - 2vmax);
	vertical-align: top;
}

.card .statistics .statistic:last-child{
	border-left: 1px solid #ccc;
}


.title{
	color: #506A85;
	text-align: center;
	font-weight: 300;
	font-size: 44px;
	margin-bottom: 90px;
	line-height: 90%;
}
.title small{
	font-size: 17px;
	color: #999;
	text-transform: uppercase;
	margin: 0;
}
.space-30{
	height: 30px;
	display: block;
}
.space-50{
	height: 50px;
	display: block;
}
.space-200{
	height: 200px;
	display: block;
}
.white-board{
	background-color: #FFFFFF;
	min-height: 200px;
	padding: 60px 60px 20px;
}
.ct-heart{
	color: #F74933;
}

 pre.prettyprint{
	background-color: #ffffff;
	border: 1px solid #999;
	margin-top: 20px;
	padding: 20px;
	text-align: left;
}
.atv, .str{
	color: #05AE0E;
}
.tag, .pln, .kwd{
	 color: #3472F7;
}
.atn{
  color: #2C93FF;
}
.pln{
   color: #333;
}
.com{
	color: #999;
}

.btn-simple{
	opacity: .8;
	color: #666666;
	background-color: transparent;
}

.btn-simple:hover,
.btn-simple:focus{
	background-color: transparent;
	box-shadow: none;
	opacity: 1;
}
.btn-simple i{
	font-size: 16px;
}



/*	   Fix bug for IE	  */

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	.front, .back{
		-ms-backface-visibility: visible;
		backface-visibility: visible;
	}

	.back {
		visibility: hidden;
		-ms-transition: all 0.2s cubic-bezier(.92,.01,.83,.67);
	}
	.front{
		z-index: 4;
	}
	.card-container:not(.manual-flip):hover .back,
	.card-container.manual-flip.hover .back{
		z-index: 5;
		visibility: visible;
	}
}


@media screen and (orientation:portrait) {
	.card-container, .front, .back {
		width: 24vmax;
		height: 34vmax;
	}


}/* @media screen and (orientation:portrait)*/

@media screen and (orientation:landscape) {
	.card-container, .front, .back {
		width: 24hmax;
		height: 34hmax;
	}
}/* @media screen and (orientation:landscape)*/

/* 
@media only screen and (max-width: 600px) {

	.card-container, .front, .back {
		width: 50vmax;
		height: 87vmax;
	}

	.card .user{
		height: 20vmax;
		margin: -10vmax auto 0;
		overflow: hidden;
		width: 20vmax;
	}


}

 */




.pie{
	width: 92px; height: 92px;
	position: relative;
}
.pie .allBG{
	position: absolute;
	width: 50%;
	height: 50%;
	left: 25%;
	top: 25%;
	border-radius: 50%;
	background-color: #fff;
	font-size: 12px;
	line-height: 4;
	text-align: center;
}

.pie .allTXT{
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

.pie.cube .lbl01{
	position: absolute;
	left: 0;
	width: calc(50% - 0.5vw);
	text-align: right;
	font-size: 12px;
	top: 0.25vh;
}

.pie.cube .lbl02{
	position: absolute;
	left: 50%;
	width: 50%;
	text-align: left;
	font-size: 12px;
	top: 0.25vh;
	padding-left: 0.5vw;
}


.pie svg {
  width: 100%; height: 100%;
  transform: rotate(-90deg);
  background: #39f;
  border-radius: 50%;
}


.pie.cube svg circle.last{
  fill: transparent;
  stroke: #f93;
  stroke-width: 16;
	stroke-dasharray: 80.56 100;
}


.pie.cube svg circle.first{
  fill: transparent;
  stroke: #f00;
  stroke-width: 16;
	stroke-dasharray: 66.52 100;
}