.section-contribution-guide {

	@media @bp_768 {
		.clearfix;
	}

	.col-1 {

		@media @bp_768 {
			.box-sizing;
			width: 33.33%;
			float: left;
			display: flex;
			flex: 1;
			flex-direction: column;
			justify-content: flex-start;
			justify-content: space-between;
			align-items: flex-start;
		}
	}

	.col-2 {

		@media @bp_768 {
			width: 66.66%;
			float: right;
			flex: 2;
			text-align: right;
		}
	}

	.section-main {

		@media @bp_1024 {
			.clearfix;
			margin: 0;
			display: flex;
			flex-direction: row;
			flex: 1;
			width: 100%;
		}
	}

	.side-filter {
		.clearfix;
		padding-bottom: 30px;
		text-align: left;

		.btn {
			text-align: left;
		}
	}

	.btn-side-filter {
		margin-right: 35px;

		@media @bp_768 {
			margin-top: 10px;
		}
		
		@media @bp_1024 {
			margin-right: 0;
			float: left;
			clear: both;
		}

		@media @bp_1440 {
			margin-top: 25px;
		}

		&:first-child {
			margin-top: 0;
		}
	}

	.guide {
		.font-size(14);
		line-height: 22px;
		display: none;
		text-align: left;

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

		&.active {
			display: inline-block;
		}

		a {
			color: @black;
			font-weight: 500;
			border-bottom: 2px solid @black;
		}

		> h3 {
			.font-size(20);
			line-height: 25px;
			font-weight: 500;
			padding-top: 40px;

			@media @bp_768 {
				.font-size(24);
				line-height: 29px;
				padding-left: 100px;
			}
		}

		h4 {
			.font-size(14);
			line-height: 18px;
			font-weight: 500;
			padding: 20px 0 0 0;
			margin-bottom: 0;
		}

		h4 + p {
			padding-top: 0;
			margin-top: 0;
		}

		h4 + .row {
			padding-top: 15px;
		}

		> *:not(img) {

			@media @bp_768 {
				padding-left: 20%;
			}

			@media @bp_1200 {
				padding-left: 25%;
			}

			@media @bp_1400 {
				padding-left: 20%;
			}
		}

		p:first-child {
			padding-top: 0;
			margin-top: 0;
		}

		strong {
			font-weight: 500;
		}

		p {

			span {
				.font-size(14);
				font-weight: normal;
				color: #5F6062;
			}

			strong + span {
				display: block;
			}
		}

		img {
			margin: 50px 0;

			@media @bp_768 {
				width: 90%;
				float: right;
				clear: both;
				max-width: 724px;
			}

			@media @bp_1200 {
				width: 722px;
			}

			& + p {
				display: block;
				clear: both;
			}

			&:nth-child(even) {
			
				@media @bp_768 {
					float: left;
				}

				@media @bp_1300 {
					float: right;
					margin-right: 50px;
				}
			}
		}

		ul:not(.benefits-list) {
			margin-left: 20px;

			&.list-badges {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				margin: 0 -12px;

				.item {
					list-style: none;
					padding: 12px;
				}
			}

			li:not(.benefit) {
				list-style: disc;
			}

			li.item {
				list-style: none;
			}
		}

		.benefits-list {
			margin: 50px 0;
		}

		table {
			width: 100%;
			border-spacing: 0 2px;
    		border-collapse: separate;

    		&.rewards {

    			td,
    			th {
    				text-align: left;
    				vertical-align: top;
    			}

    			th {
    				vertical-align: bottom;
    			}
    		}

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

    		sup {
    			vertical-align: baseline;
    		}

			tr {
				margin-top: 2px;
			}

			th {
				.font-size(12);
				line-height: 14px;
				letter-spacing: 2px;
				font-weight: 500;
				text-transform: uppercase;
				color: @grey-1;
				text-align: center;
				padding: 6px;
				vertical-align: bottom;

				@media @bp_768 {
					padding: 12px;
				}

				@media @bp_1024 {
					padding: 18px;
				}

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

			td {
				.font-size(14);
				text-align: center;
				color: #5F6062;
				background-color: @white;
				padding: 6px;

				@media @bp_768 {
					padding: 12px;
				}

				@media @bp_1024 {
					padding: 18px;
				}

				&.action-info {
					font-style: italic;
					background-color: #f9f9f9;
				}

				&.bonus {
					background-color: #eee;
				}

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

				strong {
					font-weight: 500;
					color: @black;
				}
			}
		}
	}

	.benefit {
		color: @black;
		border-color: @black;

		&:last-child {
			border-color: @black;
		}

		h3 {

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

			&:after {
				background-image: url('../images/svg/arrow-down.svg');
			}
		}

		.benefit-content {
			padding-right: 0;

			.condensed {
				.font-size(13);
				line-height: 18px;
			}

			ul.condensed {
				.font-size(14);

				li {
					padding-top: 10px;

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

		.break {
			color: @black;
			word-break: break-all;
			font-size: inherit;
		}
	}

	.list-badges {
		.font-size(0);
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin: 0 -16px;

		.item {
			.box-sizing();
			text-align: center;
			padding: 8px 16px;
			width: 50%;

			@media @bp_768 {
				width: 33.33%;
			}

			@media @bp_1024 {
				width: 20%;
			}

			&.last-item {
				border-top: 1px solid @dashboard-grey;
				
				@media @bp_768 {
					border-top: 0;
					border-left: 1px solid @dashboard-grey;
				}
			}
		}
	}

	h4.badge-title {
		.font-size(11);
		line-height: 17px;
		line-height: 16px;
		color: @black;
		font-weight: 500;
		letter-spacing: 1px;
		text-transform: uppercase;
		padding: 10px 0;
	}

	.badge-description {
		.font-size(13);
		line-height: 16px;
		color: #b1b1b1;
		padding: 0;
		margin: 0;

		strong {
			font-weight: 500;
		}
	}

	.cbadge {

		&.hexagon {

			.value {
				line-height: 20px;
			}
		}

		img {
			width: auto;
			float: none;
			margin: 0;
		}
	}

	.row {
		.font-size(0);

		.contribution-badge {
			position: relative;

			&:before {
				.font-size(16);
				content: "+";
				position: absolute;
				top: 50%;
				left: 100%;
				text-align: center;
				width: 18px;
				background-color: transparent;
				color: @black;
				margin-top: -5px;

				@media @bp_1440 {
					width: 24px;
				}
			}

			&:first-child {
				
				&:before {
					content: "=";
				}
			}

			&:last-child {
				
				&:before {
					content: none;
				}
			}
		}
	}
}