

<div class="container">
    

    <h1>Andamento do Projeto: <small>1021215115151 - Cliente: José Alvess</small>
    <div class="progress" id="js-progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
            <span class="progress-val">60%</span>
        </div>
    </div>
   
	<div class="row">
	    
		<section>
        <div class="wizard">
            <div class="wizard-inner">
                <div class="connecting-line"></div>
                <ul class="nav nav-tabs" role="tablist">
                    


                    <li role="presentation" class="">
                        <a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1">
                            <span class="round-tab" style="background:#96d7a1">
                                <i style="margin-top: 24%;" class="glyphicon glyphicon-ok"></i> <p style="margin-top: 40%; margin-left: -35%">Preparação</p>
                            </span>
                        </a>
                    </li>

                    <li role="presentation" class="disabled">
                        <a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2">
                            <span class="round-tab" style="background:#96d7a1">
                                <i style="margin-top: 24%" class="glyphicon glyphicon-ok"></i><p style="margin-top: 40%; margin-left: -35%">Produção</p>
                            </span>
                        </a>
                    </li>
                    <li role="presentation" class="disabled">
                        <a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Step 3">
                            <span class="round-tab">
                                <i style="margin-top: 24%" class="glyphicon glyphicon-picture"></i><p style="margin-top: 40%; margin-left: -35%">Acabamento</p>
                            </span>
                        </a>
                    </li>

                    <li role="presentation" class="disabled">
                        <a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" title="Complete">
                            <span class="round-tab">
                                <i  style="margin-top: 24%" class="glyphicon glyphicon-plane"></i><p style="margin-top: 40%; margin-left: -30%">Entregue</p>
                            </span>
                        </a>
                    </li>
                </ul>
            </div>

            <form role="form">
                <div class="tab-content">
                    <div class="tab-pane active" role="tabpanel" id="step1">

                        <!-- Page Content -->
                        <div class="container">
                        
                          <div class="row text-center text-lg-start">
                        
                        
                            <div class="col-lg-3 col-md-4 col-6">
                              <a href="#" class="d-block mb-4 h-100">
                                <img class="img-fluid img-thumbnail" src="<?php echo base_url(); ?>assets/site/images/servico-4.png" alt="">
                              </a>
                            </div>
                            <div class="col-lg-3 col-md-4 col-6">
                              <a href="#" class="d-block mb-4 h-100">
                                <img class="img-fluid img-thumbnail" src="<?php echo base_url(); ?>assets/site/images/servico-2.png" alt="">
                              </a>
                            </div>
                            <div class="col-lg-3 col-md-4 col-6">
                              <a href="#" class="d-block mb-4 h-100">
                                <img class="img-fluid img-thumbnail" src="<?php echo base_url(); ?>assets/site/images/servico-1.png" alt="">
                              </a>
                            </div>
                            <div class="col-lg-3 col-md-4 col-6">
                              <a href="#" class="d-block mb-4 h-100">
                                <img class="img-fluid img-thumbnail" src="<?php echo base_url(); ?>assets/site/images/servico-8.png" alt="">
                              </a>
                            </div>
                            <div class="col-lg-3 col-md-4 col-6">
                              <a href="#" class="d-block mb-4 h-100">
                                <img class="img-fluid img-thumbnail" src="<?php echo base_url(); ?>assets/site/images/servico-9.png" alt="">
                              </a>
                            </div>
                        
                          </div>
                        
                        </div>
                        <!--<ul class="list-inline pull-right">-->
                        <!--    <li><button type="button" class="btn btn-primary next-step">Save and continue</button></li>-->
                        <!--</ul>-->
                    </div>
                    <div class="tab-pane" role="tabpanel" id="step2">
                        
                        <div class="container">
                        
                          <div class="row text-center text-lg-start">
                        
                        
                            <div class="col-lg-3 col-md-4 col-6">
                              <a href="#" class="d-block mb-4 h-100">
                                <img class="img-fluid img-thumbnail" src="<?php echo base_url(); ?>assets/site/images/p-divisorias/11.jpeg" alt="">
                              </a>
                            </div>
                            <div class="col-lg-3 col-md-4 col-6">
                              <a href="#" class="d-block mb-4 h-100">
                                <img class="img-fluid img-thumbnail" src="<?php echo base_url(); ?>assets/site/images/p-divisorias/20180217-160802.jpg" alt="">
                              </a>
                            </div>
                            <div class="col-lg-3 col-md-4 col-6">
                              <a href="#" class="d-block mb-4 h-100">
                                <img class="img-fluid img-thumbnail" src="<?php echo base_url(); ?>assets/site/images/p-divisorias/20180217-160802.jpg" alt="">
                              </a>
                            </div>
                            <div class="col-lg-3 col-md-4 col-6">
                              <a href="#" class="d-block mb-4 h-100">
                                <img class="img-fluid img-thumbnail" src="<?php echo base_url(); ?>assets/site/images/p-divisorias/20180217-160802.jpg" alt="">
                              </a>
                            </div>
                            <div class="col-lg-3 col-md-4 col-6">
                              <a href="#" class="d-block mb-4 h-100">
                                <img class="img-fluid img-thumbnail" src="<?php echo base_url(); ?>assets/site/images/p-divisorias/20180217-160802.jpg" alt="">
                              </a>
                            </div>
                        
                          </div>
                        
                        </div>
                        
                        <!--<h3>Step 2</h3>-->
                        <!--<p>This is step 2</p>-->
                        <!--<ul class="list-inline pull-right">-->
                        <!--    <li><button type="button" class="btn btn-default prev-step">Previous</button></li>-->
                        <!--    <li><button type="button" class="btn btn-primary next-step">Save and continue</button></li>-->
                        <!--</ul>-->
                    </div>
                    <div class="tab-pane" role="tabpanel" id="step3">
                        <h3>Acabamento</h3>
                        <p>Etapa ainda não Iniciada</p>
                        <!--<ul class="list-inline pull-right">-->
                        <!--    <li><button type="button" class="btn btn-default prev-step">Previous</button></li>-->
                        <!--    <li><button type="button" class="btn btn-default next-step">Skip</button></li>-->
                        <!--    <li><button type="button" class="btn btn-primary btn-info-full next-step">Save and continue</button></li>-->
                        <!--</ul>-->
                    </div>
                    <div class="tab-pane" role="tabpanel" id="complete">
                        <h3>Entrega</h3>
                        <p>Produto ainda não foi finalizado e Não Entregue.</p>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </form>
        </div>
    </section>
   </div>
</div>

<style>

.progress {
  height: 35px;
  margin-bottom: -20;
  overflow: hidden;
  background-color: #f5f5f5;
  -webkit-border-radius: 17.5px;
  -moz-border-radius: 17.5px;
  border-radius: 17.5px;
  border: 1px solid #e5e5e5;
}

.progress-bar {
  float: left;
  width: 0;
  height: 100%;
  font-size: 12px;
  line-height: 35px;
  color: #fff;
  text-align: center;
  -webkit-border-radius: 17.5px;
  -moz-border-radius: 17.5px;
  border-radius: 17.5px;
  background-color: #36c240;
  -webkit-transition: width .6s ease;
  -o-transition: width .6s ease;
  -moz-transition: width .6s ease;
  transition: width .6s ease;
  position: relative;
}

.progress-val {
  font-size: 15px;
  color: #fff;
  font-weight: 700;
  text-align: center;
  -webkit-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  transition: all 0.6s ease;
}

    .wizard {
    margin: 20px auto;
    background: #fff;
}

    .wizard .nav-tabs {
        position: relative;
        margin: 40px auto;
        margin-bottom: 0;
        border-bottom-color: #e0e0e0;
    }

    .wizard > div.wizard-inner {
        position: relative;
    }

.connecting-line {
    height: 2px;
    background: #e0e0e0;
    position: absolute;
    width: 80%;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 50%;
    z-index: 1;
}

.wizard .nav-tabs > li.active > a, .wizard .nav-tabs > li.active > a:hover, .wizard .nav-tabs > li.active > a:focus {
    color: #555555;
    cursor: default;
    border: 0;
    border-bottom-color: transparent;
}

span.round-tab {
    width: 70px;
    height: 70px;
    line-height: 70px;
    display: inline-block;
    border-radius: 100px;
    background: #fff;
    border: 2px solid #e0e0e0;
    z-index: 2;
    position: absolute;
    left: 0;
    text-align: center;
    font-size: 25px;
}
span.round-tab i{
    color:#555555;
}
.wizard li.active span.round-tab {
    background: #fff;
    border: 2px solid red;
    
}
.wizard li.active span.round-tab i{
    color: #5bc0de;
}

span.round-tab:hover {
    color: #333;
    border: 2px solid #333;
}

.wizard .nav-tabs > li {
    width: 25%;
}

.wizard li:after {
    content: " ";
    position: absolute;
    left: 46%;
    opacity: 0;
    margin: 0 auto;
    bottom: 0px;
    border: 5px solid transparent;
    border-bottom-color: #5bc0de;
    transition: 0.1s ease-in-out;
}

.wizard li.active:after {
    content: " ";
    position: absolute;
    left: 46%;
    opacity: 1;
    margin: 0 auto;
    bottom: 0px;
    border: 10px solid transparent;
    border-bottom-color: #5bc0de;
}

.wizard .nav-tabs > li a {
    width: 70px;
    height: 70px;
    margin: 20px auto;
    border-radius: 100%;
    padding: 0;
}

    .wizard .nav-tabs > li a:hover {
        background: transparent;
    }

.wizard .tab-pane {
    position: relative;
    padding-top: 50px;
}

.wizard h3 {
    margin-top: 0;
}

@media( max-width : 585px ) {

    .wizard {
        width: 90%;
        height: auto !important;
    }

    span.round-tab {
        font-size: 16px;
        width: 50px;
        height: 50px;
        line-height: 50px;
    }

    .wizard .nav-tabs > li a {
        width: 50px;
        height: 50px;
        line-height: 50px;
    }

    .wizard li.active:after {
        content: " ";
        position: absolute;
        left: 35%;
    }
}
</style>


