/* Default-styles */

.breadcrumbs {
	width:98%;
	margin:1%;
	overflow: hidden;
	border-radius:6px;
	background-color:#f5f5f5;
   padding:10px 8px !important;
}

.breadcrumbs ol { 
	margin: 0px !important;
	padding: 0px !important;
	list-style: none;
}

.breadcrumbs li a {
   text-decoration: none;
}

.breadcrumbs ol li {
   display: inline-block;
}

.breadcrumbs .separator {
   display: none;
}

.breadcrumbs #breadcrumbs-style0 .separator {
   display: inline-block; 
}

/* Style-0 */

#breadcrumbs-style0 .separator { 
  color: #333333;
}

#breadcrumbs-style0 a,
#breadcrumbs-style0 span {
  color: #3377bc;
  text-decoration:none;
}

#breadcrumbs-style0 strong,
#breadcrumbs-style0 a:hover {
  color: #000000;
}

/* Style-1 */

#breadcrumbs-style1 {
 background: #eee;
 border-width: 1px;
 border-style: solid;
 border-color: #f5f5f5 #e5e5e5 #ccc;
 border-radius: 5px;
 box-shadow: 0 0 2px rgba(0,0,0,.2);
 overflow: hidden;
 width: 100%;
}

#breadcrumbs-style1 li{
 float: left;
}

#breadcrumbs-style1 a{
 padding: .7em 1em .7em 2em;
 float: left;
 text-decoration: none;
 color: #444;
 position: relative;
 text-shadow: 0 1px 0 rgba(255,255,255,.5);
 background-color: #ddd;
 background-image: linear-gradient(to right, #f5f5f5, #ddd);  
}

#breadcrumbs-style1 li:first-child a{
 padding-left: 1em;
 border-radius: 5px 0 0 5px;
}

#breadcrumbs-style1 a:hover{
 background: #fff;
}

#breadcrumbs-style1 a::after,
#breadcrumbs-style1 a::before{
 content: "";
 position: absolute;
 top: 50%;
 margin-top: -1.5em;   
 border-top: 1.5em solid transparent;
 border-bottom: 1.5em solid transparent;
 border-left: 1em solid;
 right: -1em;
}

#breadcrumbs-style1 a::after{ 
 z-index: 2;
 border-left-color: #ddd;  
}

#breadcrumbs-style1 a::before{
 border-left-color: #ccc;  
 right: -1.1em;
 z-index: 1; 
}

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

#breadcrumbs-style1 .current,
#breadcrumbs-style1 .current:hover{
 font-weight: bold;
 background: none;
}

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

/* Style-2 */

#breadcrumbs-style2 {
 overflow: hidden;
 width: 100%;
}


#breadcrumbs-style2 li{
 float: left;
 margin: 0 .5em 0 1em;
}

#breadcrumbs-style2 a{
 background: #cadce1;
 padding: .7em 1em;
 float: left;
 text-decoration: none;
 color: #444;
 text-shadow: 0 1px 0 rgba(255,255,255,.5); 
 position: relative;
}

#breadcrumbs-style2 a:hover{
 background: #99db76;
 color: #ffffff;
}

#breadcrumbs-style2 a::before{
 content: "";
 position: absolute;
 top: 50%; 
 margin-top: -1.5em;   
 border-width: 1.5em 0 1.5em 1em;
 border-style: solid;
 border-color: #cadce1 #cadce1 #cadce1 transparent;
 left: -1em;
}

#breadcrumbs-style2 a:hover::before{
 border-color: #99db76 #99db76 #99db76 transparent;
}

#breadcrumbs-style2 a::after{
 content: "";
 position: absolute;
 top: 50%; 
 margin-top: -1.5em;   
 border-top: 1.5em solid transparent;
 border-bottom: 1.5em solid transparent;
 border-left: 1em solid #cadce1;
 right: -1em;
}

#breadcrumbs-style2 a:hover::after{
 border-left-color: #99db76;
}

#breadcrumbs-style2 .current,
#breadcrumbs-style2 .current:hover{
 font-weight: bold;
 background: none;
}

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

/* Style-3 */

#breadcrumbs-style3{
 overflow: hidden;
 width: 100%;
}

#breadcrumbs-style3 li{
 float: left;
 margin: 0 2em 0 0;
}

#breadcrumbs-style3 a{
 padding: .7em 1em .7em 2em;
 float: left;
 text-decoration: none;
 color: #444;
 background: #cadce1;  
 position: relative;
 z-index: 1;
 text-shadow: 0 1px 0 rgba(255,255,255,.5);
 border-radius: .4em 0 0 .4em;  
}

#breadcrumbs-style3 a:hover{
 background: #ed7639;
 color: #ffffff;
}

#breadcrumbs-style3 a::after{
 background: #cadce1;
 content: "";
 height: 2.0em;
 margin-top: -1.20em;
 position: absolute;
 right: -1em;
 top: 50%;
 width: 2.5em;
 z-index: -1; 
 border-radius: .4em;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
}

#breadcrumbs-style3 a:hover::after{
 background: #ed7639;
}

#breadcrumbs-style3 .current,
#breadcrumbs-style3 .current:hover{
 font-weight: bold;
 background: none;
}

#breadcrumbs-style3 .current::after{
 content: normal;
}

/* Style-4 */

#breadcrumbs-style4{
 overflow: hidden;
 width: 100%;
}


#breadcrumbs-style4 li{
 float: left;
 margin: 0 .5em 0 1em;
}

#breadcrumbs-style4 a{
 background: #cadce1;
 padding: .7em 1em;
 float: left;
 text-decoration: none;
 color: #444;
 text-shadow: 0 1px 0 rgba(255,255,255,.5); 
 position: relative;
}

#breadcrumbs-style4 a:hover{
 background: #8d3ec7;
 color: #ffffff;
}


#breadcrumbs-style4 a::before,
#breadcrumbs-style4 a::after{
 content:'';
 position:absolute;
 top: 0;
 bottom: 0;
 width: 1em;
 background: #cadce1;
 -webkit-transform: skew(-10deg);  
 -moz-transform: skew(-10deg);
 -ms-transform: skew(-10deg);
 -o-transform: skew(-10deg);
 transform: skew(-10deg);
}

#breadcrumbs-style4 a::before{
 left: -.5em;
 border-radius: 5px 0 0 5px;
}

#breadcrumbs-style4 a:hover::before{
 background: #8d3ec7;
}

#breadcrumbs-style4 a::after{
 right: -.5em;   
 border-radius: 0 5px 5px 0;
}

#breadcrumbs-style4 a:hover::after{
 background: #8d3ec7;
}

#breadcrumbs-style4 .current,
#breadcrumbs-style4 .current:hover{
 font-weight: bold;
 background: none;
}

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

/* Style-5 */

#breadcrumbs-style5 a {
color: #000000;
background-color : #cadce1;
border-radius:25px;
padding:6px 15px;
}

#breadcrumbs-style5 a:hover {
color: green;
background-color : red;
}

#breadcrumbs-style5 .current {
background-color: transparent;
}

/* Style-6 */

#breadcrumbs-style6 a {
color: #000000;
background-color : #cadce1;
border-radius:0px;
padding:6px 10px;
margin:5px 15px;
}

#breadcrumbs-style6 a::before {
content: "";
z-index: 2;
position:absolute;
margin-top:-6px;
margin-left:-40px;
border: 15px solid transparent; 
border-right: 15px solid #cadce1;
}

#breadcrumbs-style6 a::after {
content: "";
z-index: 2;
position:absolute;
margin-top:-6px;
margin-left:10px;
border: 15px solid transparent;
border-left: 15px solid #cadce1;
}

#breadcrumbs-style6 a:hover {
color: green;
background-color : red;
}

#breadcrumbs-style6 a:hover::before {
content:"";
border-right: 15px solid red;
}

#breadcrumbs-style6 a:hover::after {
border-left: 15px solid red;
}

#breadcrumbs-style6 .current {
background-color: transparent;
}

#breadcrumbs-style6 .current::before,
#breadcrumbs-style6 .current::after {
border:15px solid transparent;
}

#breadcrumbs-style6 .current:hover::before,
#breadcrumbs-style6 .current:hover::after {
border:15px solid transparent;
}

/* Style 7 */

#breadcrumbs-style7  a {
color: #000000;
background-color : #cadce1;
border-radius:2px;
padding:6px 15px;
margin-right:6px;
margin-top:5px;
}

#breadcrumbs-style7 a:hover {
color: white;
background-color : orange;
}

#breadcrumbs-style7 .current {
background-color: transparent;
}