<!--breadcumb area are start-->
<div class="breadcumb-area">
<div class="bread-main">
<div class="bred-hading text-center">
<h1>Blog Standard</h1> </div>
<ol class="breadcrumb">
<li class="home"><a title="Go to Home Page" href="index.html">Home</a></li>
<li class="active">Blog</li>
</ol>
</div>
</div>
<!--breadcumb area are start-->
            
            

                

/*----------------------------------------*/
/* breadcrumb
/*----------------------------------------*/

.breadcrumb {
    background: transparent none repeat scroll 0 0;
    border-radius: 0;
    margin: 0;
    padding: 0;
    text-align: center;
}
.breadcrumb > li {
  text-transform: uppercase;
}
.breadcrumb li a {
    color: #fff;
    font-size: 14px
}
.breadcrumb li.active {
    color: #fff;
}
.breadcrumb > li + li {
    position: relative;
}
.breadcrumb li a{
    transition: all 0.3s ease 0s;
}
.breadcrumb li:hover a {
    color: #2395ec;
}
.breadcrumb > li + li::before {
    color: #fff;
    content: ">";
    padding: 0 5px;
}
.breadcumb-area {
    background: rgba(0, 0, 0, 0) url("images/blog/blog-header-bg.jpg") no-repeat scroll 50% 0 / cover;
    min-height: 500px;
    position: relative;
}
.bred-hading.text-center > h1 {
  color: #ffffff;
  display: block;
  font-size: 50px;
  font-weight: 300;
  text-transform: uppercase;
}
.bread-main {
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}
                
            

                
<!--breadcumb-2 area are start-->
<div class="breadcumb-area breadcumb-2">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="breadcumb-2-area">
<div class="bread-main">
<div class="bred-hading text-center">
<h1>Portfolio</h1> </div>
<ol class="breadcrumb">
<li class="home"><a title="Go to Home Page" href="index.html">Home</a></li>
<li class="active">Portfolio</li>
</ol>
</div>
</div>
</div>
</div>
</div>
</div>
<!--breadcumb-2 area are start-->
            
            

                
.breadcumb-area.breadcumb-2,.breadcumb-area.breadcumb-3 {
  background: #f6f6f7 none repeat scroll 0 0;
  min-height: auto;
}
.breadcumb-2 .bred-hading.text-center > h1,.breadcumb-3 .bred-hading.text-center > h1 {
  color: #171819;
  float: left;
  font-size: 30px;
  margin: 0;
}
.breadcumb-2 .breadcrumb li a,.breadcumb-2 .breadcrumb li,.breadcumb-2 .breadcrumb > li + li::before,.breadcumb-3 .breadcrumb li a,.breadcumb-3 .breadcrumb li,.breadcumb-3 .breadcrumb > li + li::before  {
  color: #171819;
}
.breadcumb-2 .breadcrumb li a:hover,.breadcumb-2 .breadcrumb li,.breadcumb-3 .breadcrumb li a:hover,.breadcumb-3 .breadcrumb li{color:#2395ec}
.breadcumb-2 .breadcrumb {
  float: right;
  padding-top: 4px;
}
.breadcumb-3 .breadcrumb {
  float: left;
  padding-top: 0;
}
.breadcumb-2-area {
  min-height: 150px;
  position: relative;
}
.breadcumb-3-area {
  min-height: 100px;
  line-height: 100px
}
.breadcumb-3 .breadcrumb > li + li::before {
  content: "/";
}
                
            

                
<!--breadcumb-3 area are start-->
<div class="breadcumb-area breadcumb-3">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-12">
<div class="breadcumb-3-area">
<div class="bread-main-3">
<div class="bred-hading text-center">
<ol class="breadcrumb">
<li class="home"><a title="Go to Home Page" href="index.html">Home</a></li>
<li class="home"><a title="Go to shop Page" href="index-5.html">Shortcode</a></li>
<li class="active">Breadcumb</li>
</ol>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--breadcumb-3 area are start-->
            
            

                

.breadcumb-area.breadcumb-2,.breadcumb-area.breadcumb-3 {
  background: #f6f6f7 none repeat scroll 0 0;
  min-height: auto;
}
.breadcumb-2 .bred-hading.text-center > h1,.breadcumb-3 .bred-hading.text-center > h1 {
  color: #171819;
  float: left;
  font-size: 30px;
  margin: 0;
}
.breadcumb-2 .breadcrumb li a,.breadcumb-2 .breadcrumb li,.breadcumb-2 .breadcrumb > li + li::before,.breadcumb-3 .breadcrumb li a,.breadcumb-3 .breadcrumb li,.breadcumb-3 .breadcrumb > li + li::before  {
  color: #171819;
}
.breadcumb-2 .breadcrumb li a:hover,.breadcumb-2 .breadcrumb li,.breadcumb-3 .breadcrumb li a:hover,.breadcumb-3 .breadcrumb li{color:#2395ec}
.breadcumb-2 .breadcrumb {
  float: right;
  padding-top: 4px;
}
.breadcumb-3 .breadcrumb {
  float: left;
  padding-top: 0;
}
.breadcumb-2-area {
  min-height: 150px;
  position: relative;
}
.breadcumb-3-area {
  min-height: 100px;
  line-height: 100px
}
.breadcumb-3 .breadcrumb > li + li::before {
  content: "/";
}