#breadcrumb > *{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
}


#breadcrumb > h1{
  font-weight:100;
  font-size:32px;
  padding:40px;
  color:#fff;
}

#breadcrumb{
  list-style:none;
  display: inline-block;
  width: 100%;
  float: left;
  padding: 0;
  margin-top: 0;
  .icon{
    font-size: 14px;
  }
  
  li{
    float:left;
    a{
      color:#FFF;
      display:block;
      background: #2980b9;
      text-decoration: none;
      position:relative;
      height: 40px;
      line-height:40px;
      padding: 0 10px 0 5px;
      text-align: center;
      margin-right: 23px;
    }
    &:first-child{
      a{
        padding-left:15px;
        border-radius:4px 0 0 4px;
        &:before{
          border:none;
         }
      }
    }
    &:last-child{
      a{
        padding-right:15px;
        border-radius:0 4px 4px 0;
        background: #3498db;
        &:before {
                border-color: #3498db;
                border-left-color: transparent;
            }
        &:after{
          border:none;
         }
      }
    }
    
    a{   
      &:before,
      &:after{
        content: "";
        position:absolute;
        top: 0;
        border:0 solid #2980b9;
        border-width:20px 10px;
        width: 0;
        height: 0;
      }
      &:before{
        left:-20px;
        border-left-color:transparent;
      }
      &:after{
        left:100%;
        border-color:transparent;
        border-left-color:#2980b9;
      }
      &:hover{
        background-color: #3498db;
        
        &:before{
          border-color:#3498db;
          border-left-color:transparent;
         }
        &:after{
          border-left-color:#3498db;
        }
      }
      &:active{
        background-color: #3498db;
        
        &:before{
          border-color:#3498db;
          border-left-color:transparent;
         }
        &:after{
          border-left-color:#3498db;
        }
      }
    }
  }
}