/**
 * Author box
 */
.author-box {
	margin-top: 75px;
	margin-bottom: -5px;
	border-top: 1px solid #e1e1e1;
	text-align: center;
	font-family: $title-font;
	
	.image img {
		width: 110px;
		height: 110px;
		display: inline-block;
		margin-top: -77px;
		border-radius: 50%;
		border: 22px solid #fff;
	}
	
	.author > span {
		display: none;
		margin-top: -9px;
		color: $main-color;
		font-size: 11px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.09em;
	}
	
	.author > a {
		display: inline-block;
		margin-top: -5px;
		font-size: 21px;
		font-weight: 600;
		line-height: 1.4;
		-webkit-font-smoothing: antialiased;
	}
	
	.author-bio {
		margin-top: 18px;
		font-size: 16px;
	}
	
	// Social icons use base rules from helpers. This is mostly an extension.
	.social-icons {
		margin-top: 25px;
	}
	
	.social-icons a {
		color: #c6c6c6;
		-webkit-font-smoothing: initial;
		
		&:hover {
			color: #aaa;
		}
	}
	
	.social-icons li {
		//margin-right: 11px;
	}
}

// Alternate style
.author-box-b {
	border: 0;
	padding: 26px 28px;
	background: #f5f5f5;
	text-align: left;
	
	.image {
		float: left;
	}
	
	.image img {
		display: block;
		margin-top: 6px;
		margin-left: 3px;
		margin-right: 22px;
		border: 0;
		
		@include breakpoint(x-small) {
			max-width: 55px;
		}
	}
	
	.content {
		overflow: hidden;
		
		@include breakpoint(x-small) {
			overflow: initial;
		}
	}
	
	.author > a {
		font-size: 20px;
		
		@include breakpoint(x-small) {
			margin-top: 15px;
			margin-bottom: 20px;
		}
	}
	
	.author-bio {
		margin-top: 9px;
		margin-bottom: 0;
		
		@include breakpoint(x-small) {
			margin: 15px 0;
		}
	}
	
	.social-icons {
		margin-top: 10px;
		margin-bottom: -2px;	
	}
}