/*
	Small additions on top of the Massively base theme.
	Kept separate so the vendored main.css stays untouched.
*/

/* Feature list (used on features.html) */

	.feature-list {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		list-style: none;
		margin: 0 0 2rem 0;
		padding: 0;
	}

		.feature-list > li {
			-webkit-flex: 0 0 25%;
			flex: 0 0 25%;
			max-width: 25%;
			padding: 2rem 1.5rem;
			text-align: center;
			box-sizing: border-box;
		}

		.feature-list .feature-icon {
			display: -webkit-inline-flex;
			display: inline-flex;
			-webkit-align-items: center;
			align-items: center;
			-webkit-justify-content: center;
			justify-content: center;
			width: 3.75rem;
			height: 3.75rem;
			margin: 0 0 1.25rem 0;
			border-radius: 100%;
			background-color: #18bfef;
			color: #ffffff;
			font-size: 1.4rem;
		}

		.feature-list h3 {
			margin: 0 0 0.5rem 0;
			font-size: 1.1rem;
		}

		.feature-list p {
			margin: 0;
			opacity: 0.75;
			font-size: 0.95rem;
			line-height: 1.6;
		}

		@media screen and (max-width: 980px) {
			.feature-list > li {
				-webkit-flex: 0 0 50%;
				flex: 0 0 50%;
				max-width: 50%;
			}
		}

		@media screen and (max-width: 480px) {
			.feature-list > li {
				-webkit-flex: 0 0 100%;
				flex: 0 0 100%;
				max-width: 100%;
			}
		}