support@alanbeck.co
Get a Free Funnel BuildingStarterkit to Help You Succeed Faster With ClickFunnels + Tons of Other Bonuses For Funnel Design + Copywriting
.funnel {
position: relative;
display: inline-block;
width: 200px;
height: 20px;
border-radius: 1000px;
padding: 2px;
vertical-align: middle;
background: #ccc;
box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
}
.funnel--nav {
display: block;
width: 100%;
height: 35px;
}
.funnel--xs{
width: 75px;
height: 7px;
}
.funnel__segments {
display: table;
width: 100%;
height: 100%;
line-height: 1;
border-radius: 1000px;
overflow: hidden;
}
.funnel__segment {
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 700;
text-shadow: 1px 1px 0 rgba(255,255,255,.9);
text-align: center;
vertical-align: middle;
text-transform: uppercase;
color: #666;
height: 100%;
display: table-cell;
background: #efefef;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 51%, rgba(0, 0, 0, 0.04));
border-left: 1px solid #999;
&:first-child {
border: none;
}
}
.funnel__segment--active {
color: #fff;
text-shadow: 1px 1px 0 rgba(0,0,0,.25);
background: #5ea700;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 51%, rgba(0, 0, 0, 0.04));
border-left: 1px solid #7BB296;
}