/*
 * Shortcode: Separators.less
 * -----------------------------------------------
*/
.title-separator {
	border-top-style: solid;
    border-top-width: 1px;
    font-size: 16px;
    height: auto;
    line-height: 20px;
    margin: 10px 0;
    width: 70%;
    span {
		background: @white-base none repeat scroll 0 0;
	    border-radius: 2px;
	    letter-spacing: 0.2em;
	    padding: 2px 10px;
	    position: relative;
	    text-transform: uppercase;
	    top: -12px;
    }
}

.separator {
		color: @gray-silver;
	    line-height: 1.2em;
	    margin: 30px auto;
	    overflow: hidden;
	    text-align: center;
	    width: 100%;

	&::before, &::after {
		border-bottom: 1px solid @gray-lighter;
	    content: "";
	    display: inline-block;
	    height: .65em;
	    margin: 0 -4px 0 -100%;
	    vertical-align: top;
	    width: 50%;
	}
	&::after {
		margin: 0 -100% 0 0;
	}
	i,span,a {
		display: inline-block;
    	margin: 0 20px 0 24px;
    	font-size: 20px;
	}

    &.separator-left,&.left i {
    	float: left;
        margin: 2px 50px 0 0;
    }

    &.right {

    		i {
		    float: right;
		    margin: 0 0 2px 50px;
		}
    }  

	&.separator-medium-line {
		margin: 10px auto;
    	width: 20%;
	}

	&.separator-small-line {
		width: 10%;
	}

	&.separator-rouned i,&.separator-border-rouned i {
		background-color: @white-f5;
	    border-radius: 50%;
	    height: 40px;
	    left: 0;
	    line-height: 40px;
	    margin: -12px auto auto;
	    position: absolute;
	    right: 0;
	    width: 40px;
	}

	&.separator-border-rouned i {
		background: transparent;
		border: 1px solid @white-f5;
	}

	&.separator-rouned {
		&.separator-rouned-left {
			i {
	    		margin: -12px auto auto;
				right: auto;
				left: 0;
			}
		}

		&.separator-rouned-right {
			i {
	    		margin: -12px auto auto;
				right: 0;
				left: auto;
			}
		}
	}

	&.dotted {
		&::before,&::after {
			border-bottom: 2px dotted @gray-silver;
		}
	}
}