diff --git a/ADF/LICENSE b/ADF/LICENSE
deleted file mode 100644
index 8ba2564..0000000
--- a/ADF/LICENSE
+++ /dev/null
@@ -1,21 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2015 Eliseo Papa
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
diff --git a/ADF/README.md b/ADF/README.md
deleted file mode 100644
index 99d2d44..0000000
--- a/ADF/README.md
+++ /dev/null
@@ -1,65 +0,0 @@
-# markdown-cv
-
-A curriculum vitae maintained in plain text and rendered to HTML and PDF using CSS.
-
-For more details, see the [project page](http://elipapa.github.io/markdown-cv), or the blog post on [why I switched to markdown for my CV](http://elipapa.github.io/blog/why-i-switched-to-markdown-for-my-cv.html).
-
-***
-
-## Customization
-
-Simply [fork the markdown-cv repo](https://github.com/elipapa/markdown-cv)
-
-![](https://help.github.com/assets/images/help/repository/fork_button.jpg)
-
-and edit the `index.md` file [directly in Github](https://help.github.com/articles/editing-files-in-your-repository/)
-
-![](https://help.github.com/assets/images/help/repository/edit-file-edit-button.png)
-
-adding your skills, jobs and education.
-
-![](https://help.github.com/assets/images/help/repository/edit-readme-light.png)
-
-## Distribution
-
-To transform your plain text CV into a beautiful and shareable HTML page, you have two options:
-
-### I. Use Github Pages to publish it online
-
-1. Delete the existing `gh-pages` branch from your fork. It will only contain this webpage. You can either use git or [the Github web interface](https://help.github.com/articles/creating-and-deleting-branches-within-your-repository/#deleting-a-branch).
-2. Create a new branch called `gh-pages`.
-3. Head to *yourusername*.github.io/markdown-cv to see your CV live.
-
-Any change you want to make to your CV from then on would have to be done on the `gh-pages` branch and will be immediately rendered by Github Pages.
-
-### II. Build it locally and print a PDF
-
-1. To [install jekyll](https://jekyllrb.com/docs/installation/), run `gem install bundler jekyll` from the command line.
-3. [Clone](https://help.github.com/en/articles/cloning-a-repository) your fork of markdown-cv to your local machine.
-3. Type `jekyll serve` to render your CV at http://localhost:4000.
-4. You can edit the `index.md` file and see the changes live in your browser.
-5. To print a PDF, press <kbd>⌘</kbd> + <kbd>p</kbd>. Print and web CSS media queries should take care of the styling.
-
-## Styling
-
-The included CSS will render your CV in two styles:
-s
-1. `kjhealy` the original default, inspired by [kjhealy's vita
-template](https://github.com/kjhealy/kjh-vita).
-2. `davewhipp` is a tweaked version of `kjhealy`, with bigger fonts and dates
-  right aligned.
-
-To change the default style, simply change the variable in the
-`_config.yml` file.
-
-Any other styling is possible. More CSS style contributions and forks are welcome!
-
-### Author
-
-Eliseo Papa ([Twitter](http://twitter.com/elipapa)/[Github](http://github.com/elipapa)/[Website](https://elipapa.github.io)).
-
-![Eliseo Papa](https://s.gravatar.com/avatar/eae1f0c01afda2bed9ce9cb88f6873f6?s=100)
-
-### License
-
-[MIT License](https://github.com/elipapa/markdown-cv/blob/master/LICENSE)
diff --git a/ADF/favicon.ico b/ADF/favicon.ico
deleted file mode 100644
index c3bca6c..0000000
Binary files a/ADF/favicon.ico and /dev/null differ
diff --git a/ADF/go.mod b/ADF/go.mod
new file mode 100644
index 0000000..5fa3b48
--- /dev/null
+++ b/ADF/go.mod
@@ -0,0 +1 @@
+module ADF
diff --git a/ADF/index.html b/ADF/index.html
index 875d2fc..45ed24d 100644
--- a/ADF/index.html
+++ b/ADF/index.html
@@ -1,173 +1,54 @@
-<!doctype html>
-<html>
-<head>
-  <meta charset=utf-8 name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>  Martin Fencl's CV |  CV</title>
-  <link href="media/kjhealy-screen.css" type="text/css" rel="stylesheet" media="screen">
-  <link href="media/kjhealy-print.css" type="text/css" rel="stylesheet" media="print">
-</head>
-<body>
-  <div id="main">
-    <div id="content">
-    <h1 id="martin-fencl">Martin Fencl</h1>
-<p>Software test developer, Python engineer, HW tester.</p>
-
-<div id="webaddress">
-<a href="martin@martinfencl.eu">martin@martinfencl.eu</a>
-| <a href="https://www.linkedin.com/in/martin-fencl-6a9795189/">My linkedin page</a>
-</div>
-
-<div style="position:absolute;  top: 125px;  left:33.5%;">
-  <img src="https://media-exp1.licdn.com/dms/image/C4D03AQHf42s9PdItiQ/profile-displayphoto-shrink_800_800/0/1649094514688?e=2147483647&amp;v=beta&amp;t=dzRGhT5vQ_64piZjueEWZvFbEpyOczqQ6bkrHRQvDWs" width="200" height="200" />
-</div>
-
-<p><br /></p>
-<p><br /></p>
-
-<p> 
- </p>
-
-<p><br /></p>
-
-<p> 
- </p>
-
-<p><br /></p>
-
-<h2 id="currently">Currently</h2>
-
-<p><strong>I work as a freelancer and I’m searching for interesting projects that I would enjoy.</strong></p>
-
-<h3 id="interest-in">Interest in</h3>
-
-<ul>
-  <li>Robotics <br />
-– autonomous projects <br />
-– DYI projects (modeling drones, aircraft …) <br />
-– automation (home security system, DYI projects) <br /></li>
-  <li>Linux-based systems (preferring Debian-Based)</li>
-  <li>Dockerizing <br />
-– docker, docker-compose <br />
-– kubernetes <br /></li>
-  <li>Cryptography (YubiKey) <br />
-– OATH – HOTP <br />
-– OATH – TOTP <br />
-– FIDO U2F, FIDO2 (WebAuthn)<br /></li>
-</ul>
-
-<h2 id="education">Education</h2>
-
-<p><code class="language-plaintext highlighter-rouge">2008-2012</code></p>
-<p><br /></p>
-<p><strong>Completion of the study program in the field of Electronics Mechanics</strong></p>
-<ul>
-  <li>High School of Electrical Engineering, Hluboká nad Vltavou (Czechia)</li>
-  <li>Level EQF 4</li>
-</ul>
-
-<p><code class="language-plaintext highlighter-rouge">2013-2018</code></p>
-<p><br /></p>
-<p><strong>Completion of the study program in the field of Applied Electrical Engineering</strong></p>
-<ul>
-  <li>University of West Bohemia, Faculty of Electrical Engineering, Pilsen (Czechia)</li>
-  <li>Level EQF 6</li>
-</ul>
-
-<p><code class="language-plaintext highlighter-rouge">2018-2020</code></p>
-<p><br /></p>
-<p><strong>Completion of the study program in the field of commercial electrical engineering</strong></p>
-<ul>
-  <li>University of West Bohemia, Faculty of Electrical Engineering, Pilsen (Czechia)</li>
-  <li>Level EQF 7</li>
-</ul>
-
-<h2 id="work-experience">Work Experience</h2>
-<p><code class="language-plaintext highlighter-rouge">2013-2013</code></p>
-<p><br /></p>
-<p><strong>IT service worker / support</strong></p>
-<ul>
-  <li><em>Karel Peisker</em>, Budweis (Czechia)</li>
-  <li>Network service, user interface security</li>
-</ul>
-
-<p><code class="language-plaintext highlighter-rouge">2016-2017</code></p>
-<p><br /></p>
-<p><strong>Development programmer - development department (internship)</strong></p>
-<ul>
-  <li><em>Robert Bosch, spol. s.r.o.</em>, Budweis (Czechia)</li>
-  <li>Programming of laboratory instruments</li>
-  <li>Development department assistance</li>
-</ul>
-
-<p><em>technologies / tools used:</em> <br />
-– LabView <br />
-– Python <br /></p>
-
-<p><code class="language-plaintext highlighter-rouge">2017-2020</code></p>
-<p><br /></p>
-<p><strong>Development programmer - technology department (internship)</strong></p>
-<ul>
-  <li><em>Robert Bosch, spol. s.r.o.</em>, Budweis (Czechia)</li>
-  <li>Programming of laboratory measuring devices</li>
-  <li>Testing of laboratory equipment, proposal for improvement and calibration</li>
-  <li>Analysis and work with data</li>
-</ul>
-
-<p><em>technologies / tools used:</em>  <br />	
-– Git <br />
-– LabVIEW <br />
-– Python <br />
-– Visual Basic for Applications (VBA) <br />
-– Structured Text (ST) <br />
-– 3D printing (SLA, DMLS) <br />
-– Measuring and analysis technology <br /></p>
-
-<p><code class="language-plaintext highlighter-rouge">2017-2020</code></p>
-<p><br /></p>
-<p><strong>Software test engineer – DITET5 (Schweinfurth team for EMF projects)</strong></p>
-<ul>
-  <li><em>ZF Engineering Pilsen, spol. s.r.o.</em>, Pilsen (Czechia)</li>
-  <li>Testing of hybrid automotive units (8P4G project)</li>
-  <li>Creating automation tests, regression tests</li>
-  <li>Manual testing of internal software (EMF)</li>
-  <li>Problem analysis, consulting of status SW</li>
-</ul>
-
-<p><em>technologies / tools used:</em> <br />
-– Dspace SCALEXIO (rapid control prototyping (RCP) applications) <br />
-– Exam (test extension/orchestrator) <br />
-– Python <br /></p>
-
-<p><code class="language-plaintext highlighter-rouge">2020-</code></p>
-<p><br /></p>
-<p><strong>Software test developer</strong></p>
-<ul>
-  <li><em>W.A.G. payment solutions, a.s., Princip, a.s.</em>, Prague (Czechia)</li>
-  <li>Creating, develop and maintain software unit project for testing (SwMU)</li>
-  <li>Modified existing software to detect and correct errors, improve performance, and upgrade interfaces (cooperating with sw-team)</li>
-  <li>Prepared reports on specifications and activities for each project.</li>
-  <li>Designed web applications (interface for support SwMU project)</li>
-</ul>
-
-<p><em>technologies / tools used:</em> <br />
-– Apache Kafka (event streaming platform)  <br />
-– Python <br />
-– Git <br />
-– Flask, Flask-RestAPI <br />
-– Django <br />
-– Docker, Docker-compose <br />
-– Helm, Skaffold <br />
-– Kubernetes (and local minikube) <br /></p>
-
-<div style="position:static;bottom: 0px; left:0px;">
-	<button onclick="history.back()">Go Back</button>
-</div>
-
-<!-- ### Footer
-
-Last updated: May 2013 -->
-
-    </div>
-  </div>
-</body>
+<!DOCTYPE html>
+<html lang="en">
+   <head>
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <title>Slider</title>
+      <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
+      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-slider-pips/1.11.4/jquery-ui-slider-pips.min.css">
+      <link rel="stylesheet" href="styles/styles.css">
+   </head>
+   <body>
+      <div class="flexbox">
+      <div class="flex-item">
+         <div class="h_main">
+            <h3>A.D. mood! make my life easier</h3>
+            <div class="mood-box">
+               <div class="face-wrapper">
+                  <div id="eyes" class="case3">
+                     <div class="eyebrow left"></div>
+                     <div class="eye left">
+                        <div class="eyelid"></div>
+                     </div>
+                     <div class="bottomlid left"></div>
+                     <div class="eyebrow right"></div>
+                     <div class="eye right">
+                        <div class="eyelid"></div>
+                     </div>
+                     <div class="bottomlid right"></div>
+                  </div>
+                  <div id="mouth" class="case3">
+                     <div id="mouth-open"></div>
+                  </div>
+                  <div id="face-bg" class="case3">
+                     <div class="face-light"></div>
+                     <div class="cow">
+                        🐄 <!-- Můžete nahradit ikonou krávy nebo obrázkem krávy podle potřeby -->
+                     </div>
+                  </div>
+               </div>
+            </div>
+            <div id="amount" style="font-size: 18px;"></div>
+         </div>
+         <div class="flex-item">
+            <h4>jak se dneska máš pšouku?</h4>
+            <div id="slider"></div>
+            <div id="text_ad"></div>
+         </div>
+      </div></div>
+      <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
+      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-slider-pips/1.11.4/jquery-ui-slider-pips.min.js"></script>
+      <script src="/scripts/script.js"></script>
+   </body>
 </html>
\ No newline at end of file
diff --git a/ADF/media/davewhipp-print.css b/ADF/media/davewhipp-print.css
deleted file mode 100644
index 79b3ddd..0000000
--- a/ADF/media/davewhipp-print.css
+++ /dev/null
@@ -1,194 +0,0 @@
-/* http://meyerweb.com/eric/tools/css/reset/
-   v2.0 | 20110126
-   License: none (public domain)
-*/
-
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	font-size: 100%;
-	font: inherit;
-	vertical-align: baseline;
-}
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
-	display: block;
-}
-body {
-	line-height: 1;
-}
-ol, ul {
-	list-style: none;
-}
-blockquote, q {
-	quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-	content: '';
-	content: none;
-}
-table {
-	border-collapse: collapse;
-	border-spacing: 0;
-}
-
-/* end of reset */
-
-
-
-body {
-	font: normal normal 400;
-	font-size: 12pt;
-	line-height: 1.35em;
-	/*also written as...  font: normal normal 400 100%/1.5em;*/
-	font-family: Avenir,Verdana,sans-serif;
-	/*margin-top: 1em;
-	margin-left: 1em;*/
-}
-
-p {
-	position: relative;
-	left: 25%;
-	margin-bottom: 0.2em;
-	margin-right: 0;
-	width: 60%;
-}
-
-code {
-	font: normal normal;
-	font-size: 90%;
-	/*line-height: 1em;*/
-	font-family: Monaco,Menlo,monospace,sans-serif;
-	color: #ccc;
-}
-
-p code {
-	position: absolute;
-	text-align: right;
-	right: -20%;
-}
-
-
-ul {
-	position: relative;
-	left: 25%;
-	width: 75%;
-	margin-bottom: 1em;
-	/*margin-top: -0.5em;*/
-}
-
-/*uncomment to get dashes in the list*/
-/*li:before {
-	content: "-";
-	position: relative;
-	left: -0.25em;
-}*/
-
-li {
-	/*second line indent*/
-	padding-left: 1.25em;
-	text-indent: -1.25em;
-	/*color: #777;*/
-}
-
-li ul {
-	position: relative;
-	left: 0;
-	width: 100%;
-	margin-top: 0.25em;
-}
-
-h1,h2,h3,h4 {
-	font-weight: 400;
-	font-family: Avenir,Cousine,Verdana,sans-serif;
-	width: 80%;
-}
-
-h1 {
-	text-align: left;
-	font-size: 3em;
-	line-height: 1em;
-	position: relative;
-	left: 25%;
-}
-
-h1+p {
-	/*subtitle*/
-	font-style: italic;
-	font-size: 110%;
-}
-
-h2 {
-	font-size: 1.1em;
-	color: #a00;
-	margin-top: 2em;
-	position: relative;
-	top: 1.2em;
-	text-align: right;
-	width: 20%;
-}
-
-
-h3 {
-	font-size: 1em;
-	line-height: 2em;
-	color: #ccc;
-	position: relative;
-	top: 1.6em;
-	text-align: right;
-	width: 20%;
-}
-
-a {
-	color: inherit;
-	text-decoration:none
-}
-
-a:hover {
-	color:#39f
-}
-
-#webaddress {
-	margin-top: 1em;
-	position: relative;
-	left: 25%;
-	color: #ccc;
-	font-family: Monaco,Menlo,monospace,sans-serif;
-	font-size: 90%;
-}
-
-#webaddress a {
-	text-decoration: none;
-}
-
-em {
-	font-style: normal;
-	color: #2d4e5e
-}
-
-strong {
-	font-weight: bold;
-}
-
-#ghbutton {
-	display: none;
-	visibility: hidden;
-}
-
-
-
diff --git a/ADF/media/davewhipp-screen.css b/ADF/media/davewhipp-screen.css
deleted file mode 100644
index adacc45..0000000
--- a/ADF/media/davewhipp-screen.css
+++ /dev/null
@@ -1,195 +0,0 @@
-/* http://meyerweb.com/eric/tools/css/reset/
-   v2.0 | 20110126
-   License: none (public domain)
-*/
-
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	font-size: 100%;
-	font: inherit;
-	vertical-align: baseline;
-}
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
-	display: block;
-}
-body {
-	line-height: 1;
-}
-ol, ul {
-	list-style: none;
-}
-blockquote, q {
-	quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-	content: '';
-	content: none;
-}
-table {
-	border-collapse: collapse;
-	border-spacing: 0;
-}
-
-/* end of reset */
-
-
-
-body {
-	font: normal normal 400;
-	font-size: 100%;
-	line-height: 1.5em;
-	/*also written as...  font: normal normal 400 100%/1.5em;*/
-	font-family: Avenir,Verdana,sans-serif;
-	margin-top: 1em;
-	margin-left: 1em;
-}
-
-p {
-	position: relative;
-	left: 25%;
-	margin-bottom: 0.7em;
-	margin-right: 0;
-	width: 55%;
-}
-
-code {
-	font: normal normal;
-	font-size: 90%;
-	/*line-height: 1em;*/
-	font-family: Monaco,Menlo,monospace,sans-serif;
-	color: #aaa;
-}
-
-p code {
-	position: absolute;
-	text-align: right;
-	right: -20%;
-}
-
-
-ul {
-	position: relative;
-	left: 25%;
-	width: 75%;
-	margin-bottom: 1.5em;
-	margin-top: -0.5em;
-}
-
-/*uncomment to get dashes in the list*/
-/*li:before {
-	content: "-";
-	position: relative;
-	left: -0.25em;
-}*/
-
-li {
-	/*second line indent*/
-	padding-left: 1.25em;
-	text-indent: -1.25em;
-	/*color: #777;*/
-}
-
-li ul {
-	position: relative;
-	left: 0;
-	width: 100%;
-	margin-top: 0.25em;
-}
-
-h1,h2,h3,h4 {
-	font-weight: 400;
-	font-family: Avenir,Cousine,Verdana,sans-serif;
-	width: 80%;
-}
-
-h1 {
-	text-align: left;
-	font-size: 3em;
-	line-height: 1em;
-	position: relative;
-	left: 25%;
-}
-
-h1+p {
-	/*subtitle*/
-	font-style: italic;
-	font-size: 110%;
-}
-
-h2 {
-	font-size: 1.1em;
-	color: #bc412b;
-	margin-top: 3em;
-	position: relative;
-	top: 1.4em;
-	text-align: right;
-	width: 20%;
-}
-
-h3 {
-	font-size: 1em;
-	line-height: 2em;
-	position: relative;
-	top: 1.7em;
-	text-align: right;
-	width: 20%;
-}
-
-a {
-	color: inherit;
-	/*text-decoration:none*/
-}
-
-a:hover {
-	color:#39f
-}
-
-#webaddress {
-	margin-top: 1em;
-	position: relative;
-	left: 25%;
-	color: #bc412b;
-	font-family: Monaco,Menlo,monospace,sans-serif;
-	font-size: 100%;
-}
-
-#webaddress a {
-	text-decoration: none;
-}
-
-em {
-	/* font-weight: bold; */
-	font-style: italic;
-}
-
-strong {
-	font-weight: bold;
-}
-
-#address {
-	display: none;
-}
-
-
-
-/*
-@media only screen and (max-width: 480px) {
-	make one column somehow...
-}*/
\ No newline at end of file
diff --git a/ADF/media/kjhealy-print.css b/ADF/media/kjhealy-print.css
deleted file mode 100644
index 1996e09..0000000
--- a/ADF/media/kjhealy-print.css
+++ /dev/null
@@ -1,194 +0,0 @@
-/* http://meyerweb.com/eric/tools/css/reset/ 
-   v2.0 | 20110126
-   License: none (public domain)
-*/
-
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed, 
-figure, figcaption, footer, header, hgroup, 
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	font-size: 100%;
-	font: inherit;
-	vertical-align: baseline;
-}
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure, 
-footer, header, hgroup, menu, nav, section {
-	display: block;
-}
-body {
-	line-height: 1;
-}
-ol, ul {
-	list-style: none;
-}
-blockquote, q {
-	quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-	content: '';
-	content: none;
-}
-table {
-	border-collapse: collapse;
-	border-spacing: 0;
-}
-
-/* end of reset */
-
-
-
-body {
-	font: normal normal 400;
-	font-size: 10pt;
-	line-height: 1.35em;
-	/*also written as...  font: normal normal 400 100%/1.5em;*/
-	font-family: Verdana,sans-serif;
-	/*margin-top: 1em;
-	margin-left: 1em;*/
-}
-
-p {
-	position: relative;
-	left: 28%;
-	margin-bottom: 0.2em;
-	margin-right: 0;
-	width: 70%;
-}
-
-code {
-	font: normal normal;
-	font-size: 60%;
-	/*line-height: 1em;*/
-	font-family: Menlo,monospace,sans-serif;
-	color: #ccc;
-}
-
-p code {
-	position: absolute;
-	left: -11%;
-}
-
-
-ul { 
-	position: relative;
-	left: 28%;
-	width: 65%;
-	margin-bottom: 1em;
-	/*margin-top: -0.5em;*/
-}
-
-/*uncomment to get dashes in the list*/
-/*li:before {
-	content: "-";
-	position: relative;
-	left: -0.25em;
-}*/
-
-li {
-	/*second line indent*/
-	padding-left: 1.25em;
-	text-indent: -1.25em;
-	/*color: #777;*/
-}
-
-li ul {
-	position: relative;
-	left: 0;
-	width: 100%;
-	margin-top: 0.25em;
-}
-
-h1,h2,h3,h4 {
-	font-weight: 400;
-	font-family: Cousine,Verdana,sans-serif;
-	width: 65%;
-}
-
-h1 {
-	text-align: left;
-	font-size: 3em;
-	line-height: 1em;
-	position: relative;
-	left: 28%;
-}
-
-h1+p { 
-	/*subtitle*/
-	font-style: italic;
-	font-size: 110%;
-}
-
-h2 {
-	font-size: 1.1em;
-	color: #a00;
-	margin-top: 2em;
-	position: relative;
-	top: 1.2em;
-	text-align: right;
-	width: 18%;
-}
-
-
-h3 {
-	font-size: 1em;
-	line-height: 2em; 
-	color: #ccc;
-	position: relative;
-	top: 1.6em;
-	text-align: right;
-	width: 18%;
-}
-
-a {
-	color: inherit;
-	text-decoration:none
-}
-
-a:hover {
-	color:#39f
-}
-
-#webaddress {
-	margin-top: 1em;
-	position: relative;
-	left: 28%;
-	color: #ccc;
-	font-family: Menlo,monospace,sans-serif;
-	font-size: 80%;
-}
-
-#webaddress a {
-	text-decoration: none;
-}
-
-em {
-	font-style: normal;
-	color: #2d4e5e 
-}
-
-strong {
-	font-weight: bold;
-}
-
-#ghbutton {
-	display: none;
-	visibility: hidden;
-}
-
-
-
-
diff --git a/ADF/media/kjhealy-screen.css b/ADF/media/kjhealy-screen.css
deleted file mode 100644
index a8bffae..0000000
--- a/ADF/media/kjhealy-screen.css
+++ /dev/null
@@ -1,196 +0,0 @@
-/* http://meyerweb.com/eric/tools/css/reset/ 
-   v2.0 | 20110126
-   License: none (public domain)
-*/
-
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed, 
-figure, figcaption, footer, header, hgroup, 
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	font-size: 100%;
-	font: inherit;
-	vertical-align: baseline;
-}
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure, 
-footer, header, hgroup, menu, nav, section {
-	display: block;
-}
-body {
-	line-height: 1;
-}
-ol, ul {
-	list-style: none;
-}
-blockquote, q {
-	quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-	content: '';
-	content: none;
-}
-table {
-	border-collapse: collapse;
-	border-spacing: 0;
-}
-
-/* end of reset */
-
-
-
-body {
-	font: normal normal 400;
-	font-size: 80%;
-	line-height: 1.5em;
-	/*also written as...  font: normal normal 400 100%/1.5em;*/
-	font-family: Verdana,sans-serif;
-	margin-top: 1em;
-	margin-left: 1em;
-}
-
-p {
-	position: relative;
-	left: 33%;
-	margin-bottom: 0.7em;
-	margin-right: 0;
-	width: 65%;
-}
-
-code {
-	font: normal normal;
-	font-size: 75%;
-	/*line-height: 1em;*/
-	font-family: Menlo,monospace,sans-serif;
-	color: #aaa;
-}
-
-p code {
-	position: absolute;
-	left: -14%;
-}
-
-
-ul { 
-	position: relative;
-	left: 33%;
-	width: 65%;
-	margin-bottom: 1.5em;
-	margin-top: -0.5em;
-}
-
-/*uncomment to get dashes in the list*/
-/*li:before {
-	content: "-";
-	position: relative;
-	left: -0.25em;
-}*/
-
-li {
-	/*second line indent*/
-	padding-left: 1.25em;
-	text-indent: -1.25em;
-	/*color: #777;*/
-}
-
-li ul {
-	position: relative;
-	left: 0;
-	width: 100%;
-	margin-top: 0.25em;
-}
-
-h1,h2,h3,h4 {
-	font-weight: 400;
-	font-family: Cousine,Verdana,sans-serif;
-	width: 65%;
-}
-
-h1 {
-	text-align: left;
-	font-size: 3em;
-	line-height: 1em;
-	position: relative;
-	left: 33%;
-}
-
-h1+p { 
-	/*subtitle*/
-	font-style: italic;
-	font-size: 110%;
-}
-
-h2 {
-	font-size: 1.1em;
-	color: #a00;
-	margin-top: 3em;
-	position: relative;
-	top: 1.4em;
-	text-align: right;
-	width: 20%;
-}
-
-h3 {
-	font-size: 1em;
-	line-height: 2em; 
-	position: relative;
-	top: 1.7em;
-	text-align: right;
-	width: 20%;
-}
-
-a {
-	color: inherit;
-	/*text-decoration:none*/
-}
-
-a:hover {
-	color:#39f
-}
-
-#webaddress {
-	position: relative;
-	left: 33%;
-	margin-bottom: 0.7em;
-	margin-right: 0;
-	width: 65%;
-	color: #aaa;
-	font-family: Menlo,monospace,sans-serif;
-	font-size: 80%;
-}
-
-#webaddress a {
-	text-decoration: none;
-}
-
-em {
-	font-weight: bold;
-	font-style: italic;
-}
-
-strong {
-	font-weight: bold;
-}
-
-#address {
-	display: none;
-}
-
-
-
-/*
-@media only screen and (max-width: 480px) {
-	make one column somehow...
-}*/
diff --git a/ADF/scripts/script.js b/ADF/scripts/script.js
new file mode 100644
index 0000000..0cf1a8d
--- /dev/null
+++ b/ADF/scripts/script.js
@@ -0,0 +1,83 @@
+$(function() {
+    var slider = $("#slider");
+
+    slider.slider({
+        range: "max",
+        min: 1,
+        max: 6,
+        value: 3,
+        slide: function(event, ui) {
+            $("#text_ad").text(getText(ui.value));
+            $("#amount").text(ui.value);
+            localStorage.setItem("sliderValue", ui.value.toString());
+            updateFace(ui.value);
+        }
+    });
+
+    var savedValue = localStorage.getItem("sliderValue");
+    if (savedValue) {
+        slider.slider("value", parseInt(savedValue));
+        $("#text_ad").text(getText(savedValue));
+        $("#amount").text(savedValue);
+    }
+
+    // Manuální spuštění funkce updateFace při načítání stránky
+    updateFace(slider.slider("value"));
+
+    slider.slider('pips', {
+        first: 'pip',
+        last: 'pip',
+    });
+
+    function updateFace(value) {
+        var face = $(".face-wrapper").children();
+
+        switch (value) {
+            case 1:
+                removeClass();
+                $(face).addClass("case1");
+                break;
+            case 2:
+                removeClass();
+                $(face).addClass("case2");
+                break;
+            case 3:
+                removeClass();
+                $(face).addClass("case3");
+                break;
+            case 4:
+                removeClass();
+                $(face).addClass("case4");
+                break;
+            case 5:
+                removeClass();
+                $(face).addClass("case5");
+                break;
+            case 6:
+                removeClass();
+                $(face).addClass("case6");
+                break;
+        }
+    }
+
+    function removeClass() {
+        $(".face-wrapper").children().removeClass("case1 case2 case3 case4 case5 case6");
+    }
+
+    function getText(value) {
+        switch (parseInt(value)) {
+            case 1:
+                return "1 test";
+            case 2:
+                return "2 test";
+            case 3:
+                return "3 test";
+            case 4:
+                return "4 test";
+            case 5:
+                return "5 test";
+            case 6:
+                return "6 test";
+        }
+    }
+});
\ No newline at end of file
diff --git a/ADF/server.js b/ADF/server.js
new file mode 100644
index 0000000..8082176
--- /dev/null
+++ b/ADF/server.js
@@ -0,0 +1,11 @@
+const express = require('express');
+const path = require('path');
+
+const app = express();
+const port = 3000;
+
+app.use(express.static(path.join(__dirname, '')));
+
+app.listen(port, () => {
+  console.log(`Server běží na http://localhost:${port}`);
+});
diff --git a/ADF/styles/styles.css b/ADF/styles/styles.css
new file mode 100644
index 0000000..9c0bd7f
--- /dev/null
+++ b/ADF/styles/styles.css
@@ -0,0 +1,474 @@
+ @import url("https://fonts.googleapis.com/css?family=Baloo");
+ *:focus {
+     outline: none;
+}
+ .left {
+     left: 0px;
+}
+ .right {
+     right: 0px;
+}
+ html, body {
+     height: 100%;
+     width: 100%;
+     font-family: 'Baloo', cursive;
+     font-size: 1.5em;
+     letter-spacing: .8px;
+     color: tomato;
+     background-color: #4F0E91;
+}
+/** FLEXBOX **/
+ .flexbox {
+     display: flex;
+     justify-content: center;
+     flex-direction: column;
+     width: 50%;
+     margin: 0 auto;
+     transform: translateY(5%);
+}
+ .flexbox .flex-item {
+     padding: 0px 20px;
+     flex: 1 100%;
+     width: 100%;
+     align-self: center;
+}
+/** SLIDER **/
+ #slider {
+     border-radius: 50px;
+}
+ #slider .ui-slider-handle {
+     border: none;
+     background-color: #fff;
+     border-radius: 100%;
+     cursor: -webkit-grab;
+     cursor: -moz-grab;
+}
+ #slider .ui-slider-handle:active {
+     cursor: -webkit-grabbing;
+     cursor: -moz-grabbing;
+}
+ #slider.ui-slider {
+     border: 5px solid #fff;
+     background: -webkit-linear-gradient(left, #84b6e5, #ECA58F 50%);
+}
+ #slider .ui-slider-range-max {
+     border-radius: 50px;
+     background-color: #4F0E91 !important;
+}
+ .ui-slider-horizontal .ui-slider-range-max {
+     background-color: #4F0E91;
+}
+ .ui-slider-horizontal .ui-slider-range-max {
+     background-color: #4F0E91 !important;
+}
+ .ui-slider-pips .ui-slider-line {
+     background: #fff !important;
+     opacity: .5;
+     width: 5px;
+     border-radius: 50px;
+     position: absolute;
+     z-index: -1;
+     height: 20px;
+}
+ .mood-box {
+     height: 100%;
+     width: 100%;
+}
+/*********************************** *************FACE ***********************************/
+ .face-wrapper {
+     border: 3px solid #4F0E91;
+     border-radius: 100%;
+     width: 220px;
+     height: 220px;
+     overflow: hidden;
+     z-index: 3;
+     margin: 0 auto;
+     position: relative;
+     animation: neutral 6.5s infinite ease-in-out;
+}
+ .face-wrapper div {
+     position: absolute;
+     transition: all .8s ease-in-out;
+}
+ #face-bg {
+     width: 250px;
+     height: 250px;
+     margin: 0px auto;
+     top: -10px;
+     left: -10px;
+     position: absolute;
+     background-color: #db9553;
+     z-index: 1;
+     overflow: hidden;
+}
+ #face-bg .face-light {
+     height: 100%;
+     width: 100%;
+     left: 0px;
+     border-radius: 100%;
+     background-color: #E5B384;
+}
+ #face-bg.case1 {
+     background-color: #5399db;
+}
+ #face-bg.case1 .face-light {
+     background: #84b6e5;
+     border-radius: 100%;
+     height: 220px;
+     width: 220px;
+     top: 40px;
+     left: 10px;
+}
+ #face-bg.case2 {
+     background-color: #948d86;
+}
+ #face-bg.case2 .face-light {
+     background: #A9B5C0;
+     border-radius: 100%;
+     height: 220px;
+     width: 220px;
+     top: 0px;
+     left: -20px;
+}
+ #face-bg.case4 {
+     background-color: #e85b51;
+}
+ #face-bg.case4 .face-light {
+     background: #ECA58F;
+     border-radius: 100%;
+     height: 220px;
+     width: 220px;
+     top: 0px;
+     left: 20px;
+}
+ #face-bg.case5 {
+     background-color: #ff3279;
+}
+ #face-bg.case5 .face-light {
+     background: #FF80AC;
+     border-radius: 100%;
+     height: 220px;
+     width: 220px;
+     bottom: 40px;
+     left: 10px;
+}
+ #face-bg.case6 {
+     background-color: #ff3279;
+}
+ #face-bg.case6 .face-light {
+     background: #FF80AC;
+     border-radius: 100%;
+     height: 220px;
+     width: 220px;
+     bottom: 40px;
+     left: 10px;
+}
+ #face-bg.case6 .cow {
+     position: absolute;
+     scale: 1.3;
+     bottom: 10%;
+     left: 90%;
+     transform: translateX(-50%);
+     font-size: 2em;
+}
+/*End Face BG*/
+ #eyes {
+     width: 50%;
+     height: 20px;
+     z-index: 2;
+     top: 30%;
+     left: calc(50% - 1.5em);
+}
+ #eyes .eyebrow {
+     top: -5px;
+     width: 30px;
+     height: 10px;
+     position: absolute;
+     border-radius: 10px 10px 20px 20px;
+     background: #db9553;
+}
+ #eyes .eyebrow.left {
+     left: calc(-.13em);
+}
+ #eyes .eyebrow.right {
+     right: calc(-.13em);
+}
+ #eyes .eye {
+     background: #343838;
+     height: 40px;
+     width: 20px;
+     border-radius: 50px;
+     overflow: hidden;
+}
+ #eyes .eye .eyelid {
+     background: #db9553;
+     width: 25px;
+     top: -2px;
+     left: -2px;
+     height: 0%;
+     border-radius: 100% 100% 0% 0%;
+     animation: blink 10s ease-in 2s infinite;
+}
+ #eyes.case1 {
+     transform: translateX(0px) translateY(40px);
+}
+ #eyes.case1 .eyebrow {
+     background: #5399db;
+     border-radius: 0px 0px 100px 100px;
+     z-index: 4;
+     transform: rotate(-60deg);
+}
+ #eyes.case1 .eyebrow.right {
+     transform: rotate(60deg);
+}
+ #eyes.case1 .eyelid {
+     background: #5399db;
+}
+ #eyes.case1 .bottomlid {
+     width: 20px;
+     height: 20px;
+     background: #84b6e5;
+}
+ #eyes.case2 {
+     transform: translateX(-40px) translateY(20px);
+}
+ #eyes.case2 .eyebrow {
+     background: #948d86;
+     height: 20px;
+     border-radius: 50px 50px 60px 60px;
+     transform: rotate(-20deg);
+}
+ #eyes.case2 .eyebrow.right {
+     transform: rotate(20deg);
+}
+ #eyes.case2 .eyelid {
+     background: #948d86;
+}
+ #eyes.case4 {
+     transform: translateX(20px) translateY(-10px);
+}
+ #eyes.case4 .eyebrow {
+     background: #e85b51;
+     height: 20px;
+     border-radius: 80px 80px 60px 60px;
+     transform: rotate(-20deg);
+}
+ #eyes.case4 .eyebrow.right {
+     transform: rotate(20deg);
+}
+ #eyes.case4 .eyelid {
+     background: #e85b51;
+}
+ #eyes.case5 {
+     transform: translateX(5px) translateY(-20px);
+}
+ #eyes.case5 .eye {
+     width: 20px;
+}
+ #eyes.case5 .eyebrow {
+     background: #ff3279;
+     height: 20px;
+     border-radius: 80px 80px 60px 60px;
+     transform: rotate(-40deg);
+}
+ #eyes.case5 .eyebrow.right {
+     transform: rotate(40deg);
+}
+ #eyes.case5 .eyelid {
+     background: #ff3279;
+}
+ #eyes.case5 .bottomlid {
+     position: absolute;
+     background: #FF80AC;
+     width: 25px;
+     height: 25px;
+     border-radius: 50px;
+     top: 22px;
+     z-index: 2;
+}
+ #eyes.case6 {
+     transform: translateX(5px) translateY(-20px);
+}
+ #eyes.case6 .eye {
+     width: 20px;
+}
+ #eyes.case6 .eyebrow {
+     background: #ff3279;
+     height: 20px;
+     border-radius: 80px 80px 60px 60px;
+     transform: rotate(-40deg);
+}
+ #eyes.case6 .eyebrow.right {
+     transform: rotate(40deg);
+}
+ #eyes.case6 .eyelid {
+     background: #ff3279;
+}
+ #eyes.case6 .bottomlid {
+     position: absolute;
+     background: #FF80AC;
+     width: 25px;
+     height: 25px;
+     border-radius: 50px;
+     top: 22px;
+     z-index: 2;
+}
+/*End Eyes*/
+ #mouth {
+     width: 120px;
+     height: 4px;
+     z-index: 3;
+     top: 70%;
+     left: calc(50% - 1.5em);
+     position: absolute;
+     background: #db9553;
+}
+ #mouth #mouth-open {
+     width: 100px;
+     height: 100px;
+     bottom: -20px;
+     position: absolute;
+}
+ #mouth.case1 {
+     width: 100px;
+     height: 100px;
+     border-radius: 50%;
+     background: #343838;
+     transform: translateX(0px) translateY(20px);
+}
+ #mouth.case1 #mouth-open {
+     width: 120px;
+     height: 120px;
+     display: block;
+     top: 5px;
+     left: -12px;
+     border-radius: 50%;
+     background: #84b6e5;
+}
+ #mouth.case2 {
+     width: 50px;
+     height: 4px;
+     border-radius: 50px;
+     background: #343838;
+     transform: translateX(-20px) translateY(0px) rotate(20deg);
+}
+ #mouth.case3 #mouth-open {
+     display: none;
+     width: 30px;
+     height: 40px;
+     border-top: 20px solid #343838;
+     border-left: 40px solid transparent;
+     border-right: 40px solid transparent;
+     top: 0px;
+     left: -12px;
+     border-radius: 0%;
+}
+ #mouth.case4 {
+     width: 30px;
+     height: 4px;
+     border-radius: 50px;
+     background: #343838;
+     transform: rotate(20deg) translateY(-40px) translateX(40px) scale(0.8);
+}
+ #mouth.case4 #mouth-open {
+     width: 0px;
+     height: 0px;
+     display: block;
+     border-top: 20px solid #343838;
+     border-left: 40px solid transparent;
+     border-right: 40px solid transparent;
+     top: 0px;
+     left: -12px;
+     border-radius: 10%;
+}
+ #mouth.case5 {
+     top: 105px;
+     border-radius: 50px;
+     background: #343838;
+     transform: rotate(-15deg);
+}
+ #mouth.case5 #mouth-open {
+     width: 0px;
+     height: 0px;
+     display: block;
+     border-top: 20px solid #343838;
+     border-left: 40px solid transparent;
+     border-right: 40px solid transparent;
+     top: 0px;
+     left: -12px;
+     border-radius: 10%;
+}
+ #mouth.case6 {
+     top: 105px;
+     border-radius: 50px;
+     background: #343838;
+     transform: rotate(-15deg);
+}
+ #mouth.case6 #mouth-open {
+     width: 0px;
+     height: 0px;
+     display: block;
+     border-top: 70px solid #343838;
+     border-left: 83px solid transparent;
+     border-right: 70px solid transparent;
+    /* background: #FF80AC;
+     */
+     border-radius: 10px;
+     top: -7px;
+     left: -7px;
+     transform: translateX(-10px) scale(0.8);
+}
+/*End Mouth*/
+/** KEYFRAMES **/
+ @keyframes blink {
+     0% {
+         height: 0%;
+    }
+     5% {
+         height: 100%;
+    }
+     8% {
+         height: 0%;
+    }
+     100% {
+         height: 0%;
+    }
+}
+ @keyframes neutral {
+     0% {
+         transform: rotate(0deg);
+    }
+     10% {
+         transform: rotate(-5deg);
+    }
+     40% {
+         transform: rotate(10deg);
+    }
+     80% {
+         transform: rotate(-10deg);
+    }
+     90% {
+         transform: rotate(5deg);
+    }
+     100% {
+         transform: rotate(0deg);
+    }
+}
+ .ui-slider-horizontal .ui-slider-range-max {
+     background: red;
+}
+ .ui-slider {
+     position: relative;
+     text-align: left;
+}
+ .ui-slider .ui-slider-handle {
+     position: absolute;
+     z-index: 2;
+     width: 1.2em;
+     height: 1.2em;
+     cursor: default;
+}
+
+.h_main {
+  text-align: center;
+}
diff --git a/ADF/styles/styles.scss b/ADF/styles/styles.scss
new file mode 100644
index 0000000..acf6790
--- /dev/null
+++ b/ADF/styles/styles.scss
@@ -0,0 +1,482 @@
+@import url('https://fonts.googleapis.com/css?family=Baloo');
+
+$background: #4F0E91;
+$slider-light: #fff;
+
+$black: #343838;
+$orange: #E5B384;
+$face-shadow: #db9553;
+
+$pale: #A9B5C0;
+$pale-shadow: #948d86;
+
+$pink: #ECA58F;
+$pink-shadow: #e85b51;
+
+$darkblue: #84b6e5;
+$darkblue-shadow: #5399db;
+
+$red: #FF80AC;
+$red-shadow: #ff3279;
+
+*:focus{
+  outline: none;
+}
+
+.left{
+    left: 0px;
+  }
+
+.right{
+    right: 0px;
+  }
+
+html,body{
+  height: 100%;
+  width: 100%;
+  font-family: 'Baloo', cursive;
+  font-size: 1.5em;
+  letter-spacing: .8px;
+  color: tomato;
+  background-color: $background;
+}
+
+/**
+FLEXBOX
+**/
+
+.flexbox{
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  width: 50%;
+  margin: 0 auto;
+  transform: translateY(5%);
+
+  .flex-item{
+    padding: 0px 20px;
+    flex: 1 100%;
+    width: 100%;
+    align-self: center;
+  }
+}
+
+/**
+SLIDER
+**/
+
+#slider{
+  border-radius: 50px;
+
+  .ui-slider-handle{
+    border:none;
+    background-color: $slider-light;
+    border-radius: 100%;
+    cursor:  -webkit-grab; cursor:-moz-grab;
+    &:active{
+    cursor: -webkit-grabbing; cursor:-moz-grabbing;
+    }
+  }
+
+  &.ui-slider{
+    border: 5px solid $slider-light;
+    background: -webkit-linear-gradient(left, $darkblue, $pink 50%);;
+  }
+
+  .ui-slider-range-max{
+    border-radius: 50px;
+    background-color: $background !important;
+  }
+
+}
+
+
+.ui-slider-horizontal .ui-slider-range-max{
+   background-color: $background;
+}
+.ui-slider-horizontal .ui-slider-range-max{
+  background-color: $background !important;
+}
+
+
+.ui-slider-pips .ui-slider-line{
+    background: #fff !important;
+  opacity: .5;
+    width:5px;
+  border-radius: 50px;
+  position:absolute;
+  z-index: -1;
+    height:20px;
+  }
+
+.mood-box{
+  height: 100%;
+  width: 100%;
+
+}
+
+/***********************************
+*************FACE
+***********************************/
+
+
+.face-wrapper{
+  border: 3px solid $background;
+  border-radius: 100%;
+  width: 220px;
+  height: 220px;
+  overflow:hidden;
+  z-index:3;
+  margin: 0 auto;
+  position:relative;
+  animation: neutral 6.5s infinite ease-in-out;
+
+   div{
+    position: absolute;
+    transition: all .8s ease-in-out;
+  }
+}
+
+
+#face-bg{
+  width: 250px;
+  height: 250px;
+  margin: 0px auto;
+  top: -10px;
+  left: -10px;
+  position:absolute;
+  background-color: $face-shadow;
+  z-index: 1;
+
+
+  .face-light{
+    height: 100%;
+    width: 100%;
+    left: 0px;
+    border-radius:100%;
+    background-color: $orange;
+  }
+
+   &.case1{
+    background-color: $darkblue-shadow;
+     .face-light{
+      background: $darkblue;
+      border-radius: 100%;
+      height: 220px;
+      width: 220px;
+      top: 40px;
+      left: 10px;
+               }
+         }
+
+  &.case2{
+    background-color: $pale-shadow;
+    .face-light{
+      background: $pale;
+      border-radius: 100%;
+      height: 220px;
+      width: 220px;
+      top: 0px;
+      left: -20px;
+               }
+        }
+
+  &.case4{
+    background-color: $pink-shadow;
+    .face-light{
+      background: $pink;
+      border-radius: 100%;
+      height: 220px;
+      width: 220px;
+      top: 0px;
+      left: 20px;
+               }
+        }
+
+   &.case5{
+    background-color: $red-shadow;
+    .face-light{
+      background: $red;
+      border-radius: 100%;
+      height: 220px;
+      width: 220px;
+      bottom: 40px;
+      left: 10px;
+               }
+        }
+}/*End Face BG*/
+
+#eyes{
+  width: 50%;
+  height: 20px;
+  z-index: 2;
+  top: 30%;
+  left: calc(50% - 1.5em);
+
+  .eyebrow{
+     top: -5px;
+      width:30px;
+      height:10px;
+      position:absolute;
+      border-radius: 10px 10px 20px 20px;
+      background: $face-shadow;
+
+      &.left{
+        left: calc(-.13em);
+      }
+
+      &.right{
+        right: calc(-.13em);
+      }
+  }
+
+  .eye{
+  background: $black;
+  height: 40px;
+  width: 20px;
+  border-radius: 50px;
+  overflow:hidden;
+
+      .eyelid{
+        background: $face-shadow;
+        width: 25px;
+        top: -2px;
+        left: -2px;
+        height: 0%;
+        border-radius: 100% 100% 0% 0%;
+        animation: blink 10s ease-in 2s infinite;
+            }
+      }
+
+   &.case1 {
+      transform: translateX(0px) translateY(40px);
+
+     .eyebrow{
+       background:$darkblue-shadow;
+       border-radius: 0px 0px 100px 100px;
+       z-index: 4;
+       transform: rotate(-60deg);
+
+       &.right{
+         transform: rotate(60deg);
+             }
+         }
+     .eyelid{
+     background: $darkblue-shadow;
+         }
+
+     .bottomlid{
+       width: 20px;
+       height: 20px;
+       background: $darkblue;
+     }
+    }
+
+  &.case2{
+    transform: translateX(-40px) translateY(20px);
+
+    .eyebrow{
+      background: $pale-shadow;
+      height: 20px;
+      border-radius: 50px 50px 60px 60px;
+      transform: rotate(-20deg);
+          &.right{
+            transform: rotate(20deg);
+          }
+        }
+    .eyelid{
+     background: $pale-shadow;
+         }
+      }
+
+   &.case4{
+    transform: translateX(20px) translateY(-10px);
+
+    .eyebrow{
+      background: $pink-shadow;
+      height: 20px;
+      border-radius: 80px 80px 60px 60px;
+      transform: rotate(-20deg);
+
+      &.right{
+        transform: rotate(20deg);
+      }
+
+    }
+    .eyelid{
+     background: $pink-shadow;
+     }
+  }
+
+    &.case5{
+    transform: translateX(5px) translateY(-20px);
+
+    .eye{
+        width: 20px;
+      }
+
+    .eyebrow{
+      background: $red-shadow;
+      height: 20px;
+      border-radius: 80px 80px 60px 60px;
+      transform: rotate(-40deg);
+        &.right{
+          transform: rotate(40deg);
+        }
+    }
+    .eyelid{
+     background: $red-shadow;
+     }
+
+     .bottomlid{
+        position:absolute;
+        background: $red;
+        width: 25px;
+        height: 25px;
+        border-radius: 50px;
+        top: 22px;
+        z-index:2;
+      }
+  }
+
+
+}/*End Eyes*/
+
+#mouth{
+  width: 120px;
+  height: 4px;
+  z-index: 3;
+  top: 70%;
+  left: calc(50% - 1.5em);
+  position:absolute;
+
+  background: $face-shadow;
+
+
+  #mouth-open{
+    width: 100px;
+    height: 100px;
+     bottom: -20px;
+     position: absolute;
+
+
+
+  }
+
+  &.case1{
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    background: $black;
+    transform: translateX(0px) translateY(20px);
+
+    #mouth-open{
+      width: 120px;
+      height: 120px;
+      display: block;
+      top: 5px;
+      left: -12px;
+      border-radius: 50%;
+      background: $darkblue;
+    }
+     }
+
+
+
+  &.case2{
+    width: 50px;
+    height: 4px;
+    border-radius: 50px;
+    background: $black;
+    transform: translateX(-20px) translateY(0px) rotate(20deg);
+
+    #mouth-open{
+
+    }
+     }
+
+  &.case3{
+    #mouth-open{
+      display:none;
+       width:30px;
+       height:40px;
+      border-top: 20px solid $black;
+       border-left: 40px solid transparent;
+       border-right: 40px solid transparent;
+      top: 0px;
+      left: -12px;
+      border-radius: 0%;
+    }
+  }
+
+  &.case4{
+    width: 30px;
+    height: 4px;
+    border-radius: 50px;
+    background: $black;
+    transform:  rotate(20deg) translateY(-40px) translateX(40px) scale(.8);
+
+       #mouth-open{
+         width:0px;
+         height:0px;
+         display: block;
+        border-top: 20px solid $black;
+         border-left: 40px solid transparent;
+         border-right: 40px solid transparent;
+        top: 0px;
+        left: -12px;
+        border-radius: 10%;
+        }
+     }
+
+   &.case5{
+    top: 105px;
+    border-radius: 50px;
+    background: #343838;
+    transform: rotate(-15deg);
+
+       #mouth-open{
+      width: 0px;
+      height: 0px;
+      display: block;
+      border-top: 70px solid #343838;
+      border-left: 83px solid transparent;
+      border-right: 70px solid transparent;
+      /* background: #FF80AC; */
+      border-radius: 10px;
+      top: -7px;
+      left: -7px;
+      transform: translateX(-10px) scale(.8);
+              }
+     }
+}/*End Mouth*/
+
+
+/**
+KEYFRAMES
+**/
+
+
+@keyframes blink{
+  0%{ height: 0%};
+  5%{height: 100%};
+  8%{height: 0%};
+  100%{height: 0%};
+}
+
+@keyframes neutral{
+  0%{ transform: rotate(0deg)};
+  10%{transform:rotate(-5deg)};
+  40%{ transform: rotate(10deg)};
+  80%{transform:rotate(-10deg)};
+  90%{transform:rotate(5deg)};
+  100%{transform:rotate(0deg)};
+}
+
+
+.ui-slider-horizontal .ui-slider-range-max{
+  background: red;
+}
+
+
+