diff --git a/src/js/arrastrar.js b/src/js/arrastrar.js
new file mode 100644
index 0000000..1f17c02
--- /dev/null
+++ b/src/js/arrastrar.js
@@ -0,0 +1,25 @@
+function allowDrop(ev) {
+    ev.preventDefault();
+}
+function drag(ev, marcador) {
+    marcador = JSON.stringify(marcador);
+    ev.dataTransfer.setData('marcador', marcador);
+    var elementoDom = document.getElementById('test');
+    var scope = angular.element(elementoDom).scope();
+    scope.arrastra();
+}
+function drop(ev) {
+    ev.preventDefault();
+    var data = ev.dataTransfer.getData('marcador');
+    var elementoDom = document.getElementById(ev.target.id);
+    var elementoAngular = angular.element(elementoDom);
+    var elementoScope = elementoAngular.scope();
+    elementoScope.cargar(ev.target.id, data);
+    elementoScope.$digest();
+}
+function dropEnd() {
+    console.log('drop');
+    var elementoDom = document.getElementById('test');        
+    var scope = angular.element(elementoDom).scope();
+    scope.noArrastra();
+}
\ No newline at end of file
diff --git a/src/js/controller.js b/src/js/controller.js
index 8e90f98..981cc26 100644
--- a/src/js/controller.js
+++ b/src/js/controller.js
@@ -1,10 +1,17 @@
 angular.module('focaLogisticaPedidoRuta') .controller('focaLogisticaPedidoRutaController', [
     '$scope', 'focaLogisticaPedidoRutaService', '$location', '$uibModal', '$filter',
-    function($scope, focaLogisticaPedidoRutaService, $location, $uibModal, $filter) {
-        $scope.actividad = '';
-
+        'focaModalService', 'focaBotoneraLateralService',
+    function($scope, focaLogisticaPedidoRutaService, $location, $uibModal, $filter,
+        focaModalService, focaBotoneraLateralService
+    ) {
         $scope.now = new Date();
-        $scope.actividad = 'Nota de pedido';
+        $scope.actividad = 'Logistica';
+
+        //Datos Pantalla
+        $scope.titulo = 'Logistica de Pedidos';
+        $scope.botonera = ['Vehiculo'];
+        var cabecera = '';
+        
         $scope.idUsuario = 0;
         $scope.marcadores = [];
         $scope.vehiculos = [];
@@ -15,9 +22,23 @@ angular.module('focaLogisticaPedidoRuta') .controller('focaLogisticaPedidoRutaCo
             getSeguimiento();
         };
 
+        //SETEO BOTONERA LATERAL
+        focaBotoneraLateralService.showSalir(true);
+        focaBotoneraLateralService.showPausar(false);
+        focaBotoneraLateralService.showGuardar(false);
+
+        $scope.general = function() {
+            $scope.idUsuario = 0;
+            getSeguimiento();
+            $scope.$broadcast('removeCabecera', cabecera);
+            $scope.$broadcast('addCabecera',{
+                label: 'General',
+                valor: ''
+            });
+        };
+
         $scope.cargar = function(id, punto) {
-            var marcador = JSON.parse(punto);
-            var vehiculo = $filter('filter')($scope.vehiculos, {id: parseInt(id)})[0];            
+            var idRemito = JSON.parse(punto).notaPedido.remito.id;
             var modalInstance = $uibModal.open(
                 {
                     ariaLabelledBy: 'Busqueda de Vehiculo',
@@ -25,18 +46,29 @@ angular.module('focaLogisticaPedidoRuta') .controller('focaLogisticaPedidoRutaCo
                     controller: 'focaDetalleVehiculo',
                     size: 'lg',
                     resolve: {
-                        vehiculo: function() {return vehiculo;},
-                        marcador: function() {return marcador;}
+                        idVehiculo: function() {return id;},
+                        idRemito: function() {return idRemito;}
                     }
                 }
             );
-            modalInstance.result.then(function() {                
+            modalInstance.result.then(function() {
             }, function() {
-                //run when cancel modal
             });
         };
 
-        $scope.arrastra = function() {            
+        $scope.quitarVehiculo = function(vehiculo) {
+            focaModalService.confirm('Esta seguro que desea eliminar el vehículo ' +
+                vehiculo.codigo + '?').then(function() {
+                    $scope.vehiculos.splice($scope.vehiculos.indexOf(vehiculo), 1);
+                });
+        };
+
+        $scope.informacionVehiculo = function(vehiculo) {
+            focaModalService.alert('EN DESARROLLO : \n información del vehículo ' +
+                JSON.stringify(vehiculo));
+        };
+
+        $scope.arrastra = function() {
             $scope.arrastrando = true;
             $scope.$digest();
         };
@@ -62,6 +94,11 @@ angular.module('focaLogisticaPedidoRuta') .controller('focaLogisticaPedidoRutaCo
             if (key === 13) {
                 $scope.idUsuario = $scope.idUsuarioInput;
                 getSeguimiento();
+                $scope.$broadcast('removeCabecera', 'General');
+                $scope.$broadcast('addCabecera', {
+                    label: cabecera,
+                    valor: $scope.idUsuarioInput
+                });
             }
         };
 
@@ -81,14 +118,17 @@ angular.module('focaLogisticaPedidoRuta') .controller('focaLogisticaPedidoRutaCo
 
             modalInstance.result.then(
                 function(vehiculo) {
+                    var existe = $filter('filter')($scope.vehiculos, {id: vehiculo.id});
+                    if(existe.length > 0){
+                        focaModalService.alert('El vehiculo que intenta cargar ya ha sido cargado');
+                        return;
+                    }
                     $scope.vehiculos.push(vehiculo);
                 }, function() {
                     // funcion ejecutada cuando se cancela el modal
                 }
             );
         };
-        
-
 
         function getSeguimiento() {
             var now = $scope.now;
@@ -108,7 +148,6 @@ angular.module('focaLogisticaPedidoRuta') .controller('focaLogisticaPedidoRutaCo
             };
 
             focaLogisticaPedidoRutaService.obtenerActividad(datos).then(function(datos) {
-                
                 $scope.marcadores = datos.data;
             });
         }
diff --git a/src/js/controllerDetalleVehiculo.js b/src/js/controllerDetalleVehiculo.js
index 5b32ddf..8e61934 100644
--- a/src/js/controllerDetalleVehiculo.js
+++ b/src/js/controllerDetalleVehiculo.js
@@ -2,30 +2,74 @@ angular.module('focaLogisticaPedidoRuta')
     .controller('focaDetalleVehiculo',
         ['$scope',
         '$uibModalInstance',
-        'vehiculo',
-        'marcador',
-        function($scope, $uibModalInstance, vehiculo, marcador) {
-            $scope.articulos = marcador.notaPedido.articulosNotaPedido;
-            $scope.articuloSeleccionado = {};
-            $scope.vehiculo = vehiculo;
+        'idVehiculo',
+        'idRemito',
+        'focaModalService',
+        '$filter',
+        'focaLogisticaPedidoRutaService',
+        function($scope, $uibModalInstance, idVehiculo, idRemito, focaModalService, $filter,
+            focaLogisticaPedidoRutaService
+        ) {
+            $scope.articulos = [];
+            $scope.vehiculo = {};
+            $scope.remito = {};
+            focaLogisticaPedidoRutaService.obtenerVehiculoById(idVehiculo).then(
+                function(res) {
+                    $scope.vehiculo = res.data;
+                }
+            );
+            focaLogisticaPedidoRutaService.obtenerRemitoById(idRemito).then(
+                function(res) {
+                    $scope.remito = res.data;
+                    $scope.articulos = res.data.articulosRemito;
+                }
+            );
+            $scope.aCargar = [];
             $scope.aceptar = function() {
                 $uibModalInstance.close();
             };
 
-            $scope.cargarACisterna = function(cisterna) {
-                if(!$scope.articuloSeleccionado.id) {
-                    //TODO: usar modal de foca
-                    alert('Debe seleccionar un articulo');
-                    return;
-                }
-                if(cisterna.cisternaCarga.cantidad) {
-                    cisterna.cisternaCarga.cantidad += parseFloat(cisterna.aCargar);
-                }else {
-                    cisterna.cisternaCarga.cantidad = parseFloat(cisterna.aCargar);
-                    cisterna.cisternaCarga.idProducto = $scope.articuloSeleccionado.id;
-                }
-                cisterna.disponible = cisterna.capacidad - cisterna.cisternaCarga.cantidad;
-                cisterna.aCargar = '';
+            $scope.cancelar = function() {
+                $uibModalInstance.close();
+            };
+
+            $scope.cargarACisternas = function(vehiculo) {
+                for (var i = 0; i < vehiculo.cisternas.length; i++) {
+                    var cisterna = vehiculo.cisternas[i];
+                    var aCargar = parseFloat($scope.aCargar[i]);
+                    if(!aCargar) {
+                        continue;
+                    }
+                    if(aCargar > cisterna.disponible) {
+                        focaModalService.alert('La cantidad cargada supera la capacidad de la' +
+                            'cisterna ' + cisterna.codigo);
+                        return;
+                    }
+                    if(cisterna.cisternaCarga.cantidad) {
+                        cisterna.cisternaCarga.cantidad += aCargar;
+                    }else {
+                        cisterna.cisternaCarga.cantidad = aCargar;
+                        cisterna.cisternaCarga.idProducto = $scope.articuloSeleccionado.idArticulo;
+                    }
+                    cisterna.disponible = cisterna.capacidad - cisterna.cisternaCarga.cantidad;
+                
+                    cisterna.cisternaCarga.articulo = {
+                        DetArt: $scope.articuloSeleccionado.descripcion
+                    };
+                    $filter('filter')($scope.articulos, {id: $scope.articuloSeleccionado.id})[0]
+                        .cargado = true;
+
+                    $scope.calcularPorcentaje(cisterna);
+                }
+                var articuloSiguiente = $scope.articulos.filter(
+                    function(filter) {
+                        return filter.cargado !== true;
+                    }
+                );
+                if(articuloSiguiente.length > 0){
+                    $scope.cambioArticulo(articuloSiguiente[0]);
+                }
+                $scope.aCargar = [];
             };
             $scope.calcularPorcentaje = function(cisterna) {
                 if(!cisterna.cisternaCarga.cantidad) {
@@ -33,9 +77,29 @@ angular.module('focaLogisticaPedidoRuta')
                 }
                 var porcentaje = (cisterna.cisternaCarga.cantidad * 100 /
                     cisterna.capacidad) + '%';
-                document.getElementById(cisterna.id).style.width = porcentaje;
+                var elementHtml = document.getElementById(cisterna.id);
+                if(elementHtml) {
+                    elementHtml.style.width = porcentaje;
+                }
             };
             $scope.cambioArticulo = function(articulo) {
+                articulo.checked = true;
                 $scope.articuloSeleccionado = articulo;
             };
+            $scope.actualizarArticulo = function () {
+                $scope.articuloSeleccionado.cantidadCargada = 0;
+                for (var i = 0; i < $scope.aCargar.length; i++) {
+                    $scope.articuloSeleccionado.cantidadCargada +=
+                        parseFloat($scope.aCargar[i]) || 0;
+                }
+            };
+            $scope.tieneArticulosPendientes = function() {
+                var articulosDescargados = $scope.articulos.filter(function(filter) {
+                    return filter.cargado === true;
+                });
+                if(articulosDescargados.length === $scope.articulos.length)  {
+                    return false;
+                }
+                return true;
+            };
     }]);
diff --git a/src/js/osm-directive.js b/src/js/osm-directive.js
index 6a4bb40..7b0b4d3 100644
--- a/src/js/osm-directive.js
+++ b/src/js/osm-directive.js
@@ -51,7 +51,7 @@ angular.module('focaLogisticaPedidoRuta').directive('foca', function() {
                     observacion += '<br/>';
                     observacion += '<i class="fa fa-map-marker fa-3x" aria-hidden="true"'+
                         'class="form-control" ondragend="dropEnd()" ondragstart=\'drag(event, '+
-                        JSON.stringify(marcador)+')\' draggable="true"></i>';
+                        JSON.stringify(marcador)+')\' draggable="true"></i>(Arrastrar icono)';
                     $scope.markers.push(
                         L.marker([marcador.latitud, marcador.longitud]).addTo($scope.map)
                         .bindPopup(observacion)
diff --git a/src/js/service.js b/src/js/service.js
index c6e00f6..4c0196a 100644
--- a/src/js/service.js
+++ b/src/js/service.js
@@ -5,6 +5,12 @@ angular.module('focaLogisticaPedidoRuta')
         return {
             obtenerActividad: function(parametros) {
                 return $http.post(API_ENDPOINT.URL + '/seguimiento/filtros', parametros);
+            },
+            obtenerVehiculoById: function(idVehiculo) {
+                return $http.get(API_ENDPOINT.URL + '/vehiculo/' + idVehiculo);
+            },
+            obtenerRemitoById: function(idRemito) {
+                return $http.get(API_ENDPOINT.URL + '/remito/obtener/' + idRemito);
             }
         };
     }]);
diff --git a/src/views/foca-detalle-vehiculo.html b/src/views/foca-detalle-vehiculo.html
index 6c4f61f..f2901f7 100644
--- a/src/views/foca-detalle-vehiculo.html
+++ b/src/views/foca-detalle-vehiculo.html
@@ -1,45 +1,47 @@
 <div class="modal-header">
     <h4>Detalle de carga</h4>
-    <h3>-EN DESARROLLO</h3>
+    <!-- TODO: quitar llaves {{}} y usar ng-bind -->
+    <h4>-EN DESARROLLO</h4>
+    Remito Nº
+    <strong ng-bind="remito.numeroRemito"></strong>
+    , Cliente
+    <strong ng-bind="remito.nombreCliente"></strong>
+    , Domicilio
+    <strong ng-bind="remito.domicilioStamp"></strong>
 </div>
 <div class="modal-body">
     <div>
-        <div class="col-12" ng-repeat="articulo in articulos">
+        <div class="col-12" ng-repeat="(key, articulo) in articulos">
             <input
                 type="radio"
                 name="articuloRadio"
                 id="{{articulo.id}}"
+                ng-checked="articulo.checked"
+                ng-disabled="articulo.cargado"
                 ng-click="cambioArticulo(articulo)"
             >
             <span>Articulo: {{articulo.descripcion}},</span>
-            <span>Cantidad Cargada: {{articulo.cantidad}}</span>
-            <span>Cantidad a Cargar: </span>
+            <span>Total: {{articulo.cantidad}},</span>
+            <span>Cantidad Cargada: {{articulo.cantidadCargada || 0}},</span>
+            <span>Pendiente: {{articulo.cantidad - articulo.cantidadCargada}} </span>
         </div>
         <strong class="col-12" ng-bind="vehiculo.tractor"></strong>
         <strong class="col-12">Cisternas:</strong>
-        <div class="form-group row input-group" ng-repeat="cisterna in vehiculo.cisternas">
+        <div class="form-group row input-group" ng-repeat="(key, cisterna) in vehiculo.cisternas">
             <div class="col-1 mt-2">
                 <strong>{{cisterna.codigo}}</strong>
             </div>
             <input
-                class="form-control col-2"
+                class="form-control col-2 mr-3"
                 foca-tipo-input
                 foca-teclado
                 placeholder="A cargar..."
-                ng-model="cisterna.aCargar"
-                ng-disabled="articuloSeleccionado.cantidad > cisterna.disponible"
+                ng-model="aCargar[key]"
+                ng-disabled="(articuloSeleccionado.idArticulo !== cisterna.cisternaCarga.idProducto &&
+                    cisterna.cisternaCarga.idProducto) || !tieneArticulosPendientes()"
+                ng-change="actualizarArticulo()"
             >
-            <div class="input-group-append">
-                <button
-                    class="form-control btn btn-outline-secondary"
-                    ng-disabled="articuloSeleccionado.cantidad > cisterna.disponible">
-                    <i
-                        class="fa fa-save"
-                        ng-click="cargarACisterna(cisterna)"
-                        aria-hidden="true"></i>
-                </button>
-            </div>
-            <div class="progress foca-alto col-8 pl-0 pr-0 mt-1">
+            <div class="progress foca-alto-progress col-4 pl-0 pr-0 mt-1">
                 <strong class="col-12 mt-1 text-center position-absolute"
                 >{{cisterna.cisternaCarga.cantidad || 0}} / {{cisterna.capacidad}}</strong>
                 <div
@@ -51,33 +53,34 @@
                     ng-style="{'width':'{{calcularPorcentaje(cisterna)}}'}">
                 </div>
             </div>
-            <div class="col-1 mt-1">
-                <i class="fa fa-info" data-toggle="tooltip" title="asd"></i>
+            <div class="col-4 mt-2">
+                <strong>{{cisterna.cisternaCarga.articulo.DetArt || 'Sin articulo'}}</strong>
             </div>
+            <!--TODO: descomentar cuando se use-->
+            <!-- <div class="col-1 mt-1">
+                <i class="fa fa-info" uib-tooltip="Información cisterna"></i>
+            </div> -->
+        </div>        
+        <div class="col-12 aling-end">
+            <button
+                class="form-control"
+                type="button"
+                ng-disabled="!articuloSeleccionado || articuloSeleccionado.cantidad -
+                    articuloSeleccionado.cantidadCargada !== 0 || !tieneArticulosPendientes()"
+                ng-click="cargarACisternas(vehiculo)">
+                Cargar cisternas
+            </button>
         </div>
     </div>
 </div>
 <div class="modal-footer py-1">
-    <button class="btn btn-sm btn-secondary" type="button" ng-click="aceptar()">Aceptar</button>
+    <button
+        class="btn btn-sm btn-secondary"
+        type="button"
+        ng-click="cancelar()">Cancelar</button>
+    <button
+        class="btn btn-sm btn-primary"
+        type="button"
+        ng-click="aceptar()"
+        ng-disabled="tieneArticulosPendientes()">Cargar</button>
 </div>
-<style>
-.progress-bar-vertical {
-  width: 20px;
-  min-height: 100px;
-  display: flex;
-  align-items: flex-end;
-  margin-right: 20px;
-  float: left;
-}
-
-.progress-bar-vertical .progress-bar {
-  width: 100%;
-  height: 0;
-  -webkit-transition: height 0.6s ease;
-  -o-transition: height 0.6s ease;
-  transition: height 0.6s ease;
-}
-.foca-alto{
-    height: 2rem;
-}
-</style>
diff --git a/src/views/foca-logistica-pedido-ruta.html b/src/views/foca-logistica-pedido-ruta.html
index 1b70349..af43b96 100644
--- a/src/views/foca-logistica-pedido-ruta.html
+++ b/src/views/foca-logistica-pedido-ruta.html
@@ -1,32 +1,16 @@
-<script>
-    function allowDrop(ev) {
-        ev.preventDefault();
-    }
-    function drag(ev, marcador) {
-        marcador = JSON.stringify(marcador);
-        ev.dataTransfer.setData("marcador", marcador);
-        var dom_el = document.getElementById('test');
-        var scope = angular.element(dom_el).scope();
-        scope.arrastra();
-    }
-    function drop(ev) {
-        ev.preventDefault();
-        var data = ev.dataTransfer.getData("marcador");
-        var dom_el = document.getElementById(ev.target.id);
-        var ng_el = angular.element(dom_el);
-        var ng_el_scope = ng_el.scope();
-        ng_el_scope.cargar(ev.target.id, data);
-        ng_el_scope.$digest();
-    }
-    function dropEnd() {
-        console.log('drop');
-        var dom_el = document.getElementById('test');        
-        var scope = angular.element(dom_el).scope();
-        scope.noArrastra();
-    }
-</script>
 <div class="foca-logistica-pedido-ruta" id="test">
-    <h3>-EN DESARROLLO</h3>
+    <div class="row">
+        <foca-cabecera-facturador 
+        titulo="titulo"
+        fecha="now"
+        class="mb-0 col-lg-12"
+        ></foca-cabecera-facturador>
+    </div>
+    <div class="row px-5 py-2 botonera-secundaria">
+        <div class="col-12">
+            <foca-botonera-facturador botones="botonera" extra="5" class="row"></foca-botonera-facturador>
+        </div>
+    </div>
     <div class="row">
         <div class="offset-1 col-9">
             <foca
@@ -57,7 +41,6 @@
                 ng-class="{'active': idUsuario != 0}"
                 class="btn col-12 my-1" 
                 ng-click="individual()"
-                ng-show="actividad != 'Cobranza'"
             >Individual</button>
             <div class="form-group" ng-show="idUsuario == -1">
                 <input 
@@ -67,32 +50,9 @@
                     ng-model="idUsuarioInput"
                     ng-keypress="search($event.keyCode)"
                     foca-focus="idUsuario == -1"
-                    ng-show="actividad == 'Nota de pedido'"
-                >
-                <input 
-                    type="text"
-                    placeholder="Vehiculo"
-                    class="form-control"
-                    ng-model="idUsuarioInput"
-                    ng-keypress="search($event.keyCode)"
-                    foca-focus="idUsuario == -1"
-                    ng-show="actividad == 'Entrega de producto'"
                 >
             </div>
-            <button 
-                type="button" 
-                class="btn col-12 my-1 boton-salir" 
-                ng-click="salir()"
-            >
-                Salir
-            </button>
         </div>
-        <input
-            class="col-auto form-control"
-            ng-click="seleccionarVehiculo()"
-            placeholder="Seleccionar vehiculo"
-            readonly
-        />
        <div class="row">
             <div
                 class="container col-auto"
@@ -111,6 +71,20 @@
                             <div class="progress-value">{{vehiculo.codigo}}</div>
                         </div>                        
                     </div>
+                    <div class="row">
+                        <div class="text-left col-6">
+                            <i
+                                class="fa fa-info fa-2x"
+                                uib-tooltip="Ver información del vehículo"
+                                ng-click="informacionVehiculo(vehiculo)"></i>
+                        </div>
+                        <div class="text-right col-6">
+                            <i
+                                class="fa fa-trash fa-2x"
+                                uib-tooltip="Eliminar vehiculo"
+                                ng-click="quitarVehiculo(vehiculo)"></i>
+                        </div>
+                    </div>
                     <div
                         class="col-12 border border-dark text-center"
                         ng-show="arrastrando"
@@ -123,165 +97,3 @@
         </div>
     </div>
 </div>
-<style>
-.arrastrando {
-    opacity: 0.5;
-}
-.vertical {
-  display: inline-block;
-  width: 20%;
-  height: 40px;
-  -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
-  transform: rotate(-90deg);
-}
-.progress-circle{
-    width: 150px;
-    height: 150px;
-    line-height: 150px;
-    background: none;
-    margin: 0 auto;
-    box-shadow: none;
-    position: relative;
-}
-.progress-circle:after{
-    content: "";
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    border: 12px solid #fff;
-    position: absolute;
-    top: 0;
-    left: 0;
-}
-.progress-circle > span{
-    width: 50%;
-    height: 100%;
-    overflow: hidden;
-    position: absolute;
-    top: 0;
-    z-index: 1;
-}
-.progress-circle .progress-left{
-    left: 0;
-}
-.progress-circle .progress-bar{
-    width: 100%;
-    height: 100%;
-    background: none;
-    border-width: 12px;
-    border-style: solid;
-    position: absolute;
-    top: 0;
-}
-.progress-circle .progress-left .progress-bar{
-    left: 100%;
-    border-top-right-radius: 80px;
-    border-bottom-right-radius: 80px;
-    border-left: 0;
-    -webkit-transform-origin: center left;
-    transform-origin: center left;
-}
-.progress-circle .progress-right{
-    right: 0;
-}
-.progress-circle .progress-right .progress-bar{
-    left: -100%;
-    border-top-left-radius: 80px;
-    border-bottom-left-radius: 80px;
-    border-right: 0;
-    -webkit-transform-origin: center right;
-    transform-origin: center right;
-    animation: loading-1 1.8s linear forwards;
-}
-.progress-circle .progress-value{
-    width: 90%;
-    height: 90%;
-    border-radius: 50%;
-    background: #44484b;
-    font-size: 24px;
-    color: #fff;
-    line-height: 135px;
-    text-align: center;
-    position: absolute;
-    top: 5%;
-    left: 5%;
-}
-.progress-circle.blue .progress-bar{
-    border-color: #049dff;
-}
-.progress-circle.blue .progress-left .progress-bar{
-    animation: loading-2 1.5s linear forwards 1.8s;
-}
-.progress-circle.yellow .progress-bar{
-    border-color: #fdba04;
-}
-.progress-circle.yellow .progress-left .progress-bar{
-    animation: loading-3 1s linear forwards 1.8s;
-}
-.progress-circle.pink .progress-bar{
-    border-color: #ed687c;
-}
-.progress-circle.pink .progress-left .progress-bar{
-    animation: loading-4 0.4s linear forwards 1.8s;
-}
-.progress-circle.green .progress-bar{
-    border-color: #1abc9c;
-}
-.progress-circle.green .progress-left .progress-bar{
-    animation: loading-5 1.2s linear forwards 1.8s;
-}
-@keyframes loading-1{
-    0%{
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-    100%{
-        -webkit-transform: rotate(180deg);
-        transform: rotate(180deg);
-    }
-}
-@keyframes loading-2{
-    0%{
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-    100%{
-        -webkit-transform: rotate(180deg);
-        transform: rotate(180deg);
-    }
-}
-@keyframes loading-3{
-    0%{
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-    100%{
-        -webkit-transform: rotate(90deg);
-        transform: rotate(90deg);
-    }
-}
-@keyframes loading-4{
-    0%{
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-    100%{
-        -webkit-transform: rotate(36deg);
-        transform: rotate(36deg);
-    }
-}
-@keyframes loading-5{
-    0%{
-        -webkit-transform: rotate(0deg);
-        transform: rotate(0deg);
-    }
-    100%{
-        -webkit-transform: rotate(126deg);
-        transform: rotate(126deg);
-    }
-}
-@media only screen and (max-width: 990px){
-    .progress{ margin-bottom: 20px; }
-}
-
-</style>