.cd-breadcrumb,
.cd-multi-steps {
    xwidth: 90%;
    xmax-width: 768px;
    padding: .5em 1em;
    margin: 1em auto;
    background-color: #edeff0;
    border-radius: .25em
}

.cd-breadcrumb::after,
.cd-multi-steps::after {
    clear: both;
    content: "";
    display: table
}

.cd-breadcrumb li,
.cd-multi-steps li {
    display: inline-block;
    float: left;
    margin: .5em 0
}

.cd-breadcrumb li::after,
.cd-multi-steps li::after {
    display: inline-block;
    content: '\00bb';
    margin: 0 .6em;
    color: #959fa5
}

.cd-breadcrumb li:last-of-type::after,
.cd-multi-steps li:last-of-type::after {
    display: none
}

.cd-breadcrumb li>*,
.cd-multi-steps li>* {
    display: inline-block;
    font-size: 1.1rem;
    color: #2c3f4c
}

.cd-breadcrumb li.current>*,
.cd-multi-steps li.current>* {
    color: #96c03d;
}
.cd-breadcrumb li.visited>*,
.cd-multi-steps li.visited>* {
    color: #96c03d;
}

.no-touch .cd-breadcrumb a:hover,
.no-touch .cd-multi-steps a:hover {
    color: #96c03d
}



.cd-breadcrumb.custom-separator li::after,
.cd-multi-steps.custom-separator li::after {
    xcontent: '';
    height: 1em;
    width: 1em;
    background: url(../img/cd-custom-separator.svg) no-repeat center center;
    vertical-align: middle
}

.cd-breadcrumb.custom-icons li>*::before,
.cd-multi-steps.custom-icons li>*::before {
    xcontent: '';
    display: inline-block;
    height: 20px;
    width: 20px;
    margin-right: .4em;
    margin-top: -2px;
    background: url(../img/cd-custom-icons-01.svg) no-repeat 0 0;
    vertical-align: middle
}

.cd-breadcrumb.custom-icons li:not(.current):nth-of-type(2)>*::before,
.cd-multi-steps.custom-icons li:not(.current):nth-of-type(2)>*::before {
    background-position: -20px 0
}

.cd-breadcrumb.custom-icons li:not(.current):nth-of-type(3)>*::before,
.cd-multi-steps.custom-icons li:not(.current):nth-of-type(3)>*::before {
    background-position: -40px 0
}

.cd-breadcrumb.custom-icons li:not(.current):nth-of-type(4)>*::before,
.cd-multi-steps.custom-icons li:not(.current):nth-of-type(4)>*::before {
    background-position: -60px 0
}

.cd-breadcrumb.custom-icons li.current:first-of-type>*::before,
.cd-multi-steps.custom-icons li.current:first-of-type>*::before {
    background-position: 0 -20px
}

.cd-breadcrumb.custom-icons li.current:nth-of-type(2)>*::before,
.cd-multi-steps.custom-icons li.current:nth-of-type(2)>*::before {
    background-position: -20px -20px
}

.cd-breadcrumb.custom-icons li.current:nth-of-type(3)>*::before,
.cd-multi-steps.custom-icons li.current:nth-of-type(3)>*::before {
    background-position: -40px -20px
}

.cd-breadcrumb.custom-icons li.current:nth-of-type(4)>*::before,
.cd-multi-steps.custom-icons li.current:nth-of-type(4)>*::before {
    background-position: -60px -20px
}

@media only screen and (min-width:768px) {
    .cd-breadcrumb,
    .cd-multi-steps {
    padding: 0 1.2em
}
.cd-breadcrumb li,
.cd-multi-steps li {
    margin: 1.2em 0
}
.cd-breadcrumb li::after,
.cd-multi-steps li::after {
    margin: 0 1em
}
.cd-breadcrumb li>*,
.cd-multi-steps li>* {
    font-size: 1.2rem
}
}

@media only screen and (min-width:768px) {
    .cd-breadcrumb.triangle {
    background-color: transparent;
    padding: 0
}
.cd-breadcrumb.triangle li {
    position: relative;
    padding: 0;
    margin: 4px 4px 4px 0
}
.cd-breadcrumb.triangle li:last-of-type {
    margin-right: 0
}
.cd-breadcrumb.triangle li>* {
    position: relative;
    padding: 1em .8em 1em 2.5em;
    color: #2c3f4c;
    background-color: #edeff0;
    background-color: #dddddd;
    border-color: #edeff0;
    border-color: #dddddd
}
.cd-breadcrumb.triangle li.current>* {
    color: #fff;
    background-color: #95b75d;
    border-color: #95b75d
}
.cd-breadcrumb.triangle li.visited>* {
    color: #fff;
    background-color: #b1d369;
    border-color: #b1d369;
}        
.cd-breadcrumb.triangle li:first-of-type>* {
    padding-left: 1.6em;
    border-radius: .25em 0 0 .25em
}
.cd-breadcrumb.triangle li:last-of-type>* {
    padding-right: 1.6em;
    border-radius: 0 .25em .25em 0
}
.no-touch .cd-breadcrumb.triangle a:hover {
    color: #fff;
    background-color: #2c3f4c;
    border-color: #2c3f4c
}
.cd-breadcrumb.triangle li::after,
.cd-breadcrumb.triangle li>*::after {
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    content: '';
    height: 0;
    width: 0;
    border: 24px solid transparent;
    border: 19px solid transparent;
    border: 13px solid transparent;
    border-right-width: 0;
    border-left-width: 20px;
    border-left-width: 15px;
}
.cd-breadcrumb.triangle li::after {
    z-index: 1;
    -webkit-transform: translateX(4px);
    -moz-transform: translateX(4px);
    -ms-transform: translateX(4px);
    -o-transform: translateX(4px);
    transform: translateX(4px);
    border-left-color: #fff;
    border-left-color: #EEE;
    margin: 0
}

.cd-breadcrumb.triangle li::after{
    border-left-color: #53d2cb;
}

.cd-breadcrumb.triangle li>*::after {
    z-index: 2;
    border-left-color: inherit
}
.cd-breadcrumb.triangle li:last-of-type::after,
.cd-breadcrumb.triangle li:last-of-type>*::after {
    display: none
}
.cd-breadcrumb.triangle.custom-separator li::after {
    background-image: none
}
.cd-breadcrumb.triangle.custom-icons li::after,
.cd-breadcrumb.triangle.custom-icons li>*::after {
    xborder-top-width: 25px;
    xborder-bottom-width: 25px
}
@-moz-document url-prefix() {
    .cd-breadcrumb.triangle li::after,
    .cd-breadcrumb.triangle li>*::after {
    border-left-style: dashed
}
}
}

@media only screen and (min-width:768px) {
    .no-touch .cd-breadcrumb.triangle.custom-icons li:first-of-type a:hover::before,
    .cd-breadcrumb.triangle.custom-icons li.current:first-of-type em::before,
    .no-touch .cd-multi-steps.text-center.custom-icons li:first-of-type a:hover::before,
    .cd-multi-steps.text-center.custom-icons li.current:first-of-type em::before {
    background-position: 0 -40px
}
.no-touch .cd-breadcrumb.triangle.custom-icons li:nth-of-type(2) a:hover::before,
.cd-breadcrumb.triangle.custom-icons li.current:nth-of-type(2) em::before,
.no-touch .cd-multi-steps.text-center.custom-icons li:nth-of-type(2) a:hover::before,
.cd-multi-steps.text-center.custom-icons li.current:nth-of-type(2) em::before {
    background-position: -20px -40px
}
.no-touch .cd-breadcrumb.triangle.custom-icons li:nth-of-type(3) a:hover::before,
.cd-breadcrumb.triangle.custom-icons li.current:nth-of-type(3) em::before,
.no-touch .cd-multi-steps.text-center.custom-icons li:nth-of-type(3) a:hover::before,
.cd-multi-steps.text-center.custom-icons li.current:nth-of-type(3) em::before {
    background-position: -40px -40px
}
.no-touch .cd-breadcrumb.triangle.custom-icons li:nth-of-type(4) a:hover::before,
.cd-breadcrumb.triangle.custom-icons li.current:nth-of-type(4) em::before,
.no-touch .cd-multi-steps.text-center.custom-icons li:nth-of-type(4) a:hover::before,
.cd-multi-steps.text-center.custom-icons li.current:nth-of-type(4) em::before {
    background-position: -60px -40px
}
}

@media only screen and (min-width:768px) {
    .cd-multi-steps {
    background-color: transparent;
    padding: 0;
    text-align: center
}
.cd-multi-steps li {
    position: relative;
    float: none;
    margin: .4em 40px .4em 0
}
.cd-multi-steps li:last-of-type {
    margin-right: 0
}
.cd-multi-steps li::after {
    position: absolute;
    content: '';
    height: 4px;
    background: #edeff0;
    margin: 0
}
.cd-multi-steps li.visited::after {
    background-color: #a8ca61;
}
.cd-multi-steps li>*,
.cd-multi-steps li.current>* {
    position: relative;
    color: #2c3f4c
}
.cd-multi-steps.custom-separator li::after {
    height: 4px;
    background: #edeff0
}
.cd-multi-steps.text-center li::after {
    width: 100%;
    top: 50%;
    left: 100%;
    -webkit-transform: translateY(-50%) translateX(-1px);
    -moz-transform: translateY(-50%) translateX(-1px);
    -ms-transform: translateY(-50%) translateX(-1px);
    -o-transform: translateY(-50%) translateX(-1px);
    transform: translateY(-50%) translateX(-1px)
}
.cd-multi-steps.text-center li>* {
    z-index: 1;
    padding: .6em 1em;
    border-radius: .25em;
    background-color: #edeff0
}
.no-touch .cd-multi-steps.text-center a:hover {
    background-color: #2c3f4c
}
.cd-multi-steps.text-center li.current>*,
.cd-multi-steps.text-center li.visited>* {
    color: #fff;
    background-color: #96c03d
}
.cd-multi-steps.text-center.custom-icons li.visited a::before {
    background-position: 0 -60px
}
.cd-multi-steps.text-top li,
.cd-multi-steps.text-bottom li {
    width: 80px;
    text-align: center
}
.cd-multi-steps.text-top li::after,
.cd-multi-steps.text-bottom li::after {
    position: absolute;
    left: 50%;
    width: calc(100% + 40px)
}
.cd-multi-steps.text-top li>*::before,
.cd-multi-steps.text-bottom li>*::before {
    content: '';
    position: absolute;
    z-index: 1;
    left: 50%;
    right: auto;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background-color: #edeff0
}
.cd-multi-steps.text-top li.visited>*::before,
.cd-multi-steps.text-top li.current>*::before,
.cd-multi-steps.text-bottom li.visited>*::before,
.cd-multi-steps.text-bottom li.current>*::before {
    background-color: #96c03d
}
.no-touch .cd-multi-steps.text-top a:hover,
.no-touch .cd-multi-steps.text-bottom a:hover {
    color: #96c03d
}
.no-touch .cd-multi-steps.text-top a:hover::before,
.no-touch .cd-multi-steps.text-bottom a:hover::before {
    box-shadow: 0 0 0 3px rgba(150, 192, 61, .3)
}
.cd-multi-steps.text-top li::after {
    bottom: 4px
}
.cd-multi-steps.text-top li>* {
    padding-bottom: 20px
}
.cd-multi-steps.text-top li>*::before {
    bottom: 0
}
.cd-multi-steps.text-bottom li::after {
    top: 3px
}
.cd-multi-steps.text-bottom li>* {
    padding-top: 20px
}
.cd-multi-steps.text-bottom li>*::before {
    top: 0
}
}

.cd-multi-steps.count li {
    counter-increment: steps
}

.cd-multi-steps.count li>*::before {
    content: counter(steps) " - "
}

@media only screen and (min-width:768px) {
    .cd-multi-steps.text-top.count li>*::before,
    .cd-multi-steps.text-bottom.count li>*::before {
    content: counter(steps);
    height: 26px;
    width: 26px;
    line-height: 26px;
    font-size: 1.4rem;
    color: #fff
}
.cd-multi-steps.text-top.count li:not(.current) em::before,
.cd-multi-steps.text-bottom.count li:not(.current) em::before {
    color: #2c3f4c
}
.cd-multi-steps.text-top.count li::after {
    bottom: 11px
}
.cd-multi-steps.text-top.count li>* {
    padding-bottom: 34px
}
.cd-multi-steps.text-bottom.count li::after {
    top: 11px
}
.cd-multi-steps.text-bottom.count li>* {
    padding-top: 34px
}
}

.cd-breadcrumb.triangle{
    max-width: 100%;
    margin: 0;    
}
.cd-breadcrumb.triangle li{
    line-height: 100%;
    cursor: pointer;
}    
.cd-breadcrumb.triangle li>*{
    font-size: 0.9em;
    xpadding: .75em .75em .75em 2em;
    padding: .75em .75em 1em 2em;
    line-height: 1em;  
    background-color: #1fb5ad;
    border-color: #1fb5ad;
    color: #FFFFFF;
}


.cd-breadcrumb.triangle li.current>*,
.cd-breadcrumb.triangle li:hover>*{
    background-color: #198b85;
    border-color: #198b85;
    color: #FFFFFF;
}
.cd-breadcrumb.triangle li::after, 
.cd-breadcrumb.triangle li>*::after{
    border: 17px solid transparent;
    border-right-width: 0;
    border-left-width: 20px;
    border-left-width: 15px;
    border-left-color: inherit;
}
.cd-breadcrumb.triangle li::after{
    border-left-color: #fff;
}
.cd-breadcrumb.triangle li a:hover:after{
    background: none;
}

.cd-breadcrumb.triangle li.color-grey>*{
    background-color: #b7c0cd;
    border-color: #b7c0cd;
    color: #FFFFFF;
}

.cd-breadcrumb.triangle li.color-orange>*{
    background-color: #c85028;
    border-color: #c85028;
    color: #FFFFFF;
}