/*custom font*/
@import url(https://fonts.googleapis.com/css?family=Merriweather+Sans);

* {
    margin: 0;
    padding: 0;
}

html, body {
    min-height: 100%;
}

.breadcrumb {
    display: inline-block;
    box-shadow: 0px 0px 0px rgba(0,0,0,0);
    border-radius: 5px;
    overflow: visible;
    counter-reset: flag;
    width: 100%;
    text-align: center;
}

    .breadcrumb a {
        display: inline-block;
        float: none;
        padding: 0 !important;
        margin: 0;
        overflow: visible;
        width: 10%;
        height: 10px;
        background: #ddd !important;
        line-height: 65px;
        text-align: left;
        font-size: 11px;
        color: white;
        position: relative;
        text-decoration: none;
    }

	@media screen and (max-width:1450px) {
		.breadcrumb a {
			width: 15%;
		}
	}


        .breadcrumb a:hover {
            background: linear-gradient(#64D86A, #1D7521);
        }

        .breadcrumb a.active {
            background: #ddd;
        }

            .breadcrumb a.active:after, .breadcrumb a:hover:after {
                background: linear-gradient(135deg,#64D86A, #1D7521);
            }

        .breadcrumb a:last-child:after {
            content: none;
        }

        .breadcrumb a:last-child {
            padding-right: 10px;
            border-radius: 0 5px 5px 0;
            background: none !important;
            width: 10%;
            margin-right: -10% !important;
        }

        .breadcrumb a:before {
            text-align: center;
            content: counter(flag);
            counter-increment: flag;
            width: 30px;
            height: 30px;
            background: #0E2F4A;
            font-weight: bold;
            position: absolute;
            top: 2px;
            left: -15px;
            line-height: 30px;
            margin: -12px 0 40px;
            border-radius: 100%;
            box-shadow: 0 0 0 4px #ddd !important;
        }

        .breadcrumb a.complete:before {
            box-shadow: 0 0 0 4px #88888A !important;
            background: #88888A !important;
            color: #000 !important;
        }

        .breadcrumb a.active:before {
            box-shadow: 0 0 0 4px #000000 !important;
            background: #000000 !important;
            color: #fff !important;
        }

        .breadcrumb a span {
            display: block;
            margin-top: 10px;
            margin-left: -50%;
            text-align: center;
            font-weight: bold;
            width: 100%;
        }


/*     GREEN   COMPLETE    #FFBB76 00A651  */
/*     WHITE   INCOMPETE   #FFFFFF   */
/*     GRAY    ACTIVE      #D31F30   */


/* complete  */
.flat a.complete,
.flat a.complete:after {
    background: #88888A;
    color: black;
    transition: all 0.5s;
}

    .flat a.complete:before {
        background: #FFFFFF;
        box-shadow: 0 0 0 1px #ccc;
    }

    .flat a.complete:hover,
    .flat a.complete.active,
    .flat a.complete:hover:after,
    .flat a.complete.active:after {
        background: #88888A;
    }
/* complete  */


/* incomplete  */
.flat a.incomplete,
.flat a.incomplete:after {
    background: white;
    color: black;
    transition: all 0.5s;
}

    .flat a.incomplete:before {
        background: white;
        box-shadow: 0 0 0 1px #ccc;
    }

    .flat a.incomplete:hover,
    .flat a.incomplete.active,
    .flat a.incomplete:hover:after,
    .flat a.incomplete.active:after {
        background: #D31F30;
    }
/* incomplete  */


/* active  */
.flat a.active,
.flat a.active:after {
    background: #D31F30;
    color: black;
    transition: all 0.5s;
}

    .flat a.active:before {
        background: #FFFFFF;
        box-shadow: 0 0 0 1px #ccc;
    }

    .flat a.active:hover,
    .flat a.active.active,
    .flat a.active:hover:after,
    .flat a.active.active:after {
        background: #D31F30;
    }
/* active  */


/* nolink  */
.flat a.nolink,
.flat a.nolink:after {
    background: #FFFFFF;
    color: black;
    transition: all 0.5s;
    font-weight: bold;
}

    .flat a.nolink:before {
        background: #FFFFFF;
        box-shadow: 0 0 0 0px #ccc;
    }

    .flat a.nolink:hover,
    .flat a.nolink.active,
    .flat a.nolink:hover:after,
    .flat a.nolink.active:after {
        background: #D31F30;
    }
/* nolink  */