.section-contribution-who-is-on-top {
	text-align: center;

	> .page {

		@media @bp_1200 {
			padding-left: 8.33%;
			padding-right: 8.33%;
		}
	}

	h2 {
		.font-size(24);
		line-height: 28px;
		font-weight: 500;
		padding-bottom: 40px;

		@media @bp_768 {
			.font-size(42);
			line-height: 49px;
			padding-bottom: 60px;
		}
	}

	.card-micro {
		position: relative;
		height: 40px;
		display: flex;
		align-items: center;
		text-align: left;
		width: 100%;

		&.artist {
			display: none;

			@media @bp_1024 {
				display: flex;
			}
		}

		figure {
			width: 40px;
			height: 40px;
			position: absolute;
			left: 0;
			top: 0;
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
		}

		article {
			.box-sizing;
			width: 100%;
			height: 40px;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			padding: 0 0 0 55px;

			@media @bp_1024 {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
			}
		}

		h3 {
			.font-size(14);
			.clamp-lines(1);
			padding: 0;
			line-height: 18px;
			font-weight: 500;

			@media @bp_1024 {
				padding-right: 30px;
			}
		}

		.country {
			.font-size(10);
			color: #808080;
			text-transform: uppercase;
			white-space: nowrap;
		}
	}

	.heading {
		display: none;

		/*@media @bp_768 {
			display: block;
		}

		.contributor-chart-item {
			min-height: 0;
			padding-top: 0;
			padding-bottom: 0;

			label {
				.font-size(12);
				color: @grey-1;
				text-transform: uppercase;
				font-weight: 500;
				letter-spacing: 2px;
			}

			.col-wrapper {
				background-color: transparent;
				padding-top: 0;
				padding-bottom: 0;
			}
		}*/
	}

	.contributor-chart-item {
		display: flex;
		flex-direction: column;
		flex: 1;
		padding-left: 50px;

		@media @bp_1024 {
			flex-direction: row;
		}

		.col-wrapper {
			padding: 5px;
			background-color: @white;
			display: flex;
			flex-direction: column;
			flex: 1;

			@media @bp_768 {
				flex-direction: row;
				justify-content: space-between;
				flex: 1;
				align-items: center;
				padding: 7px;
			}

			@media @bp_1200 {
				padding: 7px;
			}
		}

		.col {
			.box-sizing;
			display: flex;
			flex-direction: row;
			padding: 5px;

			&.col-1 {
				background-color: transparent;
				padding: 0;
				width: 40px;
				position: absolute;
				top: 50%;
				margin-top: -10px;

				@media @bp_360 {
					width: 50px;
				}
			}

			&.col-2 {
				max-width: none;
				width: auto;

				@media @bp_768 {
					padding-right: 5%;
				}
				
				@media @bp_1024 {
					//max-width: 290px;
					//min-width: 290px;
					flex: 1;
				}

				@media @bp_1100 {
					//max-width: 310px;
					//min-width: 310px;
				}

				@media @bp_1100 {
					//max-width: 35%;
					//min-width: 35%;
				}

				@media @bp_1200 {
					padding-left: 0;
				}
			}

			&.col-3 {
				width: auto;
				display: none;

				@media @bp_1024 {
					max-width: 310px;
					min-width: 310px;
					padding-left: 30px;
					padding-right: 30px;
				}

				@media @bp_1100 {
					max-width: 310px;
					min-width: 310px;
				}

				@media @bp_1100 {
					max-width: 35%;
					min-width: 35%;
				}
			}

			&.col-4 {
				padding-left: 55px;
				flex-direction: column;

				@media @bp_768 {
					align-items: flex-end;
					justify-content: space-between;
					flex-direction: row;
					max-width: 420px;
					min-width: 420px;
					align-items: center;
					padding-left: 0;
				}

				@media @bp_1100 {
					max-width: 500px;
					min-width: 500px;
				}
			}
		}

		a {
			.text-decoration-ink;
			color: @black;
		}
		
		.badges {
			.font-size(0);
			min-height: 36px;
			text-align: left;

			@media @bp_480 {
				min-width: 280px;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
			}
		
			> .contribution-badge,
			> .cbadge {
				display: inline-block;
				margin: 0 5px 5px 0;
				vertical-align: middle;

				@media @bp_768 {
					margin: 0 10px 0 0;
				}

				> .contribution-badge {
					right: auto;
					left: 0px;
				}
			}

			> .cbadge {
				display: flex;
			}
		}

		.points {
			.font-size(12);
			line-height: 12px;
			display: block;
			white-space: nowrap;
			padding-top: 5px;
			text-align: left;

			@media @bp_768 {
				padding-top: 0;
				text-align: right;
				
			}
		}
	}

	.circle {
		.font-size(14);
		.rounded-corners(50%);
		background-color: @black;
		color: @white;
		font-weight: 500;
		letter-spacing: 2.5px;
		text-transform: uppercase;
		width: 40px;
		height: 40px;
		line-height: 40px;
		text-align: center;
	}

	.start {
		padding-top: 50px;

		@media @bp_1024 {
			padding-top: 70px;
		}

		span {
			.font-size(20);
			line-height: 28px;
			display: block;
			padding-top: 40px;

			@media @bp_768 {
				display: none;
			}
		}

		.btn-solid {
			padding-top: 16px;
			padding-bottom: 16px;
			width: 260px;

			@media @bp_768 {
				display: inline-block;
				margin: 0 12px;
			}

			&.transparent {
				color: @black;

				&:hover {
					color: @white;
				}
			}

			&.black {
				display: none;

				&:hover {
					background-color: #1a1a1a;
					color: @white;
				}

				@media @bp_768 {
					display: inline-block;
				}
			}
		}
	}
}