.main-content {
  padding: 10px 0 30px;
  counter-reset: section;
  background: lightgrey;
}

.main-content > section {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  width: 95%;
  height: 120px;
  background: #fff;
  border: 1px dashed grey;
  margin: 10px auto;
}

.main-content > section:after {
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  top: -1px;
  left: -1px;
  color: #fff;
  text-align: center;
  line-height: 30px;
  background: rgba(0,0,0,0.35);
  border-bottom-right-radius: 50%;
  counter-increment: section;
  content: ""counter(section)"";
}

div[class*="bc"] {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

div[class*="bc"] a{  
  position: relative;
  font: 600 1em/3em Verdana,"Palatino Linotype";
  text-decoration: none;
  text-align: center;
}

div[class*="bc"] a:last-child:hover {
  cursor: text;
}

/*  bc1 */

.bc1 a {
  color: #333;
  padding: 0 1em;
  margin-right: 1.5em;
}

/* the growing line effect above the link */
.bc1  a:before {
  display: block;
  position: absolute;
  content: "";
  width: 100%;
  height: 2px;
  top: 85%;
  left: 0;
  background: #FF4500;
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  -webkit-transition: all 0.25s linear;
          transition: all 0.25s linear;
}

/* the right arrow on the left of the link except the last one */
.bc1 a:not(:last-child):after {
  display: block;
  position: absolute;
  content: '\f105';
  font-family: Fontawesome;
/* width = link's margin-right */
   width: 1.5em;
   height: 100%;
   top: 0;
   left: 100%;
}

.bc1 a:hover, .bc1 a:last-child {
 background: -webkit-linear-gradient(top, #fff, transparent);
 background: linear-gradient(to bottom, #fff, transparent);
 box-shadow: inset 0 2px 0 0 #FF4500;
}

.bc1 a:hover:before, .bc1 a:last-child:before{
   -webkit-transform: scale(1);
       -ms-transform: scale(1);
           transform: scale(1);
}

.bc1 a:active:not(:last-child){
 color: #FF4500;
}

.bc1 a:active:after{
 color: #333;
}

/* bc2 */

.bc2{
 background: -webkit-linear-gradient(top, #EEE 80%, #888);
 background: linear-gradient(to bottom, #EEE 80%, #888);
 border-radius: 0.5em;
 }

.bc2 a{
  color: #000;
  padding: 0 1em;
  border: 1px solid gray;
}

.bc2 a:first-child{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
		-ms-flex-align: center;
			align-items: center;
	height: calc(3em + 2px); 
	border-radius: 0.5em 0 0 0.5em;
}

.bc2 a:last-child{
    color: #555;
	text-shadow: 0 1px 0 #fff;
	background: #D4D4D4;
	border-radius: 0 0.5em 0.5em 0;
}

.bc2 a:not(:last-child):hover{
	box-shadow: 0 2px 2px 0 #333;
	background: #F1F1F1;
}

.bc2 a:active:not(:last-child){
	background: #D4D4D4;
	box-shadow: none;
}


/* bc3 */

.bc3 a{ 
  color: #fff;
  background: #A7425C; 
  padding:0 1.5em 0 3em;
}

.bc3 a:first-child{
  padding-left: 1.5em; 
  border-radius: 0.6em 0 0 0.6em;
}

 .bc3 a:last-child{
 border-radius: 0 0.6em 0.6em 0;
 }
 
/* creation of a square with 1.5em x 1.5em dimensions, sitting above the left side of every link, except the last one */
.bc3 a:not(:last-child):after{
  display: block;
  position: absolute;
  z-index: 1;
  content: "";
  top: 0;
  left: 100%;
  width: 1.5em;
  height: 100%;
  background: -webkit-linear-gradient(225deg, transparent 40%, currentcolor 55%, #A7425C 0), -webkit-linear-gradient(135deg, transparent 40%, currentColor 55%, #A7425C 0);
  background: linear-gradient(225deg, transparent 40%, currentcolor 55%, #A7425C 0),
  linear-gradient(-45deg, transparent 40%, currentColor 55%, #A7425C 0);
  background-position: 0 0, 0 100%;
  background-size: 1.5em 1.5em;
  background-repeat: no-repeat;
}

.bc3 a:hover, .bc3 a:last-child{
background: #F3825F;
}  

  .bc3 a:hover:after{
    background: -webkit-linear-gradient(225deg, transparent 40%, currentcolor 55%, #F3825F 0), -webkit-linear-gradient(135deg, transparent 40%, currentcolor 55%, #F3825F 0);
    background: linear-gradient(225deg, transparent 40%, currentcolor 55%, #F3825F 0),
  linear-gradient(-45deg, transparent 40%, currentcolor 55%, #F3825F 0);
    background-position: 0 0, 0 100%;
  background-size: 1.5em 1.5em;
  background-repeat: no-repeat;
  }
  
 .bc3 a:active:not(:last-child), .bc3 a:last-child{
     text-shadow: 0 0 1px #fff;
 }
 
 
/* bc4 */

.bc4 a{
  color: #fff;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000,  -1px -1px 0 #000, 1px -1px 0 #000;
  background: -webkit-linear-gradient(0deg, #767676, #333 90%);
  background: linear-gradient(90deg, #767676, #333 90%);
  padding: 0 1.5em 0 2.5em;
}

	.bc4 a:first-child{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	height: 3em;
	-webkit-box-align: center;
	-webkit-align-items: center;
		-ms-flex-align: center;
			align-items: center;
	border-radius: 8px 0 0 8px;
	text-shadow: none;
	padding-left: 1em;
	}

/* creation of a square with 3em x 3em dimensions,except the last one 
   its first half (the transparent part) sits upon the right side of every link and its second upon the left side of the following link, 
   then we transform and scale it to fit in the link's height, so it looks like an arrow (its top right corner) */
  .bc4 a:after{
  display: block;
  position: absolute;
  z-index: 1;
  content: "";
  width: 3em;
  height: 100%;
  top: 0;
  right: -1.5em;
  background: -webkit-linear-gradient(45deg, transparent 50%, #333 50%);
  background: linear-gradient(45deg, transparent 50%, #333 50%);
  box-shadow: 2px -2px 0 1px rgba(0, 0, 0, 0.4);
  /* scaling according to the pythagorean theorem of equal sides*/
  -webkit-transform: scale(0.707) rotate(45deg);
      -ms-transform: scale(0.707) rotate(45deg);
          transform: scale(0.707) rotate(45deg);
}

.bc4 a:last-child, .bc4 a:last-child:after {
  background: #939393;
  text-shadow: none;
}

.bc4 a:hover:not(:last-child) { 
  background: #333;
}

.bc4 a:active:not(:last-child) {
  text-shadow: none;
  color: #fff;
}

/* bc5 */

.bc5 a {
  z-index: 0;
  color: rgba(0,0,0,0.8);
  /*text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff,  -1px -1px 0 #fff, 1px -1px 0 #fff;*/
  padding: 0 2em;
  margin-right: 2px;
}

.bc5 a:last-child {
  color: #666;
  background: lightblue;
  -webkit-transform: skew(-15deg);
      -ms-transform: skew(-15deg);
          transform: skew(-15deg);
}

.bc5 a:before, .bc5 a:after {
  display: block;
  position: absolute;
  z-index: -2;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #3399FF;
  box-shadow: inset 0 0 1px 2px rgba(0,0,0,0.2);
  -webkit-transform: skew(-15deg) scaleX(1);
      -ms-transform: skew(-15deg) scaleX(1);
          transform: skew(-15deg) scaleX(1);
  -webkit-transform-origin: 100% 50%;
      -ms-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
  -webkit-transition: 0.4s all linear;
          transition: 0.4s all linear;
}

.bc5 a:after {
  z-index: -1;
  background: rgba(255,255,255,0.3);
}

.bc5 a:hover:after {
  -webkit-transform: skew(-15deg) scaleX(0);
      -ms-transform: skew(-15deg) scaleX(0);
          transform: skew(-15deg) scaleX(0);
}

.bc5 a:last-child:before,
.bc5 a:last-child:after {
  content: none;
}

.bc5 a:active:not(:last-child) {
  text-shadow: none;
}

/* bc6 */

.bc6{
  z-index: 1;
}

/* arrow like on both sides created only with linear-gradient */
.bc6 a span {
  color: #fff;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000,  -1px -1px 0 #000, 1px -1px 0 #000;
}

.bc6 > a {
  z-index: 2;
  color: crimson;
  background: -webkit-linear-gradient(225deg, transparent 50%, white 55%, currentColor 55%), -webkit-linear-gradient(135deg, transparent 50%, white 55%, currentColor 55%), -webkit-linear-gradient(225deg, currentColor 50%, currentColor 50%, transparent 0), -webkit-linear-gradient(135deg, currentColor 50%, transparent 50%, transparent 0), -webkit-linear-gradient(left, transparent 1.5em, currentColor 1.5em, currentColor calc(100% - 1.5em), transparent 0);
  background: linear-gradient(225deg, transparent 50%, white 55%, currentColor 55%), linear-gradient(-45deg, transparent 50%, white 55%, currentColor 55%), linear-gradient(225deg, currentColor 50%, currentColor 50%, transparent 0), linear-gradient(-45deg, currentColor 50%, transparent 50%, transparent 0), linear-gradient(to right, transparent 1.5em, currentColor 1.5em, currentColor calc(100% - 1.5em), transparent 0);
  background-position: 100% 0, 100% 100%, 0 0, 0 100%, 0 0;
  background-size: 1.5em 1.5em, 1.5em 1.5em, 1.5em 1.5em, 1.5em 1.5em, 100% 100%;
  background-repeat: no-repeat;
  padding: 0 2.05em;
}

.bc6 a:last-child {
  cursor: text;
  color: #000;
  background: -webkit-linear-gradient(225deg, transparent 50%, currentColor 50%), -webkit-linear-gradient(135deg, transparent 50%, currentColor 50%), -webkit-linear-gradient(225deg, currentColor 50%, currentColor 50%, transparent 0), -webkit-linear-gradient(135deg, currentColor 50%, transparent 50%, transparent 0), -webkit-linear-gradient(left, transparent 1.5em, currentColor 1.5em, currentColor calc(100% - 1.5em), transparent 0);
  background: linear-gradient(225deg, transparent 50%, currentColor 50%), linear-gradient(-45deg, transparent 50%, currentColor 50%), linear-gradient(225deg, currentColor 50%, currentColor 50%, transparent 0), linear-gradient(-45deg, currentColor 50%, transparent 50%, transparent 0), linear-gradient(to right, transparent 1.5em, currentColor 1.5em, currentColor calc(100% - 1.5em), transparent 0);
  background-position: 100% 0, 100% 100%, 0 0, 0 100%, 0 0;
  background-size: 1.5em 1.5em, 1.5em 1.5em, 1.5em 1.5em, 1.5em 1.5em, 100% 100%;
  background-repeat: no-repeat;
}

.bc6 a:before{
  display: block;
  position: absolute;
  z-index: -1;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #000;
  background: -webkit-linear-gradient(225deg, transparent 50%, white 55%, currentColor 55%), -webkit-linear-gradient(135deg, transparent 50%, white 55%, currentColor 55%), -webkit-linear-gradient(225deg, currentColor 50%, currentColor 50%, transparent 0), -webkit-linear-gradient(135deg, currentColor 50%, transparent 50%, transparent 0), -webkit-linear-gradient(left, transparent 1.5em, currentColor 1.5em, currentColor calc(100% - 1.5em), transparent 0);
  background: linear-gradient(225deg, transparent 50%, white 55%, currentColor 55%), linear-gradient(-45deg, transparent 50%, white 55%, currentColor 55%), linear-gradient(225deg, currentColor 50%, currentColor 50%, transparent 0), linear-gradient(-45deg, currentColor 50%, transparent 50%, transparent 0), linear-gradient(to right, transparent 1.5em, currentColor 1.5em, currentColor calc(100% - 1.5em), transparent 0);
  background-position: 100% 0, 100% 100%, 0 0, 0 100%, 0 0;
  background-size: 1.5em 1.5em, 1.5em 1.5em, 1.5em 1.5em, 1.5em 1.5em, 100% 100%;
  background-repeat: no-repeat;
  opacity: 0;
  transition: 0.35s;
}

.bc6 a:not(:last-child) {
  margin-right: -1.5em;
}

.bc6 a:hover:not(:last-child) {
  z-index: 3;
}

.bc6 a:hover:not(:last-child):before {
  opacity: 1;
  transition: 0s;
}

.bc6 a:active:not(:last-child) span {
  text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff,  -1px -1px 0 #fff, 1px -1px 0 #fff;
}

/* bc7 */

.bc7 a {
  z-index: 0;
  color: #fff;
  background: -webkit-linear-gradient(left, transparent 1em, #96C03D 1em, #96C03D calc(100% - 1em), transparent 0);
  background: linear-gradient(to right, transparent 1em, #96C03D 1em, #96C03D calc(100% - 1em), transparent 0);
  padding: 0 2em;
  margin-right: 1px;
}

.bc7 a:not(:last-child):before, .bc7 a:not(:last-child):after {
  display: block;
  position: absolute;
  z-index: -1;
  content: "";
  width: 100%;
  height: 50%;
  top: 0;
  left: 0;
  background: #2DB500;
  -webkit-transform: skew(35deg) scaleY(1);
      -ms-transform: skew(35deg) scaleY(1);
          transform: skew(35deg) scaleY(1);
  -webkit-transform-origin: 50% 0;
      -ms-transform-origin: 50% 0;
          transform-origin: 50% 0;
  -webkit-transition: 0.4s all linear;
          transition: 0.4s all linear;
}

.bc7 a:not(:last-child):after {
  top: 50%;
  -webkit-transform: skew(-35deg) scaleY(1);
      -ms-transform: skew(-35deg) scaleY(1);
          transform: skew(-35deg) scaleY(1);
  -webkit-transform-origin: 50% 100%;
      -ms-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
}

.bc7 a:hover:not(:last-child), .bc7 a:last-child {
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000,  -1px -1px 0 #000, 1px -1px 0 #000;
}

.bc7 a:hover:before {
  -webkit-transform: skew(25deg) scaleY(0);
      -ms-transform: skew(25deg) scaleY(0);
          transform: skew(25deg) scaleY(0);
}

.bc7 a:hover:after {
  -webkit-transform: skew(-25deg) scaleY(0);
      -ms-transform: skew(-25deg) scaleY(0);
          transform: skew(-25deg) scaleY(0);
}

.bc7 a:active:not(:last-child) {
  text-shadow: none;
}

/* bc8 */

.bc8 a {
  z-index: 0;
  color: #fff;
  background: #006666;
  padding: 0 2em;
}

.bc8 a:before, .bc8 a:after {
  display: block;
  position: absolute;
  z-index: -1;
  content: "";
  width: 100%;
  height: 50%;
  top: 0;
  left: 0;
  background: rgba(255,255,255,0.2);
  -webkit-transform: skew(35deg) scaleY(1);
      -ms-transform: skew(35deg) scaleY(1);
          transform: skew(35deg) scaleY(1);
  -webkit-transform-origin: 50% 0;
      -ms-transform-origin: 50% 0;
          transform-origin: 50% 0;
  -webkit-transition: 0.4s all linear;
          transition: 0.4s all linear;
}

.bc8 a:after {
  top: 50%;
  -webkit-transform: skew(-35deg) scaleY(1);
      -ms-transform: skew(-35deg) scaleY(1);
          transform: skew(-35deg) scaleY(1);
  -webkit-transform-origin: 50% 100%;
      -ms-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
}

.bc8 a:hover:not(:last-child), .bc8 a:last-child {
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000,  -1px -1px 0 #000, 1px -1px 0 #000;
}

.bc8 a:hover:before, .bc8 a:last-child:before {
  -webkit-transform: skew(25deg) scaleY(0);
      -ms-transform: skew(25deg) scaleY(0);
          transform: skew(25deg) scaleY(0);
}

.bc8 a:hover:after, .bc8 a:last-child:after {
  -webkit-transform: skew(-25deg) scaleY(0);
      -ms-transform: skew(-25deg) scaleY(0);
          transform: skew(-25deg) scaleY(0);
}

.bc8 a:active:not(:last-child) {
  text-shadow: none;
}

/* bc9 */

.bc9 a {
  color: #fff;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000,  -1px -1px 0 #000, 1px -1px 0 #000;
  background: #CC9900;
  border: 2px solid #000;
  padding: 0  1em;
  margin-right: 3em;
}

.bc9 a:last-child {
  background: #000;
  margin-right: 0em;
}

/* an hierarchical order of the links because every pipe has to be above the following link 
	- creating an stacking order from the beginning - */
.bc9 a {
  z-index: 4;
}

.bc9 a:nth-child(2) {
  z-index: 3;
}

.bc9 a:nth-child(3) {
  z-index: 2;
}

.bc9 a:nth-child(4) {
  z-index: 1;
}

/* the top-to-bottom black curtain falling effect */
.bc9 a:before {
  display: block;
  position: absolute;
  z-index: -1;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #000;
  -webkit-transform: scaleY(0);
      -ms-transform: scaleY(0);
          transform: scaleY(0);
  -webkit-transform-origin: 50% 0;
      -ms-transform-origin: 50% 0;
          transform-origin: 50% 0;
  -webkit-transition: all 0.4s linear;
          transition: all 0.4s linear;
}

/* the pipe between the links */
.bc9 a:not(:last-child):after {
  display: block;
  position: absolute;
  content: "";
  /* width = margin-right + 2x2px from the borders */
  width: calc(3em + 4px);
  height: 1em;
  top: 1em;
  left: 100%;
  background: inherit;
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
}

.bc9 a:hover:before {
  -webkit-transform: scaleY(1);
      -ms-transform: scaleY(1);
          transform: scaleY(1);
}

.bc9 a:active:not(:last-child) {
  text-shadow: 1px 1px 0 #fff;
}

/* bc10 */

.bc10 {
  position: relative;
  top: -1em;
}

.bc10 a {
  color: #666;
  border-radius: 10px;
  margin-right: 3em;
}

/* because we need two more pseudo-elements */
.bc10 a span {
  display: block;
  position: relative;
  padding: 0 1em;
}

/* the round starting point */
.bc10 a:before {
  display: block;
  position: absolute;
  z-index: 1;
  content: "";
  width: 1em;
  height: 1em;
  top: calc(100% + 1.5em);
  left: 50%;
  background: #6600CC;
  border-radius: 50%;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}

/* the right part of the connecting line */
.bc10 a:after,
/* the left part of the connecting line */
.bc10 a span:before {
  display: block;
  position: absolute;
  content: "";
  /* half the width of the link + half of the margin-right */
  width: calc(50% + 1.5em);
  height: 0.25em;
  top: calc(100% + 1.5em);
  background: #6600CC;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

.bc10 a:after {
  left: 50%;
}

.bc10 a span:before {
  right: 50%;
}

/* the little triangle on the dialog cloud */
.bc10 a span:after {
  display: block;
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  top: 100%;
  left: 50%;
  border: 0.5em solid transparent;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}

/* no need for line-extending left and right */
.bc10 a:last-child:after, .bc10 a:first-child span:before {
  content: none;
}

.bc10 a:hover, .bc10 a:last-child {
  color: #6600CC;
  text-shadow: none;
  box-shadow: inset 0 0 0 2px  #6600CC;
}

.bc10 a:hover span:after, .bc10 a:last-child span:after {
  border-top-color: #6600CC;
}

.bc10 a:not(:last-child):hover:before{
  box-shadow: 0 0 10px 0 #6600CC;
}

.bc10 a:active:not(:last-child) {
  background: #6600CC;
  color: #fff;
}

/* the part of the line before the end */
.bc10 a:last-child span:before,
.bc10 a:nth-last-child(2):after {
  background: #C388FF;
}

/* nothing during hovering the line */
.bc10 a:after,
.bc10 a span:before {
  pointer-events: none;
  cursor: default;
}