.section-start-contributing {
	padding: 0;
	height: 100vh;

	.page {
		.box-sizing();
		width: 100%;
		display: flex;
		flex: 1;
		flex-direction: column;
	}

	header {
		background-color: @black;
		height: 40px;
		text-align: right;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding-right: @page_spacer_mobile;

		@media @bp_768 {
			height: 65px;
			padding-right: @page_spacer_tablet;
		}

		@media @bp_1200 {
			padding-right: @page_spacer_desktop;
		}

		.btn-back-to-page {
			.font-size(10);
			padding: 0 10px;

			@media @bp_768 {
				padding: 6px 30px;
			}
		}
	}

	.logo {
		.font-size(0);
		width: 40px;
		height: 40px;
		display: inline-block;
		vertical-align: middle;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 2;

		@media @bp_768 {
			width: 65px;
			height: 65px;
		}

		img {
			width: 100%;
		}
	}

	.content-container {
		.box-sizing();
		position: relative;
		display: flex;
		flex-direction: column;
		flex: 1;

		@media @bp_768 {
			padding-top: 70px;
			padding-bottom: 70px;
		}

		@media @bp_1200 {
			padding-top: 90px;
			padding-bottom: 90px;
		}

		@media @bp_800_height_max {
			padding-top: 90px;
		}

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

	.content-header {
		.box-sizing();
		position: relative;
		text-align: center;

		article {
			margin: 0 auto;
			font-weight: 500;
			padding-bottom: 20px;
			max-width: 832px;

			@media @bp_768 {
				padding-bottom: 30px;
			}

			@media @bp_1200 {
				padding-bottom: 50px;
			}
		}

		h1 {
			.font-size(32);
			line-height: 39px;
			font-weight: 500;
			
			@media @bp_768 {
				.font-size(32);
				line-height: 39px;
			}

			@media @bp_1200 {
				.font-size(38);
				line-height: 44px;
			}

			@media @bp_1400 {
				.font-size(42);
				line-height: 49px;
			}
		}
	}

	.content-wrapper {
		.box-sizing();
		text-align: center;
		width: 100%;
		flex-grow: 1;
		justify-content: center;
		position: relative;

		@media @bp_480 {
			margin: 0 auto;
		}

		@media @bp_768 {
			display: flex;
			flex: 1;
			overflow: hidden;
		}
	}

	.content {
		.box-sizing();
		text-align: center;
		width: 100%;
		max-width: 832px;

		@media @bp_480 {
			margin: 0 auto;
			position: relative;
		}

		@media @bp_768 {
			align-self: center;
			scrollbar-width: thin;
			//overflow: hidden;
			//overflow-y: auto;
		}

		&::-webkit-scrollbar {
			width: 5px;
		}

		&::-webkit-scrollbar-button {
			//background: @grey;
		}

		&::-webkit-scrollbar-track-piece {
			background: @white-1;
		}

		&::-webkit-scrollbar-thumb {
			background: @grey;
		}

		> article {
			width: 100%;
			margin: 0 auto;
		}


		.custom-checkbox + label {
			.font-size(12);
			padding-left: 35px;
			line-height: 1;
			padding-top: 8px;
			padding-bottom: 8px;

			&:before {
				border-width: 2px;
			}
		}

		.custom-checkbox:checked + label {

			&:after {
				top: 2px;
				left: 2px;
				width: 20px;
				height: 20px;
			}
		}

		fieldset {
			text-align: left;
		}
	}

	.content-footer {
		.box-sizing();
		position: relative;
		text-align: center;
		width: 100%;
		padding: 24px 0;

		@media @bp_768 {
			min-height: 100px;
			display: flex;
			flex-shrink: 0;
		}

		article {
			width: 100%;
			margin: 0 auto;
		}

		.btn-continue {
			width: 100%;
			margin: 0 auto;
			max-width: 294px;

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

			&:disabled {
				.prevent-click();
			}
		}
	}

	.start-contributing-wrapper {

		&.open {

			.selector {
				background-color: @black;

				@media @bp_1024 {
					padding-top: 40px;
					padding-bottom: 40px;
				}

				&.active {

					&.selector-add {
				
						h2 {

							&:before {
								background-image: url('../images/svg/icon-add.svg');
							}
						}
					}

					&.selector-edit {
						
						h2 {

							&:before {
								background-image: url('../images/svg/icon-edit.svg');
							}
						}
					}
				}

				h2 {
					padding-top: 0;

					&:before {
						
						@media @bp_480 {
							margin-top: -15px;
						}
					}
				}

				p {
					max-height: 0px;
					padding: 0;
					margin: 0;
				}

			}

			.tab-content-wrapper {
				.transition(max-height, 2000ms, ease-out);
				max-height: 10000px;
				overflow: visible;
			}
		}
	}

	.selectors {
		display: flex;
		flex-direction: row;
		color: @white;
		background-color: @black;

		.selector {
			.transition(all, 150ms, ease-in-out);
			.font-size(12);
			.box-sizing;
			line-height: 14px;
			width: 50%;
			text-align: center;
			flex-grow: 1;
			padding: 10px;
			position: relative;
			cursor: pointer;

			@media @bp_768 {
				padding: 20px;
			}

			@media @bp_768 {
				.font-size(14);
				line-height: 18px;
			}

			&.active {
				color: @black;
				background-color: @white;
			}

			&:first-child {
				border-right: 1px solid @white;

				@media @bp_768 {
					border-right: 2px solid @white;
				}
			}

			&:last-child {
				border-left: 1px solid @white;

				@media @bp_768 {
					border-left: 1px solid @white;
				}
			}

			&.selector-add {
				
				h2 {

					&:before {
						background-image: url('../images/svg/icon-add-white.svg');
					}
				}
			}

			&.selector-edit {
				
				h2 {

					&:before {
						background-image: url('../images/svg/icon-edit-white.svg');
					}
				}
			}

			h2 {
				.transition(padding, 150ms, ease-in-out);
				.font-size(20);
				line-height: 22px;
				font-weight: 500;
				padding-top: 10px;
				position: relative;

				@media @bp_360 {
					.font-size(22);
					line-height: 24px;
				}

				@media @bp_768 {
					.font-size(28);
					line-height: 34px;
				}

				@media @bp_880 {
					.font-size(32);
					line-height: 38px;
				}

				&:before {
					content: "";
					display: block;
					background-repeat: no-repeat;
					background-position: center;
					background-size: 30px;
					width: 20px;
					height: 20px;
					margin: 0 auto;
					padding-bottom: 20px;

					@media @bp_480 {
						position: absolute;
						left: 20px;
						top: 50%;
						margin-top: -10px;
						padding-bottom: 0;
					}

					@media @bp_768 {
						width: 30px;
						height: 30px;
						background-size: 50px;
					}
				}


				br {

					@media @bp_768 {
						display: none;
					}
				}
			}

			p {
				.transition(all, 150ms, ease-in-out);
				overflow: hidden;
				max-height: 500px;
				height: auto;
			}
		}	
	}

	.tab-content-wrapper {
		.transition(max-height, 300ms, ease-out);
		background-color: @white;
		max-height: 0;
		height: auto;
		overflow: hidden;
	}

	.tab-content {
		display: none;
		color: @black;
		padding: 20px;

		@media @bp_768 {
			padding: 10%;
		}

		@media @bp_1024 {
			padding: 10%;
		}

		&.active {
			display: block;
		}

		&.tab-content-edit {
			//min-height: 200px;
		}

		&.tab-content-add {
		}

		h2 {
			.font-size(12);
			line-height: 28px;
			font-weight: 500;
			padding: 20px 0 30px 0;
		}

		.grid {
			.clearfix;
			margin: -12px;

			.grid-item {
				.box-sizing();
				padding: 12px;
				width: 100%;

				@media @bp_768 {
					width: 50%;
					float: left;
				}

				@media @bp_1024 {
					width: 25%;
					float: left;
				}

				&:nth-child(2n+1) {

					@media @bp_768 {
						clear: both;
					}

					@media @bp_1024 {
						clear: none;
					}
				}
			}
		}
	}

	.search {
		overflow: visible;
	}

	.search-header {
		position: relative;
		z-index: 5;
	}

	.search-input {
		.font-size(12);
		height: 44px;
		border: 0;
		padding: 12px 160px 12px 12px;
		background-color: @white-1;
		background-repeat: no-repeat;
		background-position: right 130px center;
		background-image: url('../images/svg/search.svg');
		background-size: 20px;

		@media @bp_600 {
			.font-size(14);
			height: 70px;
			padding: 25px 250px 25px 30px;
			background-position: right 210px center;
		}
	}

	.search-filter {
		.font-size(10);
		text-transform: uppercase;
		background-color: @black;
		font-weight: 500;
		letter-spacing: 2px;
		color: @white;
		background-repeat: no-repeat;
		background-position: right 20px center;
		background-image: url('../images/svg/chevron-down-white.svg');
		background-size: 12px;
		position: absolute;
		right: 0;
		top: 0;
		width: 120px;
		z-index: 1;

		@media @bp_600 {
			.font-size(12);
			width: 186px;
		}


		&:hover {

			.options {
				display: block;
			}
		}

		.selection {
			height: 44px;
			padding: 0 0 0 12px;
			display: flex;
			align-items: center;

			@media @bp_600 {
				padding: 0 0 0 30px;
				height: 70px;
			}
		}

		.options {
			display: none;
			position: absolute;
			top: 44px;
			left: 0;
			right: 0;
			background-color: @black;
			padding: 10px 0;
			border-top: 1px solid @white;

			@media @bp_600 {
				top: 70px;
				padding: 20px 0;
			}

			.option {
				padding: 5px 12px;
				cursor: pointer;
				text-align: left;

				@media @bp_600 {
					padding: 5px 30px;
				}

				&.active {
					display: none;
				}

				&:hover {
					background-color: rgba(255,255,255,0.1);
				}
			}
		}
	}

	.search-results {
		background-color: @white;
		position: relative;
		max-height: 700px;
		overflow: hidden;
		overflow-y: auto;


		&.loading {
			z-index: 0;
			height: 60px;

			* {
				display: none;
			}

			&:before {
				display: block;
				background-color: @white;
			}
		}

		.item {
			padding: 0;
			border-bottom: 1px solid @white-1;
		}

		.zero-state {
			margin: 0;
			padding: 20px 0;
			color: @grey;
			text-align: left;
		}
	}

	.search-results-card {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		padding: 12px 0;
		cursor: pointer;
		text-align: left;
		position: relative;

		@media @bp_600 {
			height: 40px;
			flex-direction: row;
			justify-content: space-between;
		}


		&:hover {
			background-color: #f9f9f9;
		}

		.column {
			align-items: center;
			display: flex;

			@media @bp_600 {
				position: relative;
			}
		}

		.col-1 {
			padding-left: 50px;
			
			@media @bp_600 {
				flex: 6;
			}

			@media @bp_1280 {
				flex: 5;
			}
		}

		.col-2 {
			.font-size(10);
			line-height: 14px;
			color: @black-1;
			text-transform: uppercase;		
			text-align: left;
			padding-left: 50px;
			white-space: nowrap;

			@media @bp_600 {
				padding-left: 0;
				flex: 2;
				flex-direction: row;
			}

			@media @bp_1280 {
				flex: 3;
			}

			.country {
				margin-left: 6px;

				img {
					vertical-align: middle;
				}
			}
		}
		
		.col-3 {
			padding-left: 50px;

			@media @bp_600 {
				padding-left: 0;
				width: 150px;
				justify-content: flex-end;
			}

			.btn {
				.prevent-click();
				.font-size(10);
				line-height: 1;
				text-transform: uppercase;
				font-weight: 500;
				padding: 6px 12px;
				height: auto;
				border: 2px solid @white-2;
			}
		}

		.zero-state {
			color: @grey-1;

			@media @bp_768 {
				padding: 20px 0 15px 0;
				text-align: left;
			}
		}
		
		figure {
			position: absolute;
			left: 0;
			top: 50%;
			margin-top: -20px;
			width: 40px;
			height: 40px;
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;

			@media @bp_600 {
				top: 0;
				margin: 0;
			}
		}

		h3 {
			.font-size(14);
			.clamp-lines(1);
			font-weight: 500;
		}
	}

	.pagination {
		padding: 30px 0;

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

	.squares-grid {
		.clearfix;
		margin: -12px;
		padding-top: 10px;

		.item {
			.box-sizing();
			float: left;
			width: 33.33%;
			padding: 12px;

			/*@media @bp_768 {
				width: 25%;
			}

			@media @bp_880 {
				width: 25%;
			}*/
		}
	}

	.square {
		position: relative;
		padding-top: 100%;
		background-color: @white-2;
		color: @black;
		cursor: pointer;

		&.artist {
			padding-top: 0;
			background-color: transparent;

			.status {
				display: none;
			}

			figure {
				width: 100%;
				padding-top: 100%;
				background-size: cover;
				background-repeat: no-repeat;
				background-position: center top;
				position: relative;

				&:hover {

					figcaption {
						.opacity(1);
					}
				}

				button {
					.font-size(12);
					position: absolute;
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
					width: 100%;
					height: 100%;
					color: @white;
					text-transform: uppercase;
					font-family: @suiss-int-mono;
					letter-spacing: 3px;
					font-weight: bold;
					text-align: center;

					&.btn-edit {

						&:after {
							content: "";
							display: inline-block;
							height: 8px;
							width: 15px;
							background-image: url('../images/svg/arrow-right-white.svg');
							background-position: right center;
							background-size: 10px;
							background-repeat: no-repeat;
						}
					}
				}
			}

			figcaption {
				.transition(opacity, 200ms, linear);
				.opacity(0);
				.prevent-click();
				background-color: rgba(0,0,0,0.65);
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				display: flex;
				flex-direction: column;
			}

			h3 {
				.clamp-lines(2);
				.font-size(12);
				line-height: 16px;
				position: relative;
				margin: 5px 0;
				padding: 0;
				height: 30px;
				text-align: left;
				flex: unset;
				align-items: flex-start;

				@media @bp_768 {
					height: 50px;
				}
			}
		}

		h3 {
			.box-sizing();
			.font-size(14);
			line-height: 18px;
			font-weight: 500;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			padding: 20px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: center;
		}
	}

	.dashboard-activity-log {
		max-width: 832px;
		margin: 0 auto;
		width: 100%;
		padding-top: 50px;

		@media @bp_768 {
			padding-bottom: 150px;
		}

		.dashboard-section-title {
			.font-size(18);
			line-height: 26px;
			font-weight: 500;
			margin: 0;
			padding: 0 0 10px 0;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}

		.dashboard-section-footer {
			padding-top: 20px;
		}

		.dashboard-table {
			width: 100%;

			a {
				color: inherit;
			}

			> thead {

				> tr {

					> th {
						position: relative;
						padding-left: 8px;
						padding-right: 8px;

						&:after {
							content: "";
							position: absolute;
							left: 0;
							right: 0;
							bottom: 0;
							height: 1px;
							background-color: @dashboard-grey;
						}
					}
				}
			}

			> tbody {
				
				> tr {

					&:first-child {

						> td {
							padding-top: 18px;
						}
					}

					> td {
						padding: 8px;
						border-bottom: 0;

						&:first-child {
							
							@media @bp_768 {
								width: 300px;
							}
						}

						&:last-child {
							padding-right: 12px;
						}
					}
				}
			}

			.entry {
				.clamp-lines(1);
				max-width: 300px;
			}
		}

		.report-wrapper {
			position: relative;
			min-height: 35px;

			&.show {

				.btn-activity-points {
					z-index: 2;
				}

				.review-report {
					display: block;
					z-index: 1;
				}
			}
		}

		.btn-activity-points {
			.font-size(11);
			margin-left: -12px;
			padding: 6px 12px;
			border: 0;
			width: auto;
			color: @black;
			font-weight: 500;
			border: 1px solid transparent;

			&:hover {
				.text-decoration-ink;
				color: @black;
				background-color: transparent;
			}
			
			&.active {
				background-color: @white;
				color: @black;
				border: 1px solid @dashbord-module-border-color;
				border-bottom: 1px solid @white;

				&:hover {
					text-decoration: none;
					background-color: @white;
				}
			}
		}

		.dashboard-table {
			.font-size(13);
			color: @dashbord-table-font-color;
			width: 100%;

			&.active-sort-col-1 {

				th:nth-child(1),
				td:nth-child(1) {
					color: @black;
				}
			}

			&.active-sort-col-2 {

				th:nth-child(2),
				td:nth-child(2) {
					color: @black;
				}
			}

			&.active-sort-col-3 {

				th:nth-child(3),
				td:nth-child(3) {
					color: @black;
				}
			}

			&.active-sort-col-4 {

				th:nth-child(4),
				td:nth-child(4) {
					color: @black;
				}
			}

			&.active-sort-col-5 {

				th:nth-child(5),
				td:nth-child(5) {
					color: @black;
				}
			}

			&.active-sort-col-6 {

				th:nth-child(6),
				td:nth-child(6) {
					color: @black;
				}
			}

			&.active-sort-col-7 {

				th:nth-child(7),
				td:nth-child(7) {
					color: @black;
				}
			}

			&.active-sort-col-8 {

				tbody th:nth-child(8),
				tbody td:nth-child(8) {
					color: @black;
				}
			}

			.blue {
				color: @dashboard-blue;
			}

			a:not[class] {
				color: inherit;
			}


			thead {
				font-weight: normal;
				text-transform: uppercase;
				border-bottom: 2px solid @dashbord-module-border-color;
			}

			tr {

				&:last-child {

					td {
						border-bottom: 0;
					}
				}
			}

			th,
			td {
				padding: 4px;
				text-align: left;

				&:first-child {
					padding-left: 0;
				}

				&:last-child {
					padding-right: 0;
				}
			}

			th {
				.font-size(11);
				letter-spacing: 1px;
				font-weight: normal;
			}

			td {
				border-bottom: 1px solid @dashbord-module-border-color;
				position: relative;
			}

			label {
				position: relative;

				&.sortable {
					cursor: pointer;
				}

				&.active {

					&.desc {

						&:after {
							border-top: 5px solid @black;
						}
					}

					&.asc {

						&:after {
							border-bottom: 5px solid @black;
						}
					}
				}


				&.asc,
				&.desc {
					cursor: pointer;
					position: relative;
					display: inline-block;
					padding-right: 15px;

					&:after {
						content: "";
						width: 0;
						height: 0;
						margin-left: 3px;
						display: inline-block;
						position: absolute;
						right: 0;
						top: 7px;
						border-left: 5px solid transparent;
						border-right: 5px solid transparent;
						border-top: 5px solid @grey-1;
					}
				}

				&.asc {

					&:after {
						border-bottom: 5px solid @grey-1;
						border-top: 0;
					}
				}
			}
		}

		.review-report {
			.box-sizing();
			background-color: @white;
			color: @black;
			padding: 0 0 12px 0;
			z-index: 1;
			display: none;
			position: absolute;
			left: 0;
			right: 0;
			border: 1px solid @dashbord-module-border-color;
			margin-left: -12px;
			left: -200px;
			right: -160px;
			top: 34px;

			@media @bp_768 {
				min-width: 460px;
				max-width: 590px;
				left: auto;
				right: 0;
			}

			@media @bp_1200 {
				left: 0;
				right: auto;
				min-width: 430px;
			}

			h4 {
				.font-size(14);
				line-height: 18px;
				font-weight: 500;
				padding: 12px;
			}

			table {	
				width: 100%;
			}

			tbody,
			tfoot {
			
				td {
					.font-size(12);
					background-color: transparent;
					padding: 4px;
					text-align: center;
					color: #A3A6A6;

					&:first-child {
						padding-left: 12px;
					}
				}
			}

			tbody {

				tr {

					&:last-child {

						td {
							margin-bottom: 14px;
						}
					}

					&:hover {

						td {
							background-color: #f7f7f7;
						}
					}
				}

				td {
					position: relative;
					border: 0;

					&:first-child {
						text-align: left;
					}

					&:last-child {
						padding-right: 30px !important;
						text-align: right;

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

						&.accepted {

							&:after {
								background-color: @dashboard-blue-light;
							}
						}

						&:after {
							content: "";
							display: inline-block;
							width: 8px;
							height: 8px;
							background-color: @dashboard-red;
							position: absolute;
							top: 50%;
							right: 12px;
							margin-top: -4px;
						}
					}
				}
			}

			tfoot {
			
				.line {
					font-weight: 500;
					
					td {
						text-align: left;
						padding-top: 8px;
						border-top: 2px solid #f5f5f5;
						vertical-align: top;

						&:last-child {
							padding-right: 12px !important;
						}
					}
				}
			}

			.btn-secondary {
				float: right;
				color: @dashboard-blue;
				margin-top: 10px;

				&:hover {
					color: @black;
				}
			}
		}
	}
}