/** ---------------------------
 *
 *  SBS Navbar Arrow style
 *  Derived from http://code-chunk.com/chunks/543df4c394758/bootstrap-arrow-shaped-buttons
 *
 * ----------------------------- */

#sbs-navbar .step-title {
    position: relative;
    padding-left: 36px;
    padding-right: 18px;
}

#sbs-navbar .step-title:before,
#sbs-navbar .step-title:after
{ /* make two squares (before and after), looking similar to the button */
    content:"";
    position: absolute;
    top: 10px; /* move it down because of rounded corners */
    width: 48px; /* same as height */
    height: 48px; /* button_outer_height / sqrt(2) */
    background: inherit; /* use parent background */
    border: inherit; /* use parent border */
    border-color: transparent;
    -webkit-border-radius: 0 4px 0 0;
    -moz-border-radius: 0 4px 0 0;
    border-radius: 0 4px 0 0; /* round arrow corner, the shorthand property doesn't accept "inherit" so it is set to 4px */
    box-sizing: border-box;
}

#sbs-navbar .step-title:before,
#sbs-navbar .step-title:after {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg); /* rotate right arrow squares 45 deg to point right */
}

#sbs-navbar .step-title:before { /* align the "before" square to the left */
    left: -24px;
}
#sbs-navbar .step-title:after { /* align the "after" square to the right */
    right: -24px;
}
#sbs-navbar .step-title:after { /* bring arrow pointers to front */
    z-index: 1;
}
#sbs-navbar .step-title:before { /* hide arrow tails background */
    background-color: white;
}

#sbs-navbar .step-index span {
    text-align: center;
    white-space: nowrap;
}

#sbs-navbar .step-title {
    padding: 25px 0 15px;
}

#sbs-navbar span.step-title-text {
    padding-left: 30px;
    position: relative;
    z-index: 2;
}

#sbs-navbar span.step-title-text a {
    display: inline;
}

#sbs-navbar .step-index {
    padding-left: 30px;
}

@media (max-width: 767px) {
  #sbs-navbar .step-index {
      padding-left: 0;
  }
}