diff --git a/lib/attributeList.js b/lib/attributeList.js
new file mode 100644
index 0000000..72e4dee
--- /dev/null
+++ b/lib/attributeList.js
@@ -0,0 +1,842 @@
+module.exports = {
+  "accept":{
+    "name":"accept",
+    "belongsTo":"<input>",
+    "description":"Specifies whether the content of an element is editable or not"
+  },
+  "accept-charset":{
+    "name":"accept-charset",
+    "belongsTo":"<form>",
+    "description":"Specifies that audio/video controls should be displayed (such as a play/pause button etc)"
+  },
+  "accesskey":{
+    "name":"accesskey",
+    "belongsTo":"Global Attributes",
+    "description":"Specifies the coordinates of the area"
+  },
+  "action":{
+    "name":"action",
+    "belongsTo":"<form>",
+    "description":"Specifies the URL of the resource to be used by the object"
+  },
+  "align":{
+    "name":"align",
+    "belongsTo":"Not supported in HTML 5.",
+    "description":"Used to store custom data private to the page or application"
+  },
+  "alt":{
+    "name":"alt",
+    "belongsTo":"<area>, <img>, <input>",
+    "description":"Specifies the date and time"
+  },
+  "async":{
+    "name":"async",
+    "belongsTo":"<script>",
+    "description":"Specifies that the track is to be enabled if the user's preferences do not indicate that another track would be more appropriate"
+  },
+  "autocomplete":{
+    "name":"autocomplete",
+    "belongsTo":"<form>, <input>",
+    "description":"Specifies that the script is executed when the page has finished parsing (only for external scripts)"
+  },
+  "autofocus":{
+    "name":"autofocus",
+    "belongsTo":"<button>, <input>, <select>, <textarea>",
+    "description":"Specifies the text direction for the content in an element"
+  },
+  "autoplay":{
+    "name":"autoplay",
+    "belongsTo":"<audio>, <video>",
+    "description":"Specifies that the text direction will be submitted"
+  },
+  "bgcolor":{
+    "name":"bgcolor",
+    "belongsTo":"Not supported in HTML 5.",
+    "description":"Specifies that the specified element/group of elements should be disabled"
+  },
+  "border":{
+    "name":"border",
+    "belongsTo":"Not supported in HTML 5.",
+    "description":"Specifies that the target will be downloaded when a user clicks on the hyperlink"
+  },
+  "charset":{
+    "name":"charset",
+    "belongsTo":"<meta>, <script>",
+    "description":"Specifies whether an element is draggable or not"
+  },
+  "checked":{
+    "name":"checked",
+    "belongsTo":"<input>",
+    "description":"Specifies whether the dragged data is copied, moved, or linked, when dropped"
+  },
+  "cite":{
+    "name":"cite",
+    "belongsTo":"<blockquote>, <del>, <ins>, <q>",
+    "description":'Specifies how the form-data should be encoded when submitting it to the server (only for method="post")'
+  },
+  "class":{
+    "name":"class",
+    "belongsTo":"Global Attributes",
+    "description":"Specifies which form element(s) a label/calculation is bound to"
+  },
+  "color":{
+    "name":"color",
+    "belongsTo":"Not supported in HTML 5.",
+    "description":"Specifies the name of the form the element belongs to"
+  },
+  "cols":{
+    "name":"cols",
+    "belongsTo":"<textarea>",
+    "description":'Specifies where to send the form-data when a form is submitted. Only for type="submit"'
+  },
+  "colspan":{
+    "name":"colspan",
+    "belongsTo":"<td>, <th>",
+    "description":"Specifies one or more headers cells a cell is related to"
+  },
+  "content":{
+    "name":"content",
+    "belongsTo":"<meta>",
+    "description":"Specifies the height of the element"
+  },
+  "contenteditable":{
+    "name":"contenteditable",
+    "belongsTo":"Global Attributes",
+    "description":"Specifies that an element is not yet, or is no longer, relevant"
+  },
+  "controls":{
+    "name":"controls",
+    "belongsTo":"<audio>, <video>",
+    "description":"Specifies the range that is considered to be a high value"
+  },
+  "coords":{
+    "name":"coords",
+    "belongsTo":"<area>",
+    "description":"Specifies the URL of the page the link goes to"
+  },
+  "data":{
+    "name":"data",
+    "belongsTo":"<object>",
+    "description":"Specifies the language of the linked document"
+  },
+  "data-*":{
+    "name":"data-*",
+    "belongsTo":"Global Attributes",
+    "description":"Provides an HTTP header for the information/value of the content attribute"
+  },
+  "datetime":{
+    "name":"datetime",
+    "belongsTo":"<del>, <ins>, <time>",
+    "description":"Specifies a unique id for an element"
+  },
+  "default":{
+    "name":"default",
+    "belongsTo":"<track>",
+    "description":"Specifies an image as a server-side image-map"
+  },
+  "defer":{
+    "name":"defer",
+    "belongsTo":"<script>",
+    "description":"Specifies the kind of text track"
+  },
+  "dir":{
+    "name":"dir",
+    "belongsTo":"Global Attributes",
+    "description":"Specifies the title of the text track"
+  },
+  "dirname":{
+    "name":"dirname",
+    "belongsTo":"<input>, <textarea>",
+    "description":"Specifies the language of the element's content"
+  },
+  "disabled":{
+    "name":"disabled",
+    "belongsTo":"<button>, <fieldset>, <input>, <optgroup>, <option>, <select>, <textarea>",
+    "description":"Refers to a <datalist> element that contains pre-defined options for an <input> element"
+  },
+  "download":{
+    "name":"download",
+    "belongsTo":"<a>, <area>",
+    "description":"Specifies that the audio/video will start over again, every time it is finished"
+  },
+  "draggable":{
+    "name":"draggable",
+    "belongsTo":"Global Attributes",
+    "description":"Specifies the range that is considered to be a low value"
+  },
+  "dropzone":{
+    "name":"dropzone",
+    "belongsTo":"Global Attributes",
+    "description":"Specifies the maximum value"
+  },
+  "enctype":{
+    "name":"enctype",
+    "belongsTo":"<form>",
+    "description":"Specifies the maximum number of characters allowed in an element"
+  },
+  "for":{
+    "name":"for",
+    "belongsTo":"<label>, <output>",
+    "description":"Specifies what media/device the linked document is optimized for"
+  },
+  "form":{
+    "name":"form",
+    "belongsTo":"<button>, <fieldset>, <input>, <label>, <meter>, <object>, <output>, <select>, <textarea>",
+    "description":"Specifies the HTTP method to use when sending form-data"
+  },
+  "formaction":{
+    "name":"formaction",
+    "belongsTo":"<button>, <input>",
+    "description":"Specifies a minimum value"
+  },
+  "headers":{
+    "name":"headers",
+    "belongsTo":"<td>, <th>",
+    "description":"Specifies that a user can enter more than one value"
+  },
+  "height":{
+    "name":"height",
+    "belongsTo":"<canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>",
+    "description":"Specifies that the audio output of the video should be muted"
+  },
+  "hidden":{
+    "name":"hidden",
+    "belongsTo":"Global Attributes",
+    "description":"Specifies the name of the element"
+  },
+  "high":{
+    "name":"high",
+    "belongsTo":"<meter>",
+    "description":"Specifies that the form should not be validated when submitted"
+  },
+  "href":{
+    "name":"href",
+    "belongsTo":"<a>, <area>, <base>, <link>",
+    "description":"Script to be run on abort"
+  },
+  "hreflang":{
+    "name":"hreflang",
+    "belongsTo":"<a>, <area>, <link>",
+    "description":"Script to be run after the document is printed"
+  },
+  "http-equiv":{
+    "name":"http-equiv",
+    "belongsTo":"<meta>",
+    "description":"Script to be run before the document is printed"
+  },
+  "id":{
+    "name":"id",
+    "belongsTo":"Global Attributes",
+    "description":"Script to be run when the document is about to be unloaded"
+  },
+  "ismap":{
+    "name":"ismap",
+    "belongsTo":"<img>",
+    "description":"Script to be run when the element loses focus"
+  },
+  "kind":{
+    "name":"kind",
+    "belongsTo":"<track>",
+    "description":"Script to be run when a file is ready to start playing (when it has buffered enough to begin)"
+  },
+  "label":{
+    "name":"label",
+    "belongsTo":"<track>, <option>, <optgroup>",
+    "description":"Script to be run when a file can be played all the way to the end without pausing for buffering"
+  },
+  "lang":{
+    "name":"lang",
+    "belongsTo":"Global Attributes",
+    "description":"Script to be run when the value of the element is changed"
+  },
+  "list":{
+    "name":"list",
+    "belongsTo":"<input>",
+    "description":"Script to be run when the element is being clicked"
+  },
+  "loop":{
+    "name":"loop",
+    "belongsTo":"<audio>, <video>",
+    "description":"Script to be run when a context menu is triggered"
+  },
+  "low":{
+    "name":"low",
+    "belongsTo":"<meter>",
+    "description":"Script to be run when the content of the element is being copied"
+  },
+  "max":{
+    "name":"max",
+    "belongsTo":"<input>, <meter>, <progress>",
+    "description":"Script to be run when the cue changes in a <track> element"
+  },
+  "maxlength":{
+    "name":"maxlength",
+    "belongsTo":"<input>, <textarea>",
+    "description":"Script to be run when the content of the element is being cut"
+  },
+  "media":{
+    "name":"media",
+    "belongsTo":"<a>, <area>, <link>, <source>, <style>",
+    "description":"Script to be run when the element is being double-clicked"
+  },
+  "method":{
+    "name":"method",
+    "belongsTo":"<form>",
+    "description":"Script to be run when the element is being dragged"
+  },
+  "min":{
+    "name":"min",
+    "belongsTo":"<input>, <meter>",
+    "description":"Script to be run at the end of a drag operation"
+  },
+  "multiple":{
+    "name":"multiple",
+    "belongsTo":"<input>, <select>",
+    "description":"Script to be run when an element has been dragged to a valid drop target"
+  },
+  "muted":{
+    "name":"muted",
+    "belongsTo":"<video>, <audio>",
+    "description":"Script to be run when an element leaves a valid drop target"
+  },
+  "name":{
+    "name":"name",
+    "belongsTo":"<button>, <fieldset>, <form>, <iframe>, <input>, <map>, <meta>, <object>, <output>, <param>, <select>, <textarea>",
+    "description":"Script to be run when an element is being dragged over a valid drop target"
+  },
+  "novalidate":{
+    "name":"novalidate",
+    "belongsTo":"<form>",
+    "description":"Script to be run at the start of a drag operation"
+  },
+  "onabort":{
+    "name":"onabort",
+    "belongsTo":"<audio>, <embed>, <img>, <object>, <video>",
+    "description":"Script to be run when dragged element is being dropped"
+  },
+  "onafterprint":{
+    "name":"onafterprint",
+    "belongsTo":"<body>",
+    "description":"Script to be run when the length of the media changes"
+  },
+  "onbeforeprint":{
+    "name":"onbeforeprint",
+    "belongsTo":"<body>",
+    "description":"Script to be run when something bad happens and the file is suddenly unavailable (like unexpectedly disconnects)"
+  },
+  "onbeforeunload":{
+    "name":"onbeforeunload",
+    "belongsTo":"<body>",
+    "description":'Script to be run when the media has reach the end (a useful event for messages like "thanks for listening")'
+  },
+  "onblur":{
+    "name":"onblur",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when an error occurs"
+  },
+  "oncanplay":{
+    "name":"oncanplay",
+    "belongsTo":"<audio>, <embed>, <object>, <video>",
+    "description":"Script to be run when the element gets focus"
+  },
+  "oncanplaythrough":{
+    "name":"oncanplaythrough",
+    "belongsTo":"<audio>, <video>",
+    "description":"Script to be run when there has been changes to the anchor part of the a URL"
+  },
+  "onchange":{
+    "name":"onchange",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when the element gets user input"
+  },
+  "onclick":{
+    "name":"onclick",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when the element is invalid"
+  },
+  "oncontextmenu":{
+    "name":"oncontextmenu",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when a user is pressing a key"
+  },
+  "oncopy":{
+    "name":"oncopy",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when a user presses a key"
+  },
+  "oncuechange":{
+    "name":"oncuechange",
+    "belongsTo":"<track>",
+    "description":"Script to be run when a user releases a key"
+  },
+  "oncut":{
+    "name":"oncut",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when the element is finished loading"
+  },
+  "ondblclick":{
+    "name":"ondblclick",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when media data is loaded"
+  },
+  "ondrag":{
+    "name":"ondrag",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when meta data (like dimensions and duration) are loaded"
+  },
+  "ondragend":{
+    "name":"ondragend",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run just as the file begins to load before anything is actually loaded"
+  },
+  "ondragenter":{
+    "name":"ondragenter",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when a mouse button is pressed down on an element"
+  },
+  "ondragleave":{
+    "name":"ondragleave",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run as long as the mouse pointer is moving over an element"
+  },
+  "ondragover":{
+    "name":"ondragover",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when a mouse pointer moves out of an element"
+  },
+  "ondragstart":{
+    "name":"ondragstart",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when a mouse pointer moves over an element"
+  },
+  "ondrop":{
+    "name":"ondrop",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when a mouse button is released over an element"
+  },
+  "ondurationchange":{
+    "name":"ondurationchange",
+    "belongsTo":"<audio>, <video>",
+    "description":"Script to be run when a mouse wheel is being scrolled over an element"
+  },
+  "onemptied":{
+    "name":"onemptied",
+    "belongsTo":"<audio>, <video>",
+    "description":"Script to be run when the browser starts to work offline"
+  },
+  "onended":{
+    "name":"onended",
+    "belongsTo":"<audio>, <video>",
+    "description":"Script to be run when the browser starts to work online"
+  },
+  "onerror":{
+    "name":"onerror",
+    "belongsTo":"<audio>, <body>, <embed>, <img>, <object>, <script>, <style>, <video>",
+    "description":"Script to be run when a user navigates away from a page"
+  },
+  "onfocus":{
+    "name":"onfocus",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when a user navigates to a page"
+  },
+  "onhashchange":{
+    "name":"onhashchange",
+    "belongsTo":"<body>",
+    "description":"Script to be run when the user pastes some content in an element"
+  },
+  "oninput":{
+    "name":"oninput",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when the media is paused either by the user or programmatically"
+  },
+  "oninvalid":{
+    "name":"oninvalid",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when the media has started playing"
+  },
+  "onkeydown":{
+    "name":"onkeydown",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when the media has started playing"
+  },
+  "onkeypress":{
+    "name":"onkeypress",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when the window's history changes."
+  },
+  "onkeyup":{
+    "name":"onkeyup",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when the browser is in the process of getting the media data"
+  },
+  "onload":{
+    "name":"onload",
+    "belongsTo":"<body>, <iframe>, <img>, <input>, <link>, <script>, <style>",
+    "description":"Script to be run each time the playback rate changes (like when a user switches to a slow motion or fast forward mode)."
+  },
+  "onloadeddata":{
+    "name":"onloadeddata",
+    "belongsTo":"<audio>, <video>",
+    "description":"Script to be run when a reset button in a form is clicked."
+  },
+  "onloadedmetadata":{
+    "name":"onloadedmetadata",
+    "belongsTo":"<audio>, <video>",
+    "description":"Script to be run when the browser window is being resized."
+  },
+  "onloadstart":{
+    "name":"onloadstart",
+    "belongsTo":"<audio>, <video>",
+    "description":"Script to be run when an element's scrollbar is being scrolled"
+  },
+  "onmousedown":{
+    "name":"onmousedown",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when the user writes something in a search field (for <input='search'>)"
+  },
+  "onmousemove":{
+    "name":"onmousemove",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when the seeking attribute is set to false indicating that seeking has ended"
+  },
+  "onmouseout":{
+    "name":"onmouseout",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when the seeking attribute is set to true indicating that seeking is active"
+  },
+  "onmouseover":{
+    "name":"onmouseover",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when the element gets selected"
+  },
+  "onmouseup":{
+    "name":"onmouseup",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when the browser is unable to fetch the media data for whatever reason"
+  },
+  "onmousewheel":{
+    "name":"onmousewheel",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when a Web Storage area is updated"
+  },
+  "onoffline":{
+    "name":"onoffline",
+    "belongsTo":"<body>",
+    "description":"Script to be run when a form is submitted"
+  },
+  "ononline":{
+    "name":"ononline",
+    "belongsTo":"<body>",
+    "description":"Script to be run when fetching the media data is stopped before it is completely loaded for whatever reason"
+  },
+  "onpagehide":{
+    "name":"onpagehide",
+    "belongsTo":"<body>",
+    "description":"Script to be run when the playing position has changed (like when the user fast forwards to a different point in the media)"
+  },
+  "onpageshow":{
+    "name":"onpageshow",
+    "belongsTo":"<body>",
+    "description":"Script to be run when the user opens or closes the <details> element"
+  },
+  "onpaste":{
+    "name":"onpaste",
+    "belongsTo":"All visible elements.",
+    "description":"Script to be run when a page has unloaded (or the browser window has been closed)"
+  },
+  "onpause":{
+    "name":"onpause",
+    "belongsTo":"<audio>, <video>",
+    "description":"Script to be run each time the volume of a video/audio has been changed"
+  },
+  "onplay":{
+    "name":"onplay",
+    "belongsTo":"<audio>, <video>",
+    "description":"Script to be run when the media has paused but is expected to resume (like when the media pauses to buffer more data)"
+  },
+  "onplaying":{
+    "name":"onplaying",
+    "belongsTo":"<audio>, <video>",
+    "description":"Script to be run when the mouse wheel rolls up or down over an element"
+  },
+  "onpopstate":{
+    "name":"onpopstate",
+    "belongsTo":"<body>",
+    "description":"Specifies that the details should be visible (open) to the user"
+  },
+  "onprogress":{
+    "name":"onprogress",
+    "belongsTo":"<audio>, <video>",
+    "description":"Specifies what value is the optimal value for the gauge"
+  },
+  "onratechange":{
+    "name":"onratechange",
+    "belongsTo":"<audio>, <video>",
+    "description":"Specifies a regular expression that an <input> element's value is checked against"
+  },
+  "onreset":{
+    "name":"onreset",
+    "belongsTo":"<form>",
+    "description":"Specifies a short hint that describes the expected value of the element"
+  },
+  "onresize":{
+    "name":"onresize",
+    "belongsTo":"<body>",
+    "description":"Specifies an image to be shown while the video is downloading, or until the user hits the play button"
+  },
+  "onscroll":{
+    "name":"onscroll",
+    "belongsTo":"All visible elements.",
+    "description":"Specifies if and how the author thinks the audio/video should be loaded when the page loads"
+  },
+  "onsearch":{
+    "name":"onsearch",
+    "belongsTo":"<input>",
+    "description":"Specifies that the element is read-only"
+  },
+  "onseeked":{
+    "name":"onseeked",
+    "belongsTo":"<audio>, <video>",
+    "description":"Specifies the relationship between the current document and the linked document"
+  },
+  "onseeking":{
+    "name":"onseeking",
+    "belongsTo":"<audio>, <video>",
+    "description":"Specifies that the element must be filled out before submitting the form"
+  },
+  "onselect":{
+    "name":"onselect",
+    "belongsTo":"All visible elements.",
+    "description":"Specifies that the list order should be descending (9,8,7...)"
+  },
+  "onstalled":{
+    "name":"onstalled",
+    "belongsTo":"<audio>, <video>",
+    "description":"Specifies the visible number of lines in a text area"
+  },
+  "onstorage":{
+    "name":"onstorage",
+    "belongsTo":"<body>",
+    "description":"Specifies the number of rows a table cell should span"
+  },
+  "onsubmit":{
+    "name":"onsubmit",
+    "belongsTo":"<form>",
+    "description":"Enables an extra set of restrictions for the content in an <iframe>"
+  },
+  "onsuspend":{
+    "name":"onsuspend",
+    "belongsTo":"<audio>, <video>",
+    "description":"Specifies whether a header cell is a header for a column, row, or group of columns or rows"
+  },
+  "ontimeupdate":{
+    "name":"ontimeupdate",
+    "belongsTo":"<audio>, <video>",
+    "description":"Specifies that an option should be pre-selected when the page loads"
+  },
+  "ontoggle":{
+    "name":"ontoggle",
+    "belongsTo":"<details>",
+    "description":"Specifies the shape of the area"
+  },
+  "onunload":{
+    "name":"onunload",
+    "belongsTo":"<body>",
+    "description":"Specifies the width, in characters (for <input>) or specifies the number of visible options (for <select>)"
+  },
+  "onvolumechange":{
+    "name":"onvolumechange",
+    "belongsTo":"<audio>, <video>",
+    "description":"Specifies the size of the linked resource"
+  },
+  "onwaiting":{
+    "name":"onwaiting",
+    "belongsTo":"<audio>, <video>",
+    "description":"Specifies the number of columns to span"
+  },
+  "onwheel":{
+    "name":"onwheel",
+    "belongsTo":"All visible elements.",
+    "description":"Specifies whether the element is to have its spelling and grammar checked or not"
+  },
+  "open":{
+    "name":"open",
+    "belongsTo":"<details>",
+    "description":"Specifies the URL of the media file"
+  },
+  "optimum":{
+    "name":"optimum",
+    "belongsTo":"<meter>",
+    "description":"Specifies the HTML content of the page to show in the <iframe>"
+  },
+  "pattern":{
+    "name":"pattern",
+    "belongsTo":"<input>",
+    "description":"Specifies the language of the track text data (required if kind='subtitles')"
+  },
+  "placeholder":{
+    "name":"placeholder",
+    "belongsTo":"<input>, <textarea>",
+    "description":"Specifies the URL of the image to use in different situations"
+  },
+  "poster":{
+    "name":"poster",
+    "belongsTo":"<video>",
+    "description":"Specifies the start value of an ordered list"
+  },
+  "preload":{
+    "name":"preload",
+    "belongsTo":"<audio>, <video>",
+    "description":"Specifies the legal number intervals for an input field"
+  },
+  "readonly":{
+    "name":"readonly",
+    "belongsTo":"<input>, <textarea>",
+    "description":"Specifies an inline CSS style for an element"
+  },
+  "rel":{
+    "name":"rel",
+    "belongsTo":"<a>, <area>, <link>",
+    "description":"Specifies the tabbing order of an element"
+  },
+  "required":{
+    "name":"required",
+    "belongsTo":"<input>, <select>, <textarea>",
+    "description":"Specifies the target for where to open the linked document or where to submit the form"
+  },
+  "reversed":{
+    "name":"reversed",
+    "belongsTo":"<ol>",
+    "description":"Specifies extra information about an element"
+  },
+  "rows":{
+    "name":"rows",
+    "belongsTo":"<textarea>",
+    "description":"Specifies whether the content of an element should be translated or not"
+  },
+  "rowspan":{
+    "name":"rowspan",
+    "belongsTo":"<td>, <th>",
+    "description":"Specifies the type of element"
+  },
+  "sandbox":{
+    "name":"sandbox",
+    "belongsTo":"<iframe>",
+    "description":"Specifies an image as a client-side image-map"
+  },
+  "scope":{
+    "name":"scope",
+    "belongsTo":"<th>",
+    "description":"Specifies the value of the element"
+  },
+  "selected":{
+    "name":"selected",
+    "belongsTo":"<option>",
+    "description":"Specifies the width of the element"
+  },
+  "shape":{
+    "name":"shape",
+    "belongsTo":"<area>",
+    "description":"Specifies how the text in a text area is to be wrapped when submitted in a form"
+  },
+  "size":{
+    "name":"size",
+    "belongsTo":"<input>, <select>",
+    "description":"Specifies the width, in characters (for <input>) or specifies the number of visible options (for <select>)"
+  },
+  "sizes":{
+    "name":"sizes",
+    "belongsTo":"<img>, <link>, <source>",
+    "description":"Specifies the size of the linked resource"
+  },
+  "span":{
+    "name":"span",
+    "belongsTo":"<col>, <colgroup>",
+    "description":"Specifies the number of columns to span"
+  },
+  "spellcheck":{
+    "name":"spellcheck",
+    "belongsTo":"Global Attributes",
+    "description":"Specifies whether the element is to have its spelling and grammar checked or not"
+  },
+  "src":{
+    "name":"src",
+    "belongsTo":"<audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video>",
+    "description":"Specifies the URL of the media file"
+  },
+  "srcdoc":{
+    "name":"srcdoc",
+    "belongsTo":"<iframe>",
+    "description":"Specifies the HTML content of the page to show in the <iframe>"
+  },
+  "srclang":{
+    "name":"srclang",
+    "belongsTo":"<track>",
+    "description":"Specifies the language of the track text data (required if kind='subtitles')"
+  },
+  "srcset":{
+    "name":"srcset",
+    "belongsTo":"<img>, <source>",
+    "description":"Specifies the URL of the image to use in different situations"
+  },
+  "start":{
+    "name":"start",
+    "belongsTo":"<ol>",
+    "description":"Specifies the start value of an ordered list"
+  },
+  "step":{
+    "name":"step",
+    "belongsTo":"<input>",
+    "description":"Specifies the legal number intervals for an input field"
+  },
+  "style":{
+    "name":"style",
+    "belongsTo":"Global Attributes",
+    "description":"Specifies an inline CSS style for an element"
+  },
+  "tabindex":{
+    "name":"tabindex",
+    "belongsTo":"Global Attributes",
+    "description":"Specifies the tabbing order of an element"
+  },
+  "target":{
+    "name":"target",
+    "belongsTo":"<a>, <area>, <base>, <form>",
+    "description":"Specifies the target for where to open the linked document or where to submit the form"
+  },
+  "title":{
+    "name":"title",
+    "belongsTo":"Global Attributes",
+    "description":"Specifies extra information about an element"
+  },
+  "translate":{
+    "name":"translate",
+    "belongsTo":"Global Attributes",
+    "description":"Specifies whether the content of an element should be translated or not"
+  },
+  "type":{
+    "name":"type",
+    "belongsTo":"<a>, <button>, <embed>, <input>, <link>, <menu>, <object>, <script>, <source>, <style>",
+    "description":"Specifies the type of element"
+  },
+  "usemap":{
+    "name":"usemap",
+    "belongsTo":"<img>, <object>",
+    "description":"Specifies an image as a client-side image-map"
+  },
+  "value":{
+    "name":"value",
+    "belongsTo":"<button>, <input>, <li>, <option>, <meter>, <progress>, <param>",
+    "description":"Specifies the value of the element"
+  },
+  "width":{
+    "name":"width",
+    "belongsTo":"<canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>",
+    "description":"Specifies the width of the element"
+  },
+  "wrap":{
+    "name":"wrap",
+    "belongsTo":"<textarea>",
+    "description":"Specifies how the text in a text area is to be wrapped when submitted in a form"
+  }
+}
\ No newline at end of file
diff --git a/lib/build.js b/lib/build.js
index 1c37bc8..61d9873 100644
--- a/lib/build.js
+++ b/lib/build.js
@@ -1,96 +1,188 @@
 var fs = require('fs')
+var attributeList = require('./attributeList')
+//function  templateMethod()
 
-module.exports = function buildOuput(filename){
-  var objArray = [];
-  var compArray = [];
-  //create an array of objects
-  fs.readdirSync('./toruf/objects').forEach(function(filename){
-    if(filename.includes(".json")){
-      let name = filename.split('.json')[0];
-      objArray.push(name);
-    }
-  });
-  //create an array of components
-  fs.readdirSync('./toruf/components').forEach(function(filename){
-    if(filename.includes(".html")){
-      let name = filename.split('.html')[0];
-      compArray.push(name);
-    }
-  });
-  //read all templates
+module.exports = async function buildOuput(filename){
   if(filename.includes(".html")){
-    fs.readFile(`./toruf/templates/${filename}`, 'utf8', function(err, originFile){
-      if(err) throw new Error(err)
-      else{
-        //replace components
-        for(let comp of compArray){
-          let htmlComp = fs.readFileSync(`./toruf/components/${comp}.html`, 'utf8')
-          let tag = `<#${comp.toUpperCase()}>`
-          if(originFile.includes(tag)){
-            let start_tag = 
-            `<!-- ${tag} -->
-            `;
-            let end_tag = 
-            `
-            <!-- !${tag} -->`;
-            let htmlCom = start_tag + htmlComp + end_tag; 
-            originFile = originFile.replace(tag, htmlCom);
+    let fileContent = await fs.promises.readFile(`./toruf/templates/${filename}`, 'utf8')
+    let compFile = await replaceComponents(fileContent)
+    let objFile = await replaceObjects(compFile)
+    await fs.promises.writeFile(`site/${filename}`, objFile).then(console.log('All Done!'))
+  }
+}
+
+function replaceComponents(template) { 
+  return new Promise(async (resolve, reject) => {
+    let newTemplate = template
+    if(template.includes('<#')){
+      var compArr = template.split('<#')
+      for(let i=1;i<=compArr.length; i++) {
+        if(!compArr[i]) {
+          //console.log(newTemplate)
+          resolve(newTemplate)
+        }
+        else{
+          let compName = compArr[i].split('>')[0];
+          let compFileName = compName.toLowerCase();
+          //console.log(compFileName)
+          let compFile = await fs.promises.readFile(`./toruf/components/${compFileName}/index.html`, 'utf8').catch((err)=>{reject(err)})
+          if(compFile){
+            let htmlComp = `\n<!-- #${compName} -->\n` + compFile + `\n<!-- !${compName} -->\n`;
+            let comp_tag = `<#${compName}>`
+            newTemplate = newTemplate.replace(comp_tag, htmlComp)
+            //console.log(newTemplate)
           }
+          else reject(`component ${compName} doesnt exist`)
+        }
+      }
+    }
+    else resolve(template)
+  })
+}
+
+
+async function replaceObjects(template){
+  return new Promise((resolve, reject) => {
+    var objArray = [];
+    fs.promises.readdir('./toruf/objects')
+    .then((files)=>{
+      files.forEach((filename) => {
+        if(filename.includes(".json")){
+          let name = filename.split('.json')[0];
+          objArray.push(name);
         }
-        //replace objects
-        for(let obj of objArray){
+      })
+    }).then(() => { 
+      let newTemplate = template
+      for(let i=0;i<=objArray.length;i++){
+        if(i===objArray.length) {
+          resolve(newTemplate)
+          console.log(i)
+        }
+        else {
+          let obj = objArray[i]
           let tag = obj.toUpperCase();
-          if(originFile.includes(`<${tag}>`)){
-            let start_tag = 
-            `<!-- <${tag}> -->
-            `;
-            let end_tag = 
-            `
-            <!-- </${tag}> -->`;
-            let objTemplate = originFile.split(`<${tag}>`)[1].split(`</${tag}>`)[0];
+          if(newTemplate.includes(`<${tag}>`)){
+            console.log(tag)
+            let start_tag = `\n<!-- <${tag}> -->\n`;
+            let end_tag = `\n<!-- </${tag}> -->\n`;
+            let objTemplate = newTemplate.split(`<${tag}>`)[1].split(`</${tag}>`)[0];
             let htmlObj = "";
-            if(objTemplate.includes('{') && objTemplate.includes('}')){
+            if(objTemplate.includes('{{') && objTemplate.includes('}}')){
               let rawdata = fs.readFileSync(`./toruf/objects/${obj}.json`);
-            let db = JSON.parse(rawdata)
-            Object.keys(db).map(function(key, index){
-              let unit = db[key]
-              let temp = objTemplate;
-              //insert ID in parent div toruf-OBJ-ID
-              Object.keys(unit).map(function(key, index){
-                let temparr = temp.split(`{${key}}`)
-                if(temparr[0].trim().endsWith('>') || /^[a-zA-Z0-9]/.test(temparr[0].substr(temparr[0].length - 1))){
-                  let newU = `<span class="torufattr_${key}">${unit[key]}</span>`
-                  temp = temp.replace(`{${key}}`, newU);
-                }
-                else if(temparr[0].endsWith(`href="`)){
-                  let lastElem = temparr[0].split('<')[temparr[0].split('<').length - 1]
-                  if(lastElem.includes('class=')){
-                    let tempClassArr = temparr[0].split('class="')
-                    let tempClass = tempClassArr[tempClassArr.length - 1]
-                    temp = temp.replace(tempClass+`{${key}}`, `torufhref_${key} `+ tempClass+unit[key]);
-                  }
-                  else{
-                    let newClass = `class="torufhref_${key} href="${unit[key]}`
-                    temp = temp.replace(`href="{${key}}`, newClass);
-                    newTempArr = temparr[0].split()
+              let db = JSON.parse(rawdata)
+              Object.keys(db).map((key, index)=>{
+                let item = db[key]
+                let temp = objTemplate;
+                //insert ID in parent div toruf-OBJ-ID
+                Object.keys(item).map((key, index)=>{
+                  if(temp.includes(`{{${key}}}`)){
+                    temp = replaceHtmlAttr(temp, key, item[key])
                   }
-                }
-                else temp = temp.replace(`{${key}}`, unit[key]);
-              })
-              let initTemp = temp.split('>')[0]
-              temp = temp.replace(initTemp+'>', initTemp+` id="torufobj_${key}">`)
-              htmlObj+= temp;
-            });
-            let oldObj = `<${tag}>`+objTemplate+`</${tag}>`;
-            newHtmlObj = start_tag + htmlObj + end_tag; 
-            let newFile = originFile.replace(oldObj, newHtmlObj);
-            fs.writeFileSync(`site/${filename}`, newFile)
-            console.log('success');
-            return 'success';
+                })
+                let initTemp = temp.split('>')[0]
+                temp = temp.replace(initTemp+'>', initTemp+` id="torufobj_${key}">`)
+                htmlObj+= temp;
+              });
+              let oldObj = `<${tag}>`+objTemplate+`</${tag}>`;
+              newHtmlObj = start_tag + htmlObj + end_tag; 
+              newTemplate = newTemplate.replace(oldObj, newHtmlObj);
             }
           }
         }
       }
     })
-  }
+  })
+}
+
+function replaceHtmlAttr(temp, key, val){
+  let temparr = temp.split(`{{${key}}}`)
+  //console.log('length ', temparr.length)
+  for(let i=1;i<temparr.length;i++){
+    console.log(key)
+    let beginAttr = temparr[i-1].substr(0, temparr[i-1].lastIndexOf('"'));
+    let endAttr = temparr[i].split('"')[1];
+    let ending = temparr[i].split('"')[0];
+    let begining = temparr[i-1].substr(temparr[i-1].lastIndexOf('"')+1)
+    let newVal = `<span class="torufattr_${key}">${val}</span>`
+    //console.log(newVal)
+    //conditions to check if the {{}} is inserted inside an html element
+    if(endAttr && beginAttr){
+      if(endAttr.startsWith(' ') && beginAttr.endsWith('=') || endAttr.startsWith('>') && beginAttr.endsWith('=')){    
+        let tag = beginAttr.substr(beginAttr.lastIndexOf(' ')+1).split('=')[0]
+        let attrVal = begining+`{{${key}}}`+ending
+        if(attributeList[tag] || tag.startsWith("data-")){
+          console.log(tag)
+          //check if element already has a class item
+          let beginElem = ""
+          let lastElem = temparr[i-1].split('<')[temparr[i-1].split('<').length - 1]
+          if(!lastElem.includes(">")) beginElem = temparr[i].split(">")[0];
+          let elem = lastElem + beginElem;
+          if(elem.includes('class=')){
+            console.log('CLASSS ', tag)
+            let tempClassArr = temparr[i-1].split('class="')
+            let tempClass = tempClassArr[tempClassArr.length - 1]
+            //console.log(key, ' ', tempClass)
+            temp = temp.replace(tempClass+`{{${key}}}`, `toruf${tag}_${key} `+ tempClass+val);
+          }
+          else {
+            temp = temp.replace(`${tag}="${attrVal}"`, `class="toruf${tag}_${key}" ${tag}="${begining+val+ending}"`);
+            //console.log(newTemp)
+            return temp
+          } 
+        }
+        else throw new Error(`warning invalid html attribute ${tag}`);
+      }
+      else temp = temp.replace(`{{${key}}}`, newVal);
+    }
+    else temp = temp.replace(`{{${key}}}`, newVal);
+  } 
+  return temp
 }
+
+/* function recourseComponents(parentsArr, parent, component, callback){
+    var compArray = [];
+    fs.readdirSync('./toruf/components').forEach(function(filename){
+      if(filename.includes(".html")){
+        let name = filename.split('.html')[0];
+        compArray.push(name);
+      }
+    });
+    for(let comp of compArray){
+      let tag = '#'+comp.toUpperCase();
+      let start_tag = 
+      `<!-- ${tag} -->
+      `;
+      let end_tag = 
+      `
+      <!-- !${tag} -->`;
+      if(typeof component === 'String'){
+        if(component.includes(`<${tag}>`)){
+          if(parentsArr.includes(comp)){
+            throw new Error('warning: you cannot have a child component that calls its parent.')
+          }
+          else {
+            let newComp = fs.readFileSync(`./toruf/components/${comp}.html`)
+            let htmlComp = '<'+start_tag+'>' + newComp + '<'+end_tag+'>'; 
+            let newParent = component.replace(tag, htmlComp)
+            let newParentsArr = parentsArr.append(comp)
+            recourseComponents(newParentsArr, newParent, newComp, callback)
+          }
+        }
+      }
+      else if(parent.includes(tag)){
+        if(parentsArr.includes(tag)){
+          throw new Error('warning: you cannot have a child component that calls its parent.')
+        }
+        else {
+          let newComp = fs.readFileSync(`./toruf/components/${comp}.html`)
+          let htmlComp = '<'+start_tag+'>' + newComp + '<'+end_tag+'>'; 
+          let newParent = parent.replace(tag, htmlComp)
+          recourseComponents(parentsArr, newParent, newComp, callback)
+        }
+      }
+      else {
+        callback(null, parent)
+      }
+    }
+} */
\ No newline at end of file
diff --git a/lib/buildAll.js b/lib/buildAll.js
index 0b22f8e..e1cda2a 100644
--- a/lib/buildAll.js
+++ b/lib/buildAll.js
@@ -5,21 +5,22 @@ module.exports = function buildAllOutput(){
   var objArray = [];
   var compArray = [];
   //create an array of objects
-  fs.readdirSync('objects').forEach(function(filename){
+  fs.readdirSync('toruf/objects').forEach(function(filename){
     if(filename.includes(".json")){
       let name = filename.split('.json')[0];
       objArray.push(name);
     }
   });
   //create an array of components
-  fs.readdirSync('components').forEach(function(filename){
+  fs.readdirSync('toruf/components').forEach(function(filename){
     if(filename.includes(".html")){
       let name = filename.split('.html')[0];
       compArray.push(name);
     }
   });
   //read all templates
-  fs.readdirSync('templates').forEach(function(filename){
+  fs.readdirSync('toruf/templates').forEach(function(filename){
+    //console.log(filename)
     build(filename);
   });
 }
\ No newline at end of file
diff --git a/lib/copyDirs.js b/lib/copyDirs.js
new file mode 100644
index 0000000..e69de29
diff --git a/site/consultas.html b/site/consultas.html
new file mode 100644
index 0000000..975178d
--- /dev/null
+++ b/site/consultas.html
@@ -0,0 +1,155 @@
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>  
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="description" content="Las consultas online de Panama Consulta son la forma mas conveniente de obtener la informacion legal que necesites en Panama">
+    <meta name="author" content="torus-digital">
+    <title> Panama Consulta - Consultas </title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <link href="https://fonts.googleapis.com/css?family=PT+Sans|Roboto&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="css/consultas.css">
+    <link rel="stylesheet" href="css/index.css">
+  </head>
+  <body id="page-top" class="text-center text-md-left">
+    
+<!-- #NAV_HOVER -->
+<nav class="navbar navbar-expand-lg px-lg-5 bg-primary">
+  <a class="navbar-brand smooth-scroll" href="index.html">
+    <img src="img/panama-consulta-logo-light.svg" width="auto" height="50" alt="">
+  </a>
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+    <i class="fa fa-lg fa-bars text-light"></i>
+  </button>
+  <div class="collapse navbar-collapse text-light" id="navbarNav">
+    <ul class="navbar-nav ml-auto">
+      <li class="nav-item">
+        <a class="nav-link" href="servicios.html#sobre_nosotros">Sobre Nosotros</a>
+      </li>
+      <li class="nav-item dropdown">
+        <a class="nav-link d-block d-lg-none" href="servicios.html">
+          Servicios
+        </a>
+        <a class="nav-link dropdown-toggle d-none d-lg-block" href="#" id="navbarDropdown" onmouseover="displayServices()">
+          Servicios
+        </a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="consultas.html">Consultas</a>
+      </li>
+    </ul>
+  </div>
+</nav>
+<div class="col-12" id="navRow" style="display: none;" onmouseover="displayServices()" onmouseout="hideServices()">
+  <div class="nav-row px-5">
+    <div class="row round-row bg-translucent p-3">
+      <div class="col-md-6 col-lg-4">
+        <ul class="h4 text-light">Asesoria Legal</ul>
+        <li><a href="servicios.html#"><i class="fas fa-briefcase mr-2"></i>Corporativo</a></li>
+        <li><a href="servicios.html#"><i class="fas fa-ship mr-2"></i>Maritimo</a></li>
+        <li><a href="servicios.html#"><i class="fas fa-snowplow mr-2"></i>Minero</a></li>
+        <li><a href="servicios.html#"><i class="fas fa-gavel mr-2"></i>Fiscal</a></li>
+        <li><a href="servicios.html#"><i class="fas fa-exchange-alt mr-2"></i>Comercial</a></li>
+        <li><a href="servicios.html#"><i class="fas fa-plane-arrival mr-2"></i>Migratorio y Laboral</a></li>
+      </div>
+      <div class="col-md-6 col-lg-4">
+        <ul class="h4 text-light">Asesoria Financiera</ul>
+        <li><a href="servicios.html#"><i class="fas fa-money-check-alt mr-2"></i>Asesor Bancario</a></li>
+        <li><a href="servicios.html#"><i class="fas fa-building mr-2"></i>Asesoria empresarial</a></li>
+        <li><a href="servicios.html#"><i class="fas fa-gem mr-2"></i>Patrimonial</a></li>
+        <li><a href="servicios.html#"><i class="fas fa-chart-line mr-2"></i>Asesoria de inversion</a></li>
+      </div>
+      <div class="col-md-6 col-lg-4">
+        <ul class="h4 text-light">Otros Servicios</ul>
+        <li><a href="servicios.html#"><i class="fas fa-search mr-2"></i>Investigaciones</a></li>
+        <li><a href="servicios.html#"><i class="fas fa-balance-scale mr-2"></i>Mediacion y Conciliacion</a></li>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  function displayServices(){
+    var x = document.getElementById("navRow");
+    x.style.display = "block";
+  }
+  function hideServices(){
+    var x = document.getElementById("navRow");
+    x.style.display = "none";
+  }
+</script>
+<!-- !NAV_HOVER -->
+
+    
+<!-- #FORM_MODERN -->
+<div class="modern-container">
+  <div class="row">
+    <div class="col-lg-6 mr-lg-0 pr-lg-0">
+      <img src="img/consultas.jpg" class="modern-img" alt="">
+    </div>
+    <div class="col-lg-6 ml-lg-0 pl-lg-0">
+      <form class="modern-form">
+        <fieldset class='float-label-field'>
+          <label for="txtName">Name</label>
+          <input id="txtName" type='text'>
+        </fieldset>
+        <fieldset class='float-label-field'>
+          <label for="txtEmail" >Email</label>
+          <input id="txtEmail" type='text'>
+        </fieldset>
+        <fieldset class='float-label-field'>
+          <label for="txtPassword">Password</label>
+          <input id="txtPassword" type='password'>
+        </fieldset>
+        <fieldset class='float-label-field'>
+          <label for="txtConfirmPassword">Confirm Password</label>
+          <input id="txtConfirmPassword" type='password'>
+        </fieldset>
+        <fieldset class='float-label-field'>
+          <label for="cars">Options</label>
+          <select id="cars">
+            <option selected disabled></option>
+            <option value="volvo">Volvo</option>
+            <option value="saab">Saab</option>
+            <option value="mercedes">Mercedes</option>
+            <option value="audi">Audi</option>
+          </select>
+        </fieldset>
+        <fieldset class='float-label-field'>
+          <label for="message">Message</label>
+          <textarea id="message"></textarea>
+        </fieldset>
+        <button class="modern-btn btn-success">Send</button>
+        </form>
+    </div>
+  </div>
+</div>
+<!-- !FORM_MODERN -->
+
+    
+<!-- #STATIC_SECTION_STANDARD -->
+<section class="bg-light">
+  <div class="container text-center">
+    <h2 class="text-alternate h3 pb-2">Una forma mas rapida de obtener tu informacion legal</h2>
+    <p class="text-left">Estar infromado legalmente es un requerimiento basico para poder tomar buenas decisiones, pero el proceso tradicional usualmente resulta bastante tedioso para el cliente. Panama Consulta es un prodcuto de Faragon & Consulting que se creo con el proposito de poder conseguir la informacion legal que el cliente necesite con la minima interaccion posible. Nuestra plataforma online en conjunto con nuestro equipo de profesionales con altos estandares de cumplimiento nos permiten responder tu solicitud en menos de 24 horas a la comodidad de tu correo electronico.
+  </div>
+</section>
+<!-- !STATIC_SECTION_STANDARD -->
+
+    
+<!-- #FOOTER_STANDARD -->
+<footer class="bg-secondary py-md-3">
+  <div class="container">
+    <div class="row text-primary">
+      <div class="col-6">yourdomain ©</div>
+      <div class="col-6 text-md-right">powered by <a href="https://bootlib.com">Bootlib</a></div>
+    </div>
+  </div>
+</footer>
+<!-- !FOOTER_STANDARD -->
+
+    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>
+    <script src="js/form_modern.js"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/site/css/consultas.css b/site/css/consultas.css
new file mode 100644
index 0000000..3923dc2
--- /dev/null
+++ b/site/css/consultas.css
@@ -0,0 +1,119 @@
+.navbar-toggler-icon {
+  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://ww…p='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
+}/*absolute center*/
+.centered {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.modern-container {padding: 5% 10%;}
+
+@media(min-width: 992px){
+  .modern-container img {border-radius: 10px 0% 0px 10px;}
+  .modern-container form {border-radius: 0% 10px 10px 0%;}
+}
+@media(max-width: 992px){
+  .modern-container img {border-radius: 10px 10px 0px 0px;}
+  .modern-container form {border-radius: 0px 0px 10px 10px;}
+}
+.modern-container img { 
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+}
+body {
+  font-family: "Open Sans";
+  background-color: #efefef;
+}
+
+.modern-form {
+  width: 100%;
+  background-color:  #fff;
+  border: solid 1px #ccc;
+  padding: 8%;
+}
+.float-label-field {
+  border: none;
+  outline: none;
+  position: relative;
+  margin: 0 0 20px 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+.float-label-field.focus label {
+  color: #218838;;
+}
+.float-label-field input, 
+.float-label-field select, 
+.float-label-field textarea {
+  border: none;
+  outline: none;
+  padding: 5px 5px 8px 0px;
+  width: 100%;
+  font-size: 18px;
+  border-bottom: solid 1px #efefef;
+}
+.float-label-field.focus input, 
+.float-label-field.focus select, 
+.float-label-field.focus textarea {
+  border-bottom: solid 1px #218838;;
+}
+
+.float-label-field label {
+  opacity: 0.5;
+  position: absolute;
+  top: 10px;
+  left: 0px;
+  transition: all 0.2s ease;
+  font-size: 18px;
+}
+
+.float-label-field.float label {
+  opacity: 1;
+  top: -10px;
+  font-size: 60%;
+  transition: all 0.2s ease;
+  font-weight: bold;
+}
+.float-label-field select {
+  background-color: #fff;
+  margin-top: 3%;
+}
+
+select option {
+  background: transparent !important;
+  border: none !important;
+}
+
+.modern-btn {
+  padding-top: 2%;
+  padding-bottom: 2%;
+  padding-left: 4%;
+  padding-right: 4%;
+  border: none !important;
+  border-radius: 7%;
+}
+
+input:after {    
+  background: none repeat scroll 0 0 transparent;
+  bottom: 0;
+  content: "";
+  display: block;
+  height: 2px;
+  left: 50%;
+  position: absolute;
+  background: #fff;
+  transition: width 0.4s ease 0s, left 0.4s ease 0s;
+  width: 0;
+}
+a:hover:after { 
+  width: 100%; 
+  left: 0; 
+}
+@media screen and (max-height: 300px) {
+	ul {
+		margin-top: 40px;
+	}
+}
\ No newline at end of file
diff --git a/site/css/flip-card.css b/site/css/flip-card.css
deleted file mode 100644
index 251ba46..0000000
--- a/site/css/flip-card.css
+++ /dev/null
@@ -1,43 +0,0 @@
-/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
-.flip-card {
-  background-color: transparent;
-  height: 20rem;
-  perspective: 1000px; /* Remove this if you don't want the 3D effect */
-}
-
-/* This container is needed to position the front and back side */
-.flip-card-inner {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  text-align: center;
-  transition: transform 0.8s;
-  transform-style: preserve-3d;
-}
-
-/* Do an horizontal flip when you move the mouse over the flip box container */
-.flip-card:hover .flip-card-inner {
-  transform: rotateY(180deg);
-}
-
-/* Position the front and back side */
-.flip-card-front, .flip-card-back {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  -webkit-backface-visibility: hidden; /* Safari */
-  backface-visibility: hidden;
-}
-
-/* Style the front side (fallback if image is missing) */
-.flip-card-front {
-  background-color: hsla(0, 0%, 90%, .4);
-  color: black;
-}
-
-/* Style the back side */
-.flip-card-back {
-  background-color: hsla(0, 0%, 80%, .5);
-  color: white;
-  transform: rotateY(180deg);
-}
\ No newline at end of file
diff --git a/site/css/index.css b/site/css/index.css
index 7561e66..71a0706 100644
--- a/site/css/index.css
+++ b/site/css/index.css
@@ -1,58 +1,131 @@
-html,body {
-    width: 100%;
-    margin: 0px;
-    padding: 0px;
-    background-color: #160723;
-    background-image: linear-gradient(to top, hsla(265, 71%, 43%, .1), hsla(34, 100%, 61%, .2)); 
+html, body{
+  font-family: 'Roboto', sans-serif;
+  font-size: 14pt;
+  width: 100%;
+  overflow-x: hidden;
 }
-
-.bg-main {
-    background-color: #160723; 
+h1,h2,h3,h4,h5,h6,nav ul li{
+  font-family: 'PT Sans', sans-serif;
 }
+.bg-translucent {background-color:	hsla(234, 80%, 28%, .7)}
+.bg-primary {background-color: #0E197F !important}
+.bg-secondary {background-color: #DBDBDF !important}
+.bg-alternate {background-color: #545F66 !important}
+.bg-light {background-color: #FCFAFA !important}
+.text-primary {color: #0E197F !important}
+.text-secondary {color: #DBDBDF !important}
+.text-alternate {color: #545F66 !important}
+.text-light {color: #FCFAFA !important}
 
-.text-main {
-    color: #160723;
+.nav-link, .nav-row a{
+  color: #FCFAFA !important;
 }
-
-
-.padding-text
-{padding-top: 20% }
-
-section, header {
-    overflow-x: hidden;
+.nav-row{
+  background: transparent;
+  width: 100%;
+  position: absolute;
+  z-index: 1;
+}
+.nav-row li{
+  margin-left: 10%;
+  list-style-type: none;
+}
+.round-row {
+  border-radius: 0px 0px 7px 7px;
 }
 
 header {
-    background: url('../img/header.png');
-    background-size: cover;
-    height: 20rem;
+  height: 75vh;
+  background-image: url('../img/drone-city4.jpg');
+  background-size: cover;
+  position: relative;
 }
-
-.bg-sun {
-    background-image: linear-gradient(to top, hsla(265, 71%, 43%, .1), hsla(34, 100%, 61%, .1)); 
+.main-title-padding {
+  padding-top: 15%;
+  padding-bottom: 5%;
 }
+.btn-lg {padding: 1rem 2rem;}
 
-.main-title {
-    padding-top: 7rem;
-    font-size: 3.5em;
+section {
+  padding-top: 3%;
+  padding-bottom: 3%;
+}
+.background-img {
+  background-image: url('../img/drone-city.jpg');
+  background-size: cover;
+  position: relative;
+}
+.transparency {
+  background-color: rgba(248, 247, 216, 0.7);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
 }
 
-.tool-logo {
-    max-height:12rem;
-    max-width:12rem;
-    padding-top: 2rem;
-    padding-bottom: 5%;
+.smartphone {
+  position: relative;
+  width: 34vh;
+  min-height: 300px;
+  min-width: 169px;
+  height: 60vh;
+  margin: auto;
+  border: 16px black solid;
+  border-top-width: 60px;
+  border-bottom-width: 60px;
+  border-radius: 24px;
+}
+.smartphone:before {
+  content: '';
+  display: block;
+  width: 60px;
+  height: 5px;
+  position: absolute;
+  top: -30px;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: #333;
+  border-radius: 10px;
+}
+.smartphone:after {
+  content: '';
+  display: block;
+  width: 35px;
+  height: 35px;
+  position: absolute;
+  left: 50%;
+  bottom: -65px;
+  transform: translate(-50%, -50%);
+  background: #333;
+  border-radius: 50%;
+}
+.smartphone .content {
+  width: 100%;
+  height: 100%;
+  background: white;
+}
+.screen-img {
+  width:100%;border:none;height:100%
 }
 
-.tool-title{
-    padding-top: 1rem;
-    color: #efefef;
+.usage-instructions li{
+  font-size: 17pt;
+  margin-top: 2px;
+}
+.usage-instructions ol{
+  margin: 0px !important;
 }
 
-.tool-text {
-    color: #efefef;
+.circle-img {
+  border-radius: 100%;
+  width: 12rem;
+  height: 12rem;
+  box-shadow: 0 5px 5px 0 #adb5bd;
 }
 
-.tool-element {
-    padding-bottom: 5%;
+.circle-img img{
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
 }
\ No newline at end of file
diff --git a/site/css/servicios.css b/site/css/servicios.css
new file mode 100644
index 0000000..ae74875
--- /dev/null
+++ b/site/css/servicios.css
@@ -0,0 +1,16 @@
+html, body{
+  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 24px; font-style: normal; font-variant: normal;
+}
+.bg-primary {background-color: #c6c6c6 !important}
+.bg-secondary {background-color: #ddd !important}
+.bg-alternate {background-color: #a8a8a8 !important}
+.text-primary {color: #c6c6c6 !important}
+.text-secondary {color: #ddd !important}
+.text-alternate {color: #a8a8a8 !important}
+
+.navbar-toggler-icon {
+  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://ww…p='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
+}
+section {
+  min-height: 50vh;
+}
diff --git a/site/img/.DS_Store b/site/img/.DS_Store
deleted file mode 100644
index ce30983..0000000
Binary files a/site/img/.DS_Store and /dev/null differ
diff --git a/site/img/Inventory-logo.png b/site/img/Inventory-logo.png
deleted file mode 100644
index 375bfff..0000000
Binary files a/site/img/Inventory-logo.png and /dev/null differ
diff --git a/site/img/RMS-logo.png b/site/img/RMS-logo.png
deleted file mode 100644
index 4659896..0000000
Binary files a/site/img/RMS-logo.png and /dev/null differ
diff --git a/site/img/accounting-logo.png b/site/img/accounting-logo.png
deleted file mode 100644
index f57ccef..0000000
Binary files a/site/img/accounting-logo.png and /dev/null differ
diff --git a/site/img/arjan-logo.svg b/site/img/arjan-logo.svg
deleted file mode 100644
index d0db914..0000000
--- a/site/img/arjan-logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160.68 137.7"><defs><style>.cls-1{fill:#c69c6d;}.cls-2,.cls-3{fill:#fff;}.cls-3{stroke:#020000;stroke-miterlimit:10;stroke-width:2px;}.cls-4{fill:#e0b892;}.cls-5{fill:#070000;}</style></defs><title>arjan-logo_3</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M80.82,132.47c17.47,0,33.06,7.45,46.76-7.66,10.65-11.74,18.42-28.26,15.9-44.14-2.6-16.41-3.49-33.58.79-49.61.93-3.48,2.4-15.59,4.54-17.86,3.6-3.83,15.62.52,10.71-5.77-2.57-3.3-17-8-21.25-7.38-7.83,1.09-9,11.48-15.7,14-5.84,2.15-17.16-3.11-23.62-4.15-9.33-1.5-18.36-2.22-27.78-1.2-8.39.91-16.59,3.82-24.85,4.75-8.8,1-8.92-2.07-16.07-7.79C24.82,1.29,23,.89,16.93,2.65,14.81,3.27-.6,9.51,0,12.07s10.95-.52,13.5,2.62c1.55,1.9,4.29,15.83,5,18.84,3.82,16.57,1.16,33.51-.77,50.1-1.71,14.7,6.91,31,16.74,41.68C47.9,139.85,63.87,132.47,80.82,132.47Z"/><path class="cls-2" d="M118,115c2-15.11-11.34-22.41-18.86-33.73-9.76-14.69,2.93-24.9.52-40.07-1.28-8.1-6.43-14.9-8.11-22.87-.8-3.79.14-5.82-2.75-7.69-1.76-1.14-8.56-3.44-10.41-2-4,3-2,1-4.34,9.52a90.19,90.19,0,0,1-3.41,9.75c-3.21,8-6.32,14.88-4.4,23.61,1.41,6.4,5.7,12.33,4.94,19.17C70.35,77.81,64.5,83.93,60,89.16,49.59,101.38,45,107.61,49.45,124c2.62,9.71,3.17,13.39,13.88,12.91,8.07-.36,15.56-2.87,23.73-2.22,5.92.47,15.82,4.68,21.56,2.17C115.17,134,117.07,121.75,118,115Z"/><path class="cls-3" d="M37.4,57.15c9.18-8.61,17.68-6.43,23.48,4.61a1,1,0,0,1-.39,1.3c-7.2,3.85-16.24.06-22.93-4.17A1.11,1.11,0,0,1,37.4,57.15Z"/><path class="cls-4" d="M24.62,24.53c-1.4-6.4-7-17.86-.63-16.58a71.89,71.89,0,0,1,10.45,9.24.83.83,0,0,1-.13,1.18L25.95,25A.83.83,0,0,1,24.62,24.53Z"/><path class="cls-5" d="M89.8,99.63c-2.3-1.32-5.54-1.48-8.82-1.36h-.32c-3.28-.11-6.52,0-8.82,1.36-8.7,5-4.57,8.85,1.53,12.14,2.82,1.52,5.09,2.51,7.29,2.67H81c2.2-.16,4.47-1.14,7.29-2.67C94.37,108.48,98.49,104.6,89.8,99.63Z"/><path class="cls-4" d="M141.22,24.53c1.4-6.4,1.69-10.21.63-16.58a.83.83,0,0,0-1.4-.46,117.87,117.87,0,0,0-9.06,9.7.83.83,0,0,0,.13,1.18L139.89,25A.83.83,0,0,0,141.22,24.53Z"/><circle class="cls-5" cx="49.37" cy="57.95" r="5.69"/><path class="cls-3" d="M126.86,57.41C117.68,48.8,109.17,51,103.38,62a1,1,0,0,0,.39,1.3c7.2,3.85,16.24.06,22.93-4.17A1.11,1.11,0,0,0,126.86,57.41Z"/><circle class="cls-5" cx="114.74" cy="58.21" r="5.69"/></g></g></svg>
\ No newline at end of file
diff --git a/site/img/channel-logo.png b/site/img/channel-logo.png
deleted file mode 100644
index 6f031ca..0000000
Binary files a/site/img/channel-logo.png and /dev/null differ
diff --git a/site/img/consultas.jpg b/site/img/consultas.jpg
new file mode 100644
index 0000000..25ca21d
Binary files /dev/null and b/site/img/consultas.jpg differ
diff --git a/site/img/crm-logo.png b/site/img/crm-logo.png
deleted file mode 100644
index 1b7de0b..0000000
Binary files a/site/img/crm-logo.png and /dev/null differ
diff --git a/site/img/cubera-logo.png b/site/img/cubera-logo.png
deleted file mode 100644
index abe3833..0000000
Binary files a/site/img/cubera-logo.png and /dev/null differ
diff --git a/site/img/cubera-logo_1.svg b/site/img/cubera-logo_1.svg
deleted file mode 100644
index c076d25..0000000
--- a/site/img/cubera-logo_1.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 209 185"><defs><style>.cls-1{fill:none;}.cls-2{font-size:34.78px;font-family:MyriadPro-Regular, Myriad Pro;}.cls-3{letter-spacing:-0.01em;}.cls-4{letter-spacing:-0.01em;}.cls-5{letter-spacing:0em;}.cls-6{fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" x1="16.92" y1="90.55" x2="191.2" y2="90.55" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#6120bc"/><stop offset="1" stop-color="#ffab5f"/></linearGradient></defs><title>cubera-logo_1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><rect class="cls-1" width="209" height="185"/><text class="cls-2" transform="translate(15.67 102.71)"><tspan class="cls-3">C</tspan><tspan x="19.79" y="0">ool </tspan><tspan class="cls-4" x="73.56" y="0">C</tspan><tspan x="93.31" y="0">ube</tspan><tspan class="cls-5" x="149.69" y="0">r</tspan><tspan x="160.89" y="0">a</tspan></text><path class="cls-6" d="M34.69,101.94a15,15,0,0,1-6.19,1.11c-6.61,0-11.58-4.17-11.58-11.86,0-7.34,5-12.31,12.24-12.31a12.57,12.57,0,0,1,5.56,1L34,82.4a11,11,0,0,0-4.73-1c-5.49,0-9.15,3.51-9.15,9.67,0,5.74,3.3,9.42,9,9.42a12.11,12.11,0,0,0,4.94-1Z"/><path class="cls-6" d="M53.23,94.15c0,6.22-4.31,8.94-8.38,8.94-4.56,0-8.07-3.34-8.07-8.66,0-5.63,3.69-8.94,8.35-8.94C50,85.49,53.23,89,53.23,94.15Zm-13.35.17c0,3.69,2.12,6.47,5.11,6.47S50.1,98,50.1,94.26c0-2.85-1.43-6.47-5-6.47S39.88,91.13,39.88,94.33Z"/><path class="cls-6" d="M72.33,94.15c0,6.22-4.31,8.94-8.38,8.94-4.56,0-8.07-3.34-8.07-8.66,0-5.63,3.69-8.94,8.35-8.94C69.06,85.49,72.33,89,72.33,94.15ZM59,94.33c0,3.69,2.12,6.47,5.11,6.47S69.2,98,69.2,94.26c0-2.85-1.43-6.47-5-6.47S59,91.13,59,94.33Z"/><path class="cls-6" d="M76.19,78h3.06v24.69H76.19Z"/><path class="cls-6" d="M108.25,101.94a15,15,0,0,1-6.19,1.11c-6.61,0-11.58-4.17-11.58-11.86,0-7.34,5-12.31,12.24-12.31a12.57,12.57,0,0,1,5.56,1l-.73,2.47a11,11,0,0,0-4.73-1c-5.49,0-9.15,3.51-9.15,9.67,0,5.74,3.3,9.42,9,9.42a12.11,12.11,0,0,0,4.94-1Z"/><path class="cls-6" d="M125.61,98.12c0,1.74,0,3.27.14,4.59H123l-.17-2.75h-.07a6.33,6.33,0,0,1-5.56,3.13c-2.64,0-5.81-1.46-5.81-7.37V85.88h3.06V95.2c0,3.2,1,5.36,3.76,5.36a4.42,4.42,0,0,0,4-2.78,4.47,4.47,0,0,0,.28-1.56V85.88h3.06Z"/><path class="cls-6" d="M130.55,102.71c.07-1.15.14-2.85.14-4.35V78h3V88.59h.07a6.27,6.27,0,0,1,5.74-3.1c4.17,0,7.13,3.48,7.09,8.59,0,6-3.79,9-7.55,9a6,6,0,0,1-5.63-3.17h-.1l-.14,2.78ZM133.71,96a5.75,5.75,0,0,0,.14,1.11,4.72,4.72,0,0,0,4.59,3.58c3.2,0,5.11-2.61,5.11-6.47,0-3.37-1.74-6.26-5-6.26a4.88,4.88,0,0,0-4.66,3.76,6,6,0,0,0-.17,1.25Z"/><path class="cls-6" d="M152.18,94.85c.07,4.14,2.71,5.84,5.77,5.84a11.06,11.06,0,0,0,4.66-.87l.52,2.19a13.64,13.64,0,0,1-5.6,1c-5.18,0-8.28-3.41-8.28-8.49s3-9.08,7.89-9.08c5.5,0,7,4.83,7,7.93a11.69,11.69,0,0,1-.1,1.43Zm9-2.19c0-1.95-.8-5-4.24-5-3.09,0-4.45,2.85-4.69,5Z"/><path class="cls-6" d="M167.9,91.13c0-2,0-3.69-.14-5.25h2.68l.1,3.3h.14a5.05,5.05,0,0,1,4.66-3.69,3.32,3.32,0,0,1,.87.1v2.89a4.6,4.6,0,0,0-1-.1c-2.16,0-3.69,1.63-4.1,3.93a8.64,8.64,0,0,0-.14,1.43v9h-3Z"/><path class="cls-6" d="M188.42,102.71l-.24-2.12h-.1a6.27,6.27,0,0,1-5.15,2.5,4.8,4.8,0,0,1-5.15-4.83c0-4.07,3.62-6.29,10.12-6.26v-.35c0-1.39-.38-3.89-3.83-3.89A8.39,8.39,0,0,0,179.69,89l-.7-2a10.44,10.44,0,0,1,5.53-1.5c5.15,0,6.4,3.51,6.4,6.89v6.29a23.66,23.66,0,0,0,.28,4ZM188,94.12c-3.34-.07-7.13.52-7.13,3.79a2.71,2.71,0,0,0,2.89,2.92A4.19,4.19,0,0,0,187.8,98a3.19,3.19,0,0,0,.17-1Z"/></g></g></svg>
\ No newline at end of file
diff --git a/site/img/cubera-sq-logo.png b/site/img/cubera-sq-logo.png
deleted file mode 100644
index b4949b3..0000000
Binary files a/site/img/cubera-sq-logo.png and /dev/null differ
diff --git a/site/img/cubera-sq-logo.svg b/site/img/cubera-sq-logo.svg
deleted file mode 100644
index 97be6b7..0000000
--- a/site/img/cubera-sq-logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 773.47 599"><defs><style>.cls-1{fill:#160723;}.cls-2{font-size:173px;font-family:MyriadPro-Regular, Myriad Pro;}.cls-3{letter-spacing:-0.01em;}.cls-4{letter-spacing:0em;}.cls-5{letter-spacing:-0.01em;}.cls-6{letter-spacing:0em;}.cls-7{fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" x1="134.07" y1="296.23" x2="635.07" y2="296.23" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#6120bc"/><stop offset="1" stop-color="#ffab5f"/></linearGradient></defs><title>cuber-sq-logo</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><rect class="cls-1" width="773.47" height="599"/><text class="cls-2" transform="translate(203.79 252.89)"><tspan class="cls-3">C<tspan class="cls-4" x="98.44" y="0">ool </tspan></tspan><tspan class="cls-5" x="-75.95" y="207.6">C</tspan><tspan x="22.32" y="207.6">ube</tspan><tspan class="cls-6" x="302.74" y="207.6">r</tspan><tspan x="358.45" y="207.6">a</tspan></text><path class="cls-7" d="M298.42,249.09c-5.54,2.77-16.61,5.54-30.79,5.54-32.87,0-57.61-20.76-57.61-59,0-36.5,24.74-61.24,60.9-61.24,14.53,0,23.7,3.11,27.68,5.19L295,151.86c-5.71-2.77-13.84-4.84-23.53-4.84-27.33,0-45.5,17.47-45.5,48.1,0,28.55,16.44,46.88,44.81,46.88,9.17,0,18.51-1.9,24.57-4.84Z"/><path class="cls-7" d="M390.63,210.33c0,31-21.45,44.46-41.69,44.46-22.66,0-40.14-16.61-40.14-43.08,0-28,18.34-44.46,41.52-44.46C374.37,167.26,390.63,184.73,390.63,210.33Zm-66.43.86c0,18.34,10.55,32.18,25.43,32.18,14.53,0,25.43-13.67,25.43-32.52,0-14.19-7.09-32.18-25.09-32.18S324.2,195.28,324.2,211.2Z"/><path class="cls-7" d="M485.61,210.33c0,31-21.45,44.46-41.69,44.46-22.66,0-40.14-16.61-40.14-43.08,0-28,18.34-44.46,41.52-44.46C469.34,167.26,485.61,184.73,485.61,210.33Zm-66.43.86c0,18.34,10.55,32.18,25.43,32.18,14.53,0,25.43-13.67,25.43-32.52,0-14.19-7.09-32.18-25.09-32.18S419.17,195.28,419.17,211.2Z"/><path class="cls-7" d="M504.8,130.06H520V252.89H504.8Z"/><path class="cls-7" d="M222.48,456.69c-5.54,2.77-16.61,5.54-30.79,5.54-32.87,0-57.61-20.76-57.61-59,0-36.5,24.74-61.24,60.9-61.24,14.53,0,23.7,3.11,27.68,5.19L219,359.46c-5.71-2.77-13.84-4.84-23.53-4.84-27.33,0-45.5,17.47-45.5,48.1,0,28.55,16.44,46.88,44.81,46.88,9.17,0,18.51-1.9,24.57-4.84Z"/><path class="cls-7" d="M308.8,437.65c0,8.65.17,16.26.69,22.84H296l-.87-13.67h-.35a31.51,31.51,0,0,1-27.68,15.57c-13.15,0-28.89-7.27-28.89-36.68v-49h15.22v46.37c0,15.92,4.84,26.64,18.68,26.64,10.21,0,17.3-7.09,20.07-13.84a22.28,22.28,0,0,0,1.38-7.79V376.76H308.8Z"/><path class="cls-7" d="M333.36,460.49c.35-5.71.69-14.19.69-21.63V337.66h15.05v52.59h.35c5.36-9.34,15.05-15.4,28.55-15.4,20.76,0,35.47,17.3,35.29,42.73,0,29.93-18.86,44.81-37.54,44.81-12.11,0-21.8-4.67-28-15.74h-.52l-.69,13.84Zm15.74-33.56a28.46,28.46,0,0,0,.69,5.54c2.94,10.55,11.76,17.82,22.84,17.82,15.92,0,25.43-13,25.43-32.18,0-16.78-8.65-31.14-24.91-31.14-10.38,0-20.07,7.09-23.18,18.68a30,30,0,0,0-.87,6.23Z"/><path class="cls-7" d="M441,421.39c.35,20.59,13.49,29.06,28.72,29.06,10.9,0,17.47-1.9,23.18-4.33l2.59,10.9c-5.36,2.42-14.53,5.19-27.85,5.19-25.78,0-41.17-17-41.17-42.21s14.88-45.15,39.27-45.15c27.33,0,34.6,24,34.6,39.44a57.45,57.45,0,0,1-.52,7.09Zm44.63-10.9c.17-9.69-4-24.74-21.11-24.74-15.4,0-22.14,14.19-23.36,24.74Z"/><path class="cls-7" d="M519.16,402.88c0-9.86-.17-18.34-.69-26.12h13.32l.52,16.44H533c3.81-11.25,13-18.34,23.18-18.34a16.48,16.48,0,0,1,4.33.52v14.36a22.9,22.9,0,0,0-5.19-.52c-10.73,0-18.34,8.13-20.41,19.55a42.78,42.78,0,0,0-.69,7.09v44.63H519.16Z"/><path class="cls-7" d="M621.23,460.49,620,449.94h-.52c-4.67,6.57-13.67,12.46-25.6,12.46-17,0-25.61-11.94-25.61-24,0-20.24,18-31.31,50.34-31.14v-1.73c0-6.92-1.9-19.38-19-19.38a41.72,41.72,0,0,0-21.8,6.23l-3.46-10c6.92-4.5,17-7.44,27.51-7.44,25.6,0,31.83,17.47,31.83,34.25v31.31a117.89,117.89,0,0,0,1.38,20.07ZM619,417.76c-16.61-.35-35.47,2.6-35.47,18.86,0,9.86,6.57,14.53,14.36,14.53a20.83,20.83,0,0,0,20.24-14,15.88,15.88,0,0,0,.87-4.84Z"/></g></g></svg>
\ No newline at end of file
diff --git a/site/img/dorne-city3.jpg b/site/img/dorne-city3.jpg
new file mode 100644
index 0000000..8f9dd79
Binary files /dev/null and b/site/img/dorne-city3.jpg differ
diff --git a/site/img/drone-city.jpg b/site/img/drone-city.jpg
new file mode 100644
index 0000000..22dca36
Binary files /dev/null and b/site/img/drone-city.jpg differ
diff --git a/site/img/drone-city2.jpg b/site/img/drone-city2.jpg
new file mode 100644
index 0000000..1932361
Binary files /dev/null and b/site/img/drone-city2.jpg differ
diff --git a/site/img/drone-city4.jpg b/site/img/drone-city4.jpg
new file mode 100644
index 0000000..38a9285
Binary files /dev/null and b/site/img/drone-city4.jpg differ
diff --git a/site/img/header.png b/site/img/header.png
deleted file mode 100644
index 15fe220..0000000
Binary files a/site/img/header.png and /dev/null differ
diff --git a/site/img/helicopter-panama-city.jpg b/site/img/helicopter-panama-city.jpg
new file mode 100755
index 0000000..1a2fcaf
Binary files /dev/null and b/site/img/helicopter-panama-city.jpg differ
diff --git a/site/img/img.svg b/site/img/img.svg
new file mode 100644
index 0000000..981477d
--- /dev/null
+++ b/site/img/img.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 594 432">
+  <defs>
+    <style>
+      .cls-2{fill:#a8a8a8}
+    </style>
+  </defs>
+  <g id="Layer_2" data-name="Layer 2">
+    <g id="Layer_1-2" data-name="Layer 1">
+      <path fill="#969696" d="M0 0h594v432H0z"/>
+      <path class="cls-2" d="M281.4 216L0 11.3v409.4L281.4 216zM312.6 216L594 420.7V11.3L312.6 216zM15.6 0L297 204.7 578.4 0H15.6zM297 227.3L15.6 432h562.8L297 227.3z"/>
+    </g>
+  </g>
+</svg>
diff --git a/site/img/logo.svg b/site/img/logo.svg
new file mode 100644
index 0000000..476b742
--- /dev/null
+++ b/site/img/logo.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96.3 85.1">
+  <defs>
+    <style>
+      .cls-2{fill:#a8a8a8}
+    </style>
+  </defs>
+  <g id="Layer_2" data-name="Layer 2">
+    <g id="Layer_1-2" data-name="Layer 1">
+      <path fill="#969696" d="M0 0h96.3v85.1H0z"/>
+      <path class="cls-2" d="M45.6 42.6L0 2.2V83l45.6-40.3zM50.7 42.6l45.6 40.3V2.2L50.7 42.6zM2.5 0l45.7 40.3L93.8 0H2.5zM48.2 44.8L2.5 85h91.3L48.2 44.8z"/>
+    </g>
+  </g>
+</svg>
diff --git a/site/img/panama-consulta-logo-light.svg b/site/img/panama-consulta-logo-light.svg
new file mode 100644
index 0000000..4ba184e
--- /dev/null
+++ b/site/img/panama-consulta-logo-light.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 223 103.24"><defs><style>.cls-1{font-size:37.43px;font-family:PTSans-BoldItalic, PT Sans;font-style:italic;letter-spacing:0.01em;}.cls-1,.cls-6,.cls-8{fill:#fcfafa;}.cls-1,.cls-6{font-weight:700;}.cls-2{letter-spacing:0.04em;}.cls-3{letter-spacing:-0.09em;}.cls-4{letter-spacing:-0.04em;}.cls-5{letter-spacing:-0.01em;}.cls-6{font-size:42.45px;font-family:PTSans-Bold, PT Sans;letter-spacing:0.01em;}.cls-7{letter-spacing:0.04em;}</style></defs><title>panama-consulta-logo-light</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_3" data-name="Layer 3"><text class="cls-1" transform="translate(51.35 93.02)">C<tspan class="cls-2" x="20.29" y="0">ONSU</tspan><tspan class="cls-3" x="115.01" y="0">L</tspan><tspan class="cls-4" x="130.25" y="0">T</tspan><tspan class="cls-5" x="149.26" y="0">A</tspan></text><text class="cls-6" transform="translate(66.23 55.29) scale(1.03 1)">P<tspan class="cls-7" x="24.58" y="0">anama</tspan></text><circle class="cls-8" cx="32.91" cy="15.31" r="15.31"/><circle class="cls-8" cx="46.6" cy="42.03" r="11.4"/><circle class="cls-8" cx="13.2" cy="37.96" r="13.2"/><polygon class="cls-8" points="33.56 14.66 33.24 93.19 17.6 93.19 25.42 87.33 26.07 82.76 28.67 58.65 17.6 43.66 29.33 50.83 33.56 14.66"/><polygon class="cls-8" points="35.84 93.19 35.84 57.35 41.71 50.18 41.71 59.3 41.71 93.19 35.84 93.19"/></g></g></svg>
\ No newline at end of file
diff --git a/site/img/panama-consulta-logo.svg b/site/img/panama-consulta-logo.svg
new file mode 100644
index 0000000..b25408e
--- /dev/null
+++ b/site/img/panama-consulta-logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 223 103.24"><defs><style>.cls-1{font-size:37.43px;font-family:PTSans-BoldItalic, PT Sans;font-style:italic;letter-spacing:0.01em;}.cls-1,.cls-6,.cls-8{fill:#0e197f;}.cls-1,.cls-6{font-weight:700;}.cls-2{letter-spacing:0.04em;}.cls-3{letter-spacing:-0.09em;}.cls-4{letter-spacing:-0.04em;}.cls-5{letter-spacing:-0.01em;}.cls-6{font-size:42.45px;font-family:PTSans-Bold, PT Sans;letter-spacing:0.01em;}.cls-7{letter-spacing:0.04em;}</style></defs><title>panama-consulta-logo</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_3" data-name="Layer 3"><text class="cls-1" transform="translate(51.35 93.02)">C<tspan class="cls-2" x="20.29" y="0">ONSU</tspan><tspan class="cls-3" x="115.01" y="0">L</tspan><tspan class="cls-4" x="130.25" y="0">T</tspan><tspan class="cls-5" x="149.26" y="0">A</tspan></text><text class="cls-6" transform="translate(66.23 55.29) scale(1.03 1)">P<tspan class="cls-7" x="24.58" y="0">anama</tspan></text><circle class="cls-8" cx="32.91" cy="15.31" r="15.31"/><circle class="cls-8" cx="46.6" cy="42.03" r="11.4"/><circle class="cls-8" cx="13.2" cy="37.96" r="13.2"/><polygon class="cls-8" points="33.56 14.66 33.24 93.19 17.6 93.19 25.42 87.33 26.07 82.76 28.67 58.65 17.6 43.66 29.33 50.83 33.56 14.66"/><polygon class="cls-8" points="35.84 93.19 35.84 57.35 41.71 50.18 41.71 59.3 41.71 93.19 35.84 93.19"/></g></g></svg>
\ No newline at end of file
diff --git a/site/img/sef-logo.svg b/site/img/sef-logo.svg
deleted file mode 100644
index 35d4919..0000000
--- a/site/img/sef-logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 290 236.69"><defs><style>.cls-1{fill:url(#linear-gradient);}.cls-2{fill:#f9f8e5;}.cls-3{fill:#030200;}</style><linearGradient id="linear-gradient" y1="85.01" x2="290" y2="85.01" gradientTransform="matrix(1, 0, 0, -1, 0, 238)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#a52121"/><stop offset="0.52" stop-color="#e9003a"/><stop offset="1" stop-color="#a92525"/></linearGradient></defs><title>sef-logo</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g id="Layer_2-2" data-name="Layer 2"><g id="Layer_1-2-2" data-name="Layer 1-2"><path class="cls-1" d="M58.66,236.65a24.75,24.75,0,0,1-7-.74C35.53,231.08,19.48,226,3.31,221.24c-2.92-.86-4-1.76-2.87-4.88Q26.08,146.1,51.57,75.8c.24-.66,84.83-5.42,91.48-6.51.66-.11-53,5.88-53,6.61-.33,37.2-11.8,48.64-12.08,85.39,0,6.07,11.77,11,17.67,11,55.25-.24,63.78-10.24,119-10,5.74,0-39.94-64.2-40-70-.28-34.25,1.85,18.25,1.85-16,0-3.09-7.95-.91,0-3,.72-.19,57.07.88,57.32,1.61q27.64,69.21,55.36,138.29c1.56,3.87.9,5.24-2.9,6.46-16.22,5.2-32.36,10.63-48.5,16.08a23.23,23.23,0,0,1-7.64.94"/><path class="cls-2" d="M225.44,90.14c0,28.11-.12,56.23.11,84.34,0,4.73-.91,6.35-6.38,6.33q-75.21-.33-150.43,0c-4.5,0-6.44-.53-6.42-5.53q.3-85,0-170C62.36,1.41,63,0,67.58,0Q143.84.27,220.1,0c5.11,0,5.42,2,5.41,5.8C225.38,33.92,225.44,62,225.44,90.14Z"/><path class="cls-3" d="M143.34,137.5c-17.38,0-34.77-.34-52.14.18-6.38.19-6.62-2.58-6.26-6.93.31-3.74-1.85-8.05,5.84-8q52.48.57,105,0c7.58-.09,5.77,4,6.06,7.91.32,4.42,0,7.15-6.34,7C178.11,137.19,160.72,137.5,143.34,137.5Z"/><path class="cls-3" d="M144.1,50.93c-17.63,0-35.26-.29-52.88.15-6.54.16-5.79-3.35-5.52-7,.25-3.39-2.23-7.87,5.32-7.8q52.88.49,105.76,0c7-.08,6,3.38,5.92,7.31-.1,3.72,1.41,7.73-5.72,7.53C179.37,50.61,161.73,50.93,144.1,50.93Z"/><path class="cls-3" d="M142.76,94.86c-17.39,0-34.78-.15-52.16.1-4.48.06-5.87-1-5.74-5.36.28-9.25,0-9.25,10-9.25,33.62,0,67.24.24,100.85-.18,7.48-.09,5.92,3.85,6.16,7.81.26,4.29.32,7.24-6.2,7.05C178,94.53,160.38,94.86,142.76,94.86Z"/></g></g></g></g></svg>
\ No newline at end of file
diff --git a/site/img/square-logo.svg b/site/img/square-logo.svg
deleted file mode 100644
index 47c187d..0000000
--- a/site/img/square-logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 773.47 599"><defs><style>.cls-1{fill:#160723;}</style></defs><title>square-logo</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><rect class="cls-1" width="773.47" height="599"/></g></g></svg>
\ No newline at end of file
diff --git a/site/img/toruscms-logo.svg b/site/img/toruscms-logo.svg
deleted file mode 100644
index 8410761..0000000
--- a/site/img/toruscms-logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 168.87 128.8"><defs><style>.cls-1,.cls-2,.cls-3,.cls-4,.cls-5,.cls-6,.cls-7,.cls-8,.cls-9{fill:none;stroke-miterlimit:10;stroke-width:4px;}.cls-1{stroke:url(#linear-gradient);}.cls-2{stroke:url(#linear-gradient-2);}.cls-3{stroke:url(#linear-gradient-3);}.cls-4{stroke:url(#linear-gradient-4);}.cls-5{stroke:url(#linear-gradient-5);}.cls-6{stroke:url(#linear-gradient-6);}.cls-7{stroke:url(#linear-gradient-7);}.cls-8{stroke:url(#linear-gradient-8);}.cls-9{stroke:url(#linear-gradient-9);}</style><linearGradient id="linear-gradient" y1="78.69" x2="168.87" y2="78.69" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#8733aa"/><stop offset="1" stop-color="#0a0a99"/></linearGradient><linearGradient id="linear-gradient-2" y1="51.1" x2="168.87" y2="51.1" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="49.16" y1="23.19" x2="119.71" y2="23.19" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-4" x1="17.31" y1="103.52" x2="151.55" y2="103.52" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-5" x1="61.26" y1="38.93" x2="107.61" y2="38.93" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-6" x1="49.16" y1="105.46" x2="119.71" y2="105.46" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-7" x1="17.31" y1="25.28" x2="151.55" y2="25.28" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-8" x1="61.26" y1="90.76" x2="107.61" y2="90.76" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-9" x1="67.01" y1="64.99" x2="101.85" y2="64.99" xlink:href="#linear-gradient"/></defs><title>toruscms-logo</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><ellipse class="cls-1" cx="84.43" cy="78.69" rx="82.43" ry="29.47"/><ellipse class="cls-2" cx="84.43" cy="51.1" rx="82.43" ry="29.47"/><ellipse class="cls-3" cx="84.43" cy="23.19" rx="33.28" ry="13.96"/><ellipse class="cls-4" cx="84.43" cy="103.52" rx="65.12" ry="23.28"/><ellipse class="cls-5" cx="84.43" cy="38.93" rx="21.18" ry="10.02"/><ellipse class="cls-6" cx="84.43" cy="105.46" rx="33.28" ry="13.96"/><ellipse class="cls-7" cx="84.43" cy="25.28" rx="65.12" ry="23.28"/><ellipse class="cls-8" cx="84.43" cy="90.76" rx="21.18" ry="10.02"/><ellipse class="cls-9" cx="84.43" cy="64.99" rx="15.42" ry="15.81"/></g></g></svg>
\ No newline at end of file
diff --git a/site/index.html b/site/index.html
index 29382c2..a511526 100644
--- a/site/index.html
+++ b/site/index.html
@@ -1,410 +1,228 @@
+
 <!DOCTYPE html>
 <html lang="en">
-	<!-- <#HEAD> -->
-            <head>
-  <!-- Global site tag (gtag.js) - Google Analytics -->
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <meta name="description" content="A Free and open source tool that helps you create responsive HTML contact forms in an instant.">
-  <meta name="author" content="Torus Digital">
-
-  <title> Torus Project </title>
-  
-  <!-- Google Fonts -->
-  <!-- Bootstrap 4 -->
-  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-  <!-- Font Awesome Icons -->
-  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
-  <!-- favicon -->
-  <link rel="icon" href="img/sef-favicon.png">
-  <!-- Custom styles for this template -->
-  <link rel="stylesheet" href="../assets/css/index.css">
-  <link rel="stylesheet" href="../assets/css/flip-card.css">
-</head>
-            <!-- !<#HEAD> -->
-
-	<body id="page-top" class="text-left">
-
-		<!-- <#NAV> -->
-            <nav class="navbar navbar-expand-lg bg-primary px-5">
-  <div class="container-fluid">
-    <a class="navbar-brand" href="index.html">
-      <img src="../assets/img/toruscms-logo.svg" width="auto" height="60" alt="">
-    </a>
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-      <span class="fa fa-2x fa-bars"></span>
-    </button>
-    <div class="collapse navbar-collapse" id="navbarSupportedContent">
-      <ul class="navbar-nav ml-auto navbar-right">
-        <li class="nav-item active">
-          <a class="nav-link smooth-scroll" href="#about">About</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link smooth-scroll" href="#projects">Projects</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link smooth-scroll" href="#signup">Sign Up</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link smooth-scroll" href="#tutorials">Tutorials</a>
-        </li>
-      </ul>
-    </div>
+  <head>  
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="description" content="Las consultas online de Panama Consulta son la forma mas conveniente de obtener la informacion legal que necesites en Panama">
+    <meta name="author" content="torus-digital">
+    <title>Panama Consulta</title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <link href="https://fonts.googleapis.com/css?family=PT+Sans|Roboto&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="css/index.css">
+  </head>
+  <body id="page-top" class="text-center text-md-left">
+    
+<!-- #NAV_HOVER -->
+<nav class="navbar navbar-expand-lg px-lg-5 bg-primary">
+  <a class="navbar-brand smooth-scroll" href="index.html">
+    <img src="img/panama-consulta-logo-light.svg" width="auto" height="50" alt="">
+  </a>
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+    <i class="fa fa-lg fa-bars text-light"></i>
+  </button>
+  <div class="collapse navbar-collapse text-light" id="navbarNav">
+    <ul class="navbar-nav ml-auto">
+      <li class="nav-item">
+        <a class="nav-link" href="servicios.html#sobre_nosotros">Sobre Nosotros</a>
+      </li>
+      <li class="nav-item dropdown">
+        <a class="nav-link d-block d-lg-none" href="servicios.html">
+          Servicios
+        </a>
+        <a class="nav-link dropdown-toggle d-none d-lg-block" href="#" id="navbarDropdown" onmouseover="displayServices()">
+          Servicios
+        </a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="consultas.html">Consultas</a>
+      </li>
+    </ul>
   </div>
 </nav>
-            <!-- !<#NAV> -->
-
-
-		<header>
-			<div class="container">
-				<div class="row justify-content-center pt-5">
-					<h1 class="main-title text-main">Torus Project</h1>			
-				</div>
-				<div class="row justify-content-center pt-5">
-					<h4>Our mission is to help your open source projects/ideas come to light</h4>			
-				</div>
-			</div>
-		</header>
-
-
-		<section>
-			<div class="container">
-				<div class="row">
-					<div class="col-sm-12 py-5 text-center text-white-50 padding-text">
-						<h3>Torus Project is an ecosystem of intuitive and fully modular tools for your business needs.</h3>
-						<p>Our microservice based architecture and high tech stack provides us with an advantage allowing us to pass significatn cost savings for our end users.   Users will be able to pay for only what they need.  For example:  You could use Cubera Reservation and add a system channel manager, CRM, RMS ending up with a Full CRS centralized reservation system for your business. Aditionally users will be given the option for customer service, for an additional price.       </p>
-					</div>
-				</div>
-			</div>
-		</section>
-
-
-		<section id="projects">
-			<div class="container">
-				<div class="row">
-					<div class="col-12 text-center">
-						<h1 class="text-white">Projects</h1>
-					</div>
-				</div>
-				<div class="row align-items-center">
-
-					<!-- <PROJECTS> -->
-            
-						<div class="col-sm-6 col-lg-4 text-center tool-element flip-card" id="torufobj_torus_framework">
-							<div class="flip-card-inner">
-								<div class="flip-card-front">
-									<img src="../assets/img/toruscms-logo.svg" class="tool-logo">
-									<h2><span class="torufattr_title">The Torus Framework</span></h2>
-								</div>
-								<div class="flip-card-back">
-									<p class="p-3"><span class="torufattr_description">An open source serverless form generator</span></p>
-									<div>
-										<a class="torufhref_website px-2" href="https://supereasyforms.com">
-											<i class="fas fa-lg fa-globe"></i>
-										</a>
-										<a class="torufhref_github px-2" href="gkpty/super-easy-forms">
-											<i class="fab fa-lg fa-github"></i>
-										</a>
-										<a class="torufhref_installation px-2" href="https://supereasyforms.com/#getting_started">
-											<i class="fas fa-lg fa-download"></i>
-										</a>
-									</div>
-								</div>
-							</div>
-						</div>
-					
-						<div class="col-sm-6 col-lg-4 text-center tool-element flip-card" id="torufobj_bootlib">
-							<div class="flip-card-inner">
-								<div class="flip-card-front">
-									<img src="../assets/img/toruscms-logo.svg" class="tool-logo">
-									<h2><span class="torufattr_title">Bootlib</span></h2>
-								</div>
-								<div class="flip-card-back">
-									<p class="p-3"><span class="torufattr_description">A bootstrap4 template generator and theme gallery for the torus framework.</span></p>
-									<div>
-										<a class="torufhref_website px-2" href="https://bootlib.com">
-											<i class="fas fa-lg fa-globe"></i>
-										</a>
-										<a class="torufhref_github px-2" href="gkpty/super-easy-forms">
-											<i class="fab fa-lg fa-github"></i>
-										</a>
-										<a class="torufhref_installation px-2" href="https://supereasyforms.com/#getting_started">
-											<i class="fas fa-lg fa-download"></i>
-										</a>
-									</div>
-								</div>
-							</div>
-						</div>
-					
-						<div class="col-sm-6 col-lg-4 text-center tool-element flip-card" id="torufobj_super_easy_forms">
-							<div class="flip-card-inner">
-								<div class="flip-card-front">
-									<img src="../assets/img/toruscms-logo.svg" class="tool-logo">
-									<h2><span class="torufattr_title">Super Easy Forms</span></h2>
-								</div>
-								<div class="flip-card-back">
-									<p class="p-3"><span class="torufattr_description">An open source serverless form generator</span></p>
-									<div>
-										<a class="torufhref_website px-2" href="https://supereasyforms.com">
-											<i class="fas fa-lg fa-globe"></i>
-										</a>
-										<a class="torufhref_github px-2" href="gkpty/super-easy-forms">
-											<i class="fab fa-lg fa-github"></i>
-										</a>
-										<a class="torufhref_installation px-2" href="https://supereasyforms.com/#getting_started">
-											<i class="fas fa-lg fa-download"></i>
-										</a>
-									</div>
-								</div>
-							</div>
-						</div>
-					
-						<div class="col-sm-6 col-lg-4 text-center tool-element flip-card" id="torufobj_super_easy_forms_cli">
-							<div class="flip-card-inner">
-								<div class="flip-card-front">
-									<img src="../assets/img/toruscms-logo.svg" class="tool-logo">
-									<h2><span class="torufattr_title">Super Easy Forms CLI</span></h2>
-								</div>
-								<div class="flip-card-back">
-									<p class="p-3"><span class="torufattr_description">A complete command line interface for super easy forms. Allows you to deploy both the frontend and backend of your forms with a single command.</span></p>
-									<div>
-										<a class="torufhref_website px-2" href="https://supereasyforms.com/#sef_cli">
-											<i class="fas fa-lg fa-globe"></i>
-										</a>
-										<a class="torufhref_github px-2" href="gkpty/super-easy-forms-cli">
-											<i class="fab fa-lg fa-github"></i>
-										</a>
-										<a class="torufhref_installation px-2" href="https://www.npmjs.com/package/super-easy-forms-cli">
-											<i class="fas fa-lg fa-download"></i>
-										</a>
-									</div>
-								</div>
-							</div>
-						</div>
-					
-						<div class="col-sm-6 col-lg-4 text-center tool-element flip-card" id="torufobj_super_easy_docs">
-							<div class="flip-card-inner">
-								<div class="flip-card-front">
-									<img src="../assets/img/toruscms-logo.svg" class="tool-logo">
-									<h2><span class="torufattr_title">Super Easy Docs</span></h2>
-								</div>
-								<div class="flip-card-back">
-									<p class="p-3"><span class="torufattr_description">A complete command line interface for super easy forms. Allows you to deploy both the frontend and backend of your forms with a single command.</span></p>
-									<div>
-										<a class="torufhref_website px-2" href="https://supereasyforms.com/#sef_cli">
-											<i class="fas fa-lg fa-globe"></i>
-										</a>
-										<a class="torufhref_github px-2" href="gkpty/super-easy-forms-cli">
-											<i class="fab fa-lg fa-github"></i>
-										</a>
-										<a class="torufhref_installation px-2" href="https://www.npmjs.com/package/super-easy-forms-cli">
-											<i class="fas fa-lg fa-download"></i>
-										</a>
-									</div>
-								</div>
-							</div>
-						</div>
-					
-						<div class="col-sm-6 col-lg-4 text-center tool-element flip-card" id="torufobj_easy_md_to_html">
-							<div class="flip-card-inner">
-								<div class="flip-card-front">
-									<img src="../assets/img/toruscms-logo.svg" class="tool-logo">
-									<h2><span class="torufattr_title">Easy MD to HTML</span></h2>
-								</div>
-								<div class="flip-card-back">
-									<p class="p-3"><span class="torufattr_description">A markdown to html converter with no external dependencies.</span></p>
-									<div>
-										<a class="torufhref_website px-2" href="https://supereasyforms.com/#sef_cli">
-											<i class="fas fa-lg fa-globe"></i>
-										</a>
-										<a class="torufhref_github px-2" href="gkpty/super-easy-forms-cli">
-											<i class="fab fa-lg fa-github"></i>
-										</a>
-										<a class="torufhref_installation px-2" href="https://www.npmjs.com/package/super-easy-forms-cli">
-											<i class="fas fa-lg fa-download"></i>
-										</a>
-									</div>
-								</div>
-							</div>
-						</div>
-					
-						<div class="col-sm-6 col-lg-4 text-center tool-element flip-card" id="torufobj_torus_cms">
-							<div class="flip-card-inner">
-								<div class="flip-card-front">
-									<img src="../assets/img/toruscms-logo.svg" class="tool-logo">
-									<h2><span class="torufattr_title">Torus CMS</span></h2>
-								</div>
-								<div class="flip-card-back">
-									<p class="p-3"><span class="torufattr_description">A complete command line interface for super easy forms. Allows you to deploy both the frontend and backend of your forms with a single command.</span></p>
-									<div>
-										<a class="torufhref_website px-2" href="https://supereasyforms.com/#sef_cli">
-											<i class="fas fa-lg fa-globe"></i>
-										</a>
-										<a class="torufhref_github px-2" href="gkpty/super-easy-forms-cli">
-											<i class="fab fa-lg fa-github"></i>
-										</a>
-										<a class="torufhref_installation px-2" href="https://www.npmjs.com/package/super-easy-forms-cli">
-											<i class="fas fa-lg fa-download"></i>
-										</a>
-									</div>
-								</div>
-							</div>
-						</div>
-					
-						<div class="col-sm-6 col-lg-4 text-center tool-element flip-card" id="torufobj_arjan_workflows">
-							<div class="flip-card-inner">
-								<div class="flip-card-front">
-									<img src="../assets/img/toruscms-logo.svg" class="tool-logo">
-									<h2><span class="torufattr_title">Arjan Build</span></h2>
-								</div>
-								<div class="flip-card-back">
-									<p class="p-3"><span class="torufattr_description">A two-way templating framework for html that only uses html syntax</span></p>
-									<div>
-										<a class="torufhref_website px-2" href="https://supereasyforms.com/#sef_cli">
-											<i class="fas fa-lg fa-globe"></i>
-										</a>
-										<a class="torufhref_github px-2" href="gkpty/super-easy-forms-cli">
-											<i class="fab fa-lg fa-github"></i>
-										</a>
-										<a class="torufhref_installation px-2" href="https://www.npmjs.com/package/super-easy-forms-cli">
-											<i class="fas fa-lg fa-download"></i>
-										</a>
-									</div>
-								</div>
-							</div>
-						</div>
-					
-						<div class="col-sm-6 col-lg-4 text-center tool-element flip-card" id="torufobj_arjan_optimize">
-							<div class="flip-card-inner">
-								<div class="flip-card-front">
-									<img src="../assets/img/toruscms-logo.svg" class="tool-logo">
-									<h2><span class="torufattr_title">Arjan Build</span></h2>
-								</div>
-								<div class="flip-card-back">
-									<p class="p-3"><span class="torufattr_description">A two-way templating framework for html that only uses html syntax</span></p>
-									<div>
-										<a class="torufhref_website px-2" href="https://supereasyforms.com/#sef_cli">
-											<i class="fas fa-lg fa-globe"></i>
-										</a>
-										<a class="torufhref_github px-2" href="gkpty/super-easy-forms-cli">
-											<i class="fab fa-lg fa-github"></i>
-										</a>
-										<a class="torufhref_installation px-2" href="https://www.npmjs.com/package/super-easy-forms-cli">
-											<i class="fas fa-lg fa-download"></i>
-										</a>
-									</div>
-								</div>
-							</div>
-						</div>
-					
-						<div class="col-sm-6 col-lg-4 text-center tool-element flip-card" id="torufobj_arjan_translate">
-							<div class="flip-card-inner">
-								<div class="flip-card-front">
-									<img src="../assets/img/toruscms-logo.svg" class="tool-logo">
-									<h2><span class="torufattr_title">Arjan Translate</span></h2>
-								</div>
-								<div class="flip-card-back">
-									<p class="p-3"><span class="torufattr_description">A localization and translation solution for static html websites</span></p>
-									<div>
-										<a class="torufhref_website px-2" href="https://supereasyforms.com/#sef_cli">
-											<i class="fas fa-lg fa-globe"></i>
-										</a>
-										<a class="torufhref_github px-2" href="gkpty/super-easy-forms-cli">
-											<i class="fab fa-lg fa-github"></i>
-										</a>
-										<a class="torufhref_installation px-2" href="https://www.npmjs.com/package/super-easy-forms-cli">
-											<i class="fas fa-lg fa-download"></i>
-										</a>
-									</div>
-								</div>
-							</div>
-						</div>
-					
-						<div class="col-sm-6 col-lg-4 text-center tool-element flip-card" id="torufobj_arjan_deploy">
-							<div class="flip-card-inner">
-								<div class="flip-card-front">
-									<img src="../assets/img/toruscms-logo.svg" class="tool-logo">
-									<h2><span class="torufattr_title">Arjan Deploy</span></h2>
-								</div>
-								<div class="flip-card-back">
-									<p class="p-3"><span class="torufattr_description">A localization and translation solution for static html websites</span></p>
-									<div>
-										<a class="torufhref_website px-2" href="https://supereasyforms.com/#sef_cli">
-											<i class="fas fa-lg fa-globe"></i>
-										</a>
-										<a class="torufhref_github px-2" href="gkpty/super-easy-forms-cli">
-											<i class="fab fa-lg fa-github"></i>
-										</a>
-										<a class="torufhref_installation px-2" href="https://www.npmjs.com/package/super-easy-forms-cli">
-											<i class="fas fa-lg fa-download"></i>
-										</a>
-									</div>
-								</div>
-							</div>
-						</div>
-					
-						<div class="col-sm-6 col-lg-4 text-center tool-element flip-card" id="torufobj_raspi_led_animation">
-							<div class="flip-card-inner">
-								<div class="flip-card-front">
-									<img src="../assets/img/toruscms-logo.svg" class="tool-logo">
-									<h2><span class="torufattr_title">Raspberry Pi Ws1228b led animations</span></h2>
-								</div>
-								<div class="flip-card-back">
-									<p class="p-3"><span class="torufattr_description">A localization and translation solution for static html websites</span></p>
-									<div>
-										<a class="torufhref_website px-2" href="https://supereasyforms.com/#sef_cli">
-											<i class="fas fa-lg fa-globe"></i>
-										</a>
-										<a class="torufhref_github px-2" href="gkpty/super-easy-forms-cli">
-											<i class="fab fa-lg fa-github"></i>
-										</a>
-										<a class="torufhref_installation px-2" href="https://www.npmjs.com/package/super-easy-forms-cli">
-											<i class="fas fa-lg fa-download"></i>
-										</a>
-									</div>
-								</div>
-							</div>
-						</div>
-					
-            <!-- </PROJECTS> -->
-
-				</div>
-			</div>
-		</section>
-
+<div class="col-12" id="navRow" style="display: none;" onmouseover="displayServices()" onmouseout="hideServices()">
+  <div class="nav-row px-5">
+    <div class="row round-row bg-translucent p-3">
+      <div class="col-md-6 col-lg-4">
+        <ul class="h4 text-light">Asesoria Legal</ul>
+        <li><a href="servicios.html#"><i class="fas fa-briefcase mr-2"></i>Corporativo</a></li>
+        <li><a href="servicios.html#"><i class="fas fa-ship mr-2"></i>Maritimo</a></li>
+        <li><a href="servicios.html#"><i class="fas fa-snowplow mr-2"></i>Minero</a></li>
+        <li><a href="servicios.html#"><i class="fas fa-gavel mr-2"></i>Fiscal</a></li>
+        <li><a href="servicios.html#"><i class="fas fa-exchange-alt mr-2"></i>Comercial</a></li>
+        <li><a href="servicios.html#"><i class="fas fa-plane-arrival mr-2"></i>Migratorio y Laboral</a></li>
+      </div>
+      <div class="col-md-6 col-lg-4">
+        <ul class="h4 text-light">Asesoria Financiera</ul>
+        <li><a href="servicios.html#"><i class="fas fa-money-check-alt mr-2"></i>Asesor Bancario</a></li>
+        <li><a href="servicios.html#"><i class="fas fa-building mr-2"></i>Asesoria empresarial</a></li>
+        <li><a href="servicios.html#"><i class="fas fa-gem mr-2"></i>Patrimonial</a></li>
+        <li><a href="servicios.html#"><i class="fas fa-chart-line mr-2"></i>Asesoria de inversion</a></li>
+      </div>
+      <div class="col-md-6 col-lg-4">
+        <ul class="h4 text-light">Otros Servicios</ul>
+        <li><a href="servicios.html#"><i class="fas fa-search mr-2"></i>Investigaciones</a></li>
+        <li><a href="servicios.html#"><i class="fas fa-balance-scale mr-2"></i>Mediacion y Conciliacion</a></li>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  function displayServices(){
+    var x = document.getElementById("navRow");
+    x.style.display = "block";
+  }
+  function hideServices(){
+    var x = document.getElementById("navRow");
+    x.style.display = "none";
+  }
+</script>
+<!-- !NAV_HOVER -->
+
+    
+<!-- #HEADER_BG_IMAGE -->
+<header class="bg-primary">
+  <div class="contianer text-center">
+    <h1 class="main-title-padding text-primary">Consultas Legales Online en Panama</h1>
+    <a href="consultas.html" class="btn-lg bg-translucent text-light">Consultar</a>
+  </div>
+</header>
+<!-- !HEADER_BG_IMAGE -->
+
+    
+<!-- #STATIC_SECTION_STANDARD -->
+<section class="bg-light">
+  <div class="container text-center">
+    <h2 class="text-alternate h3 pb-2">Una forma mas rapida de obtener tu informacion legal</h2>
+    <p class="text-left">Estar infromado legalmente es un requerimiento basico para poder tomar buenas decisiones, pero el proceso tradicional usualmente resulta bastante tedioso para el cliente. Panama Consulta es un prodcuto de Faragon & Consulting que se creo con el proposito de poder conseguir la informacion legal que el cliente necesite con la minima interaccion posible. Nuestra plataforma online en conjunto con nuestro equipo de profesionales con altos estandares de cumplimiento nos permiten responder tu solicitud en menos de 24 horas a la comodidad de tu correo electronico.
+  </div>
+</section>
+<!-- !STATIC_SECTION_STANDARD -->
 
-		<!-- <#FOOTER> -->
-            <footer class="bg-main text-center text-white py-4">
+    
+<!-- #STATIC_SECTION_MOBILE_VIDEO -->
+<section class="bg-secondary">
   <div class="container">
     <div class="row">
-      <div class="col-sm-6">
-        <p class="text-lg-left">Copyright &copy; Torus Project</p>
+      <div class="col-lg-4">
+        <div class="smartphone">
+          <div class="content">
+            <img src="img/img.svg" alt="" style="width:100%;border:none;height:100%;object-fit: cover;">
+          </div>
+        </div>
       </div>
-      <div class="col-sm-6">
-         <p class="text-lg-right">powered by <a href="https://torus-digital.com">Torus</a></p>
+      <div class="col-lg-8">
+        <h2 class="text-primary ml-2 pb-1">Como hacer una consulta</h2>
+        <ol class="usage-instructions">
+          <li>Haga clic en la pestana de consultas</li>
+          <li>llene sus datos, seleccione el tipo de su consulta, y escriba su consulta textualmente</li>
+          <li>haga clic en enviar</li>
+          <li>llena tus datos de pago</li>
+          <li>Haga clic en enviar</li>
+          <li>Espera a ver el mensaje de confirmacion</li>
+          <li>En menos de 24 horas resivira una respuesta de alguno de los profesionales en nuestro equipo en su correo</li>
+        </ol>
       </div>
     </div>
   </div>
-</footer>
-            <!-- !<#FOOTER> -->
-
-
-		<script
-			src="https://code.jquery.com/jquery-3.4.1.min.js"
-			integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
-			crossorigin="anonymous">
-		</script>
-
-		<script async defer src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>
-
-		
-	</body>
-
-</html>
-
-
-
+</section>
+<!-- !STATIC_SECTION_MOBILE_VIDEO -->
+
+    
+<!-- #STATIC_SECTION_BANNER -->
+<section class="bg-primary py-5">
+  <div class="container text-center">
+    <h5 class="text-light pb-4">Brindamos una variedad de servicios de asesoria personalizada segun las necsidades de nuestros clientes.</h5>
+    <a href="servicios.html" class="btn-lg bg-secondary text-primary">Nuestros Servicios</a>
+  </div>
+</section>
+<!-- !STATIC_SECTION_BANNER -->
+
+    
+<!-- #DYNAMIC_SECTION_ROUND_TEAM -->
+<section>
+  <div class="container text-center">
+    <div class="row justify-content-center">
+    
+<!-- <TEAM_MEMBERS> -->
+
+        <div class="col-md-6 col-lg-4 col-xl-3" id="torufobj_fernando">
+          <a href="#" data-toggle="modal" class="torufsrc_img torufalt_name torufdata-target_namekey" data-target="#team-member-fernando">
+            <img src="img/img.svg" alt="Fernando Javier Aragon Medina" class="mx-auto circle-img">
+            <h2 class="team-member-name"><span class="torufattr_name">Fernando Javier Aragon Medina</span></h2>
+            <h4 class="team-member-association"><span class="torufattr_association">Socio Fundador</span></h4>
+          </a>
+          <!-- Modal -->
+          <div class="modal fade" id="team-member-{{namekey}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+            <div class="modal-dialog" role="document">
+              <div class="modal-content">
+                <div class="modal-header">
+                  <h5 class="modal-title" id="#team-member-{{namekey}}-label"><span class="torufattr_name">Fernando Javier Aragon Medina</span></h5>
+                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                  </button>
+                </div>
+                <div class="torufsrc_img modal-body">
+                  <img src="img/img.svg" class="torufalt_name" alt="Fernando Javier Aragon Medina">
+                  <h2 class="team-member-name">{{name}}</h2>
+                  <h4 class="team-member-association"><span class="torufattr_association">Socio Fundador</span></h4>
+                  <h5 class="attribute"><span class="torufattr_education">Universidad Latina</span></p>
+                  <p class="attribute"><span class="torufattr_experience">Laborado en varias firmas y como abogado independiente.</span></p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+    
+        <div class="col-md-6 col-lg-4 col-xl-3" id="torufobj_lorey">
+          <a href="#" data-toggle="modal" class="torufsrc_img torufalt_name torufdata-target_namekey" data-target="#team-member-lorey">
+            <img src="img/img.svg" alt="Lorey Aragon Medina" class="mx-auto circle-img">
+            <h2 class="team-member-name"><span class="torufattr_name">Lorey Aragon Medina</span></h2>
+            <h4 class="team-member-association"><span class="torufattr_association">Asesora Financiera</span></h4>
+          </a>
+          <!-- Modal -->
+          <div class="modal fade" id="team-member-{{namekey}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+            <div class="modal-dialog" role="document">
+              <div class="modal-content">
+                <div class="modal-header">
+                  <h5 class="modal-title" id="#team-member-{{namekey}}-label"><span class="torufattr_name">Lorey Aragon Medina</span></h5>
+                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                  </button>
+                </div>
+                <div class="torufsrc_img modal-body">
+                  <img src="img/img.svg" class="torufalt_name" alt="Lorey Aragon Medina">
+                  <h2 class="team-member-name">{{name}}</h2>
+                  <h4 class="team-member-association"><span class="torufattr_association">Asesora Financiera</span></h4>
+                  <h5 class="attribute"><span class="torufattr_education">Worchester Polytechnic Institute</span></p>
+                  <p class="attribute"><span class="torufattr_experience">Labroado con multinacionales en las industrias de energia y seguros.</span></p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+    
+<!-- </TEAM_MEMBERS> -->
 
+    </div>
+  </div>
+</section>
+<!-- !DYNAMIC_SECTION_ROUND_TEAM -->
 
+    
+<!-- #FOOTER_STANDARD -->
+<footer class="bg-secondary py-md-3">
+  <div class="container">
+    <div class="row text-primary">
+      <div class="col-6">yourdomain ©</div>
+      <div class="col-6 text-md-right">powered by <a href="https://bootlib.com">Bootlib</a></div>
+    </div>
+  </div>
+</footer>
+<!-- !FOOTER_STANDARD -->
 
-		
\ No newline at end of file
+    <script src="https://kit.fontawesome.com/9507dfd244.js" crossorigin="anonymous"></script>
+    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>  
+  </body>
+</html>
\ No newline at end of file
diff --git a/site/js/form_modern.js b/site/js/form_modern.js
new file mode 100644
index 0000000..d49f9e5
--- /dev/null
+++ b/site/js/form_modern.js
@@ -0,0 +1,12 @@
+$('head').append('<link href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet" type="text/css">');
+
+$('input, select, textarea').focus(function() {
+  $(this).closest('.float-label-field').addClass('float').addClass('focus');
+})
+
+$('input, select, textarea').blur(function() {
+  $(this).closest('.float-label-field').removeClass('focus');
+  if (!$(this).val()) {
+    $(this).closest('.float-label-field').removeClass('float');
+  }
+});
\ No newline at end of file
diff --git a/site/servicios.html b/site/servicios.html
new file mode 100644
index 0000000..5d82ebb
--- /dev/null
+++ b/site/servicios.html
@@ -0,0 +1,300 @@
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>  
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="description" content="Ofrecemos una variedad de servicios legales adicionales">
+    <meta name="author" content="torus-digital">
+    <title>Panama Consulta - Servicios</title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <link href="https://fonts.googleapis.com/css?family=PT+Sans|Roboto&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="css/index.css">
+  </head>
+  <body id="page-top" class="text-center text-md-left">
+    
+<!-- #NAV_HOVER -->
+<nav class="navbar navbar-expand-lg px-lg-5 bg-primary">
+  <a class="navbar-brand smooth-scroll" href="index.html">
+    <img src="img/panama-consulta-logo-light.svg" width="auto" height="45" alt="">
+  </a>
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+    <i class="fa fa-lg fa-bars text-light"></i>
+  </button>
+  <div class="collapse navbar-collapse text-light" id="navbarNav">
+    <ul class="navbar-nav ml-auto">
+      <li class="nav-item">
+        <a class="nav-link" href="servicios.html#sobre_nosotros">Sobre Nosotros</a>
+      </li>
+      <li class="nav-item dropdown">
+        <a class="nav-link d-block d-lg-none" href="servicios.html">
+          Servicios
+        </a>
+        <a class="nav-link dropdown-toggle d-none d-lg-block" href="#" id="navbarDropdown" onmouseover="displayServices()">
+          Servicios
+        </a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="consultas.html">Consultas</a>
+      </li>
+    </ul>
+  </div>
+</nav>
+<div class="col-12" id="navRow" style="display: none;" onmouseover="displayServices()" onmouseout="hideServices()">
+  <div class="nav-row px-5">
+    <div class="row round-row bg-translucent p-3">
+      <div class="col-md-6 col-lg-4">
+        <ul class="h4">Asesoria Legal</ul>
+        <li><a href="servicios.html#">Corporativo</a></li>
+        <li><a href="servicios.html#">Maritimo</a></li>
+        <li><a href="servicios.html#">Minero</a></li>
+        <li><a href="servicios.html#">Fiscal</a></li>
+        <li><a href="servicios.html#">Comercial</a></li>
+        <li><a href="servicios.html#">Migratorio y Laboral</a></li>
+      </div>
+      <div class="col-md-6 col-lg-4">
+        <ul class="h4">Asesoria Financiera</ul>
+        <li><a href="servicios.html#">Asesor Bancario</a></li>
+        <li><a href="servicios.html#">Asesoria empresarial</a></li>
+        <li><a href="servicios.html#">Patrimonial</a></li>
+        <li><a href="servicios.html#">Asesoria de inversion</a></li>
+      </div>
+      <div class="col-md-6 col-lg-4">
+        <ul class="h4">Otros Servicios</ul>
+        <li><a href="servicios.html#">Investigaciones</a></li>
+        <li><a href="servicios.html#">Mediacion y Conciliacion</a></li>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  function displayServices(){
+    var x = document.getElementById("navRow");
+    x.style.display = "block";
+  }
+  function hideServices(){
+    var x = document.getElementById("navRow");
+    x.style.display = "none";
+  }
+</script>
+<!-- !NAV_HOVER -->
+
+    
+<!-- #STATIC_SECTION_STANDARD -->
+<section>
+  <div class="container text-center">
+    <h2 class="text-alternate">Standard Section</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+  </div>
+</section>
+<!-- !STATIC_SECTION_STANDARD -->
+
+    
+<!-- #DYNAMIC_SECTION_LEGAL_SERVICES -->
+<section>
+  <div class="container text-center">
+    <h1 class="py-4">Servicios Legales</h1>
+    <div class="row">
+      
+<!-- <LEGAL_SERVICES> -->
+
+        <div class="col-lg-6" id="torufobj_corporate">
+          <div class="row">
+            <div class="col-2">
+              <i class="torufclass_icon fas fa-briefcase fa-3x"></i>
+            </div>
+            <div class="col-10 text-left">
+              <h2 class="text-alternate"><span class="torufattr_title">Corporativo</span></h2>
+              <p><span class="torufattr_description">le Ofrecemos a su empresa la asesoria personalizada necesaria para que su ente corporativo cuente con  factores esenciales para exito el la finalidad de la persona juridica.</span></p>
+            </div>
+          </div>
+        </div>
+      
+        <div class="col-lg-6" id="torufobj_maritime">
+          <div class="row">
+            <div class="col-2">
+              <i class="torufclass_icon fas fa-ship fa-3x"></i>
+            </div>
+            <div class="col-10 text-left">
+              <h2 class="text-alternate"><span class="torufattr_title">Maritimo</span></h2>
+              <p><span class="torufattr_description">Asesoramos al naviero,capitan,Dueño de embarcaciones o empresario del sector maritimo en diferentes ambitos desde la marina mercante, adquisicion de embarcaciones,hipotecas navales,  la obtencion de licencias de operaciones y consesiones para llevar a cabo sus operaciones.</span></p>
+            </div>
+          </div>
+        </div>
+      
+        <div class="col-lg-6" id="torufobj_mining">
+          <div class="row">
+            <div class="col-2">
+              <i class="torufclass_icon fas fa-snowplow fa-3x"></i>
+            </div>
+            <div class="col-10 text-left">
+              <h2 class="text-alternate"><span class="torufattr_title">Minero</span></h2>
+              <p><span class="torufattr_description">Asesoramos a la empresas mineras que quieres establecer e invertir en el sector minero de Panama  para que cumpla con toda las regulaciones y requisitos que exige la ley. Contamos con un plan de trabajo de 6 meses de retainer.</span></p>
+            </div>
+          </div>
+        </div>
+      
+        <div class="col-lg-6" id="torufobj_fiscal">
+          <div class="row">
+            <div class="col-2">
+              <i class="torufclass_icon fas fa-gavel fa-3x"></i>
+            </div>
+            <div class="col-10 text-left">
+              <h2 class="text-alternate"><span class="torufattr_title">Fiscal</span></h2>
+              <p><span class="torufattr_description">Asesoramos a las personas y empresas que quieran conocer sobre el sistema fiscal en Panama. Brindamos a la vez servicios de contabilidad y  administracion contable. Tambien te asesoramos con las exoneraciones y regimen fiscales para los bienes inmuebles.</span></p>
+            </div>
+          </div>
+        </div>
+      
+        <div class="col-lg-6" id="torufobj_commercial">
+          <div class="row">
+            <div class="col-2">
+              <i class="torufclass_icon fas fa-exchange-alt fa-3x"></i>
+            </div>
+            <div class="col-10 text-left">
+              <h2 class="text-alternate"><span class="torufattr_title">Comercial</span></h2>
+              <p><span class="torufattr_description">Le ofrecemos a tu marca, tienda o negocio las herramientas necesarias para surgir en el mercado local ya sea conectandolos con contactos o nuevos proveedores y clientes, asistencia con contratos, registros de marcas, patentes de productos, registros sanitarios, financiamiento con bancos, Inscripcion con AMPYME y otros tramites necesarios para llevar a cabo su operacion comercial de forma exitosa.</span></p>
+            </div>
+          </div>
+        </div>
+      
+        <div class="col-lg-6" id="torufobj_labor">
+          <div class="row">
+            <div class="col-2">
+              <i class="torufclass_icon fas fa-plane-arrival fa-3x"></i>
+            </div>
+            <div class="col-10 text-left">
+              <h2 class="text-alternate"><span class="torufattr_title">Migratorio y Laboral</span></h2>
+              <p><span class="torufattr_description">Te asesoramos para cumplas tu sueño de poder vivir y trabajar en Panama de forma legal y puedas conocer de tus derechos laborales como extranjero trabajando en territorio panameño.</span></p>
+            </div>
+          </div>
+        </div>
+      
+<!-- </LEGAL_SERVICES> -->
+
+    </div>
+  </div>
+</section>
+<!-- !DYNAMIC_SECTION_LEGAL_SERVICES -->
+
+    
+<!-- #DYNAMIC_SECTION_FINANCIAL_SERVICES -->
+<section>
+  <div class="container text-center">
+    <h1 class="py-4">Servicios Financieros</h1>
+    <div class="row">
+      
+<!-- <FINANCIAL_SERVICES> -->
+
+        <div class="col-lg-6" id="torufobj_banking">
+          <div class="row">
+            <div class="col-2">
+              <i class="torufclass_icon fas fa-money-check-alt fa-3x"></i>
+            </div>
+            <div class="col-10 text-left">
+              <h2 class="text-alternate"><span class="torufattr_title">Asesor Bancario</span></h2>
+              <p><span class="torufattr_description">te asistimos en la obtencion de hipotecas, linea de creditos, prestamos personales, leasing, Factoring, fideicomisos por medio de nuestro servicio de intermediacion financiera donde buscamos la mejor opcion para el cliente  con las mejores tasas para su beneficio.</span></p>
+            </div>
+          </div>
+        </div>
+      
+        <div class="col-lg-6" id="torufobj_enterprise">
+          <div class="row">
+            <div class="col-2">
+              <i class="torufclass_icon fas fa-building fa-3x"></i>
+            </div>
+            <div class="col-10 text-left">
+              <h2 class="text-alternate"><span class="torufattr_title">Asesoria empresarial</span></h2>
+              <p><span class="torufattr_description">te ofrecemos la mejor estructura corporativa para que tu negocio cuente con el mejor manejo financiero, fiscal y patrimonial con fin de que los socios puedan tener un mayor rendimiento en sus dividendos. Realizamos tambien gestiones de cobranzas de contratos cuentas por cobrar o facturas.</span></p>
+            </div>
+          </div>
+        </div>
+      
+        <div class="col-lg-6" id="torufobj_patrimony">
+          <div class="row">
+            <div class="col-2">
+              <i class="torufclass_icon fas fa-gem fa-3x"></i>
+            </div>
+            <div class="col-10 text-left">
+              <h2 class="text-alternate"><span class="torufattr_title">Patrimonial</span></h2>
+              <p><span class="torufattr_description">Te asesoramos para proteger tu patrimonio por medio de estructuras legales y financieras para el manejo ideal de tus activos y bienes. Tambien vemos temas sucesorios y herencias.</span></p>
+            </div>
+          </div>
+        </div>
+      
+        <div class="col-lg-6" id="torufobj_investment">
+          <div class="row">
+            <div class="col-2">
+              <i class="torufclass_icon fas fa-chart-line fa-3x"></i>
+            </div>
+            <div class="col-10 text-left">
+              <h2 class="text-alternate"><span class="torufattr_title">Asesoria de inversion</span></h2>
+              <p><span class="torufattr_description">Te asesoramos para que tengas tu cuenta de inversion con un banco de la localidad de forma exitosa facilitando el tramite de debida diligencia y sirviendote como tu asesor de inversion para que hagas la mejor inversion en la bolsa de valores. Tambien manejamos un portafolio de inversiones de proyectos y negocios privados.</span></p>
+            </div>
+          </div>
+        </div>
+      
+<!-- </FINANCIAL_SERVICES> -->
+
+    </div>
+  </div>
+</section>
+<!-- !DYNAMIC_SECTION_FINANCIAL_SERVICES -->
+
+    
+<!-- #DYNAMIC_SECTION_OTHER_SERVICES -->
+<section>
+  <div class="container text-center">
+    <h1 class="py-4">Otros Servicios</h1>
+    <div class="row">
+      
+<!-- <OTHER_SERVICES> -->
+
+        <div class="col-lg-6" id="torufobj_investigations">
+          <div class="row">
+            <div class="col-2">
+              <i class="torufclass_icon fas fa-search fa-3x"></i>
+            </div>
+            <div class="col-10 text-left">
+              <h2 class="text-alternate"><span class="torufattr_title">Investigaciones</span></h2>
+              <p><span class="torufattr_description">Fincas, mercados, sociedades</span></p>
+            </div>
+          </div>
+        </div>
+      
+        <div class="col-lg-6" id="torufobj_mediation">
+          <div class="row">
+            <div class="col-2">
+              <i class="torufclass_icon fas fa-balance-scale fa-3x"></i>
+            </div>
+            <div class="col-10 text-left">
+              <h2 class="text-alternate"><span class="torufattr_title">Mediacion y Conciliacion</span></h2>
+              <p><span class="torufattr_description">Contamos con un mediador idoneo para la resolucion de conflictos.</span></p>
+            </div>
+          </div>
+        </div>
+      
+<!-- </OTHER_SERVICES> -->
+
+    </div>
+  </div>
+</section>
+<!-- !DYNAMIC_SECTION_OTHER_SERVICES -->
+
+    
+<!-- #FOOTER_STANDARD -->
+<footer class="bg-secondary py-md-3">
+  <div class="container">
+    <div class="row text-primary">
+      <div class="col-6">yourdomain ©</div>
+      <div class="col-6 text-md-right">powered by <a href="https://bootlib.com">Bootlib</a></div>
+    </div>
+  </div>
+</footer>
+<!-- !FOOTER_STANDARD -->
+
+    <script src="https://kit.fontawesome.com/9507dfd244.js" crossorigin="anonymous"></script>
+    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/toruf/components/dynamic_section_financial_services/index.html b/toruf/components/dynamic_section_financial_services/index.html
new file mode 100644
index 0000000..1a05607
--- /dev/null
+++ b/toruf/components/dynamic_section_financial_services/index.html
@@ -0,0 +1,20 @@
+<section>
+  <div class="container text-center">
+    <h1 class="py-4">Servicios Financieros</h1>
+    <div class="row">
+      <FINANCIAL_SERVICES>
+        <div class="col-lg-6">
+          <div class="row">
+            <div class="col-2">
+              <i class="{{icon}} fa-3x"></i>
+            </div>
+            <div class="col-10 text-left">
+              <h2 class="text-alternate">{{title}}</h2>
+              <p>{{description}}</p>
+            </div>
+          </div>
+        </div>
+      </FINANCIAL_SERVICES>
+    </div>
+  </div>
+</section>
\ No newline at end of file
diff --git a/toruf/components/dynamic_section_legal_services/index.html b/toruf/components/dynamic_section_legal_services/index.html
new file mode 100644
index 0000000..6956c88
--- /dev/null
+++ b/toruf/components/dynamic_section_legal_services/index.html
@@ -0,0 +1,20 @@
+<section>
+  <div class="container text-center">
+    <h1 class="py-4">Servicios Legales</h1>
+    <div class="row">
+      <LEGAL_SERVICES>
+        <div class="col-lg-6">
+          <div class="row">
+            <div class="col-2">
+              <i class="{{icon}} fa-3x"></i>
+            </div>
+            <div class="col-10 text-left">
+              <h2 class="text-alternate">{{title}}</h2>
+              <p>{{description}}</p>
+            </div>
+          </div>
+        </div>
+      </LEGAL_SERVICES>
+    </div>
+  </div>
+</section>
\ No newline at end of file
diff --git a/toruf/components/dynamic_section_other_services/index.html b/toruf/components/dynamic_section_other_services/index.html
new file mode 100644
index 0000000..713e06d
--- /dev/null
+++ b/toruf/components/dynamic_section_other_services/index.html
@@ -0,0 +1,20 @@
+<section>
+  <div class="container text-center">
+    <h1 class="py-4">Otros Servicios</h1>
+    <div class="row">
+      <OTHER_SERVICES>
+        <div class="col-lg-6">
+          <div class="row">
+            <div class="col-2">
+              <i class="{{icon}} fa-3x"></i>
+            </div>
+            <div class="col-10 text-left">
+              <h2 class="text-alternate">{{title}}</h2>
+              <p>{{description}}</p>
+            </div>
+          </div>
+        </div>
+      </OTHER_SERVICES>
+    </div>
+  </div>
+</section>
\ No newline at end of file
diff --git a/toruf/components/dynamic_section_round_team/index.css b/toruf/components/dynamic_section_round_team/index.css
new file mode 100644
index 0000000..07817f0
--- /dev/null
+++ b/toruf/components/dynamic_section_round_team/index.css
@@ -0,0 +1,4 @@
+.circle-img {
+  max-width: 12rem;
+  box-shadow: 0 5px 5px 0 #adb5bd;
+}
\ No newline at end of file
diff --git a/toruf/components/dynamic_section_round_team/index.html b/toruf/components/dynamic_section_round_team/index.html
new file mode 100644
index 0000000..c437dc5
--- /dev/null
+++ b/toruf/components/dynamic_section_round_team/index.html
@@ -0,0 +1,35 @@
+<section>
+  <div class="container text-center">
+    <div class="row justify-content-center">
+    <TEAM_MEMBERS>
+        <div class="col-md-6 col-lg-4 col-xl-3">
+          <a href="#" data-toggle="modal" data-target="#team-member-{{namekey}}">
+            <img src="{{img}}" alt="{{name}}" class="mx-auto circle-img">
+            <h2 class="team-member-name">{{name}}</h2>
+            <h4 class="team-member-association">{{association}}</h4>
+          </a>
+          <!-- Modal -->
+          <div class="modal fade" id="team-member-{{namekey}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+            <div class="modal-dialog" role="document">
+              <div class="modal-content">
+                <div class="modal-header">
+                  <h5 class="modal-title" id="#team-member-{{namekey}}-label">{{name}}</h5>
+                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                  </button>
+                </div>
+                <div class="modal-body">
+                  <img src="{{img}}" alt="{{name}}">
+                  <h2 class="team-member-name">{{name}}</h2>
+                  <h4 class="team-member-association">{{association}}</h4>
+                  <h5 class="attribute">{{education}}</p>
+                  <p class="attribute">{{experience}}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+    </TEAM_MEMBERS>
+    </div>
+  </div>
+</section>
\ No newline at end of file
diff --git a/toruf/components/footer_standard/index.css b/toruf/components/footer_standard/index.css
new file mode 100644
index 0000000..6eb69c7
--- /dev/null
+++ b/toruf/components/footer_standard/index.css
@@ -0,0 +1,9 @@
+html, body{
+  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 24px; font-style: normal; font-variant: normal;
+}
+.bg-primary {background-color: #c6c6c6 !important}
+.bg-secondary {background-color: #ddd !important}
+.bg-alternate {background-color: #a8a8a8 !important}
+.text-primary {color: #c6c6c6 !important}
+.text-secondary {color: #ddd !important}
+.text-alternate {color: #a8a8a8 !important}
\ No newline at end of file
diff --git a/toruf/components/footer_standard/index.html b/toruf/components/footer_standard/index.html
new file mode 100644
index 0000000..8f61d76
--- /dev/null
+++ b/toruf/components/footer_standard/index.html
@@ -0,0 +1,8 @@
+<footer class="bg-secondary py-md-3">
+  <div class="container">
+    <div class="row text-primary">
+      <div class="col-6">yourdomain ©</div>
+      <div class="col-6 text-md-right">powered by <a href="https://bootlib.com">Bootlib</a></div>
+    </div>
+  </div>
+</footer>
\ No newline at end of file
diff --git a/toruf/components/footer_standard/index.js b/toruf/components/footer_standard/index.js
new file mode 100644
index 0000000..e69de29
diff --git a/toruf/components/form_modern/index.css b/toruf/components/form_modern/index.css
new file mode 100644
index 0000000..0c33671
--- /dev/null
+++ b/toruf/components/form_modern/index.css
@@ -0,0 +1,116 @@
+/*absolute center*/
+.centered {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.modern-container {padding: 10%;}
+
+@media(min-width: 992px){
+  img {border-radius: 10px 0% 0px 10px;}
+  form {border-radius: 0% 10px 10px 0%;}
+}
+@media(max-width: 992px){
+  img {border-radius: 10px 10px 0px 0px;}
+  form {border-radius: 0px 0px 10px 10px;}
+}
+img { 
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+}
+body {
+  font-family: "Open Sans";
+  background-color: #efefef;
+}
+
+.modern-form {
+  width: 100%;
+  background-color:  #fff;
+  border: solid 1px #ccc;
+  padding: 8%;
+}
+.float-label-field {
+  border: none;
+  outline: none;
+  position: relative;
+  margin: 0 0 20px 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+.float-label-field.focus label {
+  color: #218838;;
+}
+.float-label-field input, 
+.float-label-field select, 
+.float-label-field textarea {
+  border: none;
+  outline: none;
+  padding: 5px 5px 8px 0px;
+  width: 100%;
+  font-size: 18px;
+  border-bottom: solid 1px #efefef;
+}
+.float-label-field.focus input, 
+.float-label-field.focus select, 
+.float-label-field.focus textarea {
+  border-bottom: solid 1px #218838;;
+}
+
+.float-label-field label {
+  opacity: 0.5;
+  position: absolute;
+  top: 10px;
+  left: 0px;
+  transition: all 0.2s ease;
+  font-size: 18px;
+}
+
+.float-label-field.float label {
+  opacity: 1;
+  top: -10px;
+  font-size: 60%;
+  transition: all 0.2s ease;
+  font-weight: bold;
+}
+select {
+  background-color: #fff;
+}
+
+select option {
+   background: transparent !important;
+   border: none !important;
+}
+
+.modern-btn {
+  padding-top: 2%;
+  padding-bottom: 2%;
+  padding-left: 4%;
+  padding-right: 4%;
+  border: none !important;
+  border-radius: 7%;
+}
+
+input:after {    
+  background: none repeat scroll 0 0 transparent;
+  bottom: 0;
+  content: "";
+  display: block;
+  height: 2px;
+  left: 50%;
+  position: absolute;
+  background: #fff;
+  transition: width 0.4s ease 0s, left 0.4s ease 0s;
+  width: 0;
+}
+a:hover:after { 
+  width: 100%; 
+  left: 0; 
+}
+@media screen and (max-height: 300px) {
+	ul {
+		margin-top: 40px;
+	}
+}
diff --git a/toruf/components/form_modern/index.html b/toruf/components/form_modern/index.html
new file mode 100644
index 0000000..ce0911e
--- /dev/null
+++ b/toruf/components/form_modern/index.html
@@ -0,0 +1,42 @@
+<div class="modern-container">
+  <div class="row">
+    <div class="col-lg-6 mr-lg-0 pr-lg-0">
+      <img src="img/consultas.jpg" class="modern-img" alt="">
+    </div>
+    <div class="col-lg-6 ml-lg-0 pl-lg-0">
+      <form class="modern-form">
+        <fieldset class='float-label-field'>
+          <label for="txtName">Name</label>
+          <input id="txtName" type='text'>
+        </fieldset>
+        <fieldset class='float-label-field'>
+          <label for="txtEmail" >Email</label>
+          <input id="txtEmail" type='text'>
+        </fieldset>
+        <fieldset class='float-label-field'>
+          <label for="txtPassword">Password</label>
+          <input id="txtPassword" type='password'>
+        </fieldset>
+        <fieldset class='float-label-field'>
+          <label for="txtConfirmPassword">Confirm Password</label>
+          <input id="txtConfirmPassword" type='password'>
+        </fieldset>
+        <fieldset class='float-label-field'>
+          <label for="cars">Options</label>
+          <select id="cars">
+            <option selected disabled></option>
+            <option value="volvo">Volvo</option>
+            <option value="saab">Saab</option>
+            <option value="mercedes">Mercedes</option>
+            <option value="audi">Audi</option>
+          </select>
+        </fieldset>
+        <fieldset class='float-label-field'>
+          <label for="message">Message</label>
+          <textarea id="message"></textarea>
+        </fieldset>
+        <button class="modern-btn btn-success">Send</button>
+        </form>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/toruf/components/form_modern/index.js b/toruf/components/form_modern/index.js
new file mode 100644
index 0000000..d49f9e5
--- /dev/null
+++ b/toruf/components/form_modern/index.js
@@ -0,0 +1,12 @@
+$('head').append('<link href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet" type="text/css">');
+
+$('input, select, textarea').focus(function() {
+  $(this).closest('.float-label-field').addClass('float').addClass('focus');
+})
+
+$('input, select, textarea').blur(function() {
+  $(this).closest('.float-label-field').removeClass('focus');
+  if (!$(this).val()) {
+    $(this).closest('.float-label-field').removeClass('float');
+  }
+});
\ No newline at end of file
diff --git a/toruf/components/header_bg_image/index.css b/toruf/components/header_bg_image/index.css
new file mode 100644
index 0000000..48d1e5f
--- /dev/null
+++ b/toruf/components/header_bg_image/index.css
@@ -0,0 +1,19 @@
+html, body{
+  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 24px; font-style: normal; font-variant: normal;
+}
+
+header {
+  height: 100vh;
+}
+
+.bg-primary {background-color: #c6c6c6 !important}
+.bg-secondary {background-color: #ddd !important}
+.bg-alternate {background-color: #a8a8a8 !important}
+.text-primary {color: #c6c6c6 !important}
+.text-secondary {color: #ddd !important}
+.text-alternate {color: #a8a8a8 !important}
+
+.main-title-padding {
+  padding-top: 20%;
+  padding-bottom: 3%;
+}
\ No newline at end of file
diff --git a/toruf/components/header_bg_image/index.html b/toruf/components/header_bg_image/index.html
new file mode 100644
index 0000000..59431f5
--- /dev/null
+++ b/toruf/components/header_bg_image/index.html
@@ -0,0 +1,6 @@
+<header class="bg-primary">
+  <div class="contianer text-center">
+    <h1 class="main-title-padding text-primary">Consultas Legales Online en Panama</h1>
+    <a href="consultas.html" class="btn-lg bg-translucent text-light">Consultar</a>
+  </div>
+</header>
\ No newline at end of file
diff --git a/toruf/components/header_bg_image/index.js b/toruf/components/header_bg_image/index.js
new file mode 100644
index 0000000..e69de29
diff --git a/toruf/components/nav_hover/index.css b/toruf/components/nav_hover/index.css
new file mode 100644
index 0000000..48ed96e
--- /dev/null
+++ b/toruf/components/nav_hover/index.css
@@ -0,0 +1,13 @@
+html, body{
+  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 24px; font-style: normal; font-variant: normal;
+}
+.bg-primary {background-color: #c6c6c6 !important}
+.bg-secondary {background-color: #ddd !important}
+.bg-alternate {background-color: #a8a8a8 !important}
+.text-primary {color: #c6c6c6 !important}
+.text-secondary {color: #ddd !important}
+.text-alternate {color: #a8a8a8 !important}
+
+.navbar-toggler-icon {
+  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://ww…p='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
+}
\ No newline at end of file
diff --git a/toruf/components/nav_hover/index.html b/toruf/components/nav_hover/index.html
new file mode 100644
index 0000000..48cbc3e
--- /dev/null
+++ b/toruf/components/nav_hover/index.html
@@ -0,0 +1,63 @@
+<nav class="navbar navbar-expand-lg px-lg-5 bg-primary">
+  <a class="navbar-brand smooth-scroll" href="index.html">
+    <img src="img/panama-consulta-logo-light.svg" width="auto" height="50" alt="">
+  </a>
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+    <i class="fa fa-lg fa-bars text-light"></i>
+  </button>
+  <div class="collapse navbar-collapse text-light" id="navbarNav">
+    <ul class="navbar-nav ml-auto">
+      <li class="nav-item">
+        <a class="nav-link" href="servicios.html#sobre_nosotros">Sobre Nosotros</a>
+      </li>
+      <li class="nav-item dropdown">
+        <a class="nav-link d-block d-lg-none" href="servicios.html">
+          Servicios
+        </a>
+        <a class="nav-link dropdown-toggle d-none d-lg-block" href="#" id="navbarDropdown" onmouseover="displayServices()">
+          Servicios
+        </a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="consultas.html">Consultas</a>
+      </li>
+    </ul>
+  </div>
+</nav>
+<div class="col-12" id="navRow" style="display: none;" onmouseover="displayServices()" onmouseout="hideServices()">
+  <div class="nav-row px-5">
+    <div class="row round-row bg-translucent p-3">
+      <div class="col-md-6 col-lg-4">
+        <ul class="h4 text-light">Asesoria Legal</ul>
+        <li><a href="servicios.html#"><i class="fas fa-briefcase mr-2"></i>Corporativo</a></li>
+        <li><a href="servicios.html#"><i class="fas fa-ship mr-2"></i>Maritimo</a></li>
+        <li><a href="servicios.html#"><i class="fas fa-snowplow mr-2"></i>Minero</a></li>
+        <li><a href="servicios.html#"><i class="fas fa-gavel mr-2"></i>Fiscal</a></li>
+        <li><a href="servicios.html#"><i class="fas fa-exchange-alt mr-2"></i>Comercial</a></li>
+        <li><a href="servicios.html#"><i class="fas fa-plane-arrival mr-2"></i>Migratorio y Laboral</a></li>
+      </div>
+      <div class="col-md-6 col-lg-4">
+        <ul class="h4 text-light">Asesoria Financiera</ul>
+        <li><a href="servicios.html#"><i class="fas fa-money-check-alt mr-2"></i>Asesor Bancario</a></li>
+        <li><a href="servicios.html#"><i class="fas fa-building mr-2"></i>Asesoria empresarial</a></li>
+        <li><a href="servicios.html#"><i class="fas fa-gem mr-2"></i>Patrimonial</a></li>
+        <li><a href="servicios.html#"><i class="fas fa-chart-line mr-2"></i>Asesoria de inversion</a></li>
+      </div>
+      <div class="col-md-6 col-lg-4">
+        <ul class="h4 text-light">Otros Servicios</ul>
+        <li><a href="servicios.html#"><i class="fas fa-search mr-2"></i>Investigaciones</a></li>
+        <li><a href="servicios.html#"><i class="fas fa-balance-scale mr-2"></i>Mediacion y Conciliacion</a></li>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  function displayServices(){
+    var x = document.getElementById("navRow");
+    x.style.display = "block";
+  }
+  function hideServices(){
+    var x = document.getElementById("navRow");
+    x.style.display = "none";
+  }
+</script>
\ No newline at end of file
diff --git a/toruf/components/nav_hover/index.js b/toruf/components/nav_hover/index.js
new file mode 100644
index 0000000..e69de29
diff --git a/toruf/components/static_section_banner/index.css b/toruf/components/static_section_banner/index.css
new file mode 100644
index 0000000..215efbd
--- /dev/null
+++ b/toruf/components/static_section_banner/index.css
@@ -0,0 +1,12 @@
+html, body{
+  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 24px; font-style: normal; font-variant: normal;
+}
+section {
+  min-height: 50vh;
+}
+.bg-primary {background-color: #c6c6c6 !important}
+.bg-secondary {background-color: #ddd !important}
+.bg-alternate {background-color: #a8a8a8 !important}
+.text-primary {color: #c6c6c6 !important}
+.text-secondary {color: #ddd !important}
+.text-alternate {color: #a8a8a8 !important}
\ No newline at end of file
diff --git a/toruf/components/static_section_banner/index.html b/toruf/components/static_section_banner/index.html
new file mode 100644
index 0000000..6f77246
--- /dev/null
+++ b/toruf/components/static_section_banner/index.html
@@ -0,0 +1,6 @@
+<section class="bg-primary py-5">
+  <div class="container text-center">
+    <h5 class="text-light pb-4">Brindamos una variedad de servicios de asesoria personalizada segun las necsidades de nuestros clientes.</h5>
+    <a href="servicios.html" class="btn-lg bg-secondary text-primary">Nuestros Servicios</a>
+  </div>
+</section>
\ No newline at end of file
diff --git a/toruf/components/static_section_banner/index.js b/toruf/components/static_section_banner/index.js
new file mode 100644
index 0000000..e69de29
diff --git a/toruf/components/static_section_mobile_video/index.css b/toruf/components/static_section_mobile_video/index.css
new file mode 100644
index 0000000..a066864
--- /dev/null
+++ b/toruf/components/static_section_mobile_video/index.css
@@ -0,0 +1,49 @@
+.smartphone {
+  position: relative;
+  width: 360px;
+  height: 640px;
+  margin: auto;
+  border: 16px black solid;
+  border-top-width: 60px;
+  border-bottom-width: 60px;
+  border-radius: 36px;
+}
+
+/* The horizontal line on the top of the device */
+.smartphone:before {
+  content: '';
+  display: block;
+  width: 60px;
+  height: 5px;
+  position: absolute;
+  top: -30px;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: #333;
+  border-radius: 10px;
+}
+
+/* The circle on the bottom of the device */
+.smartphone:after {
+  content: '';
+  display: block;
+  width: 35px;
+  height: 35px;
+  position: absolute;
+  left: 50%;
+  bottom: -65px;
+  transform: translate(-50%, -50%);
+  background: #333;
+  border-radius: 50%;
+}
+
+/* The screen (or content) of the device */
+.smartphone .content {
+  width: 360px;
+  height: 640px;
+  background: white;
+}
+
+.screen-img {
+  width:100%;border:none;height:100%
+}
\ No newline at end of file
diff --git a/toruf/components/static_section_mobile_video/index.html b/toruf/components/static_section_mobile_video/index.html
new file mode 100644
index 0000000..8a00c32
--- /dev/null
+++ b/toruf/components/static_section_mobile_video/index.html
@@ -0,0 +1,25 @@
+<section class="bg-secondary">
+  <div class="container">
+    <div class="row">
+      <div class="col-lg-4">
+        <div class="smartphone">
+          <div class="content">
+            <img src="img/img.svg" alt="" style="width:100%;border:none;height:100%;object-fit: cover;">
+          </div>
+        </div>
+      </div>
+      <div class="col-lg-8">
+        <h2 class="text-primary ml-2 pb-1">Como hacer una consulta</h2>
+        <ol class="usage-instructions">
+          <li>Haga clic en la pestana de consultas</li>
+          <li>llene sus datos, seleccione el tipo de su consulta, y escriba su consulta textualmente</li>
+          <li>haga clic en enviar</li>
+          <li>llena tus datos de pago</li>
+          <li>Haga clic en enviar</li>
+          <li>Espera a ver el mensaje de confirmacion</li>
+          <li>En menos de 24 horas resivira una respuesta de alguno de los profesionales en nuestro equipo en su correo</li>
+        </ol>
+      </div>
+    </div>
+  </div>
+</section>
\ No newline at end of file
diff --git a/toruf/components/static_section_mobile_video/index.js b/toruf/components/static_section_mobile_video/index.js
new file mode 100644
index 0000000..e69de29
diff --git a/toruf/components/static_section_standard/index.css b/toruf/components/static_section_standard/index.css
new file mode 100644
index 0000000..215efbd
--- /dev/null
+++ b/toruf/components/static_section_standard/index.css
@@ -0,0 +1,12 @@
+html, body{
+  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 24px; font-style: normal; font-variant: normal;
+}
+section {
+  min-height: 50vh;
+}
+.bg-primary {background-color: #c6c6c6 !important}
+.bg-secondary {background-color: #ddd !important}
+.bg-alternate {background-color: #a8a8a8 !important}
+.text-primary {color: #c6c6c6 !important}
+.text-secondary {color: #ddd !important}
+.text-alternate {color: #a8a8a8 !important}
\ No newline at end of file
diff --git a/toruf/components/static_section_standard/index.html b/toruf/components/static_section_standard/index.html
new file mode 100644
index 0000000..a846a9d
--- /dev/null
+++ b/toruf/components/static_section_standard/index.html
@@ -0,0 +1,6 @@
+<section class="bg-light">
+  <div class="container text-center">
+    <h2 class="text-alternate h3 pb-2">Una forma mas rapida de obtener tu informacion legal</h2>
+    <p class="text-left">Estar infromado legalmente es un requerimiento basico para poder tomar buenas decisiones, pero el proceso tradicional usualmente resulta bastante tedioso para el cliente. Panama Consulta es un prodcuto de Faragon & Consulting que se creo con el proposito de poder conseguir la informacion legal que el cliente necesite con la minima interaccion posible. Nuestra plataforma online en conjunto con nuestro equipo de profesionales con altos estandares de cumplimiento nos permiten responder tu solicitud en menos de 24 horas a la comodidad de tu correo electronico.
+  </div>
+</section>
\ No newline at end of file
diff --git a/toruf/components/static_section_standard/index.js b/toruf/components/static_section_standard/index.js
new file mode 100644
index 0000000..e69de29
diff --git a/toruf/objects/financial_services.json b/toruf/objects/financial_services.json
new file mode 100644
index 0000000..6a75f8e
--- /dev/null
+++ b/toruf/objects/financial_services.json
@@ -0,0 +1,26 @@
+{
+  "banking":{
+    "title":"Asesor Bancario",
+    "description":"te asistimos en la obtencion de hipotecas, linea de creditos, prestamos personales, leasing, Factoring, fideicomisos por medio de nuestro servicio de intermediacion financiera donde buscamos la mejor opcion para el cliente  con las mejores tasas para su beneficio.",
+    "icon":"fas fa-money-check-alt",
+    "type":"financial"
+  },
+  "enterprise":{
+    "title":"Asesoria empresarial",
+    "description":"te ofrecemos la mejor estructura corporativa para que tu negocio cuente con el mejor manejo financiero, fiscal y patrimonial con fin de que los socios puedan tener un mayor rendimiento en sus dividendos. Realizamos tambien gestiones de cobranzas de contratos cuentas por cobrar o facturas.",
+    "icon":"fas fa-building",
+    "type":"financial"
+  },
+  "patrimony":{
+    "title":"Patrimonial",
+    "description":"Te asesoramos para proteger tu patrimonio por medio de estructuras legales y financieras para el manejo ideal de tus activos y bienes. Tambien vemos temas sucesorios y herencias.",
+    "icon":"fas fa-gem",
+    "type":"financial"
+  },
+  "investment":{
+    "title":"Asesoria de inversion",
+    "description":"Te asesoramos para que tengas tu cuenta de inversion con un banco de la localidad de forma exitosa facilitando el tramite de debida diligencia y sirviendote como tu asesor de inversion para que hagas la mejor inversion en la bolsa de valores. Tambien manejamos un portafolio de inversiones de proyectos y negocios privados.",
+    "icon":"fas fa-chart-line",
+    "type":"financial"
+  }
+}
\ No newline at end of file
diff --git a/toruf/objects/legal_services.json b/toruf/objects/legal_services.json
new file mode 100644
index 0000000..11ef889
--- /dev/null
+++ b/toruf/objects/legal_services.json
@@ -0,0 +1,38 @@
+{
+  "corporate":{
+    "title":"Corporativo",
+    "description":"le Ofrecemos a su empresa la asesoria personalizada necesaria para que su ente corporativo cuente con  factores esenciales para exito el la finalidad de la persona juridica.",
+    "icon":"fas fa-briefcase",
+    "type":"legal"
+  },
+  "maritime":{
+    "title":"Maritimo",
+    "description":"Asesoramos al naviero,capitan,Dueño de embarcaciones o empresario del sector maritimo en diferentes ambitos desde la marina mercante, adquisicion de embarcaciones,hipotecas navales,  la obtencion de licencias de operaciones y consesiones para llevar a cabo sus operaciones.",
+    "icon":"fas fa-ship",
+    "type":"legal"
+  }, 
+  "mining":{
+    "title":"Minero",
+    "description":"Asesoramos a la empresas mineras que quieres establecer e invertir en el sector minero de Panama  para que cumpla con toda las regulaciones y requisitos que exige la ley. Contamos con un plan de trabajo de 6 meses de retainer.",
+    "icon":"fas fa-snowplow",
+    "type":"legal"
+  },
+  "fiscal":{
+    "title":"Fiscal",
+    "description":"Asesoramos a las personas y empresas que quieran conocer sobre el sistema fiscal en Panama. Brindamos a la vez servicios de contabilidad y  administracion contable. Tambien te asesoramos con las exoneraciones y regimen fiscales para los bienes inmuebles.",
+    "icon":"fas fa-gavel",
+    "type":"legal"
+  },
+  "commercial":{
+    "title":"Comercial",
+    "description":"Le ofrecemos a tu marca, tienda o negocio las herramientas necesarias para surgir en el mercado local ya sea conectandolos con contactos o nuevos proveedores y clientes, asistencia con contratos, registros de marcas, patentes de productos, registros sanitarios, financiamiento con bancos, Inscripcion con AMPYME y otros tramites necesarios para llevar a cabo su operacion comercial de forma exitosa.",
+    "icon":"fas fa-exchange-alt",
+    "type":"legal"
+  },
+  "labor":{
+    "title":"Migratorio y Laboral",
+    "description":"Te asesoramos para cumplas tu sueño de poder vivir y trabajar en Panama de forma legal y puedas conocer de tus derechos laborales como extranjero trabajando en territorio panameño.",
+    "icon":"fas fa-plane-arrival",
+    "type":"legal"
+  }
+}
\ No newline at end of file
diff --git a/toruf/objects/other_services.json b/toruf/objects/other_services.json
new file mode 100644
index 0000000..e2620c6
--- /dev/null
+++ b/toruf/objects/other_services.json
@@ -0,0 +1,14 @@
+{
+  "investigations":{
+    "title":"Investigaciones",
+    "description":"Fincas, mercados, sociedades",
+    "icon":"fas fa-search",
+    "type":"additional"
+  },
+  "mediation":{
+    "title":"Mediacion y Conciliacion",
+    "description":"Contamos con un mediador idoneo para la resolucion de conflictos.",
+    "icon":"fas fa-balance-scale",
+    "type":"additional"
+  }
+}
\ No newline at end of file
diff --git a/toruf/objects/team_members.json b/toruf/objects/team_members.json
new file mode 100644
index 0000000..f5849ef
--- /dev/null
+++ b/toruf/objects/team_members.json
@@ -0,0 +1,20 @@
+{
+  "fernando":{
+    "namekey":"fernando",
+    "association":"Socio Fundador",
+    "name":"Fernando Javier Aragon Medina",
+    "title":"Abogado",
+    "education":"Universidad Latina",
+    "experience":"Laborado en varias firmas y como abogado independiente.",
+    "img":"img/img.svg"
+  },
+  "lorey":{
+    "namekey":"lorey",
+    "association":"Asesora Financiera",
+    "name":"Lorey Aragon Medina",
+    "title":"Ingeniera Industrial",
+    "education":"Worchester Polytechnic Institute",
+    "experience":"Labroado con multinacionales en las industrias de energia y seguros.",
+    "img":"img/img.svg"
+  }
+}
\ No newline at end of file
diff --git a/toruf/templates/consultas.html b/toruf/templates/consultas.html
new file mode 100644
index 0000000..5035556
--- /dev/null
+++ b/toruf/templates/consultas.html
@@ -0,0 +1,24 @@
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>  
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="description" content="Las consultas online de Panama Consulta son la forma mas conveniente de obtener la informacion legal que necesites en Panama">
+    <meta name="author" content="torus-digital">
+    <title> Panama Consulta - Consultas </title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <link href="https://fonts.googleapis.com/css?family=PT+Sans|Roboto&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="css/consultas.css">
+    <link rel="stylesheet" href="css/index.css">
+  </head>
+  <body id="page-top" class="text-center text-md-left">
+    <#NAV_HOVER>
+    <#FORM_MODERN>
+    <#STATIC_SECTION_STANDARD>
+    <#FOOTER_STANDARD>
+    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>
+    <script src="js/form_modern.js"></script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/toruf/templates/index.html b/toruf/templates/index.html
index a6cf11c..6633238 100644
--- a/toruf/templates/index.html
+++ b/toruf/templates/index.html
@@ -1,94 +1,26 @@
+
 <!DOCTYPE html>
 <html lang="en">
-	<#HEAD>
-
-	<body id="page-top" class="text-left">
-
-		<#NAV>
-
-
-		<header>
-			<div class="container">
-				<div class="row justify-content-center pt-5">
-					<h1 class="main-title text-main">Torus Project</h1>			
-				</div>
-				<div class="row justify-content-center pt-5">
-					<h4>Our mission is to help your open source projects/ideas come to light</h4>			
-				</div>
-			</div>
-		</header>
-
-
-		<section>
-			<div class="container">
-				<div class="row">
-					<div class="col-sm-12 py-5 text-center text-white-50 padding-text">
-						<h3>Torus Project is an ecosystem of intuitive and fully modular tools for your business needs.</h3>
-						<p>Our microservice based architecture and high tech stack provides us with an advantage allowing us to pass significatn cost savings for our end users.   Users will be able to pay for only what they need.  For example:  You could use Cubera Reservation and add a system channel manager, CRM, RMS ending up with a Full CRS centralized reservation system for your business. Aditionally users will be given the option for customer service, for an additional price.       </p>
-					</div>
-				</div>
-			</div>
-		</section>
-
-
-		<section id="projects">
-			<div class="container">
-				<div class="row">
-					<div class="col-12 text-center">
-						<h1 class="text-white">Projects</h1>
-					</div>
-				</div>
-				<div class="row align-items-center">
-
-					<PROJECTS>
-						<div class="col-sm-6 col-lg-4 text-center tool-element flip-card">
-							<div class="flip-card-inner">
-								<div class="flip-card-front">
-									<img src="../assets/img/toruscms-logo.svg" class="tool-logo">
-									<h2>{title}</h2>
-								</div>
-								<div class="flip-card-back">
-									<p class="p-3">{description}</p>
-									<div>
-										<a class="px-2" href="{website}">
-											<i class="fas fa-lg fa-globe"></i>
-										</a>
-										<a class="px-2" href="{github}">
-											<i class="fab fa-lg fa-github"></i>
-										</a>
-										<a class="px-2" href="{installation}">
-											<i class="fas fa-lg fa-download"></i>
-										</a>
-									</div>
-								</div>
-							</div>
-						</div>
-					</PROJECTS>
-
-				</div>
-			</div>
-		</section>
-
-
-		<#FOOTER>
-
-
-		<script
-			src="https://code.jquery.com/jquery-3.4.1.min.js"
-			integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
-			crossorigin="anonymous">
-		</script>
-
-		<script async defer src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>
-
-		
-	</body>
-
-</html>
-
-
-
-
-
-
-		
\ No newline at end of file
+  <head>  
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="description" content="Las consultas online de Panama Consulta son la forma mas conveniente de obtener la informacion legal que necesites en Panama">
+    <meta name="author" content="torus-digital">
+    <title>Panama Consulta</title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <link href="https://fonts.googleapis.com/css?family=PT+Sans|Roboto&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="css/index.css">
+  </head>
+  <body id="page-top" class="text-center text-md-left">
+    <#NAV_HOVER>
+    <#HEADER_BG_IMAGE>
+    <#STATIC_SECTION_STANDARD>
+    <#STATIC_SECTION_MOBILE_VIDEO>
+    <#STATIC_SECTION_BANNER>
+    <#DYNAMIC_SECTION_ROUND_TEAM>
+    <#FOOTER_STANDARD>
+    <script src="https://kit.fontawesome.com/9507dfd244.js" crossorigin="anonymous"></script>
+    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>  
+  </body>
+</html>
\ No newline at end of file
diff --git a/toruf/templates/servicios.html b/toruf/templates/servicios.html
new file mode 100644
index 0000000..d6f95d3
--- /dev/null
+++ b/toruf/templates/servicios.html
@@ -0,0 +1,25 @@
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>  
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="description" content="Ofrecemos una variedad de servicios legales adicionales">
+    <meta name="author" content="torus-digital">
+    <title>Panama Consulta - Servicios</title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <link href="https://fonts.googleapis.com/css?family=PT+Sans|Roboto&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="css/index.css">
+  </head>
+  <body id="page-top" class="text-center text-md-left">
+    <#NAV_HOVER>
+    <#STATIC_SECTION_BG_IMG>
+    <#DYNAMIC_SECTION_LEGAL_SERVICES>
+    <#DYNAMIC_SECTION_FINANCIAL_SERVICES>
+    <#DYNAMIC_SECTION_OTHER_SERVICES>
+    <#FOOTER_STANDARD>
+    <script src="https://kit.fontawesome.com/9507dfd244.js" crossorigin="anonymous"></script>
+    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>
+  </body>
+</html>
\ No newline at end of file