new intro header for datasets page and sidebar

8 files changed, 152 insertions, 63 deletions

diff --git a/client/index.js b/client/index.js
index c9335f14..37906f30 100644
--- a/client/index.js
+++ b/client/index.js
@@ -110,9 +110,9 @@ function runApplets() {
 
 function main() {
   const paras = document.querySelectorAll('section p')
-  if (paras.length) {
-    paras[0].classList.add('first_paragraph')
-  }
+  // if (paras.length) {
+  //   paras[0].classList.add('first_paragraph')
+  // }
   toArray(document.querySelectorAll('header .links a')).forEach(tag => {
     if (window.location.href.match(tag.href)) {
       tag.classList.add('active')
diff --git a/megapixels/app/site/parser.py b/megapixels/app/site/parser.py
index 3792e6f1..dc53177b 100644
--- a/megapixels/app/site/parser.py
+++ b/megapixels/app/site/parser.py
@@ -16,9 +16,30 @@ def parse_markdown(metadata, sections, s3_path, skip_h1=False):
   """
   groups = []
   current_group = []
+  in_stats = False
+
+  if 'desc' in metadata and 'subdesc' in metadata:
+    groups.append(intro_section(metadata, s3_path))
+
   for section in sections:
     if skip_h1 and section.startswith('# '):
       continue
+    elif section.strip().startswith('---'):
+      continue
+    elif section.lower().strip().startswith('ignore text'):
+      break
+    elif '### Statistics' in section:
+      if len(current_group):
+        groups.append(format_section(current_group, s3_path))
+      current_group = []
+      current_group.append(section)
+      in_stats = True
+    elif in_stats and not section.strip().startswith('## '):
+      current_group.append(section)
+    elif in_stats and section.strip().startswith('## '):
+      current_group = [format_section(current_group, s3_path, 'right-sidebar', tag='div')]
+      current_group.append(section)
+      in_stats = False
     elif section.strip().startswith('```'):
       groups.append(format_section(current_group, s3_path))
       current_group = []
@@ -32,7 +53,7 @@ def parse_markdown(metadata, sections, s3_path, skip_h1=False):
       current_group = []
     elif section.startswith('+ '):
       groups.append(format_section(current_group, s3_path))
-      groups.append(format_metadata(section))
+      groups.append('<section>' + format_metadata(section) + '<section>')
       current_group = []
     elif '![fullwidth:' in section:
       groups.append(format_section(current_group, s3_path))
@@ -52,6 +73,32 @@ def parse_markdown(metadata, sections, s3_path, skip_h1=False):
   content = "".join(groups)
   return content
 
+def intro_section(metadata, s3_path):
+  """
+  Build the intro section for datasets
+  """
+
+  section = "<section class='intro_section' style='background-image: url({})'>".format(s3_path + metadata['image'])
+  section += "<div class='inner'>"
+
+  parts = []
+  if 'desc' in metadata:
+    desc = metadata['desc']
+    if 'color' in metadata and metadata['title'] in desc:
+      desc = desc.replace(metadata['title'], "<span style='color: {}'>{}</span>".format(metadata['color'], metadata['title']))
+    section += "<div class='hero_desc'><span>{}</span></div>".format(desc, desc)
+
+  if 'subdesc' in metadata:
+    subdesc = markdown(metadata['subdesc']).replace('<p>', '').replace('</p>', '')
+    section += "<div class='hero_subdesc'><span>{}</span></div>".format(subdesc, subdesc)
+
+  section += "</div>"
+  section += "</section>"
+
+  if 'caption' in metadata:
+    section += "<section><div class='image'><div class='caption'>{}</div></div></section>".format(metadata['caption'])
+
+  return section
 
 def fix_images(lines, s3_path):
   """
@@ -75,19 +122,26 @@ def fix_images(lines, s3_path):
     real_lines.append(line)
   return "\n".join(real_lines)
 
-
-def format_section(lines, s3_path, type=''):
+def format_section(lines, s3_path, type='', tag='section'):
   """
   format a normal markdown section
   """
   if len(lines):
+    lines = fix_meta(lines)
     lines = fix_images(lines, s3_path)
     if type:
-      return "<section class='{}'>{}</section>".format(type, markdown(lines))
+      return "<{} class='{}'>{}</{}>".format(tag, type, markdown(lines), tag)
     else:
-      return "<section>" + markdown(lines) + "</section>"
+      return "<{}>{}</{}>".format(tag, markdown(lines), tag)
   return ""
 
+def fix_meta(lines):
+  new_lines = []
+  for line in lines:
+    if line.startswith('+ '):
+      line = format_metadata(line)
+    new_lines.append(line)
+  return new_lines
 
 def format_metadata(section):
   """
@@ -97,8 +151,7 @@ def format_metadata(section):
   for line in section.split('\n'):
     key, value = line[2:].split(': ', 1)
     meta.append("<div><div class='gray'>{}</div><div>{}</div></div>".format(key, value))
-  return "<section><div class='meta'>{}</div></section>".format(''.join(meta)) 
-
+  return "<div class='meta'>{}</div>".format(''.join(meta)) 
 
 def format_applet(section, s3_path):
   """
@@ -107,12 +160,13 @@ def format_applet(section, s3_path):
   # print(section)
   payload = section.strip('```').strip().strip('```').strip().split('\n')
   applet = {}
-  print(payload)
+  # print(payload)
   if ': ' in payload[0]:
     command, opt = payload[0].split(': ')
   else:
     command = payload[0]
     opt = None
+  print(command)
   if command == 'python' or command == 'javascript' or command == 'code':
     return format_section([ section ], s3_path)
   if command == '':
diff --git a/megapixels/commands/site/watch.py b/megapixels/commands/site/watch.py
index 7fd3ba7c..7bd71038 100644
--- a/megapixels/commands/site/watch.py
+++ b/megapixels/commands/site/watch.py
@@ -35,6 +35,8 @@ def cli(ctx):
   observer.schedule(SiteBuilder(), path=cfg.DIR_SITE_CONTENT, recursive=True)
   observer.start()
 
+  build_file(cfg.DIR_SITE_CONTENT + "/datasets/lfw/index.md")
+  
   try:
     while True:
       time.sleep(1)
diff --git a/site/assets/css/css.css b/site/assets/css/css.css
index 7b2e19fc..fed381a7 100644
--- a/site/assets/css/css.css
+++ b/site/assets/css/css.css
@@ -4,12 +4,12 @@ html, body {
   padding: 0;
   width: 100%;
   min-height: 100%;
-  font-family: 'Roboto', sans-serif;
-  color: #b8b8b8;
+  font-family: 'Roboto Mono', sans-serif;
+  color: #eee;
   overflow-x: hidden;
 }
 html {
-  background: #191919;
+  background: #111111;
 }
 
 .content {
@@ -146,8 +146,8 @@ h2 {
 h3 {
   margin: 0 0 20px 0;
   padding: 0;
-  font-size: 11pt;
-  font-weight: 500;
+  font-size: 14pt;
+  font-weight: 600;
   transition: color 0.2s cubic-bezier(0,0,1,1);
 }
 h4 {
@@ -165,8 +165,15 @@ h4 {
   color: #fff;
   text-decoration: underline;
 }
+.right-sidebar h3 {
+  margin: 0;
+  padding: 0 0 10px 0;
+  font-family: 'Roboto Mono';
+  text-transform: uppercase;
+  letter-spacing: 2px;
+}
 
-th, .gray, h3, h4 {
+th, .gray {
   font-family: 'Roboto Mono', monospace;
   font-weight: 400;
   text-transform: uppercase;
@@ -201,6 +208,7 @@ section {
 }
 p {
   margin: 0 0 20px 0;
+  line-height: 2;
 }
 .content a {
   color: #ddd;
@@ -229,10 +237,13 @@ p {
 }
 .right-sidebar {
   float: right;
-  width: 200px;
+  width: 240px;
   margin-left: 20px;
+  padding-top: 10px;
   padding-left: 20px;
   border-left: 1px solid #444;
+  font-family: 'Roboto';
+  font-size: 14px;
 }
 .right-sidebar .meta {
   flex-direction: column;
@@ -240,6 +251,9 @@ p {
 .right-sidebar .meta > div {
   margin-bottom: 10px;
 }
+.right-sidebar ul {
+  margin-bottom: 10px;
+}
 
 /* lists */
 
@@ -346,17 +360,17 @@ section.wide .image {
 }
 section.fullwidth {
   width: 100%;
-  background-size: contain;
 }
 section.fullwidth .image {
   max-width: 100%;
 }
 .caption {
-  text-align: center;
+  text-align: left;
   font-size: 9pt;
-  color: #888;
-  max-width: 620px;
+  color: #bbb;
+  max-width: 960px;
   margin: 10px auto 0 auto;
+  font-family: 'Roboto';
 }
 
 /* blog index */
@@ -499,3 +513,39 @@ section.fullwidth .image {
 
 .dataset-list a:nth-child(3n+3) { background-color: rgba(255, 255, 0, 0.1); }
 .desktop .dataset-list .dataset:nth-child(3n+3):hover { background-color: rgba(255, 255, 0, 0.2); }
+
+
+/* intro section for datasets */
+
+section.intro_section {
+  font-family: 'Roboto Mono';
+  width: 100%;
+  background-size: cover;
+  background-position: bottom left;
+  padding: 50px 0;
+  min-height: 60vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #111111;
+}
+.intro_section .inner {
+  max-width: 960px;
+  margin: 0 auto;
+}
+.intro_section .hero_desc {
+  font-size: 38px;
+  line-height: 60px;
+  margin-bottom: 30px;
+  color: #fff;
+}
+.intro_section .hero_subdesc {
+  font-size: 18px;
+  line-height: 36px;
+  max-width: 640px;
+  color: #ddd;
+}
+.intro_section span {
+  box-shadow: -10px -10px #000, 10px -10px #000, 10px 10px #000, -10px 10px #000;
+  background: #000;
+}
\ No newline at end of file
diff --git a/site/assets/css/tabulator.css b/site/assets/css/tabulator.css
index 200f0c5c..63abf050 100755
--- a/site/assets/css/tabulator.css
+++ b/site/assets/css/tabulator.css
@@ -493,7 +493,7 @@
   display: inline-block;
   position: relative;
   box-sizing: border-box;
-  padding: 4px;
+  padding: 10px;
   border-right: 1px solid #333;
   vertical-align: middle;
   white-space: nowrap;
diff --git a/site/content/pages/datasets/lfw/index.md b/site/content/pages/datasets/lfw/index.md
index 48d86e1f..1995e1f9 100644
--- a/site/content/pages/datasets/lfw/index.md
+++ b/site/content/pages/datasets/lfw/index.md
@@ -2,14 +2,14 @@
 
 status: published
 title: Labeled Faces in The Wild
-desc: Labeled Faces in The Wild (LFW) is a database of face photographs designed for studying the problem of unconstrained face recognition
+desc: Labeled Faces in The Wild (LFW) is a database of face photographs designed for studying the problem of unconstrained face recognition.
 subdesc: It includes 13,456 images of 4,432 people’s images copied from the Internet during 2002-2004.
-image: lfw_index.gif
+image: assets/lfw_feature.jpg
 caption: Eighteen of the 5,749 people in the Labeled Faces in the Wild Dataset. The most widely used face dataset for benchmarking commercial face recognition algorithms.
 slug: lfw
 published: 2019-2-23
 updated: 2019-2-23
-color: #00FF00
+color: #ff0000
 authors: Adam Harvey
 
 ------------
@@ -22,12 +22,11 @@ authors: Adam Harvey
 + Origin: Yahoo News Images
 + Funding: (Possibly, partially CIA)
 
-### Analysis
+### INSIGHTS
 
 - There are about 3 men for every 1 woman (4,277 men and 1,472 women) in the LFW dataset[^lfw_www]
 - The person with the most images is [George W. Bush](http://vis-www.cs.umass.edu/lfw/person/George_W_Bush_comp.html) with 530
 - There are about 3 George W. Bush's for every 1 [Tony Blair](http://vis-www.cs.umass.edu/lfw/person/Tony_Blair.html)
-- 70% of people in the dataset have only 1 image and 29% have 2 or more images
 - The LFW dataset includes over 500 actors, 30 models, 10 presidents, 124 basketball players, 24 football players, 11 kings, 7 queens, and 1 [Moby](http://vis-www.cs.umass.edu/lfw/person/Moby.html)
 - In all 3 of the LFW publications [^lfw_original_paper], [^lfw_survey], [^lfw_tech_report] the words "ethics", "consent", and "privacy" appear 0 times
 - The word "future" appears 71 times
@@ -40,20 +39,20 @@ The LFW dataset includes 13,233 images of 5,749 people that were collected betwe
 
 The *Names and Faces* dataset was the first face recognition dataset created entire from online photos. However, *Names and Faces* and *LFW* are not the first face recognition dataset created entirely "in the wild". That title belongs to the [UCD dataset](/datasets/ucd_faces/). Images obtained "in the wild" means using an image without explicit consent or awareness from the subject or photographer. 
 
-### Synthetic Faces
-
-To visualize the types of photos in the dataset without explicitly publishing individual's identities a generative adversarial network (GAN) was trained on the entire dataset. The images in this video show a neural network learning the visual latent space and then interpolating between archetypical identities within the LFW dataset.
-
-![fullwidth:](assets/lfw_synthetic.jpg)
-
 ### Biometric Trade Routes
 
-To understand how this dataset has been used, its citations have been geocoded to show an approximate geographic digital trade route of the biometric data. Lines indicate an organization (education, commercial, or governmental) that has cited the LFW dataset in their research. Data is compiled from [SemanticScholar](https://www.semanticscholar.org).
+To understand how this dataset has been used, its citations have been geocoded to show an approximate geographic digital trade route of the biometric data. Lines indicate an organization (education, commercial, or governmental) that has cited the LFW dataset in their research. Data is compiled from [Semantic Scholar](https://www.semanticscholar.org).
 
 ```
 map
 ```
 
+### Synthetic Faces
+
+To visualize the types of photos in the dataset without explicitly publishing individual's identities a generative adversarial network (GAN) was trained on the entire dataset. The images in this video show a neural network learning the visual latent space and then interpolating between archetypical identities within the LFW dataset.
+
+![fullwidth:](assets/lfw_synthetic.jpg)
+
 ### Citations
  
 Browse or download the geocoded citation data collected for the LFW dataset.
@@ -136,6 +135,7 @@ Ignore text below these lines
 
 -------
 
+
 ### Research
 
 - "In our experiments, we used 10000 images and associated captions from the Faces in the wilddata set [3]."
@@ -146,6 +146,7 @@ Ignore text below these lines
 
 - This research is based upon work supported in part by the Office of the Director of National Intelligence (ODNI), Intelligence Advanced Research Projects Activity (IARPA), via contract number 2014-14071600010.
 - From "Labeled Faces in the Wild: Updates and New Reporting Procedures"
+- 70% of people in the dataset have only 1 image and 29% have 2 or more images
 
 ### Footnotes
 
diff --git a/site/content/pages/datasets/uccs/index.md b/site/content/pages/datasets/uccs/index.md
index d40dce22..be1d2474 100644
--- a/site/content/pages/datasets/uccs/index.md
+++ b/site/content/pages/datasets/uccs/index.md
@@ -68,7 +68,7 @@ The more recent UCCS version of the dataset received funding from [^funding_uccs
 - You are welcomed to use these images for academic and journalistic use including for research papers, news stories, presentations. 
 - Please use the following citation:
 
-```MegaPixels.cc Adam Harvey 2013-2109.```
+```MegaPixels.cc Adam Harvey 2013-2019.```
 
 [^funding_sb]: Sapkota, Archana and Boult, Terrance. "Large Scale Unconstrained Open Set Face Database." 2013.
 [^funding_uccs]: Günther, M. et. al. "Unconstrained Face Detection and Open-Set Face Recognition Challenge," 2018. Arxiv 1708.02337v3.
\ No newline at end of file
diff --git a/site/public/datasets/lfw/index.html b/site/public/datasets/lfw/index.html
index 86f49c52..1242df0c 100644
--- a/site/public/datasets/lfw/index.html
+++ b/site/public/datasets/lfw/index.html
@@ -4,7 +4,7 @@
   <title>MegaPixels</title>
   <meta charset="utf-8" />
   <meta name="author" content="Adam Harvey" />
-  <meta name="description" content="Labeled Faces in The Wild (LFW) is a database of face photographs designed for studying the problem of unconstrained face recognition" />
+  <meta name="description" content="Labeled Faces in The Wild (LFW) is a database of face photographs designed for studying the problem of unconstrained face recognition." />
   <meta name="referrer" content="no-referrer" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
   <link rel='stylesheet' href='/assets/css/fonts.css' />
@@ -27,26 +27,26 @@
   </header>
   <div class="content">
     
-  <section><h3>Statistics</h3>
-</section><section><div class='meta'><div><div class='gray'>Years</div><div>2002-2004</div></div><div><div class='gray'>Images</div><div>13,233</div></div><div><div class='gray'>Identities</div><div>5,749</div></div><div><div class='gray'>Origin</div><div>Yahoo News Images</div></div><div><div class='gray'>Funding</div><div>(Possibly, partially CIA)</div></div></div></section><section><h3>Analysis</h3>
+  <section class='intro_section' style='background-image: url(https://nyc3.digitaloceanspaces.com/megapixels/v1/datasets/lfw/assets/lfw_feature.jpg)'><div class='inner'><div class='hero_desc'><span><span style='color: #ff0000'>Labeled Faces in The Wild</span> (LFW) is a database of face photographs designed for studying the problem of unconstrained face recognition.</span></div><div class='hero_subdesc'><span>It includes 13,456 images of 4,432 people’s images copied from the Internet during 2002-2004.
+</span></div></div></section><section><div class='image'><div class='caption'>Eighteen of the 5,749 people in the Labeled Faces in the Wild Dataset. The most widely used face dataset for benchmarking commercial face recognition algorithms.</div></div></section><section><div class='right-sidebar'><h3>Statistics</h3>
+<div class='meta'><div><div class='gray'>Years</div><div>2002-2004</div></div><div><div class='gray'>Images</div><div>13,233</div></div><div><div class='gray'>Identities</div><div>5,749</div></div><div><div class='gray'>Origin</div><div>Yahoo News Images</div></div><div><div class='gray'>Funding</div><div>(Possibly, partially CIA)</div></div></div><h3>INSIGHTS</h3>
 <ul>
 <li>There are about 3 men for every 1 woman (4,277 men and 1,472 women) in the LFW dataset[^lfw_www]</li>
 <li>The person with the most images is <a href="http://vis-www.cs.umass.edu/lfw/person/George_W_Bush_comp.html">George W. Bush</a> with 530</li>
 <li>There are about 3 George W. Bush's for every 1 <a href="http://vis-www.cs.umass.edu/lfw/person/Tony_Blair.html">Tony Blair</a></li>
-<li>70% of people in the dataset have only 1 image and 29% have 2 or more images</li>
 <li>The LFW dataset includes over 500 actors, 30 models, 10 presidents, 124 basketball players, 24 football players, 11 kings, 7 queens, and 1 <a href="http://vis-www.cs.umass.edu/lfw/person/Moby.html">Moby</a></li>
 <li>In all 3 of the LFW publications [^lfw_original_paper], [^lfw_survey], [^lfw_tech_report] the words "ethics", "consent", and "privacy" appear 0 times</li>
 <li>The word "future" appears 71 times</li>
 </ul>
-<h2>Labeled Faces in the Wild</h2>
+</div><h2>Labeled Faces in the Wild</h2>
 <p><em>Labeled Faces in The Wild</em> (LFW) is "a database of face photographs designed for studying the problem of unconstrained face recognition[^lfw_www]. It is used to evaluate and improve the performance of facial recognition algorithms in academic, commercial, and government research. According to BiometricUpdate.com[^lfw_pingan], LFW is "the most widely used evaluation set in the field of facial recognition, LFW attracts a few dozen teams from around the globe including Google, Facebook, Microsoft Research Asia, Baidu, Tencent, SenseTime, Face++ and Chinese University of Hong Kong."</p>
 <p>The LFW dataset includes 13,233 images of 5,749 people that were collected between 2002-2004. LFW is a subset of <em>Names of Faces</em> and is part of the first facial recognition training dataset created entirely from images appearing on the Internet. The people appearing in LFW are...</p>
 <p>The <em>Names and Faces</em> dataset was the first face recognition dataset created entire from online photos. However, <em>Names and Faces</em> and <em>LFW</em> are not the first face recognition dataset created entirely "in the wild". That title belongs to the <a href="/datasets/ucd_faces/">UCD dataset</a>. Images obtained "in the wild" means using an image without explicit consent or awareness from the subject or photographer.</p>
-<h3>Synthetic Faces</h3>
+<h3>Biometric Trade Routes</h3>
+<p>To understand how this dataset has been used, its citations have been geocoded to show an approximate geographic digital trade route of the biometric data. Lines indicate an organization (education, commercial, or governmental) that has cited the LFW dataset in their research. Data is compiled from <a href="https://www.semanticscholar.org">Semantic Scholar</a>.</p>
+</section><section class='applet_container'><div class='applet' data-payload='{"command": "map"}'></div></section><section><h3>Synthetic Faces</h3>
 <p>To visualize the types of photos in the dataset without explicitly publishing individual's identities a generative adversarial network (GAN) was trained on the entire dataset. The images in this video show a neural network learning the visual latent space and then interpolating between archetypical identities within the LFW dataset.</p>
-</section><section class='fullwidth'><div class='image'><img src='https://nyc3.digitaloceanspaces.com/megapixels/v1/datasets/lfw/assets/lfw_synthetic.jpg' alt=''></div></section><section><h3>Biometric Trade Routes</h3>
-<p>To understand how this dataset has been used, its citations have been geocoded to show an approximate geographic digital trade route of the biometric data. Lines indicate an organization (education, commercial, or governmental) that has cited the LFW dataset in their research. Data is compiled from <a href="https://www.semanticscholar.org">SemanticScholar</a>.</p>
-</section><section class='applet_container'><div class='applet' data-payload='{"command": "map"}'></div></section><section><h3>Citations</h3>
+</section><section class='fullwidth'><div class='image'><img src='https://nyc3.digitaloceanspaces.com/megapixels/v1/datasets/lfw/assets/lfw_synthetic.jpg' alt=''></div></section><section><h3>Citations</h3>
 <p>Browse or download the geocoded citation data collected for the LFW dataset.</p>
 </section><section class='applet_container'><div class='applet' data-payload='{"command": "citations"}'></div></section><section><h3>Additional Information</h3>
 <p>(tweet-sized snippets go here)</p>
@@ -94,24 +94,6 @@ imageio.imwrite(&#39;lfw_montage_960.jpg&#39;, montage)
 </code></pre>
 </section><section><h3>Supplementary Material</h3>
 </section><section class='applet_container'><div class='applet' data-payload='{"command": "load_file assets/lfw_commercial_use.csv", "fields": ["name_display, company_url, example_url, country, description"]}'></div></section><section><p>Text and graphics ©Adam Harvey / megapixels.cc</p>
-<p>Ignore text below these lines</p>
-<h3>Research</h3>
-<ul>
-<li>"In our experiments, we used 10000 images and associated captions from the Faces in the wilddata set [3]."</li>
-<li>"This work was supported in part by the Center for Intelligent Information Retrieval, the Central Intelligence Agency, the National Security Agency and National Science Foundation under CAREER award IIS-0546666 and grant IIS-0326249."</li>
-<li>From: "People-LDA: Anchoring Topics to People using Face Recognition" <a href="https://www.semanticscholar.org/paper/People-LDA%3A-Anchoring-Topics-to-People-using-Face-Jain-Learned-Miller/10f17534dba06af1ddab96c4188a9c98a020a459">https://www.semanticscholar.org/paper/People-LDA%3A-Anchoring-Topics-to-People-using-Face-Jain-Learned-Miller/10f17534dba06af1ddab96c4188a9c98a020a459</a> and <a href="https://ieeexplore.ieee.org/document/4409055">https://ieeexplore.ieee.org/document/4409055</a></li>
-<li>This paper was presented at IEEE 11th ICCV conference Oct 14-21 and the main LFW paper "Labeled Faces in the Wild: A Database for Studying Face Recognition in Unconstrained Environments" was also published that same year</li>
-<li><p>10f17534dba06af1ddab96c4188a9c98a020a459</p>
-</li>
-<li><p>This research is based upon work supported in part by the Office of the Director of National Intelligence (ODNI), Intelligence Advanced Research Projects Activity (IARPA), via contract number 2014-14071600010.</p>
-</li>
-<li>From "Labeled Faces in the Wild: Updates and New Reporting Procedures"</li>
-</ul>
-<h3>Footnotes</h3>
-<div class="footnotes">
-<hr>
-<ol></ol>
-</div>
 </section>
 
   </div>