/**
 * Configurable list specific styles
 * 
 */

/** General */
	.configurable-list .container {
		flex-wrap: wrap;
	}

		.configurable-list .container > h2 {
			font-size: 38px;
			letter-spacing: -0.01em;
			margin-bottom: 1em;
			flex: 100%;
			text-align: center;
		}

			.configurable-list .list {
				max-width: 1000px;
				margin: 0 auto;
				list-style-type: none;
				padding: 0;
			}
			.configurable-list .list.two-col, 
			.configurable-list .list.three-col {
				max-width: 1200px;
				display: flex;
				flex-wrap: wrap;
			}

				.configurable-list .list.two-col li {
					flex: 0 50%;
					padding: 1em 2em;
				}
				.configurable-list .list.three-col li {
					flex: 0 33.3%;
					padding: 1em 2em;
				}
				.configurable-list .list li {
					position: relative;
					margin-bottom: 2em;
				}

					.configurable-list .list h4 {
						text-transform: uppercase;
						color: #345c41;
						font-weight: 600;
						font-size: 15px;
						line-height: 1.5;
						letter-spacing: 0.1em;
						margin: 0 0 0.5em;
					}

					.configurable-list .list li:last-of-type p:last-of-type {
						margin-bottom: 0;
					}


/** Bullet Style List */
	.configurable-list .list.bullet li {
		padding-left: 30px;
	}
	.configurable-list .list.bullet.two-col li, 
	.configurable-list .list.bullet.three-col li {
		padding-left: 45px;
	}
	.configurable-list .list.bullet li::before {
		content: "";
		width: 10px;
		height: 10px;
		border-radius: 50%;
		position: absolute;
		left: 0;
		top: 5px;
		background-color: #345c41;
	}
	.configurable-list .list.bullet.two-col li::before, 
	.configurable-list .list.bullet.three-col li::before {
		top: calc(1em + 5px);
	}


/** Numbered List */
	.configurable-list .list.number {
		counter-reset: section;
	}

		.configurable-list .list.number li {
			padding-left: 85px;
			min-height: 60px;
			margin-bottom: 2.5em;
		}
		.configurable-list .list.number.two-col li, 
		.configurable-list .list.number.three-col li {
			padding-left: 65px;
		}
		.configurable-list .list.number li::before {
			counter-increment: section;
			content: counters(section,".") " ";
			width: 40px;
			height: 40px;
			border: 2px solid #f5f1ed;
			border-radius: 50%;
			box-sizing: border-box;
			text-align: center;
			display: inline-block;
			position: absolute;
			left: 0;
			top: 0;
			font-weight: 600;
			line-height: 1;
			padding-top: 11px;
			color: #345c41;
			font-size: 14px;
		}
		.configurable-list .list.number.two-col li::before, 
		.configurable-list .list.number.three-col li::before {
			top: 1em;
		}


/** Checkmark List */
	.configurable-list .list.check li {
		padding-left: 60px;
	}
	.configurable-list .list.check.two-col li, 
	.configurable-list .list.check.three-col li {
		padding-left: 45px;
	}
	.configurable-list .list.check li::before {
		content: "";
		width: 18px;
		height: 15px;
		position: absolute;
		left: 0;
		top: 2px;
		background: url('/images/icons/check.svg') no-repeat;
		background-size: contain;
	}
	.configurable-list .list.check.two-col li::before, 
	.configurable-list .list.check.three-col li::before {
		top: calc(1em + 5px);
	}


/** Responsive */
	@media screen and (max-width: 1024px) { 

		#main .configurable-list .list {
			max-width: 90%;
		}

		.configurable-list .list.three-col li {
			flex: 0 50%;
		}

	}

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

		.configurable-list .list.three-col li,
		.configurable-list .list.two-col li {
			flex: 0 100%;
		}

	}