hr.bg-hr {
	background: transparent;
	height: 0;
	position: relative;
	border: 1px solid;

	/** Hifidel **/
	&.bg-hr-1:after {
		content: "";
	    display: block;
	    height: 0px;
	    margin: 0 auto;
	    position: relative;
	    width: 0px;
	    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, rgba(255, 255, 255, 1), #8c8b8b, rgba(255, 255, 255, 1));
	}

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

	&.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%;
		}
	}
}