<div class="breadcrumbs">
  <div class="container">
    <ul class="items">
              <li class="item home">
                  <a href="#" title="Zur Homepage">
            Home          </a>
                </li>
              <li class="item">
                  <a class="" href="https://codepen.io/lagudal" title="" >
            Thermotransferdrucker         </a>
                </li>
              <li class="item">
                  <a class="" href="https://codepen.io/lagudal" title="" >
            Labelident          </a>
                </li>
              <li class="item">
                  <a class="" href="https://codepen.io/lagudal" title="" >
             Desktopdrucker  </a>
              </li>
              <li class="item">
                  <strong class="" >Labelident LD BP730, 300 dpi Desktopdrucker, Modell mit Abreißkante (BP730)</strong>
                </li>
          </ul>
  </div>
</div>

.breadcrumbs {
    padding: 30px 0 0;
    margin: 0 0 20px;
}
.breadcrumbs .item {
    margin: 0;
}
.breadcrumbs .items>li {
    display: inline-block;
    vertical-align: top;
}
.breadcrumbs .items {
    font-size: 1.2rem;
    color: #a3a3a3;
    margin: 0;
    padding: 0;
    list-style: none none;
}
.breadcrumbs .item:not(:last-child) {
    display: inline-block;
    text-decoration: none;
}
.breadcrumbs .items .item {
    height: 25px;
    line-height: 22px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    position: relative;
    padding: 0 8px 0 18px;
}
.breadcrumbs .items .item:first-child {
    padding-left: 10px;
    border-left: 1px solid #ddd;
}
.breadcrumbs .items .item a {
    display: block;
    text-decoration: none;
    color:#333;
    height:105%;
    overflow:hidden;
    text-overflow:ellipsis;
    transition:all ease-in-out .4s;
}

@media(min-width:992px) and (max-width:1199px) {
  .breadcrumbs .items .item a:hover {
     max-width:1000px !important;
} 
}
@media(max-width:1199px) {
  .breadcrumbs .items .item a {
   max-width:40px;
  }
}

.breadcrumbs .items .item:after {
    right: -8px;
}
.breadcrumbs .item:not(:last-child):after {
    -webkit-font-smoothing: antialiased;
    font-size: 24px;
    line-height: 18px;
    content: '\e608';
    font-family: 'icons-blank-theme';
    margin: 0;
    vertical-align: top;
    display: inline-block;
    font-weight: normal;
    overflow: hidden;
    speak: none;
    text-align: center;
}
.breadcrumbs .items .item:before, .breadcrumbs .items .item:after {
    border-right: 1px solid #ddd;
    border-top: 1px solid #ddd;
    content: "";
    display: inline-block;
    height: 17px;
    position: absolute;
    top: 3px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    width: 17px;
}
.breadcrumbs .items .item:last-child:before, .breadcrumbs .items .item:last-child:after {
    border-color: #ddd !important;
}

.breadcrumbs .items .item:before {
    left: -8px;
}
.breadcrumbs .items .item:hover, .breadcrumbs .items .item:hover {
    border-color: rgb(102, 196, 229);
}
.breadcrumbs .items .item:last-child {
    border-color: #ddd !important;
    color: #444;
}
.breadcrumbs .items .item:last-child strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    height:105%;
    transition:all ease-in-out .4s;
}
@media(min-width:992px) and (max-width:1199px) {
.breadcrumbs .items .item:last-child strong:hover {
  max-width:1000px;  
}
}
@media(max-width:1199px) {
.breadcrumbs .items .item:last-child strong {
    max-width: 40px;
}
}
.breadcrumbs .items .item:hover::before, .breadcrumbs .items .item:hover::before, .breadcrumbs .items .item:hover::after, .breadcrumbs .items .item:hover::after {
    border-color: rgb(102, 196, 229);
}
.breadcrumbs .items .item:first-child:before {
  display:none
}

  $('.breadcrumbs .items .item a').addClass("collapsed");
  $('.breadcrumbs .items .item:last-child strong').addClass("collapsed");
    $(window).ready(function(){
   if ($(window).width() <= 991) {  
    $('.collapsed').css( "max-width", "40px" );
    $(document).on('click', '.collapsed', function () {
    event.preventDefault();
    $(this).css( "max-width", "1000px" );
    $(this).removeClass("collapsed");
    $(this).addClass("expanded");
    });
    $(document).on('mouseout', '.expanded', function () {
    $(this).css( "max-width", "40px" );
    $(this).removeClass("expanded");
    $(this).addClass("collapsed");
    });
       }  
});
$(window).resize(function(){
   if ($(window).width() <= 991) {  
    $('.collapsed').css( "max-width", "40px" );
    $(document).on('click', '.collapsed', function () {
    event.preventDefault();
    $(this).css( "max-width", "1000px" );
    $(this).removeClass("collapsed");
    $(this).addClass("expanded");
    });
    $(document).on('mouseout', '.expanded', function () {
    $(this).css( "max-width", "40px" );
    $(this).removeClass("expanded");
    $(this).addClass("collapsed");
    });
       }  
});