.process_arrow {
    height: 50px;
    width: 100px;
    padding-left: 20px;
    background: #F5FBF1;
    display: inline-block;
    position: relative;
    margin-left: 20px;
    line-height: 50px;
    font-family: sans-serif;
    font-size: 15px;
}
.process_arrow:before, .process_arrow:after {
    content: '';
    left: -15px;
    position: absolute;
    height: 23px;
    width: 132px;
    border-left: 2px solid black;
    border-right: 2px solid black;
}
.process_arrow:before {
    border-top: 2px solid black;
    -webkit-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: skewX(30deg);
    -moz-transform: skewX(30deg);
    -ms-transform: skewX(30deg);
    transform: skewX(30deg);
    top: 0;
    box-shadow: inset 0 8px 0 8px #F5FBF1, inset -6px 8px 0 8px #F5FBF1;
}
.process_arrow:after {
    border-bottom: 2px solid black;
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: skewX(-30deg);
    -moz-transform: skewX(-30deg);
    -ms-transform: skewX(-30deg);
    transform: skewX(-30deg);
    bottom: 0;
    box-shadow: inset 0 -8px 0 8px #F5FBF1, inset -6px -8px 0 8px #F5FBF1;
}
.process_arrow:hover {
    background: #C0EBA4;
}
.process_arrow:hover:before { box-shadow: inset 0 8px 0 8px #C0EBA4, inset -6px 8px 0 8px #C0EBA4;}
.process_arrow:hover:after { box-shadow: inset 0 -8px 0 8px #C0EBA4, inset -6px -8px 0 8px #C0EBA4;}

/*First and Last styles*/
.process_arrow:first-of-type {
    left: -15px;
    box-shadow: 15px 0 0 0 #F5FBF1;
    border-left: 2px solid black;
}
.process_arrow:first-of-type:before, .process_arrow:first-of-type:after {
    left: -1px;
    width: 135px;
    border-left: 0;
}
.process_arrow:first-of-type:hover {box-shadow: 15px 0 0 0 #C0EBA4;}
.process_arrow:last-of-type {
    left: 0px;
    width: 115px;
    box-shadow: inset -2px 0 0 0 black, inset 0 -2px 0 0 black, inset 0 2px 0 0 black;
    border: 0;
}
.process_arrow:last-of-type:before, .process_arrow:last-of-type:after {
    left: -15px;
    border-right: 0;
}
.process_arrow:last-of-type:hover {background: #C0EBA4;}


/* ============================================================== */

@import "compass/css3";
 .arrow_right {
	 position: relative;
	 width: 95%;
	 background: #dcebef;
	 height: 40px;
	 line-height: 40px;
	 margin-bottom: 30px;
     font-size: 16px;
     font-weight: 550;
	 text-align: center;
	 color: #27617E;
     border: 2px dashed #27617E;
     border-radius: 20px 4px 4px 20px;
}
 .arrow_left {
	 position: relative;
	 width: 95%;
	 background: #dcebef;
	 height: 40px;
	 line-height: 40px;
	 margin-bottom: 30px;
     font-size: 16px;
     font-weight: 550;
	 text-align: center;
	 color: #27617E;
     border: 2px dashed #27617E;
     border-radius: 4px 20px 20px 4px;
}

    

/*top arrow*/
 .arrow-top:before {
	 position: absolute;
	 top: -10px;
	 left: 50%;
	 margin-left: -10px;
	 content: "";
	 display: block;
	 border-left: 10px solid transparent;
	 border-right: 10px solid transparent;
	 border-bottom: 10px solid #1abc9c;
}
/*bottom arrow*/
 .arrow-bottom:after {
	 position: absolute;
	 bottom: -10px;
	 left: 50%;
	 margin-left: -10px;
	 content: "";
	 display: block;
	 border-left: 10px solid transparent;
	 border-right: 10px solid transparent;
	 border-top: 10px solid #1abc9c;
}
/*right arrow*/
 .arrow_right-right:after {
	 content: "";
	 position: absolute;
	 right: -30px;
	 top: -2px;
	 border-top: 20px solid transparent;
	 border-bottom: 20px solid transparent;
	 border-left: 30px solid #27617E;
     
}
/*left arrow*/
 .arrow_left-left:before {
	 content: "";
	 position: absolute;
	 left: -30px;
	 top: -2px;
	 border-top: 20px solid transparent;
	 border-bottom: 20px solid transparent;
	 border-right: 30px solid #27617E;
     
}