/* 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;
}