// Bootstrap imports

// Core variables and mixins
@import "bootstrap/variables";
@import "bootstrap/mixins";
// Components w/ JavaScript
@import "bootstrap/carousel";

//vars
$primary-font: "Georgia", serif; // For content
$secondary-font: "Open Sans", sans-serif; // For headings and navigation


// Media queries breakpoints
// --------------------------------------------------

// Extra small screen / phone
// Note: Deprecated $screen-xs and $screen-phone as of v3.0.1
$screen-xs:                  480px !default;
$screen-xs-min:              $screen-xs !default;
$screen-phone:               $screen-xs-min !default;

// Small screen / tablet
// Note: Deprecated $screen-sm and $screen-tablet as of v3.0.1
$screen-sm:                  768px !default;
$screen-sm-min:              $screen-sm !default;
$screen-tablet:              $screen-sm-min !default;

// Medium screen / desktop
// Note: Deprecated $screen-md and $screen-desktop as of v3.0.1
$screen-md:                  992px !default;
$screen-md-min:              $screen-md !default;
$screen-desktop:             $screen-md-min !default;

// Large screen / wide desktop
// Note: Deprecated $screen-lg and $screen-lg-desktop as of v3.0.1
$screen-lg:                  1200px !default;
$screen-lg-min:              $screen-lg !default;
$screen-lg-desktop:          $screen-lg-min !default;

// So media queries don't overlap when required, provide a maximum
$screen-xs-max:              ($screen-sm-min - 1) !default;
$screen-sm-max:              ($screen-md-min - 1) !default;
$screen-md-max:              ($screen-lg-min - 1) !default;


// Author Widget
.widget-author {
	text-align: center;
	overflow: hidden;
	padding-bottom: 20px;

	&.boxed--padded {
		padding: 0;
	}

	h4 {
		margin-bottom: 10px;
	}

	p {
		color: #9a9a90;
		line-height: 1.5;
		font-size: 14px;
		font-family: $secondary-font;
	}
}

.widget-author__image-container {
	position: relative;
	margin-bottom: 45px;

	@media (min-width: $screen-sm-min) {
		margin-bottom: 55px;
	}
}

.widget-author__avatar > .avatar {
	position: absolute;
	left: 50%;
	margin-left: -45px;
	bottom: -45px;
	box-shadow: 0 0 0 8px #fff;
	border-radius: 50%;
	z-index: 2;
}

.widget-author__avatar--blurred {
	overflow: hidden;
	height: 125px;

	&::before {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		content: "";
		background: rgba(0,0,0,0.5);
		z-index: 1;
	}

	> img {
		width: 100%;
		height: auto;
		filter: url('../blur.svg#blur');
		-webkit-filter: blur(5px);
		transform: scale(1.05);
		margin-top: -20%;
	}
}

.widget-author__content {
	p {
		margin-bottom: 7px;
	}

	h2 {
		margin-bottom: 10px;
	}
}

.social-icons__container {
	display: inline-block;
	width: 40px;
	height: 40px;
	background: #efefeb;
	margin: 0 3px;
	line-height: 40px;
	border: none;
	border-radius: 4px;
}