.ffolder{
  		position: relative;
  		display: inline-block;
  		text-align: center;
  	}

	.ffolder.small{
		margin-top: 8px;
		width: 88px;
		height: 61px;
		border-radius: 0px 6px 6px 6px;
	}

	.ffolder.medium{
		margin-top: 16px;
		width: 176px;
		height: 122px;
		border-radius: 0px 10px 10px 10px;
	}

	.ffolder.big{
		margin-top: 24px;
		width: 234px;
		height: 153px;
		border-radius: 0px 14px 14px 14px;
	}

	.ffolder:before{
		content: '';
		display: block;
		position: absolute;
	}

	.ffolder:after{
		content: '';
		position: absolute;
		display: block;
		width: 0;
		height: 0;
	}

	.ffolder.small:before{
		top:-8px;
		left: 0;
		width: 32px;
		height: 8px;
		border-radius: 6px 0px 0px 0px;
	}

	.ffolder.small:after{
		top:-16px;
		left: 24px;
		border: 8px solid transparent;
	}


	.ffolder.medium:before{
		top:-16px;
		left: 0;
		width: 64px;
		height: 16px;
		border-radius: 10px 0px 0px 0px;
	}

	.ffolder.medium:after{
		top:-32px;
		left: 48px;
		border: 16px solid transparent;
	}

	.ffolder.big:before{
		top:-24px;
		left: 0;
		width: 96px;
		height: 24px;
		border-radius: 14px 0px 0px 0px;
	}

	.ffolder.big:after{
		top:-48px;
		left: 72px;
		border: 24px solid transparent;
	}

	.ffolder span, .ffolder i{
		position: absolute;
	    top: 34%;
	    left: 60%;
	    /* transform: translate(-50%, -50%); */
	}

	.ffolder span{
		font-size: 12px;
		padding: 2px 8px;
    	border-radius: 15px;
    	white-space: nowrap;
	}

	.ffolder.small i{ font-size: 37px;}
	.ffolder.medium i{ font-size: 53px;}
	.ffolder.big i{ font-size: 53px;}


     /*Available colors*/
	.ffolder.cyan{ background-color: #23CBF4;}
	.ffolder.cyan:before, .ffolder.cyan span{ background-color: #06BAEE;}
	.ffolder.cyan:after{ border-bottom-color: #06BAEE;}
	.ffolder.cyan span{color: #FFFFFF;}
	.ffolder.cyan i{color: #06BAEE;}

	.ffolder.yellow{ background-color: #FFBD00;}
	.ffolder.yellow:before, .ffolder.yellow span{ background-color: #F1A402;}
	.ffolder.yellow:after{ border-bottom-color: #F1A402;}
	.ffolder.yellow span{color: #FFFFFF;}
	.ffolder.yellow i{color: #F1A402;}

	.ffolder.pink{ background-color: #FF7F92;}
	.ffolder.pink:before, .ffolder.pink span{ background-color: #db0000;}
	.ffolder.pink:after{ border-bottom-color: #db0000;}
	.ffolder.pink span{color: #FFFFFF;}
	.ffolder.pink i{color: #FF5E6E;}

	.ffolder.green{ background-color: #0f6458;}
	.ffolder.green:before, .ffolder.green span{ background-color: #0a544a;}
	.ffolder.green:after{ border-bottom-color: #0a544a;}
	.ffolder.green span{color: #FFFFFF;}
	.ffolder.green i{color: #FFFFFF;}

	.ffolder.gray{ background-color: #829aa8;}
	.ffolder.gray:before, .ffolder.gray span{ background-color: #687F8C;}
	.ffolder.gray:after{ border-bottom-color: #687F8C;}
	.ffolder.gray span{background-color: transparent;}
	.ffolder.gray i{color: #687F8C;}

	.ffolder span{
		font-size: 30px;
	}
	.ffolder small{
		position: absolute;
		top: 8%;
		left: 74%;
		/* transform: translate(-80%, -50%); */
		font-size: 24px;
		padding: 2px 8px;
		border-radius: 15px;
		white-space: nowrap;
		font-weight: 600;
		color: #fff;
	}
	.media.ita{
		background: #eee;
		border-radius: 10px;
		border-bottom-right-radius: 0px;
		border-top-right-radius: 0px;
	}
	.ffolder.extra-small {
		margin-top: 8px;
		width: 48px;
		height: 36px;
		border-radius: 0px 6px 6px 6px;
	}
	
	.ffolder.extra-small:before{
		top:-8px;
		left: 0;
		width: 32px;
		height: 8px;
		border-radius: 6px 0px 0px 0px;
	}

	.ffolder.extra-small:after{
		top:-16px;
		left: 24px;
		border: 8px solid transparent;
	}
	.ffolder.extra-small span, .ffolder.extra-small i {
		position: absolute;
		top: 0%;
		left: 25%;
		font-size: 1.5rem;
	}