/**
 * ADAPTED on 18 December 2015.
 * Horizontal Type Line Behind Text
 * Inspired by this discussion @ CSS-Tricks: http://css-tricks.com/forums/discussion/comment/51357#Comment_51357
 * Available on jsFiddle: http://jsfiddle.net/ericrasch/jAXXA/
 * Available on Dabblet: http://dabblet.com/gist/2045198
 * Available on GitHub Gist: https://gist.github.com/2045198
 * Original at http://jsfiddle.net/ericrasch/jaxxa/
 */

 h3 {
    margin-top: 30px;
    margin-bottom: 15px;
    position: relative;
    text-align: center;
    z-index: 1;
}

h3 span { 
    padding: 0 15px;
    font-size: 0.85em;
}

h3:before {
    content:"";
    margin: 0 auto; /* this centers the line to the full width specified */
    position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */
    top: 20px; left: 0; right: 0; bottom: 0;
    max-width:100%;
    width: 50%;
    z-index: -1;
}

h3:after {
    -webkit-box-shadow: 0 1px 0 0 red;
    -moz-box-shadow: 0 1px 0 0 red;
    box-shadow: 0 1px 0 0 red;
    content: "";
    margin: 0 auto; /* this centers the line to the full width specified */
    position: absolute;
    top: 45%; left: 0; right: 0;
    max-width:100%;
    width: 50%;
    z-index: -1;
}

h3.white-title span {
    background: #FFFFFF;
    color:#000000;
}

h3.white-title:before {
    border-top: 2px solid #969696;
}

h3.purple-title span {
    background: #D4B8F8; 
    color:#2E037E;
}

h3.purple-title:before {
    border-top: 2px solid #2E037E;
}