/* Gradient transparent - color - transparent */

// TODO: replicate colors w/ white hr.grad {

border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(255,255,255, 0), rgba(255,255,255, 0.75), rgba(255,255,255, 0));
width:50%;
margin: auto auto;

}

hr.grey-right{

margin-top:.4rem;
margin-bottom:.4rem;

border: 0;
height: 1px;
background-image: linear-gradient(
    to right,
    rgba($color-grey, 1), 
    rgba($color-grey, .75), 
    rgba($color-grey, 0)
);
width:50%;

} hr.one-right{

margin-top:.4rem;
margin-bottom:.4rem;

border: 0;
height: 1px;
background-image: linear-gradient(
    to right,
    rgba($color-one, 1), 
    rgba($color-one, .75), 
    rgba($color-one, 0)
);
width:50%;

} hr.two-right{

margin-top:.4rem;
margin-bottom:.4rem;

border: 0;
height: 1px;
background-image: linear-gradient(
    to right,
    rgba($color-two, 1), 
    rgba($color-two, .75), 
    rgba($color-two, 0)
);
width:50%;

} hr.three-right{

margin-top:.4rem;
margin-bottom:.4rem;

border: 0;
height: 1px;
background-image: linear-gradient(
    to right,
    rgba($color-three, 1), 
    rgba($color-three, .75), 
    rgba($color-three, 0)
);
width:50%;

} hr.four-right{

margin-top:.4rem;
margin-bottom:.4rem;

border: 0;
height: 1px;
background-image: linear-gradient(
    to right,
    rgba($color-four, 1), 
    rgba($color-four, .75), 
    rgba($color-four, 0)
);
width:50%;

}

/////

hr.grey-left{

margin-top:.4rem;
margin-bottom:.4rem;

border: 0;
height: 1px;
background-image: linear-gradient(
    to left,
    rgba($color-grey, 1), 
    rgba($color-grey, .75), 
    rgba($color-grey, 0)
);
width:50%;

} hr.one-left{

margin-top:.4rem;
margin-bottom:.4rem;

border: 0;
height: 1px;
background-image: linear-gradient(
    to left,
    rgba($color-one, 1), 
    rgba($color-one, .75), 
    rgba($color-one, 0)
);
width:50%;

} hr.two-left{

margin-top:.4rem;
margin-bottom:.4rem;

border: 0;
height: 1px;
background-image: linear-gradient(
    to left,
    rgba($color-two, 1), 
    rgba($color-two, .75), 
    rgba($color-two, 0)
);
width:50%;

} hr.three-left{

margin-top:.4rem;
margin-bottom:.4rem;

border: 0;
height: 1px;
background-image: linear-gradient(
    to left,
    rgba($color-three, 1), 
    rgba($color-three, .75), 
    rgba($color-three, 0)
);
width:50%;

} hr.four-left{

margin-top:.4rem;
margin-bottom:.4rem;

border: 0;
height: 1px;
background-image: linear-gradient(
    to right,
    rgba($color-four, 1), 
    rgba($color-four, .75), 
    rgba($color-four, 0)
);
width:50%;

}