/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 4 Feb, 2016, 11:26:57 AM
    Author     : administrator
*/

.process-flow {
    max-width: 750px;
    padding: 0px;
    margin: 0px auto;
}

.list-unstyled {
    padding-left: 0;
    list-style: none;
}

.process-flow > li.active {
    opacity: 1;
}

.process-flow > li {
    text-align: center;
    color: #ffffff;
    margin: 0 auto;
    max-width: 256px;
    opacity: 0.2;
    transition: opacity 0.7s ease-out 0s;
}
*, *:after, *::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.process-node.active {
    background: none repeat scroll 0 0 #0E9AFD;
}
.process-node {
    background:#0E9AFD;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    height: 100px;
    margin: auto;
    position: relative;
    transition: background 0.6s ease-out 0s;
    width: 100px;
    text-align: center;
}

.process-flow > li h4{
    color:#6A6878;
    margin:4px 0; 
}

.process-flow > li p {
    margin-bottom: 0;
}


.line {
    /*background: none repeat scroll 0 0 rgba(255, 255, 255, 0.1);*/
    background: none repeat scroll 0 0 #69ABDA;
    height: 7em;
    margin: auto;
    width: 4px;
}

.process-node.active i:last-child {
    opacity: 1;
}

.line.active .progress {
    height: 7em;
}

.progress {
    height: 20px;
    margin-bottom: 20px;
    overflow: hidden;
    background-color: #69ABDA;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}

.progress {
    background: none repeat scroll 0 0 #E0DCDC;
    height: 0;
    transition: height 1.2s ease-out 0s;
    width: 100%;
}


.process-node.active i:last-child {
    opacity: 1;
}
.process-node.active i:first-child {
    /*opacity: 0;*/
}
.process-node i:last-child {
    opacity: 0;
}
.process-node i {
    font-size: 30px;
    color: #ffffff;
    opacity: 1;
    position: relative;
    top: 35px;
    transition: opacity 0.6s ease-out 0s;
}


@media (min-width: 768px){
    .process-flow > li {
        clear: right;
        float: left;
        height: 120px;
        margin: 0;
        position: relative;
        width: 256px;
    }
    .process-flow > li:nth-child(2n) {
        clear: left;
        float: right;
    }
    .process-flow > li .line {
        height: 400px;
        position: absolute;
        right: -48%;
        top: -6.7em;
        -moz-transform: rotate(-75deg);
        -webkit-transform: rotate(-75deg);
        -o-transform: rotate(-75deg);
        -ms-transform: rotate(-75deg);
        transform: rotate(-75deg);
    }
    .process-flow > li:nth-child(2n) .line {
        left: -242%;
        -moz-transform: rotate(75deg);
        -webkit-transform: rotate(75deg);
        -o-transform: rotate(75deg);
        -ms-transform: rotate(75deg);
        transform: rotate(75deg);
    }
    .process-flow > li .line.active .progress {
        height: 400px;
    }
}


/*@media (min-width: 768px)
.process-flow > li .line {
    height: 400px;
    position: absolute;
    right: -48%;
    top: -6.7em;
    -moz-transform: rotate(-75deg);
    -webkit-transform: rotate(-75deg);
    -o-transform: rotate(-75deg);
    -ms-transform: rotate(-75deg);
    transform: rotate(-75deg);
}

.line {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.1);
    height: 7em;
    margin: auto;
    width: 4px;
}*/