.bg-hr {
	background: transparent;
	height: 0;
	position: relative;
	border: 1px solid;
	box-sizing: content-box;
	overflow: visible;
	margin-left: auto;
	margin-right: auto;

	&.hr-left {
		margin-left: 0;
		margin-right: auto;
	}
	&.hr-center {
		margin-right: auto;
		margin-left: auto;
	}
	&.hr-right {
		margin-right: 0;
		margin-left: auto;
	}

	/** Hifidel **/
	&.bg-hr-1:after {
		content: "";
		display: block;
		height: 0;
		margin: 0 auto;
		position: relative;
		width: 0;
		transform: translateY(-50%);
		top: 50%;
		border: 6px solid;
	}

	/** Wedge **/
	&.bg-hr-2:after {
		content: "";
		border-left: 7px solid transparent;
		border-right: 7px solid transparent;
		border-top: 8px solid;
		left: 50%;
		top: 0;
		margin-left: -8px;
		position: absolute;
		background: transparent;
	}

	&.bg-hr-3 {
		border: 1px double;
	    border-left: 0;
	    border-right: 0;
	    background: transparent;
	    height: 2px;
	}

	&.bg-hr-4 {
		border: 1px dashed;
		background: transparent;
	}

	&.bg-hr-5 {
		border: 1px dotted;
		background: transparent;
	}

	&.bg-hr-6 {
		border: 2px dashed;
		border-left: 0;
		border-right: 0;
		background: transparent;
	}

	&.bg-hr-7 {
		border: 1px dotted;
		border-left: 0;
		border-right: 0;
		height: 3px;
		background: transparent;
	}

	&.bg-hr-8 {
		border: 1px dotted;
		border-bottom: 0;
		background: transparent;
	}

	&.bg-hr-9 {
		height: 10px;
		border: 0;
		box-shadow: 0 10px 10px -10px #8c8b8b inset;
		background: transparent;
	}

	&.bg-hr-10 {
		border: 0;
		height: 1px;
		background-image: linear-gradient(to left, transparent, #8c8b8b, transparent);
	}

	&.bg-hr-11 {
		border: 0;
		height: 3px;
		background-image: linear-gradient(to left, transparent, #8c8b8b, transparent);
	}

	&.bg-hr-13 {
		border: 0;
		box-shadow: 0 0 10px 1px black;
		&:after {
			content: "\00a0";
		}
	}

	&.bg-hr-14 {
		border: 0;
		border-bottom: 10px solid;
	}

	&.bg-hr-15 {
		border: 0;
		border-bottom: 5px solid;
	}

	&.bg-hr-16 {
		border: 0;
		border-bottom: 3px solid;
	}

	&.bg-hr-17 {
		border: 0;
		height: 5px;
		border-top: 3px solid;
		border-bottom: 3px solid;
		background: transparent;
	}

	&.bg-hr-18 {
		background: transparent;

		&:before {
			content: "";
			display: block;
			position: absolute;
			width: 0px;
			transform: translateY(-150%);
			border: 6px solid;
			right: -1px;
			top: 12px;
		}
		&:after {
			content: "";
			display: block;
			position: absolute;
			width: 0px;
			transform: translateY(-150%);
			border: 6px solid;
			left: -1px;
			top: 12px;
		}
	}

	&.bg-hr-19 {
		@extend .bg-hr-1;

		&:after {
			border-radius: 50%;
		}
	}
	&.bg-hr-20 {
		@extend .bg-hr-18;

		&:after, &:before {
			border-radius: 50%;
		}
	}
}