.response-author,
.themeberger-author,
.themeberger-comment-author,
.themeberger-context-author{
	a{
		line-height: 1;
		text-decoration: none;
	}
	.name{
		color: black;
		color: var(--global-headline-color);
		font-weight: bold;
	}
	.avatar{
		.square(50px);
		//border-radius: 50%;
		vertical-align: top;
		margin-right: 15px;
		/**/
		-webkit-mask-image: url(../images/avatar.svg);
		mask-image: url(../images/avatar.svg);
		-webkit-mask-mode: alpha;
		mask-mode: alpha;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-size: 100%;
		mask-size: 100%;
		-webkit-mask-position: center;
		mask-position: center;
	}
	position: relative;
	z-index: 5;
}

.response-date,
.entry-header .themeberger-date,
.themeberger-comment-date,
.reply-comment,
.edit-comment{
	font-size: 0.8em;
	color: grey;
	color: var(--global-text-alt);
	margin-left: 7px;
	display: block;
	padding-left: 58px;
	margin-top: -28px;
	margin-bottom: 22px;
    position: relative;
    //top: -20px;
	.m1-sm({
		display: inline;
		padding-left: 0;
		margin-top: 0;
		top: 0;
		&::before{
			display: inline;
			content: "\A";
			white-space: pre;
			margin-right: 7px;
			font-weight: bold;
			.m1-sm({
				content: "\00b7";
				white-space: normal;
			});
		}
	});
	a{
		color: inherit;
		text-decoration: none;
		&:hover,
		&:focus,
		&:active{
			color: blue;
			color: var(--global-link-color);
		}
	}
}


.entry-interactions{
	position: relative;
	list-style: none;
	padding: 0;
	margin: 0;
	padding-left: 0;
	margin-left: 0;
	margin-top: 15px;
	//font-size: 0.8em;
	color: grey;
	color: var(--global-text-alt);
	&:hover{
		.interaction{
			opacity: 0.8;
			.interaction-value{
				opacity: 0.5;
			}
		}
	}
	.interaction{
		position: relative;
		display: inline-block;
		margin-right: 15px;
		white-space: nowrap;
		cursor: default;
		.transition(all 0.15s cubic-bezier(1, .3, .3, 1));
		&:last-child{
			margin-right: 0;
		}
		.interaction-symbol{
			display: inline-block;
			position: relative;
			top: 0;
			margin-right: 5px;
			font-size: 1.2em;
			color: black;
			.transition(all .2s cubic-bezier(1, 3, .3, 1));
		}
		.interaction-key{
			//margin-right: 10px;
			position: absolute;
			top: 0;
			left: 125%;
			display: block;
			background-color: #f4f5f6;
			padding: 2px 7px;
			//margin-top: -2px;
			z-index: 1;
			opacity: 0;
			pointer-events: none;
			text-transform: uppercase;
			font-weight: bold;
			.translateX(-50%);
			.transition(all 0.2s cubic-bezier(1, .3, .3, 1));
			.drop-shadow();
		}
		.interaction-value{
			color: black;
			color: var(--global-headline-color);
			.transition(all 0.1s cubic-bezier(1, .3, .3, 1));
		}
		&:hover{
			opacity: 1;
			.interaction-symbol,
			.interaction-value{
				opacity: 1;
			}
			.interaction-symbol{
				.scale(1.35);
			}
			.interaction-key{
				opacity: 1;
				.translateX(0%);
			}
		}
	}
}


.page-links{
	color: grey;
	color: var(--global-text-alt);
	font-size: 0.8em;
	a{
		padding: 7px;
		color: inherit;
		text-decoration: none;
		&:hover,
		&:focus,
		&:active{
			color: blue;
			color: var(--global-link-color);
		}
	}
	.current{
		padding: 7px;
		color: black;
		color: var(--global-headline-color);
		font-weight: bold;
	}
}


.site-main{
	.comment-navigation,
	.posts-navigation,
	.post-navigation{
		width: 100%;
		max-width: 700px;
		margin: auto auto;
		margin-bottom: 0;
		& + .pagination{
			width: 100%;
			max-width: 700px;
			margin: auto auto;
			margin-bottom: 0;
			height: 50px;
			line-height: 50px;
			text-align: center;
			.m1-sm({
				margin-top: -50px;
			});
		}
	}
}

.posts-navigation{
	.site-main &{
		margin-top: 4.4em;
	}
	padding: 0 20px;
	height: 50px;
	line-height: 50px;
	//background-color: #f4f5f6;
	font-size: 0.8em;
	.nav-previous,
	.nav-next{
		a{
			text-transform: uppercase;
			font-weight: bold;
			.transition(all 0.15s cubic-bezier(1, .3, .3, 1));
			.m1-sm({
				&::after{
					content: "";
					display: block;
					position: absolute;
					top: 50%;
					height: 40px;
					width: 40px;
					line-height: 36px;
					.translateY(-50%);
					//background-position: center center;
					//background-size: contain;
					//background-repeat: no-no-repeat;
					text-align: center;
					opacity: 0.5;
					border-radius: 50%;
					background-color: transparent;
					border: #999 2px solid;
					font-weight: bold;
					font-size: 1.2em;
					.transition(all 0.25s cubic-bezier(1, .3, .3, 1));
				}
			});
			&:hover,
			&:focus,
			&:active{
				color: var(--global-headline-color);
				.m1-sm({
					&::after{
						opacity: 1;
						background-color: var(--global-link-background);
						border: var(--global-link-background) 2px solid;
					}
				});
			}
		}
	}
	.nav-previous{
		.m1-sm({
			a{
				margin-right: 40px;
				padding-right: 10px;
				&::after{
					content: "\2192";
					right: -40px;
					//background-image: url(images/navigation-arrow-right.svg);
				}
			}
		});
	}
	.nav-next{
		.m1-sm({
			a{
				margin-left: 40px;
				padding-left: 10px;
				&::after{
					content: "\2190";
					left: -40px;
					//background-image: url(images/navigation-arrow-left.svg);
				}
			}
		});
	}
	a{
		display: inline-block;
		position: relative;
		color: inherit;
		text-decoration: none;
		&:hover,
		&:focus,
		&:active{
			color: blue;
			color: var(--global-link-color);
		}
	}
	& + .pagination{
		.site-main &{
			margin-bottom: 4.4em;
		}
		font-size: 0.8em;
		font-weight: bold;
		a{
			&.prev,
			&.next{
				display: none;
			}
			padding: 7px;
			pointer-events: auto;
			color: inherit;
			text-decoration: none;
			background-color: transparent;
			border-radius: 50%;
			display: inline-block;
			line-height: 1;
			width: 2em;
			height: 2em;
			.transition(all 0.15s cubic-bezier(1, .3, .3, 1));
			&:hover,
			&:focus,
			&:active{
				color: blue;
				color: var(--global-headline-color);
				font-weight: bold;
				background-color: var(--global-link-background);
			}
		}
		.current{
			padding: 7px;
			color: white;
			color: var(--header-text-color);
			background-color: blue;
			background-color: var(--global-link-color);
			border-radius: 50%;
			display: inline-block;
			line-height: 1;
			width: 2em;
			height: 2em;
		}
	}
}

.comment-navigation{
	position: relative;
	height: auto;
	line-height: 50px;
	padding: 20px 0;
	padding-bottom: 0;
	//background-color: #f4f5f6;
	font-size: 0.8em;
	color: grey;
	color: var(--global-text-alt);
	/*
	.nav-previous{
		padding-left: 20px;
	}
	.nav-next{
		padding-right: 20px;
	}
	*/

	.nav-previous,
	.nav-next{
		a{
			position: relative;
			text-transform: uppercase;
			font-weight: bold;
			.transition(all 0.15s cubic-bezier(1, .3, .3, 1));
			.m1-sm({
				&::after{
					content: "";
					display: block;
					position: absolute;
					top: 50%;
					height: 30px;
					width: 30px;
					line-height: 25px;
					.translateY(-50%);
					//background-position: center center;
					//background-size: contain;
					//background-repeat: no-no-repeat;
					text-align: center;
					opacity: 0.5;
					border-radius: 50%;
					background-color: transparent;
					border: #999 2px solid;
					font-weight: bold;
					font-size: 1em;
					.transition(all 0.25s cubic-bezier(1, .3, .3, 1));
				}
			});
			&:hover,
			&:focus,
			&:active{
				color: var(--global-headline-color);
				.m1-sm({
					&::after{
						opacity: 1;
						background-color: var(--global-link-background);
						border: var(--global-link-background) 2px solid;
					}
				});
			}
		}
	}
	.nav-previous{
		.m1-sm({
			a{
				margin-left: 30px;
				padding-left: 10px;
				&::after{
					content: "\2190";
					left: -30px;
					//background-image: url(images/navigation-arrow-left.svg);
				}
			}
		});
	}
	.nav-next{
		.m1-sm({
			a{
				margin-right: 30px;
				padding-right: 10px;
				&::after{
					content: "\2192";
					right: -30px;
					//background-image: url(images/navigation-arrow-right.svg);
				}
			}
		});
	}
	a{
		color: inherit;
		text-decoration: none;
		&:hover,
		&:focus,
		&:active{
			color: blue;
			color: var(--global-link-color);
		}
	}
	& + ul.page-numbers{
		pointer-events: none;
		position: relative;
		display: block;
		list-style: none;
		margin: 0;
		padding-left: 0;
		text-align: center;
		height: 50px;
		line-height: 50px;
		margin-top: -50px;
		padding: 0 155px;
		color: grey;
		color: var(--global-text-alt);
		font-size: 0.8em;
		li{
			display: inline-block;
			font-weight: bold;
		}
		/*
		a{
			padding: 7px;
			pointer-events: auto;
			color: inherit;
			text-decoration: none;
			&:hover,
			&:focus,
			&:active{
				color: blue;
				color: var(--global-link-color);
			}
		}
		.current{
			padding: 7px;
			color: black;
			color: var(--global-headline-color);
			font-weight: bold;
		}
		*/
		a{
			&.prev,
			&.next{
				display: none;
			}
			padding: 7px;
			pointer-events: auto;
			color: inherit;
			text-decoration: none;
			background-color: transparent;
			border-radius: 50%;
			display: inline-block;
			line-height: 1;
			width: 2em;
			height: 2em;
			.transition(all 0.15s cubic-bezier(1, .3, .3, 1));
			&:hover,
			&:focus,
			&:active{
				color: blue;
				color: var(--global-headline-color);
				font-weight: bold;
				background-color: var(--global-link-background);
			}
		}
		.current{
			padding: 7px;
			color: white;
			color: var(--header-text-color);
			background-color: blue;
			background-color: var(--global-link-color);
			border-radius: 50%;
			display: inline-block;
			line-height: 1;
			width: 2em;
			height: 2em;
		}
	}
}
