diff --git a/src/app/cadastro/cadastro.component.css b/src/app/cadastro/cadastro.component.css
index 10e6dc8..9bdc29f 100644
--- a/src/app/cadastro/cadastro.component.css
+++ b/src/app/cadastro/cadastro.component.css
@@ -104,7 +104,7 @@ hr {
 }
 
 input[type="text"],
-textarea[type="text"],
+textarea,
 input[type="number"] {
     border-radius: 20px;
 }
@@ -220,10 +220,6 @@ span.glyphicon-camera {
     color: #ededed;
 }
 
-.container-extra-padding {
-    
-}
-
 .agm-map-container-inner {
     width: inherit;
     height: inherit;
diff --git a/src/app/cadastro/cadastro.component.html b/src/app/cadastro/cadastro.component.html
index 4d7966b..9154bb6 100644
--- a/src/app/cadastro/cadastro.component.html
+++ b/src/app/cadastro/cadastro.component.html
@@ -548,153 +548,110 @@
 
             <!-- MAP -->
             <div *ngIf="showMap">
-                    <div class="row">
-                        <div class="col-lg-12 map-title-container">
-                            <h4>LOCAL DE TRABALHO</h4>
-                        </div>
+                <div class="row">
+                    <div class="col-lg-12 map-title-container">
+                        <h4>LOCAL DE TRABALHO</h4>
                     </div>
-                    <!-- -----------New Row---------- -->
-                    <div class="row">
-                        <!-- ----------Col 2nd for the form------------------- -->
-                        <div class="col-lg-12 map-container">
-                            <agm-map [latitude]="mapLatitude" 
-                                [longitude]="mapLongitude"
-                                [zoom]="zoom"
-                                [streetViewControl]="false"
-                                [scrollwheel]="false"
-                                (mapClick)="onClickMap($event)"
-                                
-                                style="height: 315px">
+                </div>
+                <!-- -----------New Row---------- -->
+                <div class="row">
+                    <!-- ----------Col 2nd for the form------------------- -->
+                    <div class="col-lg-12 map-container">
+                        <agm-map [latitude]="mapLatitude" 
+                            [longitude]="mapLongitude"
+                            [zoom]="zoom"
+                            [streetViewControl]="false"
+                            [scrollwheel]="false"
+                            (mapClick)="onClickMap($event)"
                             
-                                <agm-marker [latitude]="markLat" 
-                                        [longitude]="markLng" 
-                                        [markerDraggable]="true"
-                                        [iconUrl]=""
-                                        (dragEnd)="onMoveMark($event)"></agm-marker>
-    
-                            </agm-map>
-                            <!-- -----------End of 2nd col------- -->
-                        </div>
+                            style="height: 315px">
+                        
+                            <agm-marker [latitude]="markLat" 
+                                    [longitude]="markLng" 
+                                    [markerDraggable]="true"
+                                    [iconUrl]=""
+                                    (dragEnd)="onMoveMark($event)"></agm-marker>
+
+                        </agm-map>
+                        <!-- -----------End of 2nd col------- -->
+                    </div>
 
-                        <!-- ----------Col 1nd for the form------------------- -->
-                        <div class="col-lg-12">
-                            <!-- --------1st row of the colm--------- -->
-                            <div>
-                                <div style="width: 28%; float: left; margin-right: 2%;">
-                                        <div class="form-group">
-                                            <!-- <input type="text" 
-                                                    class="form-control" 
-                                                    name="state"
-                                                    placeholder="Estado" 
-                                                    [(ngModel)]="catador.state"
-                                                    (focusout)="addressFocusOut()"
-                                                    maxlength="128"> -->
-
-                                            <select class="form-control" 
-                                                    id="state"
-                                                    name="state"
-                                                    [(ngModel)]="catador.state">
-                                            </select>
-                                        </div> 
-                                    </div>    
-                                <div style="width: 28%; float: left; margin-right: 2%;">
-                                        <div class="form-group">
-                                            <!-- <input type="text" 
-                                                    class="form-control" 
-                                                    placeholder="Cidade" 
-                                                    id="city" 
-                                                    name="city"
-                                                    [(ngModel)]="catador.city"
-                                                    required
-                                                    (focusout)="addressFocusOut()"
-                                                    maxlength="64"> -->
-                                            <select class="form-control" 
-                                                    id="city" 
-                                                    name="city"
-                                                    [(ngModel)]="catador.city"
-                                                    (change)="addressFocusOut()">
-                                            </select>
-                                        </div>
-                                    </div>
-                                <div style="width: 40%; float: left">
-                                    <div class="form-group">
-                                        <input type="text" 
-                                                class="form-control" 
-                                                placeholder="Bairro" 
-                                                id="address_region" 
-                                                name="address_region"
-                                                [(ngModel)]="catador.address_region"
-                                                (focusout)="addressFocusOut()"
-                                                maxlength="128">
-                                    </div>
+                    <!-- ----------Col 1nd for the form------------------- -->
+                    <div class="col-lg-12">
+                        <!-- --------1st row of the colm--------- -->
+                        <div>
+                            <div style="width: 28%; float: left; margin-right: 2%;">
+                                <div class="form-group">
+                                    <select class="form-control" 
+                                            id="state"
+                                            name="state"
+                                            [(ngModel)]="catador.state">
+                                    </select>
+                                </div> 
+                            </div>    
+                            <div style="width: 28%; float: left; margin-right: 2%;">
+                                <div class="form-group">
+                                    <select class="form-control" 
+                                            id="city" 
+                                            name="city"
+                                            [(ngModel)]="catador.city">
+                                    </select>
                                 </div>
                             </div>
-                                                    
-                            <!-- <div class="row">
-                                <div class="col-md-12">
-                                    <div class="form-group">
-                                        <select class="form-control" 
-                                                id="state"
-                                                name="state"
-                                                [(ngModel)]="catador.state">
-                                        </select>
-                                    </div>
+                            <div style="width: 40%; float: left">
+                                <div class="form-group">
+                                    <input type="text" 
+                                            class="form-control" 
+                                            placeholder="Bairro" 
+                                            id="address_region" 
+                                            name="address_region"
+                                            [(ngModel)]="catador.address_region"
+                                            (focusout)="addressFocusOut()"
+                                            maxlength="128">
                                 </div>
                             </div>
-                            <div class="row">
-                                <div class="col-md-12">
-                                    <div class="form-group">
-                                        <select class="form-control" 
-                                                id="city" 
-                                                name="city"
-                                                [(ngModel)]="catador.city">
-                                        </select>
-                                    </div>
+                        </div>
+                        <!-- --------2th row of the colm--------- -->                        
+                        <div>
+                            <div class="input-col-left">
+                                <div class="form-group">
+                                    <input type="text" 
+                                            class="form-control" 
+                                            placeholder="Rua" 
+                                            required
+                                            id="address_base" 
+                                            name="address_base"
+                                            [(ngModel)]="catador.address_base"
+                                            (focusout)="addressFocusOut()"
+                                            maxlength="500">
                                 </div>
-                            </div> -->
-
-                            <div class="row">
-                                <div class="col-md-12 ">
-                                    <div class="input-col-left">
-                                        <div class="form-group">
-                                            <input type="text" 
-                                                    class="form-control" 
-                                                    placeholder="Rua" 
-                                                    required
-                                                    id="address_base" 
-                                                    name="address_base"
-                                                    [(ngModel)]="catador.address_base"
-                                                    (focusout)="addressFocusOut()"
-                                                    maxlength="500">
-                                        </div>
-                                    </div>
-                                    <div class="input-col-right">                                  
-                                        <div class="form-group">
-                                            <input type="number" 
-                                                    class="form-control" 
-                                                    placeholder="nº"
-                                                    id="number" 
-                                                    name="number"
-                                                    [(ngModel)]="catador.number">
-                                        </div>
-                                    </div>
+                            </div>
+                            <div class="input-col-right">                                  
+                                <div class="form-group">
+                                    <input type="number" 
+                                            class="form-control" 
+                                            placeholder="nº"
+                                            id="number" 
+                                            name="number"
+                                            [(ngModel)]="catador.number">
                                 </div>
                             </div>
                         </div>
-                        <!-- --------------End of row-------------- -->
+                        <!-- -----------End of 1stcol------- -->
+                    </div>
+                    <!-- --------------End of row-------------- -->
+                </div>
+                <div class="row buttons-wrapper">
+                    <div class="col-md-6 col-xs-6 col-sm-6">
+                        <button type="button" (click)="toggleMap()" value="CANCELA" id="name-group" class="cancel-button btn-danger btn">CANCELAR</button>
                     </div>
-                    <div class="row buttons-wrapper">
-                        <div class="col-md-6 col-xs-6 col-sm-6">
-                            <button type="button" (click)="toggleMap()" value="CANCELA" id="name-group" class="cancel-button btn-danger btn">CANCELAR</button>
-                        </div>
 
-                        <div class="col-md-6 col-xs-6 col-sm-6">
-                            <button type="submit" id="name-group" class="primary-button btn btn-success" value="CONFIRMA">CONFIRMAR</button>
-                        </div>
+                    <div class="col-md-6 col-xs-6 col-sm-6">
+                        <button type="submit" id="name-group" class="primary-button btn btn-success" value="CONFIRMA">CONFIRMAR</button>
                     </div>
                 </div>
-                <!-- #EOF MAP -->
-
+            </div>
+            <!-- #EOF MAP -->
         </form>
     </div>
 
diff --git a/src/app/cooperativa/cooperativa.component.css b/src/app/cooperativa/cooperativa.component.css
index c90d8fc..1d2aa09 100644
--- a/src/app/cooperativa/cooperativa.component.css
+++ b/src/app/cooperativa/cooperativa.component.css
@@ -1,3 +1,160 @@
+#preview {
+    max-height: 148px;
+}
+
+.gallery-photo {
+    width: 100px;
+    height: 100px;
+}
+
+/*#### copy from sign form ###*/
+button[type="button"] {
+    border-color: white;
+    height: 40px;
+    font-size: 18px;
+}
+/* https://stackoverflow.com/questions/11235206/twitter-bootstrap-form-file-element-upload-button */
+[hidden] {
+    display: none !important;
+  }
+
+  input[type=number]::-webkit-inner-spin-button, 
+  input[type=number]::-webkit-outer-spin-button { 
+    -webkit-appearance: none; 
+    margin: 0; 
+  }  
+
+hr {
+    margin-bottom: 20px;
+    margin-top: 15px;
+}  
+
+label {
+    font-size: 18px;
+}
+
+label.button-upload {
+    font-size: 14px;
+}
+
+label.label-left-margin {
+    margin-left: 15px;
+}
+
+label.button-upload span {
+    float: left;
+    margin-right: 15px;
+    margin-top: 5px;
+    color: #b4b4b4;
+}
+
+label.button-upload strong {
+    background-color: #b4b4b4;
+    color: white;
+    display: block;
+    padding: 10px 14px;
+    border-radius: 25px;
+    float: left;
+    font-size: 18px;
+    min-width: 250px;
+    text-align: center;
+    line-height: 27px;
+}
+
+.container {
+    max-width: 900px;
+}
+
+.container-extra-padding {
+    padding: 10px 15px 10px 15px;
+}
+
+.row-bottom-margin {
+    margin-bottom: 20px;
+}
+
+.primary-button {
+    outline: black;
+    height: 40px;
+    width: 100%;
+    font-size: 18px;
+    border-radius: 20px;
+}
+
+.cancel-button {
+    outline: black;
+    height: 40px;
+    width: 100%;
+    font-size: 18px;
+    border-radius: 20px;
+}
+
+.add-button {
+    height: 40px;
+    width: 100%;
+    font-size: 18px;
+    border-radius: 20px;
+}
+
+.close {
+    font-size: 40px !important;
+}
+
+.btn.newbtn2.my-btn2 {
+    border: 1px solid black;
+    height: 40px;
+    width: 100%;
+    color: #fff;
+    font-size: 16px;
+    line-height: 30px;
+    background: white;
+    color: black;
+    cursor: pointer;
+    border-radius: 20px;
+    margin: 15px 0 0 0;
+}
+
+hr {
+    border-color: #5cb85c;
+    border-width: 3px;
+    border-radius: 20px;
+}
+
+input[type="text"],
+textarea,
+input[type="number"] {
+    border-radius: 20px;
+}
+
+span.glyphicon-camera {
+    font-size: 2.6em;
+    color: grey;
+}
+
+.sign-form-header-image {
+    background-image: url("/assets/img/cadastro/image1.png");
+    background-size: 80%;
+    height: 300px;
+    background-position: bottom center;
+    background-repeat: no-repeat;
+}
+
+#left-arrow {
+    display: inline-block;
+    position: relative;
+    background: lightgrey;
+    width: 92%;
+    border-radius: 8px;
+}
+
+
+
+#style {
+    margin-left: -15px;
+    width: 255%;
+    margin-top: -2px;
+}
+
 .img-material {
     opacity: 0.4;
     filter: alpha(opacity=50);
@@ -10,19 +167,218 @@
     border-radius: 50%; **/
 }
 
-agm-map {
-    height: 500px;
-}
-
 #preview {
     max-height: 148px;
 }
 
-.gallery-photo {
-    width: 100px;
-    height: 100px;
+.map-container {
+    margin: 0 0 30px 0;
+}
+
+.map-title-container {
+    padding-top: 20px;
+}
+
+.buttons-wrapper {
+    padding: 0px 0 20px 0;
+}
+
+.input-col-left {
+    width: 69%;
+    float: left;
+    margin-right: 2%
+}
+
+.input-col-right {
+    width: 29%;
+    float: left;
+}
+
+.who-is-registering-wrapper {
+    background-color: #ededed;
+    padding: 25px 10px 10px 10px;
+    margin-top: 10px;
+    border-radius: 10px;
+}
+
+.arrow-up {
+    width: 0; 
+    height: 0; 
+    border-left: 15px solid transparent;
+    border-right: 15px solid transparent;
+    border-bottom: 15px solid #ededed;
+}
+
+.arrow-left {
+    width: 0; 
+    height: 0; 
+    border-top: 15px solid transparent;
+    border-bottom: 15px solid transparent; 
+    border-right:15px solid #ededed;
+  }
+
+.arrow-up-styles {
+    position: absolute;
+    margin-top: -40px;
+    left: 30%;
+}
+
+.arrow-left-styles {
+    position: absolute;
+    margin-left: -40px;
+    left: 40px;
+}
+
+.sign-title {
+    color: black;
+}
+
+.text-grey {
+    color: #ededed;
+}
+
+
+.agm-map-container-inner {
+    width: inherit;
+    height: inherit;
+    padding: 0;
+}
+
+.agm-map-content {
+
+}
+
+.form-control {
+    border: 2px solid #ccc;
+    font-size: 18px;
+    min-height: 45px;
+    line-height: 31px;
+}
+
+
+/* remove default form validation style */
+.ng-invalid:not(form), .ng-valid[required], .ng-valid.required {
+    border-left: 2px solid #ccc;
+}
+
+/* media queries */
+
+@media only screen and (min-width: 320px) and (max-width: 640px) {
+    .map-title-container {
+        padding-top: 10px;
+    }
+    .sign-form-header-image {
+        background-image: url("/assets/img/cadastro/image1.png");
+        background-size: 100%;
+        height: 100px;
+        background-position: bottom center;
+    }
+    
+    .arrow-up-styles {
+        left: 60%;
+    }
+
+    #left-arrow {
+        margin-top: 2%;
+        display: inline-block;
+        position: relative;
+        background: lightgrey;
+        width: 90%;
+        margin-left: 5%;
+        color: lightgrey;
+        text-decoration: none;
+        padding: 20px;
+    }
+    #left-arrow:after {
+        content: '';
+        display: block;
+        position: absolute;
+        right: 40px;
+        top: 0%;
+        width: 0;
+        height: 0;
+        border-bottom: 30px solid lightgrey;
+        border-top: 15px solid transparent;
+        border-left: 15px solid transparent;
+        border-right: 15px solid transparent;
+    }
+}
+
+@media only screen and (min-width: 412px) and (max-width: 732px) {
+
+    .map-title-container {
+        padding-top: 0px;
+    }
+
+    #style {
+        margin-left: -45px;
+        width: 330%;
+        margin-top: -2px;
+    }
+    #left-arrow {
+        margin-top: 2%;
+        /* width: ; */
+        display: inline-block;
+        position: relative;
+        background: lightgrey;
+        color: lightgrey;
+        text-decoration: none;
+        padding: 20px;
+    }
+    #left-arrow:after {
+        content: '';
+        display: block;
+        position: absolute;
+        right: 40px;
+        top: 0%;
+        width: 0;
+        height: 0;
+        border-bottom: 30px solid lightgrey;
+        border-top: 15px solid transparent;
+        border-left: 15px solid transparent;
+        border-right: 15px solid transparent;
+    }
+}
+
+@media only screen and (max-width: 1024px) and (min-width: 768px) {
+
+    .map-title-container {
+        padding-top: 0px;
+    }
+
+    .sign-form-header-image {
+        background-image: url("/assets/img/cadastro/image1.png");
+        background-size: 100%;
+        height: 200px;
+        background-position: bottom center;
+    }
+
+    #style {
+        margin-left: -45px;
+        width: 255%;
+        margin-top: -2px;
+    }
+    #left-arrow {
+        margin-top: 2%;
+        display: inline-block;
+        position: relative;
+        background: lightgrey;
+        color: lightgrey;
+        text-decoration: none;
+        padding: 20px;
+    }
+    #left-arrow:after {
+        content: '';
+        display: block;
+        position: absolute;
+        right: 80px;
+        top: 0%;
+        width: 0;
+        height: 0;
+        border-bottom: 30px solid lightgrey;
+        border-top: 15px solid transparent;
+        border-left: 15px solid transparent;
+        border-right: 15px solid transparent;
+    }
 }
 
-.bootstrap-filestyle input {
-    display: none;
-}
\ No newline at end of file
diff --git a/src/app/cooperativa/cooperativa.component.html b/src/app/cooperativa/cooperativa.component.html
index e9121ea..6206c29 100644
--- a/src/app/cooperativa/cooperativa.component.html
+++ b/src/app/cooperativa/cooperativa.component.html
@@ -1,420 +1,616 @@
-<div class="container-fluid container_style">
+<header class="sign-form-header-image" *ngIf="!showMap"></header>
 
-    <div class="container" [hidden]="!loading">
-        <div class="loading-box">
-            <div class="loading">Loading&#8230;</div>
-            <p class="loading-message">{{ loadingMessage }}</p>
-        </div>
+<div class="container container-extra-padding" [hidden]="!loading">
+    <div class="loading-box">
+        <div class="loading">Loading&#8230;</div>
+        <p class="loading-message">{{ loadingMessage }}</p>
     </div>
+</div>
+
+<div class="container container-extra-padding">
 
-    <div class="container">
-        <h1>Cadastro de Cooperativas</h1>
-        <hr>
+    <div class="row" *ngIf="!showMap">
+        <div class="col-md-6 col-lg-6">
+            <label> Com este formulário você irá cadastrar uma nova cooperativa no nosso aplicativo. Preencha tudo com muito carinho e atenção, este perfil será o cartão de visita da cooperativa :)</label>
+        </div>  
 
-        <form (ngSubmit)="save()" #catadorForm="ngForm" enctype="multipart/form-data">
+        <div class="col-md-6 col-lg-6" align="">
+            <a class="btn newbtn2 my-btn2" data-toggle="modal" data-target="#myModal" data-backdrop="true">
+                +DICAS PARA CADASTRO
+            </a>
+        </div>
+    </div>
 
+    <hr *ngIf="!showMap">
+    <form (ngSubmit)="save()" #catadorForm="ngForm" enctype="multipart/form-data">
+        <!-- FIRST STEP -->
+        <div *ngIf="!showMap">
             <div class="row">
-                <div class="col-md-6">
+                <div class="col-md-12">
                     <div class="form-group">
-                        <label for="name">Nome</label>
                         <input type="text" class="form-control" id="name" name="name" placeholder="Nome da cooperativa" [(ngModel)]="cooperativa.name"
                             maxlength="60" required>
                     </div>
 
                     <div class="form-group">
-                        <label for="email">E-mail</label>
-                        <input type="text" class="form-control" id="email" name="email" placeholder="E-mail" [(ngModel)]="cooperativa.email" maxlength="100"
-                            required>
+                        <input type="text" id="datepicker" class="form-control" name="founded_in" placeholder="Data de fundação" [textMask]="{mask: masks.date}" [(ngModel)]="cooperativa.founded_in">
                     </div>
 
                     <div class="form-group">
-                        <label for="phrase">Frase/Slogan</label>
-                        <input type="text" class="form-control" id="phrase" name="phrase" required maxlength="200" [(ngModel)]="cooperativa.phrase">
+                        <input type="text" class="form-control" id="email" name="email" placeholder="E-mail" [(ngModel)]="cooperativa.email" maxlength="100"
+                            required>
                     </div>
-                </div>
 
-                <div class="col-md-6 text-center">
-                    <div class="col-md-12">
-                        <img src="" id="preview" />
+                    <div class="form-group">
+                        <div class="form-group">
+                            <input type="number" class="form-control" id="how_many_cooperators" name="how_many_cooperators" placeholder="Número de cooperados"
+                                [(ngModel)]="cooperativa.how_many_cooperators" required>
+                        </div>
                     </div>
-                    <div class="col-md-12">
-                        <label>Adicionar Logo:</label>
-                        <input type='file' class="filestyle col-md-12" data-input="false" (change)="readLogoURL($event);" />
+    
+                    <div class="form-group">
+                        <textarea class="form-control" id="history" rows="5" name="history" maxlength="600" placeholder="História da cooperativa" required [(ngModel)]="cooperativa.history"></textarea>
                     </div>
-                </div>
-            </div>
 
-            <div class="row">
-                <div class="form-group col-md-6">
                     <div class="form-group">
-                        <label for="how_many_cooperators">Total de colaboradores</label>
-                        <input type="number" class="form-control" id="how_many_cooperators" name="how_many_cooperators" placeholder="Informe a quantidade de colaboradores"
-                            [(ngModel)]="cooperativa.how_many_cooperators" required>
+                        <input type="text" class="form-control" id="phrase" name="phrase" placeholder="Frase marcante" required maxlength="200" [(ngModel)]="cooperativa.phrase">
                     </div>
-                </div>
 
-                <div class="form-group col-md-12">
-                    <label for="founded_in">Data de fundação</label>
-                    <input type="text" id="datepicker" class="form-control" name="founded_in" [textMask]="{mask: masks.date}" [(ngModel)]="cooperativa.founded_in">
-                </div>
-            </div>
-
-            <div class="row">
-                <div class="form-group col-md-12">
-                    <label for="minibio">História da cooperativa</label>
-                    <textarea class="form-control" id="history" rows="5" name="history" maxlength="600" required [(ngModel)]="cooperativa.history"></textarea>
-                </div>
-            </div>
-
-            <div class="row">
-                <hr>
-                <div class="form-group col-md-6">
-                    <label for="phones0">Telefone</label>
-                    <input type="text" class="form-control" id="phones0" name="phones0" [textMask]="{mask: masks.number}" [(ngModel)]="cooperativa.phones[0].phone"
-                        required>
-                </div>
-
-                <div class="form-group col-md-6">
-                    <label for="whatsapp0">Esta linha tem WhatsApp?</label>
-                    <select class="form-control" id="whatsapp0" name="whatsapp0" [(ngModel)]="cooperativa.phones[0].whatsapp">
-                        <option value="1">Sim</option>
-                        <option value="0">Não</option>
-                    </select>
-                </div>
-
-                <div class="form-group col-md-12">
-                    <label>Operadora: </label>
-                    <br>
-                    <div class="radio-inline">
-                        <label>
-                            <input type="radio" name="mno0" [value]="'V'" [(ngModel)]="cooperativa.phones[0].mno"> Vivo
-                        </label>
-                    </div>
-                    <div class="radio-inline">
-                        <label>
-                            <input type="radio" name="mno0" [value]="'T'" [(ngModel)]="cooperativa.phones[0].mno"> Tim
-                        </label>
-                    </div>
-                    <div class="radio-inline">
-                        <label>
-                            <input type="radio" name="mno0" [value]="'C'" [(ngModel)]="cooperativa.phones[0].mno"> Claro
-                        </label>
-                    </div>
-                    <div class="radio-inline">
-                        <label>
-                            <input type="radio" name="mno0" [value]="'R'" [(ngModel)]="cooperativa.phones[0].mno"> Oi
-                        </label>
-                    </div>
-                    <div class="radio-inline">
-                        <label>
-                            <input type="radio" name="mno0" [value]="'N'" [(ngModel)]="cooperativa.phones[0].mno"> Nextel
-                        </label>
-                    </div>
-                    <div class="radio-inline">
-                        <label>
-                            <input type="radio" name="mno0" [value]="'P'" [(ngModel)]="cooperativa.phones[0].mno"> Porto
-                        </label>
+                    <div class="form-group">
+                        <input type="text" class="form-control" id="phones0" name="phones0" [textMask]="{mask: masks.number}" placeholder="Telefone Principal" [(ngModel)]="cooperativa.phones[0].phone"
+                            required>
                     </div>
-                </div>
-            </div>
 
-            <div class="row">
-                <hr>
-                <div class="form-group col-md-6">
-                    <label for="phones1">Telefone 2</label>
-                    <input type="text" class="form-control" id="phones1" [textMask]="{mask: masks.number}" name="phones1" [(ngModel)]="cooperativa.phones[1].phone">
-                </div>
-
-                <div class="form-group col-md-6">
-                    <label for="whatsapp1">Esta linha tem WhatsApp?</label>
-                    <select class="form-control" id="whatsapp1" name="whatsapp1" [(ngModel)]="cooperativa.phones[1].whatsapp">
-                        <option value="1">Sim</option>
-                        <option value="0">Não</option>
-                    </select>
-                </div>
-
-                <div class="form-group col-md-12">
-                    <label>Operadora: </label>
-                    <br>
-                    <div class="radio-inline">
-                        <label>
-                            <input type="radio" name="mno1" [value]="'V'" [(ngModel)]="cooperativa.phones[1].mno"> Vivo
-                        </label>
-                    </div>
-                    <div class="radio-inline">
-                        <label>
-                            <input type="radio" name="mno1" [value]="'T'" [(ngModel)]="cooperativa.phones[1].mno"> Tim
-                        </label>
-                    </div>
-                    <div class="radio-inline">
-                        <label>
-                            <input type="radio" name="mno1" [value]="'C'" [(ngModel)]="cooperativa.phones[1].mno"> Claro
-                        </label>
-                    </div>
-                    <div class="radio-inline">
-                        <label>
-                            <input type="radio" name="mno1" [value]="'O'" [(ngModel)]="cooperativa.phones[1].mno"> Oi
+                    <div class="form-group">
+                        <label class="label-left-margin">Este n&uacute;mero tem Whatsapp?</label><br />
+                        <label class="radio-inline label-left-margin" style="color: #a0a0a0;">
+                            <input type="radio" 
+                                required 
+                                name="whatsapp0-s"
+                                [value]="1"
+                                [(ngModel)]="cooperativa.phones[0].whatsapp">
+                                Sim
                         </label>
+                        <label class="radio-inline" style="margin-left:17%; color: #a0a0a0;">
+                            <input type="radio" 
+                                required 
+                                name="whatsapp0-n"
+                                [value]="0"
+                                [(ngModel)]="cooperativa.phones[0].whatsapp"
+                                ng-model="userfullName6">N&atilde;o
+                            </label>
                     </div>
-                    <div class="radio-inline">
-                        <label>
-                            <input type="radio" name="mno1" [value]="'N'" [(ngModel)]="cooperativa.phones[1].mno"> Nextel
-                        </label>
+
+                    <div class="form-group">
+                        <input type="text" class="form-control" id="phones1" placeholder="Telefone para garantir" [textMask]="{mask: masks.number}" name="phones1" [(ngModel)]="cooperativa.phones[1].phone">
                     </div>
-                    <div class="radio-inline">
-                        <label>
-                            <input type="radio" name="mno1" [value]="'P'" [(ngModel)]="cooperativa.phones[1].mno"> Porto
+
+                    <div class="form-group">
+                        <label class="label-left-margin">Este n&uacute;mero tem Whatsapp?</label><br />
+                        <label class="radio-inline label-left-margin" style="color: #a0a0a0;">
+                            <input type="radio" 
+                                required 
+                                name="whatsapp1-s"
+                                [value]="1"
+                                [(ngModel)]="cooperativa.phones[1].whatsapp">
+                                Sim
                         </label>
+                        <label class="radio-inline" style="margin-left:17%; color: #a0a0a0;">
+                            <input type="radio" 
+                                required 
+                                name="whatsapp1-n"
+                                [value]="0"
+                                [(ngModel)]="cooperativa.phones[1].whatsapp"
+                                ng-model="userfullName6">N&atilde;o
+                            </label>
                     </div>
                 </div>
             </div>
             <hr>
-
             <div class="row">
-                <div class="col-md-12">
-                    <label>Aponte um local de referência, central para o trabalho do catador/a</label>
-                </div>
-                <div class="col-md-12">
-                    <agm-map [latitude]="mapLatitude" [longitude]="mapLongitude" [zoom]="zoom" (mapClick)="onClickMap($event)">
-
-                        <agm-marker [latitude]="markLat" [longitude]="markLng" [markerDraggable]="true" (dragEnd)="onMoveMark($event)"></agm-marker>
-
-                    </agm-map>
+                <div class="col-lg-12">
+                    <img src="" id="preview" />
                 </div>
             </div>
-
-            <br>
-
             <div class="row">
-                <div class="form-group col-md-4">
-                    <label for="address_base">Rua</label>
-                    <input type="text" class="form-control" id="address_base" name="address_base" [(ngModel)]="cooperativa.address_base" (focusout)="addressFocusOut()"
-                        maxlength="400" required>
-                </div>
+                <div class="col-lg-12">
+                    <div class="" style="margin-bottom: 4px;">
+                        <label>Adicionar foto principal</label><br />
+                        <label class="button-upload">
+                            <span class="glyphicon glyphicon-camera" aria-hidden="true"></span>
+                            <strong>Selecionar foto</strong>
+                        <input type='file' 
+                                id="img-file" 
+                                data-buttonBefore="true"
+                                data-placeholder="…"
+                                data-buttonText="Adicionar foto"
+                                data-iconName="glyphicon glyphicon-camera"
+                                required 
+                                class="filestyle"
+                                placeholder="Adicionar foto"
+                                (change)="readLogoURL($event);"
+                                hidden />
+                        </label>
+                    </div>
 
-                <div class="form-group col-md-4">
-                    <label for="number">Número</label>
-                    <input type="text" class="form-control" id="number" name="number" [(ngModel)]="cooperativa.number" required>
-                </div>
+                    <div class="" style="margin-bottom: 4px;">
+                        <label>Adicionar fotos da galeria</label><br />
+                        <label class="button-upload">
+                            <span class="glyphicon glyphicon-camera" aria-hidden="true"></span>
+                            <strong>Selecionar foto</strong>
+                        <input type='file' 
+                                id="img-file" 
+                                data-buttonBefore="true"
+                                data-placeholder="…"
+                                data-buttonText="Adicionar foto"
+                                data-iconName="glyphicon glyphicon-camera"
+                                required 
+                                class="filestyle"
+                                placeholder="Adicionar foto"
+                                (change)="readGalleryURL($event);"
+                                multiple
+                                hidden />
+                        </label>
+                    </div>
 
-                <div class="form-group col-md-4">
-                    <label for="address_base">Bairro</label>
-                    <input type="text" class="form-control" id="address_region" name="address_region" [(ngModel)]="cooperativa.address_region"
-                        (focusout)="addressFocusOut()" maxlength="128" required>
                 </div>
-
-                <div class="form-group col-md-4">
-                    <label for="city">Cidade</label>
-                    <input type="text" class="form-control" id="city" name="city" [(ngModel)]="cooperativa.city" (focusout)="addressFocusOut()"
-                        maxlength="64" required>
+            </div>          
+            <div class="row">
+                <div class="col-sm-4 col-md-2" *ngFor="let photo of cooperativa.photos" [hidden]="photo.delete && photo.delete == 1">
+                    <div class="thumbnail">
+                        <img [src]="getGallerySrc(photo)" class="img-responsive">
+                        <div class="caption">
+                            <p>
+                                <a (click)="removeImageOnGallery(photo)" class="btn btn-danger" role="button">Delete</a>
+                            </p>
+                        </div>
+                    </div>
                 </div>
+            </div>                
+            
+            <hr />
+            <!-- PARCEIROS -->
+            <div class="row">
+                <div class="col-md-12">
+                    <h2>Galeria de parceiros</h2>
+                    <div class="" style="margin-bottom: 4px;">
+                        <label>Logo</label><br />
+                        <label class="button-upload">
+                            <span class="glyphicon glyphicon-camera" aria-hidden="true"></span>
+                            <strong>Selecionar imagem</strong>
+                        <input type='file' 
+                        id="parceiro-image-input"
+                                data-buttonBefore="true"
+                                data-placeholder="…"
+                                data-buttonText="Adicionar foto"
+                                data-iconName="glyphicon glyphicon-camera"
+                                required 
+                                class="filestyle"
+                                (change)="readPartnerURL($event);"
+                                hidden />
+                        </label>
+                    </div>
 
-                <div class="form-group col-md-4">
-                    <label for="state">Estado</label>
-                    <input type="text" class="form-control" id="state" name="state" [(ngModel)]="cooperativa.state" (focusout)="addressFocusOut()"
-                        maxlength="128" required>
+                    <div class="form-group">
+                        <input type="text" class="form-control" id="parceiro-name" placeholder="Nome do parceiro" name="parceiro-name" [(ngModel)]="parceiro.name"
+                            maxlength="60">
+                    </div>
+                    <p>
+                        <a (click)="addPartner(parceiro)" class="add-button btn-info btn" role="button">+ PARCEIRO</a>
+                    </p>
                 </div>
-
-                <div class="form-group col-md-4">
-                    <label for="country">País</label>
-                    <input type="text" class="form-control" id="country" name="country" (focusout)="addressFocusOut()" [(ngModel)]="cooperativa.country"
-                        maxlength="64" required>
+            </div>  
+            <div class="row">                
+                <div class="col-sm-4 col-md-2" *ngFor="let partner of cooperativa.partners; let i = index" [hidden]="partner.delete && partner.delete == 1">
+                    <div class="thumbnail">
+                        <img [src]="getPartnerSrc(partner)" class="img-responsive">
+                        <div class="caption">
+                            <h3>Parceiro {{i + 1}}</h3>
+                            <h4>{{ partner.name }}</h4>                              
+                            <p>
+                                <a (click)="removePartner(partner)" class="btn btn-danger" role="button">Delete</a>
+                            </p>
+                        </div>
+                    </div>
                 </div>
             </div>
-
+            <!-- /PARCEIROS -->
+            <hr />
             <!-- MATERIAIS -->
-
             <div class="row">
-                <div class="col-md-12">
-                    <label>Selecione os materiais em que você trabalha:</label>
-                </div>
-
-                <div class="col-md-2 col-sm-2 col-xs-4 text-center">
-                    <img src="assets/img/materiais/Icones_materiais-misturado.png" alt="Misturado" class="img-responsive img-material" (click)="selectMaterial('misturado')"
-                        [ngClass]="{'img-selected': materialSelected.indexOf('misturado') > -1 }" />
-                    <input name="material[]" type="checkbox" value="'misturado'" [checked]="materialSelected.indexOf('misturado') > -1" (click)="selectMaterial('misturado')"
-                    /> Misturado
-                </div>
+                <!-- ----------Col for the form------------------- -->
+                <div class="col-md-6">
+                    <!-- --------1st row of the colm--------- -->
+                    <div class="row row-bottom-margin">
+                        <div class="col-md-4  col-sm-4  col-xs-4">
+                            <p>
+                                <img src="assets/img/cadastro/icon 1.png" 
+                                        class="img-responsive img-material"
+                                        (click)="selectMaterial('misturado')"
+                                        [ngClass]="{'img-selected': materialSelected.indexOf('misturado') > -1 }" >
+                            </p>
+                            <label class="radio-inline" style="padding-left:20%; color: #a0a0a0;">
+                                <input type="radio" 
+                                        class="inline" 
+                                        value="'misturado'" 
+                                        [checked]="materialSelected.indexOf('misturado') > -1" 
+                                        (click)="selectMaterial('misturado')" >
+                                    Misturado
+                            </label>
+                        </div>
 
-                <div class="col-md-2 col-sm-2 col-xs-4 text-center">
-                    <img src="assets/img/materiais/Icones_materiais-lata.png" alt="Lata" class="img-responsive img-material" (click)="selectMaterial('lata')"
-                        [ngClass]="{'img-selected': materialSelected.indexOf('lata') > -1 }" />
-                    <input name="material[]" type="checkbox" value="'lata'" [checked]="materialSelected.indexOf('lata') > -1" (click)="selectMaterial('lata')"
-                    /> Lata
-                </div>
+                        <!-- ----------2nd colm------------- -->
+                        <div class="col-md-4  col-sm-4 col-xs-4">
+                            <p>
+                                <img src="assets/img/cadastro/icon2.png" 
+                                        class="img-responsive img-material"
+                                        (click)="selectMaterial('lata')"
+                                        [ngClass]="{'img-selected': materialSelected.indexOf('lata') > -1 }">
+                            </p>
+                            <label class="radio-inline" style="padding-left:20%; color: #a0a0a0;">
+                                <input type="radio" 
+                                        class="inline" 
+                                        value="'lata'" 
+                                        [checked]="materialSelected.indexOf('lata') > -1" 
+                                        (click)="selectMaterial('lata')">Lata</label>
+                        </div>
 
-                <div class="col-md-2 col-sm-2 col-xs-4 text-center">
-                    <img src="assets/img/materiais/Icones_materiais-vidro.png" alt="Vidro" class="img-responsive img-material" (click)="selectMaterial('vidro')"
-                        [ngClass]="{'img-selected': materialSelected.indexOf('vidro') > -1 }" />
-                    <input name="material[]" type="checkbox" value="'vidro'" [checked]="materialSelected.indexOf('vidro') > -1" (click)="selectMaterial('vidro')"
-                    /> Vidro
-                </div>
+                        <!-- -----------3rd colm-------------------- -->
+                        <div class="col-md-4  col-sm-4 col-xs-4">
+                            <p>
+                                <img src="assets/img/cadastro/icon3.png" 
+                                        class="img-responsive img-material"
+                                        (click)="selectMaterial('vidro')"
+                                        [ngClass]="{'img-selected': materialSelected.indexOf('vidro') > -1 }">
+                            </p>
+                            <label class="radio-inline" style="padding-left:28%; color: #a0a0a0;">
+                                <input type="radio" 
+                                        class="inline" 
+                                        value="'vidro'" 
+                                        [checked]="materialSelected.indexOf('vidro') > -1" 
+                                        (click)="selectMaterial('vidro')" >
+                                    Vidro
+                            </label>
+                        </div>
+                    </div>
 
-                <div class="col-md-2 col-sm-2 col-xs-4 text-center">
-                    <img src="assets/img/materiais/Icones_materiais-papel.png" alt="papel" class="img-responsive img-material" (click)="selectMaterial('papel')"
-                        [ngClass]="{'img-selected': materialSelected.indexOf('papel') > -1 }" />
-                    <input name="material[]" type="checkbox" value="'papel'" [checked]="materialSelected.indexOf('papel') > -1" (click)="selectMaterial('papel')"
-                    /> Papel
-                </div>
 
-                <div class="col-md-2 col-sm-2 col-xs-4 text-center">
-                    <img src="assets/img/materiais/Icones_materiais-plastico.png" alt="plastico" class="img-responsive img-material" (click)="selectMaterial('plastico')"
-                        [ngClass]="{'img-selected': materialSelected.indexOf('plastico') > -1 }" />
-                    <input name="material[]" type="checkbox" value="'plastico'" [checked]="materialSelected.indexOf('plastico') > -1" (click)="selectMaterial('plastico')"
-                    /> Plastico
-                </div>
 
-                <div class="col-md-2 col-sm-2 col-xs-4 text-center">
-                    <img src="assets/img/materiais/Icones_materiais-metal.png" alt="metal" class="img-responsive img-material" (click)="selectMaterial('metal')"
-                        [ngClass]="{'img-selected': materialSelected.indexOf('metal') > -1 }" />
-                    <input name="material[]" type="checkbox" value="'metal'" [checked]="materialSelected.indexOf('metal') > -1" (click)="selectMaterial('metal')"
-                    /> Metal
-                </div>
+                    <!-- --------2nd row of the colm--------- -->
+                    <div class="row row-bottom-margin">
+                        <div class="col-md-4  col-sm-4  col-xs-4">
+                            <p>
+                                <img src="assets/img/cadastro/icon4.png" 
+                                        class="img-responsive img-material" 
+                                        (click)="selectMaterial('papel')"
+                                        [ngClass]="{'img-selected': materialSelected.indexOf('papel') > -1 }" >
+                            </p>
+                            <label class="radio-inline" style="padding-left:20%; color: #a0a0a0;">
+                                <input type="radio" 
+                                        class="inline" 
+                                        value="'papel'" 
+                                        [checked]="materialSelected.indexOf('papel') > -1" 
+                                        (click)="selectMaterial('papel')">Papel</label>
+                        </div>
 
-                <div class="col-md-2 col-sm-2 col-xs-4 text-center">
-                    <img src="assets/img/materiais/Icones_materiais-oleo.png" alt="oleo" class="img-responsive img-material" (click)="selectMaterial('oleo')"
-                        [ngClass]="{'img-selected': materialSelected.indexOf('oleo') > -1 }" />
-                    <input name="material[]" type="checkbox" value="'oleo'" [checked]="materialSelected.indexOf('oleo') > -1" (click)="selectMaterial('oleo')"
-                    /> Óleo
-                </div>
+                        <!-- ----------2nd colm------------- -->
+                        <div class="col-md-4  col-sm-4 col-xs-4">
+                            <p>
+                                <img src="assets/img/cadastro/icon5.png" 
+                                        class="img-responsive img-material" 
+                                        (click)="selectMaterial('plastico')"
+                                        [ngClass]="{'img-selected': materialSelected.indexOf('plastico') > -1 }">
+                            </p>
+                            <label class="radio-inline" style="padding-left:20%; color: #a0a0a0;">
+                                <input type="radio" 
+                                        class="inline" 
+                                        value="'plastico'" 
+                                        [checked]="materialSelected.indexOf('plastico') > -1" 
+                                        (click)="selectMaterial('plastico')">
+                                    Plástico
+                            </label>
+                        </div>
 
-                <div class="col-md-2 col-sm-2 col-xs-4 text-center">
-                    <img src="assets/img/materiais/Icones_materiais-eletronico.png" alt="eletronico" class="img-responsive img-material" (click)="selectMaterial('eletronico')"
-                        [ngClass]="{'img-selected': materialSelected.indexOf('eletronico') > -1 }" />
-                    <input name="material[]" type="checkbox" value="'eletronico'" [checked]="materialSelected.indexOf('eletronico') > -1" (click)="selectMaterial('eletronico')"
-                    /> Eletrônicos
-                </div>
+                        <!-- -----------3rd colm-------------------- -->
+                        <div class="col-md-4  col-sm-4 col-xs-4">
+                            <p>
+                                <img src="assets/img/cadastro/icon6.png" 
+                                        class="img-responsive img-material" 
+                                        (click)="selectMaterial('metal')"
+                                        [ngClass]="{'img-selected': materialSelected.indexOf('metal') > -1 }">
+                            </p>
+                            <label class="radio-inline" style="padding-left:28%; color: #a0a0a0;">
+                                <input type="radio" 
+                                        class="inline" 
+                                        value="'metal'" 
+                                        [checked]="materialSelected.indexOf('metal') > -1" 
+                                        (click)="selectMaterial('metal')">
+                                    Metal
+                            </label>
+                        </div>
+                    </div>
 
-                <div class="col-md-2 col-sm-2 col-xs-4 text-center">
-                    <img src="assets/img/materiais/Icones_materiais-bateria.png" alt="bateria" class="img-responsive img-material" (click)="selectMaterial('bateria')"
-                        [ngClass]="{'img-selected': materialSelected.indexOf('bateria') > -1 }" />
-                    <input name="material[]" type="checkbox" value="'bateria'" [checked]="materialSelected.indexOf('bateria') > -1" (click)="selectMaterial('bateria')"
-                    /> Bateria
+                    <!-- -----------End of 1stcol------- -->
                 </div>
 
-                <div class="col-md-2 col-sm-2 col-xs-4 text-center">
-                    <img src="assets/img/materiais/Icones_materiais-moveis.png" alt="moveis" class="img-responsive img-material" (click)="selectMaterial('moveis')"
-                        [ngClass]="{'img-selected': materialSelected.indexOf('moveis') > -1 }" />
-                    <input name="material[]" type="checkbox" value="'moveis'" [checked]="materialSelected.indexOf('moveis') > -1" (click)="selectMaterial('moveis')"
-                    /> Móveis
-                </div>
+                <div class="col-md-6">
+                    <!-- --------1st row of the colm--------- -->
+                    <!-- --------1st row of the colm--------- -->
+                    <div class="row row-bottom-margin">
+                        <div class="col-md-4  col-sm-4  col-xs-4">
+                            <p>
+                                <img src="assets/img/cadastro/icon7.png" 
+                                        class="img-responsive img-material" 
+                                        (click)="selectMaterial('oleo')"
+                                        [ngClass]="{'img-selected': materialSelected.indexOf('oleo') > -1 }">
+                            </p>
+                            <label class="radio-inline" style="padding-left:20%; color: #a0a0a0;">
+                                <input type="radio" 
+                                        class="inline" 
+                                        value="'oleo'" 
+                                        [checked]="materialSelected.indexOf('oleo') > -1" 
+                                        (click)="selectMaterial('oleo')">
+                                    Óleo
+                            </label>
+                        </div>
 
-                <div class="col-md-2 col-sm-2 col-xs-4 text-center">
-                    <img src="assets/img/materiais/Icones_materiais-entulho.png" alt="entulho" class="img-responsive img-material" (click)="selectMaterial('entulho')"
-                        [ngClass]="{'img-selected': materialSelected.indexOf('entulho') > -1 }" />
-                    <input name="material[]" type="checkbox" value="'entulho'" [checked]="materialSelected.indexOf('entulho') > -1" (click)="selectMaterial('entulho')"
-                    /> Entulho
-                </div>
+                        <!-- ----------2nd colm------------- -->
+                        <div class="col-md-4  col-sm-4 col-xs-4">
+                            <p>
+                                <img src="assets/img/cadastro/icon8.png" 
+                                        class="img-responsive img-material" 
+                                        (click)="selectMaterial('eletronico')"
+                                        [ngClass]="{'img-selected': materialSelected.indexOf('eletronico') > -1 }">
+                            </p>
+                            <label class="radio-inline" style="padding-left:10%; color: #a0a0a0;">
+                                <input type="radio" 
+                                        class="inline" 
+                                        value="'eletronico'" 
+                                        [checked]="materialSelected.indexOf('eletronico') > -1" 
+                                        (click)="selectMaterial('eletronico')">
+                                    Eletrônico
+                            </label>
+                        </div>
 
-                <div class="col-md-2 col-sm-2 col-xs-4 text-center">
-                    <img src="assets/img/materiais/Icones_materiais-poda.png" alt="outros" class="img-responsive img-material" (click)="selectMaterial('outros')"
-                        [ngClass]="{'img-selected': materialSelected.indexOf('outros') > -1 }" />
-                    <input name="material[]" type="checkbox" value="'outros'" [checked]="materialSelected.indexOf('outros') > -1" (click)="selectMaterial('outros')"
-                    /> Outros
-                </div>
+                        <!-- -----------3rd colm-------------------- -->
+                        <div class="col-md-4  col-sm-4 col-xs-4">
+                            <p>
+                                <img src="assets/img/cadastro/icon9.png" 
+                                        class="img-responsive img-material" 
+                                        (click)="selectMaterial('bateria')"
+                                        [ngClass]="{'img-selected': materialSelected.indexOf('bateria') > -1 }">
+                            </p>
+                            <label class="radio-inline" style="padding-left:28%; color: #a0a0a0;">
+                                <input type="radio" 
+                                        class="inline" 
+                                        value="'bateria'" 
+                                        [checked]="materialSelected.indexOf('bateria') > -1" 
+                                        (click)="selectMaterial('bateria')">Baterias</label>
+                        </div>
+                    </div>
 
-                <div class="col-md-12 col-sm-12 col-xs-12">
-                    <hr>
-                </div>
 
-            </div>
 
-            <!--/ MATERIAIS -->
+                    <!-- --------2nd row of the colm--------- -->
+                    <div class="row row-bottom-margin">
+                        <div class="col-md-4  col-sm-4  col-xs-4">
+                            <p>
+                                <img src="assets/img/cadastro/icon10.png" 
+                                        class="img-responsive img-material" 
+                                        (click)="selectMaterial('moveis')"
+                                        [ngClass]="{'img-selected': materialSelected.indexOf('moveis') > -1 }">
+                            </p>
+                            <label class="radio-inline" style="padding-left:20%; color: #a0a0a0;">
+                                <input type="radio" 
+                                        class="inline" 
+                                        value="'moveis'" 
+                                        [checked]="materialSelected.indexOf('moveis') > -1" 
+                                        (click)="selectMaterial('moveis')">Móveis</label>
+                        </div>
 
-            <!-- GALERIA -->
-            <div class="row">
-                <div class="col-md-12">
-                    <h2>Galeria <small style="color: #bdbbbb">Adicione aqui as fotos da cooperativa</small></h2>
-                    <input type='file' class="filestyle col-md-12" data-input="false" (change)="readGalleryURL($event);" multiple/>
-                    <br>
-                </div>
-            </div>
+                        <!-- ----------2nd colm------------- -->
+                        <div class="col-md-4  col-sm-4 col-xs-4">
+                            <p>
+                                <img src="assets/img/cadastro/icon11.png" 
+                                        class="img-responsive img-material" 
+                                        (click)="selectMaterial('entulho')"
+                                        [ngClass]="{'img-selected': materialSelected.indexOf('entulho') > -1 }">
+                            </p>
+                            <label class="radio-inline" style="padding-left:20%; color: #a0a0a0;">
+                                <input type="radio" 
+                                        class="inline" 
+                                        value="'entulho'" 
+                                        [checked]="materialSelected.indexOf('entulho') > -1" 
+                                        (click)="selectMaterial('entulho')">Entulho</label>
+                        </div>
 
-            <div class="row">
-                <div class="col-sm-4 col-md-2" *ngFor="let photo of cooperativa.photos" [hidden]="photo.delete && photo.delete == 1">
-                    <div class="thumbnail">
-                        <img [src]="getGallerySrc(photo)" class="gallery-photo">
-                        <div class="caption">
+                        <!-- -----------3rd colm-------------------- -->
+                        <div class="col-md-4  col-sm-4 col-xs-4">
                             <p>
-                                <a (click)="removeImageOnGallery(photo)" class="btn btn-danger" role="button">Delete</a>
+                                <img src="assets/img/cadastro/icon12.png" 
+                                        class="img-responsive img-material" 
+                                        (click)="selectMaterial('outros')"
+                                        [ngClass]="{'img-selected': materialSelected.indexOf('outros') > -1 }">
                             </p>
+                            <label class="radio-inline" style="padding-left:28%; color: #a0a0a0;">
+                                <input type="radio" 
+                                        class="inline" 
+                                        value="'outros'" 
+                                        [checked]="materialSelected.indexOf('outros') > -1" 
+                                        (click)="selectMaterial('outros')">Outros</label>
                         </div>
                     </div>
                 </div>
+                <!-- --------------End of row-------------- -->
+            </div>
+            
+            <!--/ MATERIAIS -->
+        </div>
+        <!-- /FIRST STEP -->
 
-                <div class="col-md-12 col-sm-12 col-xs-12">
-                    <hr>
+        <!-- SECOND STEP (MAP) -->
+        <div *ngIf="showMap">
+            <div class="row">
+                <div class="col-lg-12 map-title-container">
+                    <h4>LOCAL DE TRABALHO</h4>
                 </div>
             </div>
-            <!-- /GALERIA -->
 
-            
-            <!-- PARCEIROS -->
             <div class="row">
-                <div class="col-md-12">
-                    <h2>
-                        Parceiros 
-                        <small style="color: #bdbbbb">Adicione aqui os Parceiros da Cooperativa.</small>
-                    </h2>
-                    <div class="col-sm-12 col-md-4">
-                        <div class="form-group">
-                            <label for="parceiro-name">Nome</label>
-                            <input type="text" class="form-control" id="parceiro-name" name="parceiro-name" [(ngModel)]="parceiro.name"
-                                maxlength="60">
+                <div class="col-md-12 map-container">
+                    <agm-map
+                        [latitude]="markLat"
+                        [longitude]="markLng"
+                        [zoom]="zoom"
+                        [streetViewControl]="false"
+                        [scrollwheel]="false"
+                        (mapClick)="onClickMap($event)"
+                        style="height: 315px">
+                        <agm-marker
+                            [latitude]="markLat"
+                            [longitude]="markLng"
+                            [markerDraggable]="true"
+                            [iconUrl]=""
+                            (dragEnd)="onMoveMark($event)"></agm-marker>
+                    </agm-map>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-lg-12">
+                    <div>
+                        <div style="width: 28%; float: left; margin-right: 2%;">
+                                <div class="form-group">
+                                    <input type="text" 
+                                            class="form-control" 
+                                            name="state"
+                                            placeholder="Estado" 
+                                            [(ngModel)]="coperativa.state"
+                                            (focusout)="addressFocusOut()"
+                                            maxlength="128">
+                                </div> 
+                            </div>    
+                        <div style="width: 28%; float: left; margin-right: 2%;">
+                                <div class="form-group">
+                                    <input type="text" 
+                                            class="form-control" 
+                                            placeholder="Cidade" 
+                                            id="city" 
+                                            name="city"
+                                            [(ngModel)]="coperativa.city"
+                                            required
+                                            (focusout)="addressFocusOut()"
+                                            maxlength="64">
+                                </div>
+                            </div>
+                        <div style="width: 40%; float: left">
+                            <div class="form-group">
+                                <input type="text" 
+                                        class="form-control" 
+                                        placeholder="Bairro" 
+                                        id="address_region" 
+                                        name="address_region"
+                                        [(ngModel)]="coperativa.address_region"
+                                        (focusout)="addressFocusOut()"
+                                        maxlength="128">
+                            </div>
                         </div>
-                        <div class="form-group">
-                            <label>Logo</label>
-                            <input type='file' 
-                                    class="filestyle col-md-12" 
-                                    data-input="false"
-                                    id="parceiro-image-input"
-                                    [disabled]="partnerLoading" 
-                                    (change)="readPartnerURL($event);"/>
+                    </div>
+                    <div>
+                        <div class="input-col-left">
+                            <div class="form-group">
+                                <input type="text" 
+                                        class="form-control" 
+                                        placeholder="Rua" 
+                                        required
+                                        id="address_base" 
+                                        name="address_base"
+                                        [(ngModel)]="coperativa.address_base"
+                                        (focusout)="addressFocusOut()"
+                                        maxlength="500">
+                            </div>
                         </div>
-                        <p>
-                            <a (click)="addPartner(parceiro)" class="btn btn-info" role="button">Adicionar</a>
-                        </p>
-                    </div>    
-                </div>
-            </div>    
-            <div class="row">                
-                <div class="col-sm-4 col-md-2" *ngFor="let partner of cooperativa.partners" [hidden]="partner.delete && partner.delete == 1">
-                    <div class="thumbnail">
-                        <img [src]="getPartnerSrc(partner)" class="gallery-photo">
-                        <div class="caption">
-                            <h3>{{ partner.name }}</h3>                                
-                            <p>
-                                <a (click)="removePartner(partner)" class="btn btn-danger" role="button">Delete</a>
-                            </p>
+                        <div class="input-col-right">
+                            <div class="form-group">
+                                <input type="number" 
+                                        class="form-control remove-stepper" 
+                                        placeholder="nº"
+                                        id="number" 
+                                        name="number"
+                                        [(ngModel)]="coperativa.number">
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
-
-            <div class="row">
-                <div class="col-md-12 col-sm-12 col-xs-12">
-                    <hr>
-                </div>
+        </div>
+        <!-- /SECOND STEP (MAP) -->
+
+        <!-- BUTTONS -->
+        <div class="row buttons-wrapper" *ngIf="!showMap">
+            <div class="col-xs-6">
+                <button type="button" (click)="goHome()" class="btn cancel-button btn-danger">
+                    CANCELAR
+                </button>
             </div>
-            <!-- /PARCEIROS -->
-
-            <!-- BUTTONS -->
-
-            <div class="row">
-                <div class="col-md-12">
-                    <button type="submit" class="btn btn-success col-md-4 col-xs-4">
-                        Cadastrar
-                    </button>
+            <div class="col-xs-6">
+                <a (click)="toggleMap()" class="btn btn-success primary-button">
+                    AVANÇAR
+                </a>
+            </div>
+        </div>
 
-                    <button type="button" (click)="goHome()" class="btn btn-primary col-md-4 col-md-offset-4 col-xs-offset-4 col-xs-4">
-                        Voltar
+        <div class="row" *ngIf="showMap">
+                <div class="col-xs-6">
+                    <button type="button" (click)="toggleMap()" class="btn cancel-button btn-danger">
+                        CANCELAR
                     </button>
                 </div>
+                <div class="col-xs-6">
+                    <a (click)="toggleMap()" class="btn primary-button btn-success">
+                        CONFIRMAR
+                    </a>
+                </div>
             </div>
-            <br>
-
-        </form>
 
+        <!-- /BUTTONS -->
+    </form>
+
+</div>
+
+<!-- Modal1 -->
+<div class="mod1">
+    <div class="modal fade" id="myModal" role="dialog" tabindex="-1" aria-labelledby="Dicas para cadastro">
+        <div class="modal-dialog modal-lg" role="content">
+            <!-- Modal content-->
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h4 class="modal-title main-head">DICAS PARA CADASTRO</h4>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">&times;</button>
+                </div>
+                <ul>
+                    <li >
+                        Comece mostrando nosso vídeo para o catador/a, é a forma mais simples de explicar;
+                    </li>
+                    <li>
+                        Você estará criando um perfil profissional, tenha isso em mente;
+                    </li>
+                    <li class="">
+                        Queremos respeitar e divulgar a imagem dos catadores, por isso, capriche na foto. Ela precisa ser clara e positiva, é o cartão de visita do catador;
+                    </li>
+                    <li class="">
+                        Para "História de vida", algumas perguntas boas para disparar são: como começou o trabalho, quais são seus sonhos, quem é a sua família...;
+                    </li>
+                    <li class="">
+                        Para "Frase marcante", você pode buscar uma frase que o catador goste, ou algo que está escrito na carroça, uma letra de música, algo marcante e bonito;
+                    </li>
+                    <li class="">
+                        Deixe claro que esse é um convite profissional, que o catador será chamado para realizar trabalhos e que a equipe do Cataki estará acompanhando o processo.
+                    </li>
+                    <li class="">
+                        Estamos caminhando para a cooperativa digital! Ao longo de 2018 isso irá acontecer e os cadastrados poderão participar.
+                    </li>
+                </ul>
+            </div>
+        </div>
     </div>
-
-</div>
\ No newline at end of file
+    </div>
\ No newline at end of file
diff --git a/src/app/cooperativa/cooperativa.component.ts b/src/app/cooperativa/cooperativa.component.ts
index 0858d01..7eaa1d0 100644
--- a/src/app/cooperativa/cooperativa.component.ts
+++ b/src/app/cooperativa/cooperativa.component.ts
@@ -26,6 +26,7 @@ export class CooperativaComponent implements OnInit {
         
     public loading: Boolean = false;
     public isEditing: boolean = false;
+    public showMap: boolean = false;
 
     public cooperativa: Cooperativa;
     public user: User;
@@ -69,13 +70,6 @@ export class CooperativaComponent implements OnInit {
     ngOnInit() {
         this.cooperativa = new Cooperativa();
         this.setCurrentPosition();        
-        $(":file")['filestyle']({
-            input: true,
-            buttonText: 'Selecionar Imagem',
-            //buttonName: 'btn btn-primary',
-            icon: false
-        });
-
         (<any>$("#datepicker")).datepicker({
             changeMonth: true,
             changeYear: true,
@@ -394,6 +388,10 @@ export class CooperativaComponent implements OnInit {
         this.router.navigateByUrl('/');
     }
 
+    toggleMap() { 
+        this.showMap = !this.showMap;
+    }  
+
     guid() {
         const s4=()=> Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
         return `${s4() + s4()}-${s4()}-${s4()}-${s4()}-${s4() + s4() + s4()}`;