.page-about,
.page-contribute,
.subpage-info {
	color: #fff;
	background: $cd-black;

	.page-content,
	.subpage-content {
		@include font-size(1.3);
		line-height: 1.5;
		font-family: $ff-monosten-a;
		width: $home-grid-width-3;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		a {
			color: #fff;
			text-decoration: none;
			padding-bottom: 1px;
			border-bottom: 2px solid rgba(255, 255, 255, 0.26);

			.no-touch & {

				&:hover {
					border-width: 0;
					animation: link-blink 0.1s 1;
					animation-timing-function: steps(1, end);
					animation-fill-mode: forwards;
					color: $cd-black;
				}
			}

			[data-codetext-char] {
				border: none !important;
				padding-bottom: 0 !important;
			}
		}

		.row {
			margin-bottom: 30px;

			&:last-child {
				margin-bottom: 0;
			}
		}

		.col {
			float: left;
		}

		.col-1 {
			width: $home-grid-width-1;
		}

		.col-2 {
			width: $home-grid-width-2 + $home-grid-gutter;
			position: relative;

			&:after {
				content: '-';
				position: absolute;
				top: -1px;
				left: -15px;
			}
		}

		// @media #{$grid-two-bp} {
		// 	width: $home-grid-width-2;
		// 	padding: 20px 0;

		// 	.col-1,
		// 	.col-2 {
		// 		width: 100%;
		// 	}

		// 	.col-1 {
		// 		position: relative;
		// 		margin: 10px 0 3px;

		// 		&:after {
		// 			content: '-';
		// 			position: absolute;
		// 			top: -1px;
		// 			left: -15px;
		// 		}
		// 	}

		// 	.col-2 {

		// 		&:after {
		// 			display: none;
		// 		}
		// 	}
		// }

		@media #{$grid-two-bp-below} {
			width: 100%;
			max-height: 100%;
			padding: 20px 65px 20px 70px;
			overflow: auto;
			-webkit-overflow-scrolling: touch;

			.col-1,
			.col-2 {
				width: 100%;
			}

			.col-1 {
				position: relative;
				margin: 10px 0 3px;

				&:after {
					content: '-';
					position: absolute;
					top: -1px;
					left: -15px;
				}
			}

			.col-2 {

				&:after {
					display: none;
				}
			}
		}
	}
}

.page-about {

	.page-content {

		a {
			border-bottom: 2px solid $cd-blue;

			.no-touch & {

				&:hover {
					animation: link-blink-blue 0.1s 1;
					animation-timing-function: steps(1, end);
					animation-fill-mode: forwards;
				}
			}
		}
	}

	.sponsor-nexus {
		margin-top: -7px;

		img {
			float: left;
			width: 35px;
			margin-right: 10px;
		}

		a {
			display: block;
			float: left;
			margin-top: 6px;
		}

		@media #{$grid-two-bp-below} {
			margin-top: 10px;
		}
	}
}

.page-contribute {

	.page-content {

		a {
			border-bottom: 2px solid $cd-red;

			.no-touch & {

				&:hover {
					animation: link-blink-red 0.1s 1;
					animation-timing-function: steps(1, end);
					animation-fill-mode: forwards;
				}
			}
		}
	}
}

@keyframes link-blink {
	0%, 100% {
		background: #fff;
		color: $cd-black;
	}
	50% {
		background: $cd-black;
		color: #fff;
	}
}

@keyframes link-blink-blue {
	0%, 100% {
		background: $cd-blue;
		color: $cd-black;
	}
	50% {
		background: $cd-black;
		color: $cd-blue;
	}
}

@keyframes link-blink-red {
	0%, 100% {
		background: $cd-red;
		color: $cd-black;
	}
	50% {
		background: $cd-black;
		color: $cd-red;
	}
}
