@charset"UTF-8";

/* START: utilities */

.no-gutter {
	padding-right: 0;
	padding-left: 0;
}

@media (max-width: 767px) {
	.row-xs {
		margin-right: -15px;
		margin-left: -15px;
	}
	.no-gutter-xs {
		padding-right: 0;
		padding-left: 0;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.row-sm {
		margin-right: -15px;
		margin-left: -15px;
	}
	.no-gutter-sm {
		padding-right: 0;
		padding-left: 0;
	}
}

@media (min-width: 992px) and (max-width: 1199px) {
	.row-md {
		margin-right: -15px;
		margin-left: -15px;
	}
	.no-gutter-md {
		padding-right: 0;
		padding-left: 0;
	}
}

@media (min-width: 1129px) {
	.row-lg {
		margin-right: -15px;
		margin-left: -15px;
	}
	.no-gutter-lg {
		padding-right: 0;
		padding-left: 0;
	}
}


/* END: utilities */

body {
	/* Background image is centered vertically and horizontally at all times */
	background-position: center center;
	/* Background image doesn't tile */
	background-repeat: no-repeat;
	/* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
	background-attachment: fixed;
	/* This is what makes the background image rescale based
     on the container's size */
	background-size: cover;
	/* Set a background color that will be displayed
     while the background image is loading */
	background-color: #dfdfdf;
}

#shell-container, #error-container {
	padding-top: 20px;
	padding-bottom: 20px;
}

#page-spinner {
	display: none;
}

#page-spinner.active {
	display: table;
	position: absolute;
	height: 100%;
	width: 100%;
	background: #aaa;
	opacity: 0.5;
	z-index: 100;
	text-align: center;
}

#page-spinner > div {
	display: table-cell;
	vertical-align: middle;
}

.profile-avatar {
	width: 100%;
	min-width: 64px;
	max-width: 128px;
}

.profile-avatar:hover {
	/* shadow-z-3 */
	box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23), 0 10px 30px rgba(0, 0, 0, 0.19);
}

@media (max-width: 767px) {
	/* sm */
	.profile-avatar-block {
		/*display: table-cell;
		height: 100%;
		vertical-align: middle;
		float: none;*/
	}
}

.twitter-sandbox iframe {
	width: 100% !important;
}

.works .card {
	min-height: 280px;
	max-height: 280px;
	height: 280px;
	margin-bottom: 20px;
	padding: 20px;
	background-color: #fff;
	border-radius: 2px;
	border: 0;
	overflow: auto;
}

.card:hover {
	box-shadow: 0 10px 18px rgba(0, 0, 0, 0.22), 0 14px 45px rgba(0, 0, 0, 0.25);
}

.social-action-icon {
	border-radius: 50%;
	margin: 0.25em;
	padding: 0.25em;
	background: #000;
	width: 1.5em;
	height: 1.5em;
	color: #eee;
	/* shadow-z-1 */
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.12);
}

.social-action-icon:hover {
	/* shadow-z-3 */
	box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23), 0 10px 30px rgba(0, 0, 0, 0.19);
}

.social-share-icon {
	/*border-radius: 50%;*/
	margin: 0.25em;
	padding: 0.25em;
	background: #000;
	width: 1.5em;
	height: 1.5em;
	color: #eee;
	/* shadow-z-1 */
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.12);
}

.social-share-icon::after {
	display: block;
	position: fixed;
	bottom: -0.13em;
	left: -0.13em;
	font-size: 0.25em;
	color: #aaa;
	/* fa-share-alt */
	content: "\f064";
}

.social-share-icon:hover {
	/* shadow-z-3 */
	box-shadow: 0 6px 10px rgba(0, 0, 0, 0.23), 0 10px 30px rgba(0, 0, 0, 0.19);
}