breadcrumbs,
breadcrumbs ul {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 0;
}

breadcrumbs ul {
    background: #e3eaed;
}

breadcrumbs input {
    display: none;
}

#breadcrumbs-label {
    display: none;
}

breadcrumbs li {
    display: inline-block;
}

breadcrumbs li a {
    padding: .7em 3em .7em 1em;
    float: right;
    height: 50px;
    text-decoration: none;
    position: relative;
    color: #0b6f78;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    background: #e3eaed;
    background-image: -webkit-gradient(linear, left top, right bottom, from(#d2dfe5), to(#e3eaed));
    background-image: -webkit-linear-gradient(left, #d2dfe5, #e3eaed);
    background-image: -moz-linear-gradient(left, #d2dfe5, #e3eaed);
    background-image: -ms-linear-gradient(left, #d2dfe5, #e3eaed);
    background-image: -o-linear-gradient(left, #d2dfe5, #e3eaed);
    background-image: linear-gradient(to right, #d2dfe5, #e3eaed);
}

breadcrumbs li:first-child a {
    padding-right: 1em;
}


breadcrumbs a:hover, breadcrumbs li:first-child a:hover {
    background: #fff;
    color: #0c94a0;
}


breadcrumbs a::after,
breadcrumbs a::before {
    content: "";
    position: absolute;
    top: 25px;
    margin-top: -35px;
    border-top: 35px solid transparent;
    border-bottom: 35px solid transparent;
    border-right: 35px solid;
    left: -30px;
}

breadcrumbs a::after {
    z-index: 2;
    border-right-color: #d2dfe5;
}

breadcrumbs a::before {
    border-right-color: #c3d1d8;
    left: -32px;
    z-index: 1;
}

breadcrumbs a:hover::after {
    border-right-color: #fff;
}

breadcrumbs .current,
breadcrumbs .current:hover {
    font-weight: bold;
    background: none;
    color: #678898;
    cursor: default;
}

breadcrumbs .current::after,
breadcrumbs .current::before {
    content: normal;
}

@media (max-width: 768px) {
    breadcrumbs {
        height: auto;
        overflow: auto;
    }
    #breadcrumbs-label {
        display: block;
    }
    breadcrumbs ul li {
        display: block;
        margin: 0;
        padding: 0;
        width: auto;
        height: auto;
    }
    breadcrumbs ul {
        position: absolute;
        visibility: visible;
        opacity: inherit;
        z-index: 1000;
    }
    breadcrumbs li a,
    breadcrumbs li:first-child a {
        display: block;
        float: none;
        margin: 0;
        padding: 1em;
        height: auto;
        background-image: none;
        background: #e3eaed;
    }
    breadcrumbs li a:hover,
    breadcrumbs li:first-child a:hover {
        background: #c7d3d9;
        color: #0c4ca6;
        text-shadow: none;
    }
    breadcrumbs a::after,
    breadcrumbs a::before {
        display: none;
    }
    breadcrumbs .current {
        display: none;
    }
    breadcrumbs label {
        display: block;
        position: relative;
        background: #ECF0F1;
        padding: 15px 20px;
        color: #1870ed;
        z-index: 2;
    }
    breadcrumbs label:hover {
        background: #1870ed;
        color: white;
        cursor: pointer;
    }
    breadcrumbs input {
        display: none;
    }
    breadcrumbs input ~ ul {
        position: relative;
        visibility: hidden;
        opacity: 0;
        top: -50px;
        z-index: 1;
    }
    breadcrumbs input:checked + label {
        background: #1870ed;
        color: white;
    }
    breadcrumbs input:checked ~ ul {
        visibility: visible;
        height: auto;
        opacity: 1;
        top: 0;
    }
    breadcrumbs input:checked ~ ul li {
        display: block;
    }
    breadcrumbs ul li .fa {
        color: #1870ed;
    }
}

.animate {
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* Chrome and Safari */
    
    -moz-backface-visibility: hidden;
    /* Firefox */
    
    -ms-backface-visibility: hidden;
    /* Internet Explorer */
}