diff --git a/12/css/normalize.css b/12/css/normalize.css
new file mode 100644
index 0000000..6e49565
--- /dev/null
+++ b/12/css/normalize.css
@@ -0,0 +1,427 @@
+/*! normalize.scss v0.1.0 | MIT License | based on git.io/normalize */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+  margin: 0;
+}
+
+/* HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
+ * and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `block-borderlate` element in IE 8/9/11, Safari, and Firefox < 22.
+ */
+
+[hidden],
+block-borderlate {
+  display: none;
+}
+
+/* Links
+   ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+
+b,
+strong {
+  font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari and Chrome.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+
+img {
+  border: 0;
+}
+
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0;
+}
+
+/**
+ * Contain overflow in all browsers.
+ */
+
+pre {
+  overflow: auto;
+}
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+ *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit; /* 1 */
+  font: inherit; /* 2 */
+  margin: 0; /* 3 */
+}
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+
+button {
+  overflow: visible;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+
+button,
+select {
+  text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+  cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+  line-height: normal;
+}
+
+/**
+ * It's recommended that you don't atblock-bordert to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
+ *    (include `-moz` to future-proof).
+ */
+
+input[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box; /* 2 */
+  box-sizing: content-box;
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+  border: 0; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+
+optgroup {
+  font-weight: bold;
+}
+
+/* Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}
diff --git a/12/css/style.css b/12/css/style.css
new file mode 100644
index 0000000..db02f03
--- /dev/null
+++ b/12/css/style.css
@@ -0,0 +1,1431 @@
+/* Общие стили. Каркас
+   ========================================================================== */
+
+@font-face {
+  font-family: "Open Sans";
+  src: url("../fonts/OpenSansCondensed-Bold.woff2") format("woff2"),
+      url("../fonts/OpenSansCondensed-Bold.woff") format("woff");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Open Sans";
+  src: url("../fonts/OpenSans-Regular.woff2") format("woff2"),
+      url("../fonts/OpenSans-Regular.woff") format("woff");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+*,
+*::before,
+*::after {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+body {
+  font-family: "Open Sans", "Arial", sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+  color: #ffffff;
+  text-transform: uppercase;
+
+  background-color: #232321;
+}
+
+main {
+  position: relative;
+}
+
+.content-box-component {
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+}
+
+.container {
+  width: 1360px;
+  margin: 0 auto;
+}
+
+.modal-open {
+  height: 100vh;
+  overflow: hidden;
+}
+
+
+/**
+ * Кнопка закрытия модального окна
+ */
+
+.cancel {
+  display: block;
+  margin: 0;
+  padding: 0;
+
+  width: 42px;
+  height: 42px;
+
+  font-size: 0;
+
+  background-color: rgba(255, 255, 255, 0.2);
+  background-image: url("../img/icon-cross.svg");
+  background-position: center;
+  background-repeat: no-repeat;
+
+  border: 0;
+  border-radius: 2px;
+
+  opacity: 0.6;
+}
+
+.cancel:hover,
+.cancel:focus {
+  background-color: rgba(255, 255, 255, 0.4);
+  opacity: 1;
+}
+
+.cancel:active {
+  -webkit-transform: translateY(1px);
+      -ms-transform: translateY(1px);
+          transform: translateY(1px);
+}
+
+
+/**
+ * Оверлей под экранами
+ */
+
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 2;
+
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+
+  width: 100%;
+  height: 100%;
+  padding-top: 60px;
+  overflow: auto;
+
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
+
+/* Блок с фильтрами изображений других пользователей
+   ========================================================================== */
+
+.img-filters {
+  padding: 20px 0;
+
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+
+  -webkit-box-pack: center;
+     -ms-flex-pack: center;
+   justify-content: center;
+}
+
+.img-filters--inactive {
+  opacity: 0;
+}
+
+.img-filters__button {
+  padding: 5px 15px;
+
+  font-family: "Open Sans", "Arial", sans-serif;
+  font-weight: 700;
+  font-size: 18px;
+  line-height: auto;
+  text-transform: uppercase;
+
+  cursor: pointer;
+  background-color: #232321;
+  border: none;
+}
+
+.img-filters__button:active,
+.img-filters__button--active {
+  color: #ff4e4e;
+
+  background-color: #ffffff;
+  border-radius: 2px;
+}
+
+.img-filters__label {
+  padding: 5px 15px;
+
+  font-family: "Open Sans", "Arial", sans-serif;
+  font-weight: 700;
+  font-size: 18px;
+  line-height: auto;
+
+  cursor: pointer;
+}
+
+.img-filters__radio:focus + .img-filters__label {
+  outline: auto 5px highlight;
+}
+
+.img-filters__radio:checked + .img-filters__label {
+  color: #ff4e4e;
+  text-decoration: none;
+
+  background-color: #ffffff;
+  border-radius: 2px;
+}
+
+
+/* Блок, в котором размещаются фотографии других пользователей
+   ========================================================================== */
+
+.pictures {
+  display: -ms-grid;
+  display: grid;
+  grid-gap: 10px;
+
+  -ms-grid-columns: (1fr)[7];
+      grid-template-columns: repeat(7, 1fr);
+}
+
+.picture {
+  position: relative;
+  line-height: 0;
+}
+
+.picture__img {
+  max-width: auto;
+  width: 100%;
+  height: auto;
+}
+
+.picture__info {
+  display: none;
+
+  margin: 0;
+  padding: 15px;
+  position: absolute;
+  bottom: 10px;
+  left: 50%;
+
+  background-color: rgba(0, 0, 0, 0.5);
+  border-radius: 5px;
+
+  -webkit-transform: translateX(-50%);
+      -ms-transform: translateX(-50%);
+          transform: translateX(-50%);
+}
+
+.picture:hover .picture__info,
+.picture:focus .picture__info {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.picture__comments,
+.picture__likes {
+  padding-left: 30px;
+  position: relative;
+
+  font-family: "Open Sans", "Arial", sans-serif;
+  font-weight: 400;
+  color: #ffffff;
+}
+
+.picture__comments {
+  margin-right: 10px;
+}
+
+.picture__comments::before,
+.picture__likes::before {
+  content: "";
+  position: absolute;
+  left: 5px;
+  top: -7px;
+
+  background-image: url("../img/sprite.png");
+  background-repeat: no-repeat;
+}
+
+.picture__comments::before {
+  width: 20px;
+  height: 16px;
+
+  background-position: -5px -5px;
+}
+
+.picture__likes::before {
+  width: 20px;
+  height: 16px;
+
+  background-position: -5px -31px;
+}
+
+
+/* Поле для загрузки нового изображения
+   ========================================================================== */
+
+.img-upload {
+  -ms-grid-column: 3;
+  -ms-grid-column-span: 3;
+  grid-column: 3 / span 3;
+
+  -ms-grid-row: 1;
+  -ms-grid-row-span: 3;
+  grid-row: 1 / span 3;
+}
+
+.img-upload__wrapper {
+  margin: 0 auto;
+  padding-bottom: 60px;
+  width: 582px;
+
+  text-align: center;
+}
+
+.img-upload__form {
+  position: relative;
+  min-height: 569px;
+
+  background-color: #eed21e;
+  background-image: url("../img/logo-background-1.jpg");
+  background-repeat: no-repeat;
+  background-position: center;
+
+  border: none;
+}
+
+.img-upload__start {
+  position: relative;
+
+  margin: 0;
+  padding: 0;
+  min-height: 569px;
+
+  background-image: url("../img/logo-mask.png");
+  background-repeat: no-repeat;
+  background-position: center;
+
+  border: none;
+}
+
+.img-upload__label {
+  position: absolute;
+
+  top: 194px;
+  left: 203px;
+
+  width: 180px;
+  height: 181px;
+
+  font-size: 0;
+
+  background-image: url("../img/upload-button-bg.png");
+  background-repeat: no-repeat;
+  background-position: center;
+
+  cursor: pointer;
+}
+
+.img-upload__label::after {
+  content: "";
+  position: absolute;
+
+  top: 32px;
+  left: 47px;
+
+  width: 86px;
+  height: 114px;
+
+  background-image: url("../img/upload-button.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+
+  -webkit-filter: drop-shadow(0 0 10px #943106);
+          filter: drop-shadow(0 0 10px #943106);
+}
+
+.img-upload__label:hover::after,
+.img-upload__label:active::after {
+  -webkit-filter: drop-shadow(0 0 10px #622104);
+          filter: drop-shadow(0 0 10px #622104);
+
+  -webkit-transform: scale(1.1);
+      -ms-transform: scale(1.1);
+          transform: scale(1.1);
+}
+
+.img-upload__input:focus + .img-upload__label {
+  outline: auto 5px highlight;
+}
+
+
+/* Окно для редактирования изображения
+   ========================================================================== */
+
+.img-upload__overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 2;
+
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+
+  width: 100%;
+  height: 100%;
+
+  padding-top: 60px;
+  overflow: auto;
+
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
+.img-upload__preview-container {
+  position: relative;
+  margin-bottom: 30px;
+}
+
+
+/**
+ * Кнопки изменения масштаба изобраения
+ */
+
+.img-upload__scale {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  z-index: 1;
+
+  font-family: "Open Sans", "Arial", sans-serif;
+  font-weight: 400;
+
+  -webkit-transform: translateX(-50%);
+      -ms-transform: translateX(-50%);
+          transform: translateX(-50%);
+}
+
+.scale {
+  margin: 0;
+  padding: 10px;
+
+  font-size: 0;
+  border: 0;
+}
+
+.scale__control {
+  position: relative;
+
+  width: 33px;
+  height: 33px;
+  margin: 0;
+  padding: 0;
+
+  text-align: center;
+  vertical-align: middle;
+
+  background-color: rgba(0, 0, 0, 0.6);
+  border: 0;
+}
+
+.scale__control:hover,
+.scale__control:focus {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+.scale__control:active {
+  -webkit-transform: translateY(1px);
+      -ms-transform: translateY(1px);
+          transform: translateY(1px);
+}
+
+.scale__control--smaller {
+  border-radius: 50% 0 0 50%;
+}
+
+.scale__control--smaller::before {
+  content: "–";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+
+  font-size: 20px;
+  line-height: 0;
+  color: #ffffff;
+
+  -webkit-transform: translate(-50%, -50%);
+      -ms-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+}
+
+.scale__control--value {
+  width: 60px;
+
+  font-size: 16px;
+  color: #ffffff;
+
+  border: solid rgba(255, 255, 255, 0.5);
+  border-width: 0 2px;
+}
+
+.scale__control--bigger {
+  border-radius: 0 50% 50% 0;
+}
+
+.scale__control--bigger::before {
+  content: "+";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+
+  font-size: 20px;
+  line-height: 0;
+  color: #ffffff;
+
+  -webkit-transform: translate(-50%, -50%);
+      -ms-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+}
+
+
+/**
+ * Превью изображения
+ */
+
+.img-upload__preview {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+     -ms-flex-align: center;
+        align-items: center;
+  -webkit-box-pack: center;
+     -ms-flex-pack: center;
+   justify-content: center;
+
+  width: 600px;
+  height: 600px;
+
+  background-color: #ffffff;
+}
+
+.img-upload__preview img {
+  display: block;
+  max-width: 600px;
+  max-height: 600px;
+}
+
+
+/**
+ * Шкала регулирования глубины фильтра
+ */
+
+.effect-level {
+  position: absolute;
+  bottom: 9px;
+  left: 50%;
+
+  padding: 7px 11px 0;
+
+  width: 495px;
+  height: 34px;
+
+  font-size: 12px;
+  text-align: center;
+  color: #ffffff;
+  white-space: nowrap;
+
+  background-color: rgba(0, 0, 0, 0.6);
+  border-radius: 34px;
+
+  -webkit-transform: translateX(-50%);
+      -ms-transform: translateX(-50%);
+          transform: translateX(-50%);
+}
+
+.effect-level .noUi-target {
+  border-radius: 16px;
+}
+
+.effect-level .noUi-connects {
+  border-radius: 13px;
+}
+
+.effect-level .noUi-connect {
+  background: #ffe753;
+}
+
+.effect-level__value {
+  display: none;
+}
+
+
+/**
+ * Блок с эффектами, которые можно применить к изображению
+ */
+
+.effects {
+  margin: 0;
+  padding: 0;
+  margin-bottom: 30px;
+  border: none;
+}
+
+.effects__list {
+  margin: 0;
+  padding: 0;
+
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+
+  -webkit-box-pack: center;
+     -ms-flex-pack: center;
+   justify-content: center;
+
+  list-style: none;
+  text-align: center;
+}
+
+.effects__item {
+  margin-right: 5px;
+}
+
+.effects__label {
+  font-family: "Open Sans", "Arial", sans-serif;
+  font-weight: 700;
+
+  cursor: pointer;
+}
+
+.effects__label:hover,
+.effects__label:focus,
+.effects__radio:checked + .effects__label {
+  color: #ffe753;
+}
+
+.effects__preview {
+  display: block;
+  width: 70px;
+  height: 70px;
+  margin-bottom: 5px;
+
+  overflow: hidden;
+
+  font-size: 0;
+
+  background-color: #314359;
+  background-image: url("../img/upload-default-image.jpg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 100% auto;
+
+  border: solid 5px transparent;
+  border-radius: 5px;
+}
+
+.effects__preview:last-of-type {
+  margin-right: 0;
+}
+
+.effects__radio:checked + .effects__label .effects__preview {
+  border: 5px solid #ffe753;
+}
+
+.effects__radio:focus + .effects__label .effects__preview {
+  outline: auto 5px highlight;
+}
+
+.effects__preview--chrome {
+  -webkit-filter: grayscale(1);
+          filter: grayscale(1);
+}
+
+.effects__preview--sepia {
+  -webkit-filter: sepia(1);
+          filter: sepia(1);
+}
+
+.effects__preview--marvin {
+  -webkit-filter: invert(100%);
+          filter: invert(100%);
+}
+
+.effects__preview--phobos {
+  -webkit-filter: blur(3px);
+          filter: blur(3px);
+}
+
+.effects__preview--heat {
+  -webkit-filter: brightness(3);
+          filter: brightness(3);
+}
+
+
+/**
+ * Блок добавления хэштегов и комментария к изображению
+ */
+
+.text {
+  margin: 0;
+  padding: 0;
+  margin-bottom: 30px;
+
+  text-align: center;
+  border: none;
+}
+
+.text__hashtags {
+  width: 450px;
+
+  margin: 0 auto;
+  margin-bottom: 20px;
+  padding: 5px 10px;
+
+  font-family: "Open Sans", "Arial", sans-serif;
+  font-weight: 400;
+  color: #000000;
+
+  border-radius: 5px;
+}
+
+.text__description {
+  width: 450px;
+  height: 100px;
+
+  margin: 0 auto;
+  padding: 15px 10px;
+
+  font-family: "Open Sans", "Arial", sans-serif;
+  font-weight: 400;
+  color: #000000;
+
+  border-radius: 5px;
+}
+
+.img-upload__field-wrapper--error {
+  background-color: #fd4d4b;
+  color:#ffffff;
+  font-size: 12px;
+  margin-top: -20px;
+  z-index: 10000;
+  position: relative;
+}
+
+
+/**
+ * Кнопка для отправки изображения
+ */
+
+.img-upload__submit {
+  padding: 10px 20px;
+
+  color: #ffe753;
+  text-align: center;
+  text-transform: uppercase;
+  font-family: "Open Sans", "Arial", sans-serif;
+  font-weight: 700;
+
+  background-color: rgba(255, 231, 82, 0.2);
+
+  border: 0;
+  border-radius: 4px;
+}
+
+.img-upload__submit:hover,
+.img-upload__submit:focus {
+  background-color: rgba(255, 231, 82, 0.4);
+}
+
+.img-upload__submit:active {
+  -webkit-transform: translateY(1px);
+      -ms-transform: translateY(1px);
+          transform: translateY(1px);
+}
+
+.img-upload__submit:disabled,
+.img-upload__submit--disabled {
+  opacity: 0.3;
+}
+
+
+/*
+ * Кнопка для закрытия окна редактирования изображения
+ */
+
+.img-upload__cancel {
+  position: absolute;
+  top: 0;
+  left: 610px;
+}
+
+.img-upload__cancel:active {
+  -webkit-transform: translateY(1px);
+      -ms-transform: translateY(1px);
+          transform: translateY(1px);
+}
+
+
+/* Окно полноэкранного просмотра изображения
+   ========================================================================== */
+
+.big-picture__preview {
+  position: absolute;
+  top: 60px;
+  left: 50%;
+
+  max-width: 600px;
+  min-height: 600px;
+
+  padding-bottom: 60px;
+
+  -webkit-transform: translateX(-50%);
+      -ms-transform: translateX(-50%);
+          transform: translateX(-50%);
+}
+
+.big-picture__img img {
+  display: block;
+}
+
+.social {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+     -ms-flex-direction: column;
+         flex-direction: column;
+
+  max-width: 600px;
+
+  color: #000000;
+  font-family: "Open Sans", "Arial", sans-serif;
+  font-weight: 400;
+  text-transform: none;
+
+  background-color: #ffffff;
+}
+
+
+/*
+ * Подпись к изображению
+ */
+
+.social__header {
+  padding: 15px 15px;
+
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+
+  -webkit-box-pack: start;
+     -ms-flex-pack: start;
+   justify-content: flex-start;
+
+  -webkit-box-align: center;
+     -ms-flex-align: center;
+        align-items: center;
+
+  border-bottom: 1px solid #cccccc;
+}
+
+.social__picture {
+  display: block;
+  -ms-flex-negative: 0;
+        flex-shrink: 0;
+  margin-right: 15px;
+}
+
+.social__caption {
+  margin: 0;
+  margin-right: 15px;
+}
+
+.social__likes {
+  margin: 0;
+  margin-left: auto;
+  min-width: 125px;
+}
+
+.likes-count {
+  position: relative;
+  padding-left: 30px;
+
+  color: #f48181;
+
+  cursor: pointer;
+}
+
+.likes-count:hover {
+  color: #e90000;
+}
+
+.likes-count::before {
+  content: "";
+  position: absolute;
+
+  top: 3px;
+  left: 5px;
+
+  width: 20px;
+  height: 18px;
+
+  background-image: url("../img/sprite.png");
+  background-repeat: no-repeat;
+
+  background-position: -5px -56px;
+  opacity: 0.5;
+}
+
+.likes-count:hover::before,
+.likes-count:focus::before {
+  opacity: 1;
+}
+
+.likes-count:active::before,
+.likes-count--active::before {
+  opacity: 1;
+  background-position: -5px -81px;
+}
+
+
+/*
+ * Комментарии к изображению
+ */
+
+.social__comments {
+  -ms-flex-preferred-size: 100%;
+               flex-basis: 100%;
+
+  list-style: none;
+
+  margin: 0;
+  padding: 0;
+  padding-top: 20px;
+}
+
+.social__comment {
+  padding-left: 15px;
+  padding-right: 15px;
+  padding-bottom: 20px;
+
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+
+  -webkit-box-align: center;
+     -ms-flex-align: center;
+        align-items: center;
+}
+
+.social__comment-count {
+  padding-top: 20px;
+  padding-left: 65px;
+}
+
+.social__comments-loader {
+  padding: 0;
+  padding-left: 65px;
+  padding-bottom: 20px;
+  position: relative;
+
+  text-align: left;
+  color: #3b77c0;
+
+  background: none;
+  border: none;
+}
+
+.comments-loader {
+  text-align: left;
+  color: #3b77c0;
+
+  background: none;
+  border: none;
+}
+
+.social__text {
+  margin: 0;
+}
+
+
+/**
+ * Спиннер загрузки комментариев и его анимация
+ */
+
+.spinner::after,
+.comments-loader:active::after {
+  content: "";
+  position: absolute;
+  left: 200px;
+  top: 7px;
+
+  color: #3b77c0;
+  font-size: 6px;
+
+  width: 1em;
+  height: 1em;
+  border-radius: 50%;
+
+  animation: spinner 1.3s infinite linear;
+  transform: translateZ(0);
+}
+
+@keyframes spinner {
+  0%,
+  100% {
+    box-shadow: 0em -2.6em 0em 0em #3b77c0, 1.8em -1.8em 0 0em rgba(51,102,204, 0.2), 2.5em 0em 0 0em rgba(51,102,204, 0.2), 1.75em 1.75em 0 0em rgba(51,102,204, 0.2), 0em 2.5em 0 0em rgba(51,102,204, 0.2), -1.8em 1.8em 0 0em rgba(51,102,204, 0.2), -2.6em 0em 0 0em rgba(51,102,204, 0.5), -1.8em -1.8em 0 0em rgba(51,102,204, 0.7);
+  }
+  12.5% {
+    box-shadow: 0em -2.6em 0em 0em rgba(51,102,204, 0.7), 1.8em -1.8em 0 0em #3b77c0, 2.5em 0em 0 0em rgba(51,102,204, 0.2), 1.75em 1.75em 0 0em rgba(51,102,204, 0.2), 0em 2.5em 0 0em rgba(51,102,204, 0.2), -1.8em 1.8em 0 0em rgba(51,102,204, 0.2), -2.6em 0em 0 0em rgba(51,102,204, 0.2), -1.8em -1.8em 0 0em rgba(51,102,204, 0.5);
+  }
+  25% {
+    box-shadow: 0em -2.6em 0em 0em rgba(51,102,204, 0.5), 1.8em -1.8em 0 0em rgba(51,102,204, 0.7), 2.5em 0em 0 0em #3b77c0, 1.75em 1.75em 0 0em rgba(51,102,204, 0.2), 0em 2.5em 0 0em rgba(51,102,204, 0.2), -1.8em 1.8em 0 0em rgba(51,102,204, 0.2), -2.6em 0em 0 0em rgba(51,102,204, 0.2), -1.8em -1.8em 0 0em rgba(51,102,204, 0.2);
+  }
+  37.5% {
+    box-shadow: 0em -2.6em 0em 0em rgba(51,102,204, 0.2), 1.8em -1.8em 0 0em rgba(51,102,204, 0.5), 2.5em 0em 0 0em rgba(51,102,204, 0.7), 1.75em 1.75em 0 0em #3b77c0, 0em 2.5em 0 0em rgba(51,102,204, 0.2), -1.8em 1.8em 0 0em rgba(51,102,204, 0.2), -2.6em 0em 0 0em rgba(51,102,204, 0.2), -1.8em -1.8em 0 0em rgba(51,102,204, 0.2);
+  }
+  50% {
+    box-shadow: 0em -2.6em 0em 0em rgba(51,102,204, 0.2), 1.8em -1.8em 0 0em rgba(51,102,204, 0.2), 2.5em 0em 0 0em rgba(51,102,204, 0.5), 1.75em 1.75em 0 0em rgba(51,102,204, 0.7), 0em 2.5em 0 0em #3b77c0, -1.8em 1.8em 0 0em rgba(51,102,204, 0.2), -2.6em 0em 0 0em rgba(51,102,204, 0.2), -1.8em -1.8em 0 0em rgba(51,102,204, 0.2);
+  }
+  62.5% {
+    box-shadow: 0em -2.6em 0em 0em rgba(51,102,204, 0.2), 1.8em -1.8em 0 0em rgba(51,102,204, 0.2), 2.5em 0em 0 0em rgba(51,102,204, 0.2), 1.75em 1.75em 0 0em rgba(51,102,204, 0.5), 0em 2.5em 0 0em rgba(51,102,204, 0.7), -1.8em 1.8em 0 0em #3b77c0, -2.6em 0em 0 0em rgba(51,102,204, 0.2), -1.8em -1.8em 0 0em rgba(51,102,204, 0.2);
+  }
+  75% {
+    box-shadow: 0em -2.6em 0em 0em rgba(51,102,204, 0.2), 1.8em -1.8em 0 0em rgba(51,102,204, 0.2), 2.5em 0em 0 0em rgba(51,102,204, 0.2), 1.75em 1.75em 0 0em rgba(51,102,204, 0.2), 0em 2.5em 0 0em rgba(51,102,204, 0.5), -1.8em 1.8em 0 0em rgba(51,102,204, 0.7), -2.6em 0em 0 0em #3b77c0, -1.8em -1.8em 0 0em rgba(51,102,204, 0.2);
+  }
+  87.5% {
+    box-shadow: 0em -2.6em 0em 0em rgba(51,102,204, 0.2), 1.8em -1.8em 0 0em rgba(51,102,204, 0.2), 2.5em 0em 0 0em rgba(51,102,204, 0.2), 1.75em 1.75em 0 0em rgba(51,102,204, 0.2), 0em 2.5em 0 0em rgba(51,102,204, 0.2), -1.8em 1.8em 0 0em rgba(51,102,204, 0.5), -2.6em 0em 0 0em rgba(51,102,204, 0.7), -1.8em -1.8em 0 0em #3b77c0;
+  }
+}
+
+
+/*
+ * Форма для отправки комментария
+ */
+
+.social__footer {
+  border-top: 1px solid #cccccc;
+}
+
+.big-picture__cancel {
+  position: absolute;
+  top: 0;
+  left: 100%;
+
+  margin-left: 10px;
+}
+
+.social__footer {
+  position: relative;
+
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+
+  padding: 15px;
+}
+
+.social__footer-commentor {
+  display: block;
+
+  margin-right: 15px;
+}
+
+.social__footer-text {
+  width: 100%;
+
+  border: none;
+}
+
+.social__footer-btn {
+  position: absolute;
+  right: 15px;
+  top: 50%;
+
+  width: 34px;
+  height: 34px;
+
+  font-size: 0;
+
+  background-image: url("../img/sprite.png");
+  background-repeat: no-repeat;
+  background-position: -5px -106px;
+
+  opacity: 0.6;
+
+  -webkit-transform: translateY(-50%);
+      -ms-transform: translateY(-50%);
+          transform: translateY(-50%);
+
+  border: none;
+}
+
+.social__footer-btn:hover,
+.social__footer-btn:focus {
+  opacity: 1;
+}
+
+.social__footer-btn:active,
+.social__footer-btn--active {
+  opacity: 1;
+  background-position: -5px -149px;
+}
+
+
+/* Подвал сайта
+   ========================================================================== */
+
+.page-footer {
+  margin-top: 30px;
+  padding-top: 30px;
+  border-top: solid 1px #cccccc;
+}
+
+.page-footer__wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+
+  -webkit-box-align: start;
+     -ms-flex-align: start;
+        align-items: flex-start;
+
+  -webkit-box-pack: justify;
+     -ms-flex-pack: justify;
+   justify-content: space-between;
+}
+
+
+/*
+ * Копирайт Академии
+ */
+
+.copyright {
+  font-size: 12px;
+}
+
+.copyright__link--image:hover,
+.copyright__link--image:focus {
+  opacity: 0.6;
+}
+
+.copyright__link--text {
+  color: #ffffff;
+}
+
+.copyright__link--text:hover,
+.copyright__link--text:focus {
+  opacity: 0.6;
+}
+
+.page-footer__contacts {
+  background-color: inherit;
+}
+
+
+/*
+ * Ссылки на социальные сети
+ */
+
+.contacts {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.contacts__link {
+  display: block;
+
+  width: 29px;
+  height: 29px;
+  margin-left: 10px;
+
+  font-size: 0;
+
+  background-image: url("../img/sprite.png");
+  background-repeat: no-repeat;
+
+  opacity: 0.6;
+  cursor: pointer;
+}
+
+.contacts__link:hover,
+.contacts__link:focus {
+  opacity: 1;
+}
+
+.contacts__link--twitter {
+  background-position: -5px -270px;
+}
+
+.contacts__link--vk {
+  background-position: -5px -309px;
+}
+
+
+/* Экраны с сообщениями для пользователя
+   ========================================================================== */
+
+.img-upload__message {
+  position: absolute;
+  z-index: 2;
+  left: 50%;
+  top: 0;
+
+  padding-top: 250px;
+
+  width: 600px;
+  height: 100%;
+
+  font-family: "Open Sans", "Arial", sans-serif;
+  text-align: center;
+  font-weight: 700;
+  font-size: 20px;
+  color: #ffe753;
+
+  background-color: #3c3614;
+  transform: translateX(-50%);
+}
+
+
+/**
+ * Экраны ошибки и успеха загрузки изображения
+ */
+
+.error,
+.success {
+  position: fixed;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10;
+
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
+.error__inner,
+.success__inner {
+  position: relative;
+  width: 600px;
+  padding: 50px 20px;
+  padding-top: 150px;
+  margin-top: 200px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  font-family: "Open Sans", "Arial", sans-serif;
+  text-align: center;
+  font-weight: 700;
+  font-size: 20px;
+  color: #ffe753;
+
+  background-color: #3c3614;
+  border-radius: 10px;
+}
+
+.success__inner {
+  padding: 100px 20px;
+  padding-bottom: 75px;
+}
+
+.error__title {
+  position: relative;
+
+  margin: 0;
+  margin-bottom: 50px;
+
+  font-size: 32px;
+}
+
+.success__title {
+  margin: 0;
+  margin-bottom: 50px;
+
+  font-size: 32px;
+}
+
+.error__title::before {
+  content: "";
+  position: absolute;
+
+  width: 59px;
+  height: 52px;
+
+  top: -100px;
+  left: 50%;
+
+  background-image: url("../img/icon-warning.svg");
+
+  -webkit-transform: translateX(-50%);
+      -ms-transform: translateX(-50%);
+          transform: translateX(-50%);
+}
+
+.error__button,
+.success__button {
+  padding: 5px 10px;
+
+  color: #ffffff;
+  text-transform: uppercase;
+
+  background: transparent;
+  border: 2px solid #ffffff;
+  border-radius: 5px;
+}
+
+.error__button:hover,
+.error__button:focus,
+.success__button:hover,
+.success__button:focus {
+  opacity: 0.8;
+}
+
+.error__button:active,
+.success__button:active {
+  opacity: 0.6;
+}
+
+
+/**
+ * Экран загрузки изображения
+ */
+
+.img-upload__message--loading::before {
+  content: "";
+  position: absolute;
+  bottom: 40%;
+  left: 50%;
+
+  width: 300px;
+  height: 10px;
+
+  background-color: #8a7d2d;
+
+  -webkit-transform: translateX(-50%);
+      -ms-transform: translateX(-50%);
+          transform: translateX(-50%);
+}
+
+.img-upload__message--loading::after {
+  content: "";
+  position: absolute;
+  bottom: 40%;
+  left: 50%;
+
+  width: 200px;
+  height: 10px;
+
+  background-color: #ffe753;
+
+  -webkit-transform: translateX(-50%);
+      -ms-transform: translateX(-50%);
+          transform: translateX(-50%);
+}
+
+.data-error {
+  position: absolute;
+  z-index: 100;
+  left: 0;
+  top: 0;
+  right: 0;
+  padding: 10px 3px;
+  font-size: 20px;
+  text-align: center;
+  background-color: #fd4d4b;
+}
+
+
+/* Адаптивности чуток
+   ========================================================================== */
+
+@media (min-width: 1024px) {
+  .img-upload__wrapper {
+    padding-bottom: 0;
+  }
+}
+
+@media (min-width: 1024px) and (max-width: 1359px) {
+  .container {
+    width: 980px;
+  }
+
+  .pictures {
+    -ms-grid-columns: (1fr)[5];
+    grid-template-columns: repeat(5, 1fr);
+  }
+
+  .img-upload {
+    -ms-grid-column: 2;
+    -ms-grid-column-span: 3;
+    grid-column: 2 / span 3;
+
+    -ms-grid-row: 1;
+    -ms-grid-row-span: 3;
+    grid-row: 1 / span 3;
+  }
+}
+
+@media (min-width: 0) and (max-width: 1023px) {
+  .container {
+    width: 600px;
+  }
+
+  .pictures {
+    -ms-grid-columns: (1fr)[3];
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .img-upload {
+    -ms-grid-column: 1;
+    -ms-grid-column-span: 3;
+    grid-column: 1 / span 3;
+
+    -ms-grid-row: 1;
+    -ms-grid-row-span: 3;
+    grid-row: 1 / span 3;
+  }
+}
+
+.visually-hidden {
+  position: absolute;
+
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  border: 0;
+  padding: 0;
+
+  white-space: nowrap;
+
+  -webkit-clip-path: inset(100%);
+          clip-path: inset(100%);
+
+  clip: rect(0 0 0 0);
+  overflow: hidden;
+}
+
+.hidden {
+  display: none;
+}
diff --git a/12/fonts/OpenSans-Regular.woff b/12/fonts/OpenSans-Regular.woff
new file mode 100644
index 0000000..76ad7ad
Binary files /dev/null and b/12/fonts/OpenSans-Regular.woff differ
diff --git a/12/fonts/OpenSans-Regular.woff2 b/12/fonts/OpenSans-Regular.woff2
new file mode 100644
index 0000000..2a13fed
Binary files /dev/null and b/12/fonts/OpenSans-Regular.woff2 differ
diff --git a/12/fonts/OpenSansCondensed-Bold.woff b/12/fonts/OpenSansCondensed-Bold.woff
new file mode 100644
index 0000000..8f4a086
Binary files /dev/null and b/12/fonts/OpenSansCondensed-Bold.woff differ
diff --git a/12/fonts/OpenSansCondensed-Bold.woff2 b/12/fonts/OpenSansCondensed-Bold.woff2
new file mode 100644
index 0000000..ea4e048
Binary files /dev/null and b/12/fonts/OpenSansCondensed-Bold.woff2 differ
diff --git a/12/img/avatar-1.svg b/12/img/avatar-1.svg
new file mode 100644
index 0000000..766cde7
--- /dev/null
+++ b/12/img/avatar-1.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="33.625" height="33.657" viewBox="0 0 33.625 33.657">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #343434;
+      }
+
+      .cls-1, .cls-2 {
+        fill-rule: evenodd;
+      }
+
+      .cls-2 {
+        fill: #ffe853;
+      }
+    </style>
+  </defs>
+  <g>
+    <path d="M16.812,-0.003 C26.104,-0.003 33.637,7.529 33.637,16.821 C33.637,26.113 26.104,33.646 16.812,33.646 C7.520,33.646 -0.012,26.113 -0.012,16.821 C-0.012,7.529 7.520,-0.003 16.812,-0.003 Z" class="cls-1"/>
+    <path d="M19.327,15.567 L26.232,8.938 L19.514,8.938 L15.370,13.005 L15.370,8.938 L9.530,8.938 L9.530,24.937 L15.370,24.937 L15.370,19.793 L15.792,19.388 L19.898,24.937 L26.531,24.937 L19.327,15.567 Z" class="cls-2"/>
+  </g>
+</svg>
diff --git a/12/img/avatar-2.svg b/12/img/avatar-2.svg
new file mode 100644
index 0000000..bd7193e
--- /dev/null
+++ b/12/img/avatar-2.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="33.625" height="33.656" viewBox="0 0 33.625 33.656">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #0fe994;
+      }
+
+      .cls-2 {
+        fill: #fff;
+        fill-rule: evenodd;
+      }
+    </style>
+  </defs>
+  <g>
+    <circle cx="16.813" cy="16.828" r="16.813" class="cls-1"/>
+    <path d="M8.220,21.567 L9.052,19.604 C9.052,19.604 10.298,20.472 12.632,21.054 C13.340,21.228 14.137,21.384 14.993,21.479 C16.064,21.591 17.251,21.619 18.517,21.483 C19.278,21.408 20.078,21.260 20.898,21.054 C22.105,20.747 23.117,20.400 24.391,19.731 L25.160,21.492 C17.143,26.449 8.220,21.567 8.220,21.567 ZM18.298,20.886 C17.151,21.014 16.064,20.978 15.092,20.878 C14.308,20.799 13.579,20.659 12.930,20.496 C10.808,19.962 9.506,19.174 9.506,19.174 C11.967,18.111 12.110,13.037 12.110,13.037 L12.126,13.037 C12.114,12.914 12.110,12.798 12.110,12.671 C12.110,9.943 14.145,7.737 16.653,7.737 C19.166,7.737 21.205,9.943 21.205,12.671 C21.205,12.730 21.197,12.790 21.197,12.854 L21.205,12.850 C21.372,17.234 23.889,19.174 23.889,19.174 C22.718,19.779 21.576,20.213 20.476,20.496 C19.728,20.687 18.995,20.815 18.298,20.886 ZM18.135,24.745 C18.135,24.749 18.135,24.753 18.135,24.761 C18.135,25.653 17.506,26.373 16.725,26.373 C15.961,26.373 15.331,25.653 15.331,24.761 C15.331,24.749 15.331,24.745 15.331,24.737 C16.184,24.852 17.135,24.876 18.135,24.745 Z" class="cls-2"/>
+  </g>
+</svg>
diff --git a/12/img/avatar-3.svg b/12/img/avatar-3.svg
new file mode 100644
index 0000000..bca9111
--- /dev/null
+++ b/12/img/avatar-3.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="33.625" height="33.625" viewBox="0 0 33.625 33.625">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #7a60fd;
+      }
+
+      .cls-2 {
+        fill: #fff;
+        fill-rule: evenodd;
+      }
+    </style>
+  </defs>
+  <g>
+    <circle cx="16.813" cy="16.813" r="16.813" class="cls-1"/>
+    <path d="M22.361,14.707 C22.361,14.951 22.011,15.158 21.554,15.211 C21.554,15.214 21.554,15.220 21.554,15.223 L21.364,15.223 L12.000,15.223 L11.938,15.223 L11.938,15.220 C11.419,15.201 11.009,14.979 11.009,14.707 C11.009,14.551 11.156,14.404 11.381,14.307 C11.362,14.273 11.353,14.235 11.353,14.198 C11.353,14.076 11.409,13.973 11.484,13.904 C11.403,13.522 11.353,13.137 11.353,12.740 C11.353,9.710 13.767,7.252 16.744,7.252 C19.728,7.252 22.142,9.710 22.142,12.740 C22.142,13.178 22.080,13.603 21.992,14.013 C22.105,14.076 22.196,14.207 22.196,14.363 C22.196,14.385 22.183,14.404 22.183,14.416 C22.293,14.498 22.361,14.595 22.361,14.707 ZM16.751,8.703 C19.712,10.735 20.132,13.122 20.132,13.122 C20.838,8.309 16.751,8.703 16.751,8.703 ZM21.417,16.583 L16.501,28.444 L12.066,16.561 L12.000,16.339 L21.495,16.339 L21.417,16.583 Z" class="cls-2"/>
+  </g>
+</svg>
diff --git a/12/img/avatar-4.svg b/12/img/avatar-4.svg
new file mode 100644
index 0000000..65e32ae
--- /dev/null
+++ b/12/img/avatar-4.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="33.625" height="33.657" viewBox="0 0 33.625 33.657">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #fd60e5;
+      }
+
+      .cls-1, .cls-2 {
+        fill-rule: evenodd;
+      }
+
+      .cls-2 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <g>
+    <path d="M16.812,-0.003 C26.104,-0.003 33.637,7.529 33.637,16.821 C33.637,26.113 26.104,33.646 16.812,33.646 C7.520,33.646 -0.012,26.113 -0.012,16.821 C-0.012,7.529 7.520,-0.003 16.812,-0.003 Z" class="cls-1"/>
+    <path d="M25.691,14.816 C25.691,14.816 25.632,12.073 25.584,10.792 C25.584,10.792 25.861,7.919 23.723,9.057 C23.723,9.057 20.135,9.907 17.487,15.713 C17.451,15.606 17.301,15.511 17.111,15.464 C17.297,14.499 17.933,11.610 18.973,10.974 C19.032,11.037 19.107,11.077 19.190,11.077 C19.344,11.077 19.471,10.958 19.471,10.808 C19.471,10.654 19.344,10.531 19.190,10.531 C19.044,10.531 18.909,10.654 18.909,10.808 C18.909,10.820 18.921,10.828 18.921,10.848 C17.795,11.516 17.163,14.452 16.973,15.440 C16.937,15.436 16.902,15.432 16.858,15.432 C16.831,15.432 16.795,15.440 16.771,15.440 C16.581,14.452 15.945,11.516 14.819,10.848 C14.823,10.828 14.831,10.820 14.831,10.808 C14.831,10.654 14.696,10.531 14.554,10.531 C14.396,10.531 14.270,10.654 14.270,10.808 C14.270,10.958 14.396,11.077 14.554,11.077 C14.633,11.077 14.712,11.037 14.764,10.974 C15.819,11.607 16.435,14.484 16.633,15.464 C16.451,15.503 16.313,15.574 16.250,15.665 C13.606,9.951 10.065,9.109 10.065,9.109 C7.934,7.970 8.199,10.848 8.199,10.848 C8.152,12.140 8.097,14.871 8.097,14.871 C7.812,17.262 10.934,17.622 10.934,17.622 C6.812,18.104 9.203,21.906 9.203,21.906 C10.744,23.159 10.934,24.823 10.934,24.823 C11.408,24.475 12.128,25.368 12.128,25.368 C12.717,24.475 13.210,24.708 13.210,24.708 C14.491,23.811 15.613,22.226 16.210,21.277 L16.210,21.519 C16.210,21.641 16.337,21.756 16.518,21.819 L16.518,21.961 C16.518,22.155 16.668,22.305 16.858,22.305 C17.044,22.305 17.198,22.155 17.198,21.961 L17.198,21.819 C17.388,21.756 17.507,21.641 17.507,21.519 L17.507,21.111 C18.087,22.044 19.238,23.720 20.573,24.657 C20.573,24.657 21.071,24.419 21.660,25.301 C21.660,25.301 22.364,24.419 22.853,24.759 C22.853,24.759 23.039,23.103 24.589,21.846 C24.589,21.846 26.972,18.052 22.853,17.566 C22.853,17.566 25.976,17.210 25.691,14.816 Z" class="cls-2"/>
+  </g>
+</svg>
diff --git a/12/img/avatar-5.svg b/12/img/avatar-5.svg
new file mode 100644
index 0000000..71f30ee
--- /dev/null
+++ b/12/img/avatar-5.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="33.625" height="33.656" viewBox="0 0 33.625 33.656">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #cdc102;
+      }
+
+      .cls-2 {
+        fill: #fff;
+        fill-rule: evenodd;
+      }
+    </style>
+  </defs>
+  <g>
+    <circle cx="16.813" cy="16.828" r="16.813" class="cls-1"/>
+    <path d="M13.974,25.206 C14.136,25.160 14.140,25.094 14.093,24.972 C13.993,24.687 13.905,24.394 13.820,24.106 C13.797,24.025 13.736,23.937 13.770,23.856 C13.909,23.571 14.063,23.286 14.236,22.959 C14.409,23.571 14.574,24.114 14.721,24.667 C14.778,24.887 14.890,24.922 15.090,24.860 C15.459,24.741 15.824,24.625 16.202,24.517 C16.359,24.475 16.367,24.406 16.325,24.264 C15.990,23.248 15.671,22.229 15.336,21.205 C15.294,21.090 15.290,20.997 15.355,20.890 C15.559,20.520 15.755,20.132 15.952,19.755 C16.024,19.612 16.075,19.670 16.129,19.762 C16.279,20.013 16.429,20.263 16.567,20.497 C16.671,20.663 16.767,20.659 16.867,20.486 C16.963,20.316 17.044,20.132 17.140,19.963 C17.194,19.859 17.256,19.824 17.336,19.963 C17.529,20.297 17.729,20.632 17.925,20.971 C17.975,21.074 18.033,21.190 17.983,21.328 C17.833,21.778 17.687,22.229 17.544,22.679 C17.367,23.213 17.206,23.740 17.044,24.271 C17.013,24.352 16.990,24.421 17.109,24.452 C17.521,24.571 17.933,24.714 18.340,24.837 C18.414,24.860 18.494,24.868 18.525,24.752 C18.564,24.606 18.614,24.468 18.664,24.318 C18.818,23.891 18.914,23.425 19.106,22.998 C19.306,23.202 19.387,23.471 19.552,23.679 C19.680,23.856 19.660,24.010 19.606,24.187 C19.529,24.429 19.483,24.667 19.399,24.902 C19.325,25.094 19.414,25.194 19.591,25.256 C19.872,25.337 20.149,25.410 20.414,25.506 C20.733,25.614 20.726,25.626 20.780,25.283 C20.887,25.056 20.957,24.806 21.022,24.564 C21.057,24.441 21.076,24.302 21.291,24.406 C21.545,24.521 21.830,24.583 22.099,24.695 C22.234,24.748 22.276,24.702 22.307,24.571 C22.395,24.198 22.476,23.825 22.576,23.444 C22.607,23.290 22.549,23.237 22.423,23.202 C22.107,23.106 21.788,23.017 21.468,22.917 C21.410,22.894 21.330,22.882 21.299,22.848 C21.141,22.575 20.987,22.301 20.826,22.036 C20.922,21.967 20.995,21.998 21.060,22.021 C21.576,22.136 22.072,22.271 22.580,22.405 C22.742,22.455 22.822,22.459 22.857,22.259 C22.915,21.921 22.996,21.594 23.099,21.263 C23.169,21.055 23.115,20.955 22.892,20.928 C22.761,20.921 22.622,20.886 22.495,20.855 C22.461,20.843 22.419,20.821 22.388,20.809 C21.534,20.601 20.683,20.390 19.826,20.186 C19.730,20.163 19.652,20.117 19.602,20.036 C19.371,19.670 19.149,19.301 18.922,18.939 C18.825,18.793 18.894,18.766 19.029,18.770 C19.256,18.770 19.475,18.766 19.695,18.758 C19.849,18.758 19.899,18.681 19.810,18.543 C19.695,18.358 19.579,18.170 19.468,17.977 C19.387,17.854 19.383,17.785 19.572,17.789 C20.057,17.793 20.537,17.793 21.011,17.793 C21.114,17.793 21.164,17.839 21.214,17.901 C21.445,18.147 21.680,18.393 21.914,18.631 C22.365,19.112 22.826,19.593 23.288,20.078 C23.388,20.182 23.469,20.236 23.604,20.109 C23.881,19.843 24.169,19.593 24.446,19.331 C24.550,19.243 24.538,19.155 24.446,19.054 C24.046,18.655 23.657,18.254 23.265,17.847 L23.261,17.839 C23.407,17.773 23.576,17.823 23.730,17.793 C23.796,17.793 23.861,17.804 23.923,17.801 C24.184,17.773 24.404,17.823 24.573,18.047 C24.707,18.224 24.885,18.358 25.042,18.512 C25.146,18.620 25.235,18.627 25.346,18.527 C25.616,18.328 25.846,18.078 26.104,17.866 C26.250,17.739 26.219,17.639 26.097,17.520 C25.885,17.327 25.685,17.108 25.473,16.931 C25.323,16.804 25.342,16.712 25.473,16.589 C25.673,16.408 25.850,16.208 26.050,16.031 C26.177,15.919 26.177,15.846 26.062,15.742 C25.796,15.504 25.527,15.258 25.273,15.019 C25.162,14.904 25.084,14.931 24.996,15.030 C24.811,15.227 24.611,15.411 24.446,15.623 C24.311,15.785 24.169,15.881 23.942,15.850 C23.753,15.834 23.569,15.862 23.376,15.866 C23.319,15.873 23.249,15.896 23.219,15.838 C23.195,15.765 23.269,15.746 23.303,15.700 C23.669,15.288 24.027,14.865 24.408,14.457 C24.519,14.342 24.488,14.276 24.396,14.188 C24.100,13.927 23.823,13.672 23.550,13.415 C23.419,13.280 23.319,13.261 23.180,13.419 C22.572,14.103 21.934,14.773 21.334,15.473 C21.088,15.765 20.826,15.950 20.437,15.908 C20.137,15.900 19.837,15.896 19.537,15.896 C19.391,15.896 19.371,15.850 19.449,15.727 C19.560,15.527 19.660,15.327 19.780,15.127 C19.837,15.027 19.810,14.981 19.695,14.981 C19.468,14.981 19.233,14.981 19.002,14.984 C18.852,14.984 18.791,14.957 18.898,14.803 C19.098,14.465 19.287,14.130 19.487,13.799 C19.529,13.718 19.572,13.650 19.660,13.622 C19.829,13.572 19.999,13.522 20.168,13.469 C21.057,13.211 21.949,12.945 22.830,12.680 C22.949,12.641 23.011,12.576 22.976,12.453 C22.865,12.068 22.765,11.691 22.657,11.306 C22.622,11.168 22.546,11.122 22.388,11.168 C22.064,11.245 21.737,11.341 21.407,11.414 C21.176,11.460 20.972,11.583 20.722,11.557 L20.726,11.549 L20.722,11.549 C20.922,11.118 21.114,10.683 21.668,10.602 C21.845,10.572 22.014,10.495 22.195,10.445 C22.311,10.410 22.361,10.341 22.326,10.210 C22.226,9.837 22.126,9.456 22.034,9.083 C22.007,8.998 21.964,8.944 21.861,8.983 C21.619,9.068 21.364,9.083 21.138,9.194 C20.945,9.260 20.853,9.179 20.807,8.990 C20.741,8.767 20.668,8.556 20.599,8.333 C20.537,8.136 20.418,8.044 20.195,8.125 C19.914,8.236 19.618,8.325 19.318,8.421 C19.137,8.479 19.048,8.560 19.168,8.763 C19.229,8.883 19.268,9.029 19.287,9.168 C19.321,9.399 19.510,9.633 19.433,9.852 C19.341,10.168 19.168,10.464 18.948,10.779 C18.752,10.179 18.564,9.621 18.391,9.064 C18.329,8.864 18.240,8.798 18.048,8.867 C17.706,9.006 17.364,9.121 17.021,9.252 C16.890,9.298 16.859,9.387 16.898,9.521 C17.221,10.487 17.537,11.464 17.863,12.434 C17.906,12.580 17.933,12.691 17.841,12.830 C17.702,13.061 17.586,13.303 17.452,13.542 C17.360,13.726 17.259,13.911 17.148,14.111 C16.979,13.838 16.829,13.607 16.686,13.380 C16.540,13.161 16.502,13.165 16.367,13.388 C16.267,13.580 16.179,13.792 16.013,13.973 C15.832,13.665 15.690,13.369 15.501,13.111 C15.305,12.846 15.305,12.615 15.394,12.299 C15.663,11.422 15.859,10.518 16.117,9.633 C16.194,9.383 16.109,9.314 15.909,9.260 C15.547,9.156 15.186,9.052 14.832,8.944 C14.709,8.906 14.671,8.964 14.651,9.052 C14.574,9.364 14.497,9.652 14.405,9.960 C14.328,10.229 14.244,10.502 14.143,10.814 C13.982,10.564 13.855,10.349 13.701,10.149 C13.582,9.998 13.582,9.852 13.628,9.687 C13.701,9.449 13.763,9.202 13.839,8.983 C13.909,8.775 13.855,8.675 13.636,8.625 C13.285,8.556 12.947,8.456 12.608,8.340 C12.431,8.286 12.362,8.344 12.324,8.510 C12.262,8.733 12.178,8.948 12.131,9.171 C12.100,9.367 12.000,9.371 11.847,9.333 C11.631,9.268 11.412,9.218 11.204,9.164 C11.104,9.133 11.035,9.137 11.004,9.260 C10.919,9.641 10.823,10.022 10.731,10.410 C10.700,10.545 10.762,10.595 10.881,10.618 C11.204,10.695 11.512,10.787 11.823,10.872 C11.904,10.899 12.000,10.903 12.050,10.983 C12.204,11.237 12.355,11.491 12.512,11.753 C12.416,11.783 12.347,11.745 12.281,11.730 C11.777,11.595 11.277,11.460 10.766,11.322 C10.612,11.280 10.512,11.306 10.470,11.491 C10.392,11.849 10.308,12.214 10.208,12.576 C10.161,12.742 10.215,12.807 10.377,12.842 C11.408,13.099 12.439,13.403 13.489,13.607 C13.582,13.630 13.662,13.665 13.701,13.742 C13.939,14.153 14.163,14.554 14.412,14.957 C14.482,15.065 14.444,15.100 14.340,15.100 C14.085,15.100 13.832,15.092 13.570,15.100 C13.351,15.108 13.320,15.173 13.436,15.369 C13.566,15.588 13.701,15.812 13.836,16.038 C13.378,16.038 12.954,16.031 12.531,16.042 C12.385,16.046 12.297,15.988 12.189,15.881 C11.458,15.119 10.700,14.361 9.958,13.600 C9.854,13.480 9.766,13.465 9.642,13.588 C9.400,13.823 9.130,14.057 8.877,14.300 C8.631,14.519 8.642,14.565 8.873,14.796 C9.211,15.127 9.554,15.473 9.896,15.827 C9.927,15.850 9.985,15.877 9.962,15.934 C9.942,15.988 9.884,15.977 9.842,15.977 C9.631,15.988 9.423,15.977 9.219,15.988 C9.062,16.000 8.927,15.950 8.811,15.834 C8.603,15.623 8.365,15.427 8.154,15.211 C8.050,15.108 7.980,15.104 7.869,15.196 C7.596,15.438 7.319,15.677 7.042,15.912 C6.922,16.012 7.007,16.065 7.073,16.135 C7.307,16.373 7.542,16.608 7.784,16.839 C7.911,16.943 7.911,17.016 7.792,17.116 C7.542,17.350 7.299,17.597 7.045,17.827 C6.938,17.923 6.922,18.008 7.053,18.112 C7.307,18.320 7.572,18.512 7.803,18.735 C7.977,18.897 8.088,18.847 8.204,18.712 C8.426,18.481 8.642,18.254 8.865,18.027 C8.915,17.974 8.938,17.904 9.030,17.904 C9.335,17.904 9.638,17.904 9.992,17.904 C9.554,18.358 9.158,18.778 8.746,19.189 C8.603,19.324 8.603,19.420 8.761,19.543 C9.050,19.762 9.319,19.997 9.585,20.247 C9.738,20.390 9.850,20.363 9.985,20.213 C10.712,19.455 11.447,18.701 12.178,17.951 C12.224,17.897 12.270,17.847 12.355,17.847 C12.858,17.847 13.347,17.839 13.855,17.839 C13.878,17.839 13.917,17.847 13.917,17.885 C13.789,18.120 13.670,18.347 13.547,18.581 C13.482,18.716 13.485,18.828 13.690,18.816 C13.870,18.816 14.055,18.858 14.236,18.847 C14.428,18.816 14.440,18.870 14.355,19.032 C14.163,19.366 13.986,19.712 13.801,20.051 C13.751,20.159 13.682,20.201 13.566,20.228 C13.097,20.344 12.628,20.463 12.154,20.574 C11.627,20.705 11.093,20.836 10.562,20.971 C10.446,20.997 10.293,21.021 10.331,21.209 C10.435,21.632 10.535,22.052 10.646,22.459 C10.670,22.594 10.743,22.594 10.850,22.563 C11.077,22.494 11.308,22.440 11.543,22.371 C11.893,22.286 12.239,22.205 12.658,22.090 C12.474,22.421 12.331,22.679 12.178,22.936 C12.131,23.017 12.050,23.037 11.978,23.040 C11.651,23.075 11.358,23.202 11.050,23.267 C10.897,23.290 10.854,23.371 10.897,23.517 C10.997,23.887 11.089,24.244 11.170,24.606 C11.208,24.756 11.289,24.787 11.427,24.737 C11.693,24.660 11.962,24.606 12.224,24.517 C12.397,24.468 12.451,24.529 12.485,24.660 C12.539,24.902 12.616,25.141 12.662,25.375 C12.697,25.518 12.758,25.560 12.904,25.518 C13.259,25.414 13.612,25.295 13.974,25.206 " class="cls-2"/>
+  </g>
+</svg>
diff --git a/12/img/avatar-6.svg b/12/img/avatar-6.svg
new file mode 100644
index 0000000..77233fd
--- /dev/null
+++ b/12/img/avatar-6.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="37.313" height="37.32" viewBox="0 0 37.313 37.32">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #0388ef;
+      }
+
+      .cls-2 {
+        fill: #fff;
+        fill-rule: evenodd;
+      }
+    </style>
+  </defs>
+  <g>
+    <circle cx="18.656" cy="18.66" r="18.656" class="cls-1"/>
+    <path d="M28.326,23.258 L26.758,23.258 L26.758,22.304 C26.739,21.632 26.518,21.021 26.132,20.519 C25.858,20.148 25.506,19.839 25.104,19.634 C24.668,19.399 24.173,19.271 23.648,19.271 C22.021,19.271 20.677,20.531 20.549,22.130 L20.549,23.564 L16.079,23.564 L16.079,22.165 C16.029,21.570 15.809,21.033 15.477,20.581 C15.202,20.210 14.854,19.905 14.437,19.696 C14.009,19.464 13.514,19.333 12.985,19.333 C11.289,19.333 9.906,20.697 9.878,22.393 C9.878,22.408 9.878,22.424 9.878,22.447 C9.878,22.459 9.878,22.466 9.878,22.482 L9.863,22.482 L9.863,23.432 L7.622,23.432 C7.696,23.247 7.746,23.030 7.746,22.798 C7.746,22.462 7.638,22.142 7.460,21.875 L8.128,21.875 L8.128,17.424 L12.815,17.057 L15.133,12.842 L27.704,12.935 L27.731,21.686 L28.226,21.686 C28.172,21.887 28.141,22.095 28.141,22.323 C28.141,22.663 28.210,22.991 28.326,23.258 ZM19.440,14.144 L15.751,14.040 L13.947,17.131 L15.002,17.131 L18.525,17.131 L19.440,18.058 L19.440,14.144 ZM12.942,19.646 C13.410,19.646 13.850,19.758 14.236,19.959 C14.607,20.156 14.924,20.426 15.175,20.766 C15.519,21.222 15.728,21.798 15.728,22.424 C15.728,23.965 14.484,25.221 12.942,25.221 C11.405,25.221 10.153,23.965 10.153,22.424 C10.153,22.412 10.153,22.393 10.160,22.381 C10.184,20.867 11.416,19.646 12.942,19.646 ZM11.219,22.493 C11.219,23.444 11.996,24.216 12.946,24.216 C13.897,24.216 14.677,23.444 14.677,22.493 C14.677,22.107 14.541,21.751 14.333,21.458 C14.178,21.253 13.981,21.087 13.753,20.967 C13.514,20.836 13.240,20.770 12.946,20.770 C12.003,20.770 11.235,21.520 11.219,22.466 C11.219,22.478 11.219,22.485 11.219,22.493 ZM23.602,19.735 C24.073,19.735 24.517,19.847 24.907,20.055 C25.274,20.245 25.587,20.519 25.834,20.851 C26.190,21.323 26.387,21.890 26.387,22.516 C26.387,24.058 25.147,25.306 23.602,25.306 C22.072,25.306 20.820,24.058 20.820,22.516 C20.820,22.501 20.820,22.485 20.820,22.474 C20.843,20.956 22.083,19.735 23.602,19.735 ZM21.886,22.582 C21.886,23.544 22.659,24.309 23.605,24.309 C24.571,24.309 25.344,23.544 25.344,22.582 C25.344,22.196 25.208,21.836 24.992,21.547 C24.842,21.350 24.648,21.172 24.416,21.056 C24.177,20.925 23.903,20.855 23.605,20.855 C22.667,20.855 21.905,21.612 21.886,22.559 C21.886,22.567 21.886,22.578 21.886,22.582 Z" class="cls-2"/>
+  </g>
+</svg>
diff --git a/12/img/htmla-logo.svg b/12/img/htmla-logo.svg
new file mode 100644
index 0000000..d16aef1
--- /dev/null
+++ b/12/img/htmla-logo.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 108 37" style="fill: #ffffff" xmlns="http://www.w3.org/2000/svg">
+  <path d="M103.727,29.189 C102.828,31.349 101.653,32.075 100.391,32.075 C100.028,32.075 99.665,32.024 99.302,31.937 L99.302,30.364 C99.579,30.451 99.873,30.485 100.149,30.485 C101.048,30.485 101.722,29.846 102.206,28.550 L102.379,28.135 L98.438,19.770 L100.408,19.770 L103.208,26.026 L105.680,19.770 L107.615,19.770 L103.727,29.189 ZM95.673,22.933 C95.673,21.861 95.033,21.188 94.031,21.188 C93.115,21.188 92.406,21.792 91.974,22.311 C91.992,22.501 92.009,22.691 92.009,22.881 L92.009,28.066 L90.160,28.066 L90.160,22.933 C90.160,21.861 89.520,21.188 88.518,21.188 C87.516,21.188 86.755,21.913 86.323,22.466 L86.323,28.066 L84.474,28.066 L84.474,19.770 L86.116,19.770 L86.116,20.807 C86.565,20.306 87.533,19.546 88.881,19.546 C90.125,19.546 90.989,20.064 91.473,20.876 C92.199,20.151 93.167,19.546 94.377,19.546 C96.571,19.546 97.522,21.170 97.522,22.881 L97.522,28.066 L95.673,28.066 L95.673,22.933 ZM76.351,24.609 C76.558,26.096 78.010,26.718 79.531,26.718 C80.533,26.718 81.449,26.476 82.158,26.130 L82.158,27.720 C81.398,28.084 80.343,28.291 79.185,28.291 C76.645,28.291 74.484,26.839 74.484,23.918 C74.484,20.911 76.766,19.546 78.684,19.546 C81.985,19.546 83.126,22.207 82.590,24.609 L76.351,24.609 ZM78.770,21.084 C77.526,21.084 76.403,21.827 76.334,23.227 L80.931,23.227 C81.035,22.501 80.585,21.084 78.770,21.084 ZM71.028,26.753 C70.388,27.565 69.403,28.291 67.848,28.291 C65.342,28.291 63.735,26.303 63.735,23.918 C63.735,21.533 65.342,19.546 67.848,19.546 C69.300,19.546 70.267,20.185 70.837,20.842 L70.837,15.968 L72.687,15.968 L72.687,28.066 L71.028,28.066 L71.028,26.753 ZM70.820,22.898 C70.423,22.000 69.472,21.170 68.176,21.170 C66.690,21.170 65.601,22.294 65.601,23.918 C65.601,25.542 66.690,26.666 68.176,26.666 C69.472,26.666 70.423,25.836 70.820,24.920 L70.820,22.898 ZM70.837,1.443 L72.687,1.443 L72.687,13.541 L70.837,13.541 L70.837,1.443 ZM66.283,8.408 C66.283,7.337 65.643,6.663 64.641,6.663 C63.725,6.663 63.017,7.267 62.585,7.786 C62.602,7.976 62.619,8.166 62.619,8.356 L62.619,13.541 L60.770,13.541 L60.770,8.408 C60.770,7.337 60.131,6.663 59.128,6.663 C58.126,6.663 57.365,7.389 56.933,7.941 L56.933,13.541 L55.084,13.541 L55.084,5.245 L56.726,5.245 L56.726,6.282 C57.175,5.781 58.143,5.021 59.491,5.021 C60.735,5.021 61.600,5.539 62.083,6.352 C62.809,5.625 63.777,5.021 64.987,5.021 C67.182,5.021 68.132,6.645 68.132,8.356 L68.132,13.541 L66.283,13.541 L66.283,8.408 ZM57.789,21.153 C56.562,21.153 55.543,21.464 54.799,21.792 L54.799,20.098 C55.456,19.874 56.649,19.546 57.979,19.546 C60.330,19.546 61.816,20.669 61.816,23.175 L61.816,26.148 C61.816,26.614 62.093,26.753 62.421,26.753 C62.611,26.753 62.801,26.700 62.974,26.649 L62.974,27.979 C62.628,28.117 62.214,28.187 61.799,28.187 C61.038,28.187 60.434,27.893 60.140,27.219 C59.327,27.876 58.308,28.290 57.011,28.290 C55.508,28.290 54.108,27.461 54.108,25.750 C54.108,23.624 56.078,22.968 57.807,22.968 C58.515,22.968 59.310,23.071 59.967,23.209 L59.967,22.916 C59.967,21.879 59.206,21.153 57.789,21.153 ZM58.170,24.264 C57.115,24.264 56.009,24.592 56.009,25.629 C56.009,26.441 56.735,26.856 57.565,26.856 C58.446,26.856 59.310,26.527 59.967,25.871 L59.967,24.471 C59.466,24.368 58.757,24.264 58.170,24.264 ZM47.878,11.018 L47.878,6.870 L46.392,6.870 L46.392,5.245 L47.878,5.245 L47.878,2.739 L49.710,2.290 L49.710,5.245 L52.717,5.245 L52.717,6.870 L49.710,6.870 L49.710,10.672 C49.710,11.761 50.211,12.124 51.283,12.124 C51.888,12.124 52.441,12.003 52.959,11.796 L52.959,13.386 C52.337,13.610 51.542,13.748 50.730,13.748 C49.122,13.748 47.878,12.953 47.878,11.018 ZM50.306,19.546 C51.239,19.546 52.138,19.753 52.864,20.185 L52.864,21.879 C52.259,21.447 51.412,21.188 50.565,21.188 C49.096,21.188 47.610,21.965 47.610,23.918 C47.610,25.802 49.044,26.649 50.531,26.649 C51.412,26.649 52.293,26.389 52.950,26.010 L52.950,27.720 C52.155,28.100 51.257,28.290 50.202,28.290 C47.990,28.290 45.726,26.943 45.726,23.987 C45.726,20.894 48.094,19.546 50.306,19.546 ZM42.131,27.219 C41.319,27.876 40.299,28.290 39.003,28.290 C37.500,28.290 36.100,27.461 36.100,25.750 C36.100,23.624 38.070,22.968 39.798,22.968 C40.507,22.968 41.302,23.071 41.959,23.209 L41.959,22.916 C41.959,21.879 41.198,21.153 39.781,21.153 C38.554,21.153 37.534,21.464 36.791,21.792 L36.791,20.098 C37.448,19.874 38.640,19.546 39.971,19.546 C42.321,19.546 43.808,20.669 43.808,23.175 L43.808,26.148 C43.808,26.614 44.084,26.753 44.413,26.753 C44.603,26.753 44.793,26.700 44.966,26.649 L44.966,27.979 C44.620,28.117 44.205,28.187 43.791,28.187 C43.030,28.187 42.425,27.893 42.131,27.219 ZM41.959,24.471 C41.457,24.368 40.749,24.264 40.161,24.264 C39.107,24.264 38.001,24.592 38.001,25.629 C38.001,26.441 38.727,26.856 39.556,26.856 C40.438,26.856 41.302,26.527 41.959,25.871 L41.959,24.471 ZM42.797,8.650 C42.797,7.302 41.967,6.663 40.861,6.663 C39.807,6.663 39.012,7.371 38.545,8.045 L38.545,13.541 L36.696,13.541 L36.696,1.443 L38.545,1.443 L38.545,6.161 C39.150,5.539 40.101,5.021 41.224,5.021 C43.315,5.021 44.646,6.438 44.646,8.408 L44.646,13.541 L42.797,13.541 L42.797,8.650 ZM-0.001,28.066 L-0.001,1.519 L14.483,0.001 L14.635,0.016 L28.967,1.519 L28.967,28.066 L14.483,36.685 L-0.001,28.066 ZM27.072,3.226 L14.483,1.905 L1.894,3.226 L1.894,13.184 L14.412,5.731 L14.412,5.730 L14.413,5.730 L14.415,5.730 L14.415,5.731 L27.072,13.193 L27.072,3.226 ZM14.446,18.237 L17.636,20.116 L17.660,20.102 L18.657,19.435 L14.433,16.923 L14.446,15.611 L19.796,18.794 L20.717,18.251 L20.857,18.169 L20.914,18.135 L14.433,14.281 L14.446,12.968 L22.028,17.479 L23.618,16.542 L27.062,14.513 L14.412,7.141 L14.412,7.140 L1.921,14.648 L14.394,22.063 L16.527,20.782 L14.433,19.549 L14.446,18.237 ZM27.072,15.925 L23.188,18.244 L23.188,21.541 L23.188,22.082 L23.188,22.532 L23.199,22.526 L23.199,23.845 L14.483,29.060 L5.850,23.871 L5.862,22.559 L14.493,27.693 L14.471,26.305 L5.838,21.116 L5.851,19.803 L14.450,24.921 L14.429,23.569 L1.894,16.108 L1.894,26.989 L14.483,34.480 L27.072,26.989 L27.072,15.925 Z"/>
+</svg>
diff --git a/12/img/icon-arrow.png b/12/img/icon-arrow.png
new file mode 100644
index 0000000..140753c
Binary files /dev/null and b/12/img/icon-arrow.png differ
diff --git a/12/img/icon-cross.svg b/12/img/icon-cross.svg
new file mode 100644
index 0000000..5430645
--- /dev/null
+++ b/12/img/icon-cross.svg
@@ -0,0 +1,3 @@
+<svg width="21" height="21" viewBox="0 0 21 21" style="fill: #ffffff" xmlns="http://www.w3.org/2000/svg">
+  <path d="M20.875,2.668 L13.106,10.437 L20.871,18.203 L18.214,20.860 L10.449,13.095 L2.670,20.874 L0.013,18.217 L7.792,10.438 L0.009,2.654 L2.666,-0.003 L10.449,7.780 L18.218,0.011 L20.875,2.668 Z" class="cls-1"/>
+</svg>
diff --git a/12/img/icon-warning.svg b/12/img/icon-warning.svg
new file mode 100644
index 0000000..cbb0ca5
--- /dev/null
+++ b/12/img/icon-warning.svg
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="58.875" height="51.875" viewBox="0 0 58.875 51.875">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #ffe753;
+        fill-rule: evenodd;
+      }
+
+      .cls-2, .cls-3 {
+        font-size: 14px;
+      }
+
+      .cls-3 {
+        fill: #3c3614;
+        font-family: "OpenSans-Semibold";
+      }
+    </style>
+  </defs>
+  <g>
+    <path d="M55.633,51.862 C52.914,51.862 5.199,51.862 3.324,51.862 C0.892,51.862 -0.918,49.346 0.505,46.860 C1.644,44.867 24.640,5.045 26.607,1.647 C27.899,-0.585 30.980,-0.548 32.274,1.647 C33.716,4.093 56.829,44.067 58.435,46.962 C59.613,49.081 58.312,51.862 55.633,51.862 Z" class="cls-1"/>
+    <text transform="translate(23.97 44.91) scale(2.89)" class="cls-2"><tspan class="cls-3">!</tspan></text>
+  </g>
+</svg>
diff --git a/12/img/logo-background-1.jpg b/12/img/logo-background-1.jpg
new file mode 100644
index 0000000..8d46046
Binary files /dev/null and b/12/img/logo-background-1.jpg differ
diff --git a/12/img/logo-background-2.jpg b/12/img/logo-background-2.jpg
new file mode 100644
index 0000000..0da4894
Binary files /dev/null and b/12/img/logo-background-2.jpg differ
diff --git a/12/img/logo-background-3.jpg b/12/img/logo-background-3.jpg
new file mode 100644
index 0000000..339050b
Binary files /dev/null and b/12/img/logo-background-3.jpg differ
diff --git a/12/img/logo-mask.png b/12/img/logo-mask.png
new file mode 100644
index 0000000..706b8bf
Binary files /dev/null and b/12/img/logo-mask.png differ
diff --git a/12/img/spinner-blue.svg b/12/img/spinner-blue.svg
new file mode 100644
index 0000000..f8a3100
--- /dev/null
+++ b/12/img/spinner-blue.svg
@@ -0,0 +1,72 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 23 23">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #99c7ff;
+      }
+
+      .cls-1, .cls-10, .cls-11, .cls-2, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9 {
+        fill-rule: evenodd;
+      }
+
+      .cls-2, .cls-7 {
+        fill: #e5f1ff;
+      }
+
+      .cls-2 {
+        opacity: 0.5;
+      }
+
+      .cls-3 {
+        fill: #4c9dff;
+      }
+
+      .cls-4 {
+        fill: #7fb9ff;
+      }
+
+      .cls-5 {
+        fill: #cce3ff;
+        opacity: 0.6;
+      }
+
+      .cls-6 {
+        fill: #338fff;
+      }
+
+      .cls-7 {
+        opacity: 0.3;
+      }
+
+      .cls-8 {
+        fill: #66abff;
+      }
+
+      .cls-9 {
+        fill: #b2d5ff;
+        opacity: 0.8;
+      }
+
+      .cls-10 {
+        fill: #1981ff;
+      }
+
+      .cls-11 {
+        fill: #0072ff;
+      }
+    </style>
+  </defs>
+  <g>
+    <path d="M11.168,15.204 C11.679,15.204 12.093,15.619 12.093,16.130 L12.093,20.757 C12.093,21.268 11.679,21.683 11.168,21.683 C10.657,21.683 10.242,21.268 10.242,20.757 L10.242,16.130 C10.242,15.619 10.657,15.204 11.168,15.204 Z" class="cls-1"/>
+    <path d="M22.017,10.834 C22.017,11.345 21.602,11.759 21.091,11.759 L16.464,11.759 C15.953,11.759 15.538,11.345 15.538,10.834 C15.538,10.323 15.953,9.908 16.464,9.908 L21.091,9.908 C21.602,9.908 22.017,10.323 22.017,10.834 Z" class="cls-2"/>
+    <path d="M6.488,10.834 C6.488,11.345 6.074,11.759 5.563,11.759 L0.935,11.759 C0.424,11.759 0.010,11.345 0.010,10.834 C0.010,10.323 0.424,9.908 0.935,9.908 L5.563,9.908 C6.074,9.908 6.488,10.323 6.488,10.834 Z" class="cls-3"/>
+    <path d="M8.604,14.578 C9.041,14.841 9.182,15.410 8.919,15.848 L6.531,19.812 C6.267,20.249 5.699,20.391 5.261,20.127 C4.823,19.863 4.682,19.294 4.946,18.857 L7.333,14.893 C7.597,14.455 8.166,14.314 8.604,14.578 Z" class="cls-4"/>
+    <path d="M20.461,16.432 C20.197,16.870 19.628,17.011 19.191,16.747 L15.227,14.359 C14.789,14.096 14.648,13.527 14.912,13.089 C15.175,12.651 15.744,12.510 16.182,12.774 L20.146,15.161 C20.583,15.425 20.725,15.994 20.461,16.432 Z" class="cls-5"/>
+    <path d="M7.115,8.579 C6.851,9.017 6.282,9.158 5.845,8.894 L1.881,6.507 C1.443,6.243 1.302,5.674 1.566,5.236 C1.829,4.798 2.398,4.657 2.836,4.921 L6.800,7.309 C7.238,7.572 7.379,8.141 7.115,8.579 Z" class="cls-6"/>
+    <path d="M20.662,5.585 C20.909,6.032 20.747,6.595 20.300,6.843 L16.250,9.082 C15.803,9.329 15.240,9.167 14.993,8.719 C14.745,8.272 14.907,7.709 15.355,7.462 L19.404,5.223 C19.852,4.975 20.415,5.138 20.662,5.585 Z" class="cls-7"/>
+    <path d="M7.034,12.948 C7.281,13.396 7.119,13.959 6.672,14.206 L2.622,16.445 C2.175,16.692 1.612,16.530 1.364,16.083 C1.117,15.636 1.279,15.073 1.726,14.825 L5.776,12.586 C6.223,12.339 6.786,12.501 7.034,12.948 Z" class="cls-8"/>
+    <path d="M16.417,20.328 C15.970,20.575 15.407,20.413 15.159,19.966 L12.920,15.916 C12.673,15.469 12.835,14.906 13.282,14.659 C13.730,14.411 14.293,14.573 14.540,15.021 L16.779,19.070 C17.026,19.518 16.864,20.081 16.417,20.328 Z" class="cls-9"/>
+    <path d="M8.744,7.009 C8.297,7.257 7.734,7.094 7.486,6.647 L5.247,2.597 C5.000,2.150 5.162,1.587 5.609,1.340 C6.057,1.092 6.620,1.255 6.867,1.702 L9.106,5.752 C9.353,6.199 9.191,6.762 8.744,7.009 Z" class="cls-10"/>
+    <path d="M10.859,-0.015 C11.370,-0.015 11.784,0.400 11.784,0.911 L11.784,5.538 C11.784,6.049 11.370,6.464 10.859,6.464 C10.347,6.464 9.933,6.049 9.933,5.538 L9.933,0.911 C9.933,0.400 10.347,-0.015 10.859,-0.015 Z" class="cls-11"/>
+  </g>
+</svg>
diff --git a/12/img/spinner.svg b/12/img/spinner.svg
new file mode 100644
index 0000000..bf250a7
--- /dev/null
+++ b/12/img/spinner.svg
@@ -0,0 +1,80 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="0 0 45 45">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #ffe853;
+      }
+
+      .cls-1, .cls-10, .cls-11, .cls-12, .cls-2, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9 {
+        fill-rule: evenodd;
+      }
+
+      .cls-2 {
+        fill: #e16567;
+      }
+
+      .cls-3 {
+        fill: #b55e60;
+        opacity: 0.4;
+      }
+
+      .cls-4 {
+        fill: #ffac64;
+      }
+
+      .cls-5 {
+        fill: #c4a4a5;
+      }
+
+      .cls-5, .cls-9 {
+        opacity: 0.2;
+      }
+
+      .cls-6 {
+        fill: #ff7f64;
+      }
+
+      .cls-11, .cls-7 {
+        fill: #dc595c;
+      }
+
+      .cls-7 {
+        opacity: 0.6;
+      }
+
+      .cls-8 {
+        fill: #ffc064;
+      }
+
+      .cls-9 {
+        fill: #c98485;
+      }
+
+      .cls-10 {
+        fill: #ff9764;
+      }
+
+      .cls-11 {
+        opacity: 0.8;
+      }
+
+      .cls-12 {
+        fill: #ffd55e;
+      }
+    </style>
+  </defs>
+  <g>
+    <path d="M21.452,0.007 C22.464,0.007 23.283,0.827 23.283,1.838 L23.283,10.992 C23.283,12.004 22.464,12.823 21.452,12.823 C20.441,12.823 19.622,12.004 19.622,10.992 L19.622,1.838 C19.622,0.827 20.441,0.007 21.452,0.007 Z" class="cls-1"/>
+    <path d="M22.065,30.115 C23.076,30.115 23.895,30.934 23.895,31.946 L23.895,41.100 C23.895,42.111 23.076,42.931 22.065,42.931 C21.053,42.931 20.234,42.111 20.234,41.100 L20.234,31.946 C20.234,30.934 21.053,30.115 22.065,30.115 Z" class="cls-2"/>
+    <path d="M43.526,21.469 C43.526,22.480 42.707,23.300 41.695,23.300 L32.541,23.300 C31.530,23.300 30.710,22.480 30.710,21.469 C30.710,20.458 31.530,19.638 32.541,19.638 L41.695,19.638 C42.707,19.638 43.526,20.458 43.526,21.469 Z" class="cls-3"/>
+    <path d="M12.807,21.469 C12.807,22.480 11.987,23.300 10.976,23.300 L1.821,23.300 C0.810,23.300 -0.009,22.480 -0.009,21.469 C-0.009,20.458 0.810,19.638 1.821,19.638 L10.976,19.638 C11.987,19.638 12.807,20.458 12.807,21.469 Z" class="cls-4"/>
+    <path d="M32.526,3.085 C33.392,3.607 33.672,4.732 33.150,5.598 L28.426,13.439 C27.905,14.306 26.780,14.585 25.913,14.063 C25.047,13.541 24.768,12.416 25.290,11.550 L30.013,3.709 C30.535,2.842 31.660,2.563 32.526,3.085 Z" class="cls-5"/>
+    <path d="M16.991,28.875 C17.858,29.397 18.137,30.522 17.615,31.388 L12.891,39.229 C12.370,40.096 11.245,40.375 10.378,39.853 C9.512,39.331 9.233,38.206 9.755,37.340 L14.478,29.498 C15.000,28.632 16.125,28.353 16.991,28.875 Z" class="cls-6"/>
+    <path d="M40.449,32.543 C39.927,33.409 38.802,33.688 37.936,33.166 L30.094,28.443 C29.228,27.921 28.949,26.796 29.470,25.930 C29.992,25.064 31.117,24.785 31.983,25.306 L39.825,30.030 C40.691,30.552 40.970,31.677 40.449,32.543 Z" class="cls-7"/>
+    <path d="M14.046,17.008 C13.525,17.874 12.400,18.153 11.534,17.631 L3.692,12.908 C2.826,12.386 2.547,11.261 3.068,10.395 C3.590,9.529 4.715,9.250 5.581,9.771 L13.423,14.495 C14.289,15.017 14.568,16.142 14.046,17.008 Z" class="cls-8"/>
+    <path d="M40.847,11.085 C41.336,11.970 41.015,13.084 40.130,13.573 L32.119,18.002 C31.234,18.491 30.120,18.171 29.631,17.286 C29.142,16.401 29.462,15.287 30.347,14.798 L38.359,10.368 C39.244,9.879 40.358,10.200 40.847,11.085 Z" class="cls-9"/>
+    <path d="M13.886,25.652 C14.375,26.537 14.055,27.651 13.170,28.140 L5.158,32.569 C4.273,33.059 3.159,32.738 2.670,31.853 C2.181,30.968 2.502,29.854 3.386,29.365 L11.398,24.936 C12.283,24.446 13.397,24.767 13.886,25.652 Z" class="cls-10"/>
+    <path d="M32.449,40.251 C31.564,40.741 30.450,40.420 29.961,39.535 L25.531,31.523 C25.042,30.638 25.363,29.524 26.248,29.035 C27.133,28.546 28.247,28.867 28.736,29.752 L33.165,37.763 C33.654,38.648 33.334,39.762 32.449,40.251 Z" class="cls-11"/>
+    <path d="M17.269,13.903 C16.384,14.392 15.270,14.071 14.781,13.186 L10.352,5.175 C9.863,4.290 10.183,3.176 11.068,2.687 C11.953,2.197 13.067,2.518 13.556,3.403 L17.986,11.414 C18.475,12.299 18.154,13.413 17.269,13.903 Z" class="cls-12"/>
+  </g>
+</svg>
diff --git a/12/img/sprite.png b/12/img/sprite.png
new file mode 100644
index 0000000..3d0e7df
Binary files /dev/null and b/12/img/sprite.png differ
diff --git a/12/img/upload-button-bg.png b/12/img/upload-button-bg.png
new file mode 100644
index 0000000..9b1a852
Binary files /dev/null and b/12/img/upload-button-bg.png differ
diff --git a/12/img/upload-button.svg b/12/img/upload-button.svg
new file mode 100644
index 0000000..b561256
--- /dev/null
+++ b/12/img/upload-button.svg
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="86" height="114.188" viewBox="0 0 86 114.188">
+  <defs>
+    <style>
+      .cls-1, .cls-2 {
+        fill: #fff;
+      }
+
+      .cls-1 {
+        fill-rule: evenodd;
+      }
+
+      .cls-3 {
+        fill: #943106;
+      }
+    </style>
+  </defs>
+  <g>
+    <path d="M80.571,11.882 C79.875,12.620 78.777,12.989 77.277,12.989 C77.145,12.989 76.956,12.986 76.710,12.980 C76.464,12.974 76.197,12.962 75.909,12.944 C75.621,12.926 75.327,12.896 75.027,12.854 C74.727,12.812 74.451,12.761 74.199,12.701 L74.199,0.209 L76.467,0.209 L76.467,4.745 C76.539,4.733 76.632,4.715 76.746,4.691 C76.860,4.667 76.983,4.649 77.115,4.637 C77.247,4.625 77.385,4.613 77.529,4.601 C77.673,4.589 77.799,4.583 77.907,4.583 C78.411,4.583 78.888,4.643 79.338,4.763 C79.788,4.883 80.181,5.093 80.517,5.393 C80.853,5.693 81.120,6.104 81.318,6.626 C81.516,7.148 81.615,7.811 81.615,8.615 C81.615,10.055 81.267,11.144 80.571,11.882 ZM79.095,7.688 C78.999,7.418 78.870,7.208 78.708,7.058 C78.546,6.908 78.354,6.806 78.132,6.752 C77.910,6.698 77.667,6.671 77.403,6.671 C77.271,6.671 77.100,6.689 76.890,6.725 C76.680,6.761 76.539,6.797 76.467,6.833 L76.467,10.793 C76.575,10.829 76.716,10.856 76.890,10.874 C77.064,10.892 77.235,10.901 77.403,10.901 C77.967,10.901 78.414,10.739 78.744,10.415 C79.074,10.091 79.239,9.527 79.239,8.723 C79.239,8.303 79.191,7.958 79.095,7.688 ZM70.257,12.809 L67.989,12.809 L67.989,2.297 L65.001,2.297 L65.001,0.209 L73.245,0.209 L73.245,2.297 L70.257,2.297 L70.257,12.809 ZM61.779,6.095 L61.959,4.313 L61.869,4.313 L61.185,6.221 L57.603,12.809 L55.821,12.809 L55.821,0.209 L58.089,0.209 L58.089,6.797 L57.891,8.633 L57.981,8.633 L58.701,6.671 L62.283,0.209 L64.047,0.209 L64.047,12.809 L61.779,12.809 L61.779,6.095 ZM54.030,7.139 C54.372,7.643 54.543,8.327 54.543,9.191 C54.543,9.875 54.432,10.463 54.210,10.955 C53.988,11.447 53.688,11.849 53.310,12.161 C52.932,12.473 52.497,12.701 52.005,12.845 C51.513,12.989 51.003,13.061 50.475,13.061 C49.827,13.061 49.233,13.004 48.693,12.890 C48.153,12.776 47.721,12.623 47.397,12.431 L47.991,10.415 C48.219,10.547 48.534,10.673 48.936,10.793 C49.338,10.913 49.809,10.973 50.349,10.973 C50.841,10.973 51.267,10.814 51.627,10.496 C51.987,10.178 52.167,9.677 52.167,8.993 C52.167,8.405 52.002,7.964 51.672,7.670 C51.342,7.376 50.763,7.217 49.935,7.193 C49.803,7.193 49.713,7.190 49.665,7.184 C49.617,7.178 49.515,7.175 49.359,7.175 L48.945,7.175 L48.945,5.339 L49.377,5.339 C49.557,5.339 49.779,5.333 50.043,5.321 C50.307,5.309 50.517,5.273 50.673,5.213 C50.997,5.117 51.273,4.937 51.501,4.673 C51.729,4.409 51.843,4.067 51.843,3.647 C51.843,3.059 51.702,2.651 51.420,2.423 C51.138,2.195 50.745,2.081 50.241,2.081 C49.833,2.081 49.452,2.144 49.098,2.270 C48.744,2.396 48.465,2.525 48.261,2.657 L47.685,0.695 C47.805,0.623 47.973,0.545 48.189,0.461 C48.405,0.377 48.648,0.299 48.918,0.227 C49.188,0.155 49.476,0.098 49.782,0.056 C50.088,0.014 50.397,-0.007 50.709,-0.007 C51.165,-0.007 51.606,0.038 52.032,0.128 C52.458,0.218 52.833,0.380 53.157,0.614 C53.481,0.848 53.739,1.169 53.931,1.577 C54.123,1.985 54.219,2.507 54.219,3.143 C54.219,3.755 54.090,4.325 53.832,4.853 C53.574,5.381 53.157,5.771 52.581,6.023 L52.581,6.131 C53.205,6.299 53.688,6.635 54.030,7.139 ZM43.995,10.694 C43.803,11.192 43.593,11.609 43.365,11.945 C43.137,12.281 42.882,12.530 42.600,12.692 C42.318,12.854 41.973,12.935 41.565,12.935 C41.241,12.935 40.962,12.905 40.728,12.845 C40.494,12.785 40.251,12.671 39.999,12.503 L40.557,10.595 C40.725,10.691 40.875,10.754 41.007,10.784 C41.139,10.814 41.277,10.835 41.421,10.847 C41.865,10.847 42.171,10.391 42.339,9.479 L38.451,0.209 L41.133,0.209 L43.059,5.699 L43.329,7.373 L43.419,7.373 L43.653,5.645 L45.075,0.209 L47.415,0.209 L44.607,8.921 C44.391,9.605 44.187,10.196 43.995,10.694 ZM37.083,7.553 C36.711,7.901 36.282,8.153 35.796,8.309 C35.310,8.465 34.809,8.543 34.293,8.543 C34.245,8.543 34.167,8.543 34.059,8.543 C33.951,8.543 33.837,8.540 33.717,8.534 C33.597,8.528 33.480,8.519 33.366,8.507 C33.252,8.495 33.171,8.483 33.123,8.471 L33.123,12.809 L30.855,12.809 L30.855,0.335 C31.287,0.239 31.761,0.164 32.277,0.110 C32.793,0.056 33.309,0.029 33.825,0.029 C34.377,0.029 34.920,0.080 35.454,0.182 C35.988,0.284 36.465,0.485 36.885,0.785 C37.305,1.085 37.647,1.508 37.911,2.054 C38.175,2.600 38.307,3.311 38.307,4.187 C38.307,4.979 38.196,5.651 37.974,6.203 C37.752,6.755 37.455,7.205 37.083,7.553 ZM35.778,3.161 C35.676,2.885 35.538,2.666 35.364,2.504 C35.190,2.342 34.989,2.225 34.761,2.153 C34.533,2.081 34.293,2.045 34.041,2.045 C33.669,2.045 33.363,2.075 33.123,2.135 L33.123,6.437 C33.195,6.461 33.330,6.482 33.528,6.500 C33.726,6.518 33.861,6.527 33.933,6.527 C34.197,6.527 34.449,6.491 34.689,6.419 C34.929,6.347 35.142,6.224 35.328,6.050 C35.514,5.876 35.661,5.636 35.769,5.330 C35.877,5.024 35.931,4.637 35.931,4.169 C35.931,3.773 35.880,3.437 35.778,3.161 ZM26.265,12.809 L23.997,12.809 L23.997,0.209 L30.171,0.209 L30.171,2.297 L26.265,2.297 L26.265,12.809 ZM20.074,9.929 L17.104,9.929 L16.366,12.809 L14.116,12.809 L17.770,0.119 L19.552,0.119 L23.224,12.809 L20.848,12.809 L20.074,9.929 ZM18.958,5.159 L18.670,3.179 L18.598,3.179 L18.292,5.177 L17.590,8.093 L19.678,8.093 L18.958,5.159 ZM13.189,7.139 C13.531,7.643 13.702,8.327 13.702,9.191 C13.702,9.875 13.590,10.463 13.369,10.955 C13.146,11.447 12.847,11.849 12.469,12.161 C12.091,12.473 11.655,12.701 11.164,12.845 C10.671,12.989 10.161,13.061 9.634,13.061 C8.986,13.061 8.392,13.004 7.852,12.890 C7.312,12.776 6.880,12.623 6.556,12.431 L7.150,10.415 C7.377,10.547 7.692,10.673 8.095,10.793 C8.496,10.913 8.968,10.973 9.508,10.973 C9.999,10.973 10.426,10.814 10.786,10.496 C11.146,10.178 11.326,9.677 11.326,8.993 C11.326,8.405 11.160,7.964 10.831,7.670 C10.500,7.376 9.922,7.217 9.094,7.193 C8.961,7.193 8.871,7.190 8.824,7.184 C8.775,7.178 8.673,7.175 8.518,7.175 L8.104,7.175 L8.104,5.339 L8.536,5.339 C8.716,5.339 8.937,5.333 9.202,5.321 C9.465,5.309 9.675,5.273 9.832,5.213 C10.156,5.117 10.431,4.937 10.660,4.673 C10.887,4.409 11.002,4.067 11.002,3.647 C11.002,3.059 10.860,2.651 10.579,2.423 C10.296,2.195 9.904,2.081 9.400,2.081 C8.991,2.081 8.610,2.144 8.257,2.270 C7.902,2.396 7.623,2.525 7.420,2.657 L6.844,0.695 C6.963,0.623 7.132,0.545 7.348,0.461 C7.564,0.377 7.807,0.299 8.077,0.227 C8.347,0.155 8.635,0.098 8.941,0.056 C9.247,0.014 9.555,-0.007 9.868,-0.007 C10.323,-0.007 10.764,0.038 11.191,0.128 C11.616,0.218 11.992,0.380 12.316,0.614 C12.640,0.848 12.897,1.169 13.090,1.577 C13.281,1.985 13.378,2.507 13.378,3.143 C13.378,3.755 13.248,4.325 12.991,4.853 C12.732,5.381 12.316,5.771 11.740,6.023 L11.740,6.131 C12.363,6.299 12.847,6.635 13.189,7.139 Z" class="cls-1"/>
+    <rect y="28.188" width="86" height="86" rx="20" ry="20" class="cls-2"/>
+    <circle cx="42" cy="72.188" r="24" class="cls-3"/>
+    <circle cx="41.922" cy="72.11" r="19.578" class="cls-2"/>
+  </g>
+</svg>
diff --git a/12/img/upload-default-image.jpg b/12/img/upload-default-image.jpg
new file mode 100644
index 0000000..ba56046
Binary files /dev/null and b/12/img/upload-default-image.jpg differ
diff --git a/12/index.html b/12/index.html
new file mode 100644
index 0000000..b55c490
--- /dev/null
+++ b/12/index.html
@@ -0,0 +1,242 @@
+<!DOCTYPE html>
+<html lang="ru">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <link rel="stylesheet" href="css/normalize.css">
+  <link rel="stylesheet" href="css/style.css">
+  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
+  <title>Кекстаграм</title>
+  <base href="https://htmlacademy-javascript.github.io/2593079-kekstagram-2/12/">
+</head>
+
+<body>
+  <main>
+
+    <!-- Фильтрация изображений от других пользователей -->
+    <section class="img-filters  img-filters--inactive  container">
+      <h2 class="img-filters__title  visually-hidden">Фильтр фотографий</h2>
+      <form class="img-filters__form" action="index.html" method="get" autocomplete="off">
+        <button type=button class="img-filters__button  img-filters__button--active" id="filter-default">По умолчанию</button>
+        <button type=button class="img-filters__button" id="filter-random">Случайные</button>
+        <button type=button class="img-filters__button" id="filter-discussed">Обсуждаемые</button>
+      </form>
+    </section>
+
+    <!-- Контейнер для изображений от других пользователей -->
+    <section class="pictures  container">
+      <h2 class="pictures__title  visually-hidden">Фотографии других пользователей</h2>
+
+      <!-- Поле для загрузки нового изображения на сайт -->
+      <section class="img-upload">
+        <div class="img-upload__wrapper">
+          <h2 class="img-upload__title  visually-hidden">Загрузка фотографии</h2>
+          <form class="img-upload__form" id="upload-select-image" autocomplete="off">
+
+            <!-- Изначальное состояние поля для загрузки изображения -->
+            <fieldset class="img-upload__start">
+              <input type="file" id="upload-file" class="img-upload__input  visually-hidden" name="filename" required>
+              <label for="upload-file" class="img-upload__label  img-upload__control">Загрузить</label>
+            </fieldset>
+
+            <!-- Форма редактирования изображения -->
+            <div class="img-upload__overlay  hidden">
+              <div class="img-upload__wrapper">
+                <div class="img-upload__preview-container">
+
+                  <!-- Изменение размера изображения -->
+                  <fieldset class="img-upload__scale  scale">
+                    <button type="button" class="scale__control  scale__control--smaller">Уменьшить</button>
+                    <input type="text" class="scale__control  scale__control--value" value="100%" title="Image Scale" name="scale" readonly>
+                    <button type="button" class="scale__control  scale__control--bigger">Увеличить</button>
+                  </fieldset>
+
+                  <!-- Предварительный просмотр изображения -->
+                  <div class="img-upload__preview">
+                    <img src="img/upload-default-image.jpg" alt="Предварительный просмотр фотографии">
+                  </div>
+
+                  <!-- Изменение глубины эффекта, накладываемого на изображение -->
+                  <fieldset class="img-upload__effect-level  effect-level">
+                    <input class="effect-level__value" type="number" step="any" name="effect-level" value="">
+                    <div class="effect-level__slider"></div>
+                  </fieldset>
+
+                  <!-- Кнопка для закрытия формы редактирования изображения -->
+                  <button type="reset" class="img-upload__cancel  cancel" id="upload-cancel">Закрыть</button>
+                </div>
+
+                <!-- Наложение эффекта на изображение -->
+                <fieldset class="img-upload__effects  effects">
+                  <ul class="effects__list">
+                    <li class="effects__item">
+                      <input type="radio" class="effects__radio  visually-hidden" name="effect" id="effect-none" value="none" checked>
+                      <label for="effect-none" class="effects__label">
+                        <span class="effects__preview  effects__preview--none">Превью фото без эффекта</span>
+                        Оригинал
+                      </label>
+                    </li>
+                    <li class="effects__item">
+                      <input type="radio" class="effects__radio  visually-hidden" name="effect" id="effect-chrome" value="chrome">
+                      <label for="effect-chrome" class="effects__label">
+                        <span class="effects__preview  effects__preview--chrome">Превью эффекта Хром</span>
+                        Хром
+                      </label>
+                    </li>
+                    <li class="effects__item">
+                      <input type="radio" class="effects__radio  visually-hidden" name="effect" id="effect-sepia" value="sepia">
+                      <label for="effect-sepia" class="effects__label">
+                        <span class="effects__preview  effects__preview--sepia">Превью эффекта Сепия</span>
+                        Сепия
+                      </label>
+                    </li>
+                    <li class="effects__item">
+                      <input type="radio" class="effects__radio  visually-hidden" name="effect" id="effect-marvin" value="marvin">
+                      <label for="effect-marvin" class="effects__label">
+                        <span class="effects__preview  effects__preview--marvin">Превью эффекта Марвин</span>
+                        Марвин
+                      </label>
+                    </li>
+                    <li class="effects__item">
+                      <input type="radio" class="effects__radio  visually-hidden" name="effect" id="effect-phobos" value="phobos">
+                      <label for="effect-phobos" class="effects__label">
+                        <span class="effects__preview  effects__preview--phobos">Превью эффекта Фобос</span>
+                        Фобос
+                      </label>
+                    </li>
+                    <li class="effects__item">
+                      <input type="radio" class="effects__radio  visually-hidden" name="effect" id="effect-heat" value="heat">
+                      <label for="effect-heat" class="effects__label">
+                        <span class="effects__preview  effects__preview--heat">Превью эффекта Зной</span>
+                        Зной
+                      </label>
+                    </li>
+                  </ul>
+                </fieldset>
+
+                <!-- Добавление хэштегов и комментария к изображению -->
+                <fieldset class="img-upload__text text">
+                  <div class="img-upload__field-wrapper">
+                    <input class="text__hashtags" name="hashtags" placeholder="#ХэшТег">
+                  </div>
+                  <div class="img-upload__field-wrapper">
+                    <textarea class="text__description" name="description" placeholder="Ваш комментарий..."></textarea>
+                  </div>
+                </fieldset>
+
+                <!-- Кнопка для отправки данных на сервер -->
+                <button type="submit" class="img-upload__submit" id="upload-submit">Опубликовать</button>
+              </div>
+            </div>
+          </form>
+        </div>
+      </section>
+
+      <!-- Здесь будут изображения других пользователей -->
+
+    </section>
+
+    <!-- Полноэкранный показ изображения -->
+    <section class="big-picture  overlay  hidden">
+      <h2 class="big-picture__title  visually-hidden">Просмотр фотографии</h2>
+      <div class="big-picture__preview">
+
+        <!-- Просмотр изображения -->
+        <div class="big-picture__img">
+          <img src="img/logo-background-3.jpg" alt="Девушка в купальнике" width="600" height="600">
+        </div>
+
+        <!-- Информация об изображении. Подпись, комментарии, количество лайков -->
+        <div class="big-picture__social  social">
+          <div class="social__header">
+            <img class="social__picture" src="img/avatar-1.svg" alt="Аватар автора фотографии" width="35" height="35">
+            <p class="social__caption">Тестим новую камеру! =)</p>
+            <p class="social__likes">Нравится <span class="likes-count">356</span></p>
+          </div>
+
+          <!-- Комментарии к изображению -->
+          <div class="social__comment-count"><span class="social__comment-shown-count">5</span> из <span class="social__comment-total-count">125</span> комментариев</div>
+          <ul class="social__comments">
+            <li class="social__comment">
+              <img class="social__picture" src="img/avatar-4.svg" alt="Аватар комментатора фотографии" width="35" height="35">
+              <p class="social__text">Мега фото! Просто обалдеть. Как вам так удалось?</p>
+            </li>
+            <li class="social__comment">
+              <img class="social__picture" src="img/avatar-3.svg" alt="Аватар комментатора фотографии" width="35" height="35">
+              <p class="social__text">Да это фоташоп!!!!!!!!</p>
+            </li>
+          </ul>
+
+          <!-- Кнопка для загрузки новой порции комментариев -->
+          <button type="button" class="social__comments-loader  comments-loader">Загрузить еще</button>
+
+          <!-- Форма для отправки комментария -->
+          <div class="social__footer">
+            <img class="social__picture" src="img/avatar-6.svg" alt="Аватар комментатора фотографии" width="35" height="35">
+            <input type="text" class="social__footer-text" placeholder="Ваш комментарий...">
+            <button type="button" class="social__footer-btn" name="button">Отправить</button>
+          </div>
+        </div>
+
+        <!-- Кнопка для выхода из полноэкранного просмотра изображения -->
+        <button type="reset" class="big-picture__cancel  cancel" id="picture-cancel">Закрыть</button>
+      </div>
+    </section>
+  </main>
+
+  <footer class="page-footer  container">
+    <div class="page-footer__wrapper">
+      <div class="page-footer__copyright  copyright">
+        <a class="copyright__link  copyright__link--image" href="https://htmlacademy.ru/intensive/javascript"><img src="img/htmla-logo.svg" width="130" height="45" alt="HTML Academy"></a>
+        <p>Сделано в <a class="copyright__link  copyright__link--text" href="https://htmlacademy.ru/intensive/javascript">HTML Academy</a></p>
+      </div>
+      <ul class="page-footer__contacts  contacts">
+        <li><a href="https://twitter.com/htmlacademy_ru" class="contacts__link  contacts__link--twitter">Twitter</a></li>
+        <li><a href="https://vk.com/htmlacademy" class="contacts__link  contacts__link--vk">VK</a></li>
+      </ul>
+    </div>
+  </footer>
+
+  <!-- Шаблон изображения случайного пользователя -->
+  <template id="picture">
+    <a href="#" class="picture">
+      <img class="picture__img" src="" width="182" height="182" alt="Случайная фотография">
+      <p class="picture__info">
+        <span class="picture__comments"></span>
+        <span class="picture__likes"></span>
+      </p>
+    </a>
+  </template>
+
+  <!-- Сообщение с ошибкой загрузки изображения -->
+  <template id="error">
+    <section class="error">
+      <div class="error__inner">
+        <h2 class="error__title">Ошибка загрузки файла</h2>
+        <button type="button" class="error__button">Попробовать ещё раз</button>
+      </div>
+    </section>
+  </template>
+
+  <!-- Сообщение об успешной загрузке изображения -->
+  <template id="success">
+    <section class="success">
+      <div class="success__inner">
+        <h2 class="success__title">Изображение успешно загружено</h2>
+        <button type="button" class="success__button">Круто!</button>
+      </div>
+    </section>
+  </template>
+
+  <!-- Сообщение с ошибкой загрузки изображений от других пользователей -->
+  <template id="data-error">
+    <section class="data-error">
+      <h2 class="data-error__title">Не удалось загрузить данные</h2>
+    </section>
+  </template>
+  <script src="js/main.js" type="module"></script>
+  <script src="js/functions.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/12/js/big-picture-popup.js b/12/js/big-picture-popup.js
new file mode 100644
index 0000000..4a7ecbf
--- /dev/null
+++ b/12/js/big-picture-popup.js
@@ -0,0 +1,70 @@
+import { getPhotos } from './get-photos.js';
+import { hide, show } from './utils.js';
+const photos = getPhotos();
+const bigPhotoPopup = document.querySelector('.big-picture');
+const popupCancelElement = document.querySelector('.big-picture__cancel');
+
+function onEscapeKeydown(e) {
+  if (e.key === 'Escape') {
+    hidePhotoPopup();
+  }
+}
+
+function renderComments(photoId) {
+  const currentPhoto = photos.find((photo) => photo.id === Number(photoId));
+  const commentFragmentList = document.createDocumentFragment();
+  currentPhoto.comments.forEach((comment) => {
+    const commEl = document.createElement('li');
+    commEl.className = 'social__comment';
+
+    const imgEl = document.createElement('img');
+    imgEl.className = 'social__picture';
+    imgEl.src = comment.avatar;
+    imgEl.alt = comment.name;
+    imgEl.width = 35;
+    imgEl.height = 35;
+
+    const pEl = document.createElement('p');
+    pEl.className = 'social__text';
+    pEl.textContent = comment.message;
+
+    commEl.append(imgEl);
+    commEl.append(pEl);
+    commentFragmentList.append(commEl);
+
+  });
+
+  return commentFragmentList;
+
+}
+function hidePhotoPopup() {
+  hide(bigPhotoPopup);
+  document.removeEventListener('keydown', onEscapeKeydown);
+  document.body.classList.remove('modal-open');
+}
+function showPhotoPopup() {
+  document.body.classList.add('modal-open');
+  show(bigPhotoPopup);
+
+  document.addEventListener('keydown', onEscapeKeydown);
+}
+function openBigPhotoPopup(photoId) {
+  showPhotoPopup();
+  const currentPhoto = photos.find((photo) => photo.id === Number(photoId));
+  if (currentPhoto) {
+    const comments = renderComments(photoId);
+    bigPhotoPopup.querySelector('.big-picture__img img').src = currentPhoto.url;
+    bigPhotoPopup.querySelector('.likes-count').textContent = currentPhoto.likes.length;
+    bigPhotoPopup.querySelector('.social__comment-shown-count').textContent = currentPhoto.comments.length;
+    bigPhotoPopup.querySelector('.social__comment-total-count').textContent = currentPhoto.comments.length;
+    bigPhotoPopup.querySelector('.social__comments').innerHTML = '';
+    bigPhotoPopup.querySelector('.social__comments').append(comments);
+    bigPhotoPopup.querySelector('.social__caption').textContent = currentPhoto.description;
+    hide(bigPhotoPopup.querySelector('.social__comment-shown-count'));
+    hide(bigPhotoPopup.querySelector('.comments-loader'));
+  }
+}
+
+popupCancelElement.addEventListener('click', hidePhotoPopup);
+
+export { openBigPhotoPopup };
diff --git a/12/js/consts.js b/12/js/consts.js
new file mode 100644
index 0000000..36ed269
--- /dev/null
+++ b/12/js/consts.js
@@ -0,0 +1,40 @@
+const NAMES = [
+  'Кристина',
+  'Игорь',
+  'Зина',
+  'Петруша',
+  'Макс',
+  'Кирилл',
+  'Алекс',
+  'Коля',
+  'Ксения',
+  'Алина',
+];
+const DESCRIPTIONS = [
+  'Солнечный берег с белым песком и пальмами.',
+  'Ночной город с огнями и движением автомобилей.',
+  'Улыбающиеся дети, играющие в парке.',
+  'Закат над горами с яркими оранжевыми и красными оттенками.',
+  'Стейк на гриле с овощами на стороне.',
+  'Старый замок на вершине холма, окруженный туманом.',
+  'Лесная тропинка среди осенних деревьев с разноцветной листвой.',
+  'Пара, прогуливающаяся по мосту, держа друг друга за руки.',
+  'Домашний офис с приятной атмосферой и растениями.',
+  'Уютный кафе с чашкой кофе и книгой на столе.',
+  'Дети, строящие снеговика на зимнем дворе.',
+  'Спокойное озеро с отражением облаков на воде.',
+  'Уличный рынок с яркими фруктами и овощами.',
+  'Групповой снимок друзей на пляже.',
+  'Кошка, спящая на окне в солнечный день.',
+];
+const MESSAGES = [
+  'Всё отлично!',
+  'В целом всё неплохо.Но не всё.',
+  'Когда вы делаете фотографию, хорошо бы убирать палец из кадра.В конце концов это просто непрофессионально.',
+  'Моя бабушка случайно чихнула с фотоаппаратом в руках и у неё получилась фотография лучше.',
+  'Я поскользнулся на банановой кожуре и уронил фотоаппарат на кота и у меня получилась фотография лучше.',
+  'Лица у людей на фотке перекошены, как будто их избивают.Как можно было поймать такой неудачный момент ? !',
+];
+const PHOTOS_COUNT = 25;
+
+export { NAMES, DESCRIPTIONS, MESSAGES, PHOTOS_COUNT };
diff --git a/12/js/functions.js b/12/js/functions.js
new file mode 100644
index 0000000..dd7cee9
--- /dev/null
+++ b/12/js/functions.js
@@ -0,0 +1,37 @@
+function checkStr(string, length) {
+  return string.length <= length;
+}
+checkStr('fff', 3);
+
+function isPalindrome(string) {
+  string = string.toLowerCase().replaceAll(' ', '');
+  const reversedString = string.split('').reverse().join('');
+  return string === reversedString;
+}
+isPalindrome('ooppoo ooppoo');
+function getNums(string) {
+  string = String(string);
+  let result = '';
+  for (let i = 0; i < string.length; i++) {
+    if (!isNaN(parseInt(string[i], 10))) {
+      result += string[i];
+    }
+  }
+  return parseInt(result, 10);
+}
+
+getNums('ou8kj9');
+
+function getTimeInMinutes(time) {
+  const [hours, minutes] = time.split(':').map((elem) => parseInt(elem, 10));
+  return hours * 60 + minutes;
+}
+
+function checkMeetingTime(from, until, meetTime, duration) {
+  from = getTimeInMinutes(from);
+  until = getTimeInMinutes(until);
+  meetTime = getTimeInMinutes(meetTime);
+
+  return from <= meetTime && meetTime + duration <= until;
+}
+checkMeetingTime('08:00', '14:30', '14:00', 30);
diff --git a/12/js/get-photos.js b/12/js/get-photos.js
new file mode 100644
index 0000000..fbe4661
--- /dev/null
+++ b/12/js/get-photos.js
@@ -0,0 +1,45 @@
+import { DESCRIPTIONS, PHOTOS_COUNT, NAMES, MESSAGES } from './consts.js';
+import { getRandomInt, getUniqueId, getRandomElement } from './utils.js';
+
+
+const getCommentId = getUniqueId(1, 1000);
+
+function createComment() {
+  const commentId = getCommentId();
+  const comment = {
+    id: commentId,
+    avatar: `img/avatar-${getRandomInt(1, 6)}.svg`,
+    message: getRandomElement(MESSAGES),
+    name: getRandomElement(NAMES),
+  };
+
+  return comment;
+}
+
+function getComments() {
+  const comments = Array.from({ length: getRandomInt(0, 30) }, createComment);
+  return comments;
+}
+
+const getPhotoId = getUniqueId(1, 25);
+function createPhoto() {
+  const photoId = getPhotoId();
+  const comments = getComments();
+
+  const photo = {
+    id: photoId,
+    url: `photos/${photoId}.jpg`,
+    description: getRandomElement(DESCRIPTIONS),
+    likes: getRandomInt(15, 200),
+    comments,
+  };
+
+  return photo;
+}
+const photos = Array.from({ length: PHOTOS_COUNT }, createPhoto);
+
+function getPhotos() {
+  return photos;
+}
+
+export { getPhotos };
diff --git a/12/js/main.js b/12/js/main.js
new file mode 100644
index 0000000..e4a7d92
--- /dev/null
+++ b/12/js/main.js
@@ -0,0 +1,12 @@
+import { renderPictures } from './render-pictures.js';
+import { openBigPhotoPopup } from './big-picture-popup.js';
+
+renderPictures();
+
+document.addEventListener('click', (e) => {
+  const currentPicture = e.target.closest('.picture');
+
+  if (currentPicture) {
+    openBigPhotoPopup(currentPicture.dataset.photoId);
+  }
+});
diff --git a/12/js/render-pictures.js b/12/js/render-pictures.js
new file mode 100644
index 0000000..ca73c25
--- /dev/null
+++ b/12/js/render-pictures.js
@@ -0,0 +1,25 @@
+import { getPhotos } from './get-photos.js';
+const photos = getPhotos();
+
+function renderPictures() {
+  const pictureTemplate = document.querySelector('#picture').content.querySelector('.picture');
+  const picturesList = document.querySelector('.pictures');
+
+  const picturesListFragment = document.createDocumentFragment();
+
+  photos.forEach((photo) => {
+    const photoElement = pictureTemplate.cloneNode(true);
+    const photoImg = photoElement.querySelector('img');
+    photoImg.src = photo.url;
+    photoImg.alt = photo.description;
+    photoElement.dataset.photoId = photo.id;
+    photoElement.querySelector('.picture__comments').textContent = photo.comments.length;
+    photoElement.querySelector('.picture__likes').textContent = photo.likes;
+
+    picturesListFragment.append(photoElement);
+  });
+
+  picturesList.append(picturesListFragment);
+}
+
+export { renderPictures };
diff --git a/12/js/utils.js b/12/js/utils.js
new file mode 100644
index 0000000..3cd7a8a
--- /dev/null
+++ b/12/js/utils.js
@@ -0,0 +1,33 @@
+function getRandomInt(min, max) {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  const randomInt = Math.floor(Math.random() * (max - min + 1)) + min;
+  return randomInt;
+}
+
+function hide(elem) {
+  elem.classList.add('hidden');
+}
+function show(elem) {
+  elem.classList.remove('hidden');
+}
+function getUniqueId(min, max) {
+  const receivedId = [];
+
+  return function () {
+    if (receivedId.length >= max - min + 1) {
+      return receivedId[receivedId.length - 1];
+    }
+    let currentId = getRandomInt(min, max);
+    while (receivedId.includes(currentId)) {
+      currentId = getRandomInt(min, max);
+    }
+    receivedId.push(currentId);
+    return currentId;
+  };
+}
+function getRandomElement(elements) {
+  return elements[getRandomInt(0, elements.length - 1)];
+}
+
+export { getRandomInt, getUniqueId, getRandomElement, hide, show };
diff --git a/12/photos/1.jpg b/12/photos/1.jpg
new file mode 100644
index 0000000..aed4903
Binary files /dev/null and b/12/photos/1.jpg differ
diff --git a/12/photos/10.jpg b/12/photos/10.jpg
new file mode 100644
index 0000000..d8886cd
Binary files /dev/null and b/12/photos/10.jpg differ
diff --git a/12/photos/11.jpg b/12/photos/11.jpg
new file mode 100644
index 0000000..e560511
Binary files /dev/null and b/12/photos/11.jpg differ
diff --git a/12/photos/12.jpg b/12/photos/12.jpg
new file mode 100644
index 0000000..c7daab9
Binary files /dev/null and b/12/photos/12.jpg differ
diff --git a/12/photos/13.jpg b/12/photos/13.jpg
new file mode 100644
index 0000000..67de24e
Binary files /dev/null and b/12/photos/13.jpg differ
diff --git a/12/photos/14.jpg b/12/photos/14.jpg
new file mode 100644
index 0000000..f698c4e
Binary files /dev/null and b/12/photos/14.jpg differ
diff --git a/12/photos/15.jpg b/12/photos/15.jpg
new file mode 100644
index 0000000..d74a50b
Binary files /dev/null and b/12/photos/15.jpg differ
diff --git a/12/photos/16.jpg b/12/photos/16.jpg
new file mode 100644
index 0000000..85ca467
Binary files /dev/null and b/12/photos/16.jpg differ
diff --git a/12/photos/17.jpg b/12/photos/17.jpg
new file mode 100644
index 0000000..ebb0a86
Binary files /dev/null and b/12/photos/17.jpg differ
diff --git a/12/photos/18.jpg b/12/photos/18.jpg
new file mode 100644
index 0000000..ddf8171
Binary files /dev/null and b/12/photos/18.jpg differ
diff --git a/12/photos/19.jpg b/12/photos/19.jpg
new file mode 100644
index 0000000..70af453
Binary files /dev/null and b/12/photos/19.jpg differ
diff --git a/12/photos/2.jpg b/12/photos/2.jpg
new file mode 100644
index 0000000..7d2cd4a
Binary files /dev/null and b/12/photos/2.jpg differ
diff --git a/12/photos/20.jpg b/12/photos/20.jpg
new file mode 100644
index 0000000..ba92d0f
Binary files /dev/null and b/12/photos/20.jpg differ
diff --git a/12/photos/21.jpg b/12/photos/21.jpg
new file mode 100644
index 0000000..77fca6c
Binary files /dev/null and b/12/photos/21.jpg differ
diff --git a/12/photos/22.jpg b/12/photos/22.jpg
new file mode 100644
index 0000000..c4022f2
Binary files /dev/null and b/12/photos/22.jpg differ
diff --git a/12/photos/23.jpg b/12/photos/23.jpg
new file mode 100644
index 0000000..d4c378b
Binary files /dev/null and b/12/photos/23.jpg differ
diff --git a/12/photos/24.jpg b/12/photos/24.jpg
new file mode 100644
index 0000000..c4856ce
Binary files /dev/null and b/12/photos/24.jpg differ
diff --git a/12/photos/25.jpg b/12/photos/25.jpg
new file mode 100644
index 0000000..e9393d0
Binary files /dev/null and b/12/photos/25.jpg differ
diff --git a/12/photos/3.jpg b/12/photos/3.jpg
new file mode 100644
index 0000000..a24f1f2
Binary files /dev/null and b/12/photos/3.jpg differ
diff --git a/12/photos/4.jpg b/12/photos/4.jpg
new file mode 100644
index 0000000..91e90dc
Binary files /dev/null and b/12/photos/4.jpg differ
diff --git a/12/photos/5.jpg b/12/photos/5.jpg
new file mode 100644
index 0000000..35b440f
Binary files /dev/null and b/12/photos/5.jpg differ
diff --git a/12/photos/6.jpg b/12/photos/6.jpg
new file mode 100644
index 0000000..84ee234
Binary files /dev/null and b/12/photos/6.jpg differ
diff --git a/12/photos/7.jpg b/12/photos/7.jpg
new file mode 100644
index 0000000..2422c36
Binary files /dev/null and b/12/photos/7.jpg differ
diff --git a/12/photos/8.jpg b/12/photos/8.jpg
new file mode 100644
index 0000000..9f86090
Binary files /dev/null and b/12/photos/8.jpg differ
diff --git a/12/photos/9.jpg b/12/photos/9.jpg
new file mode 100644
index 0000000..cbf5877
Binary files /dev/null and b/12/photos/9.jpg differ
diff --git a/12/vendor/nouislider/nouislider.css b/12/vendor/nouislider/nouislider.css
new file mode 100644
index 0000000..0c43ce8
--- /dev/null
+++ b/12/vendor/nouislider/nouislider.css
@@ -0,0 +1,305 @@
+/*! nouislider - 15.6.0 - 05/01/2022 */
+/* Functional styling;
+ * These styles are required for noUiSlider to function.
+ * You don't need to change these rules to apply your design.
+ */
+ .noUi-target,
+ .noUi-target * {
+   -webkit-touch-callout: none;
+   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+   -webkit-user-select: none;
+   -ms-touch-action: none;
+   touch-action: none;
+   -ms-user-select: none;
+   -moz-user-select: none;
+   user-select: none;
+   -moz-box-sizing: border-box;
+   box-sizing: border-box;
+ }
+ .noUi-target {
+   position: relative;
+ }
+ .noUi-base,
+ .noUi-connects {
+   width: 100%;
+   height: 100%;
+   position: relative;
+   z-index: 1;
+ }
+ /* Wrapper for all connect elements.
+  */
+ .noUi-connects {
+   overflow: hidden;
+   z-index: 0;
+ }
+ .noUi-connect,
+ .noUi-origin {
+   will-change: transform;
+   position: absolute;
+   z-index: 1;
+   top: 0;
+   right: 0;
+   height: 100%;
+   width: 100%;
+   -ms-transform-origin: 0 0;
+   -webkit-transform-origin: 0 0;
+   -webkit-transform-style: preserve-3d;
+   transform-origin: 0 0;
+   transform-style: flat;
+ }
+ /* Offset direction
+  */
+ .noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {
+   left: 0;
+   right: auto;
+ }
+ /* Give origins 0 height/width so they don't interfere with clicking the
+  * connect elements.
+  */
+ .noUi-vertical .noUi-origin {
+   top: -100%;
+   width: 0;
+ }
+ .noUi-horizontal .noUi-origin {
+   height: 0;
+ }
+ .noUi-handle {
+   -webkit-backface-visibility: hidden;
+   backface-visibility: hidden;
+   position: absolute;
+ }
+ .noUi-touch-area {
+   height: 100%;
+   width: 100%;
+ }
+ .noUi-state-tap .noUi-connect,
+ .noUi-state-tap .noUi-origin {
+   -webkit-transition: transform 0.3s;
+   transition: transform 0.3s;
+ }
+ .noUi-state-drag * {
+   cursor: inherit !important;
+ }
+ /* Slider size and handle placement;
+  */
+ .noUi-horizontal {
+   height: 18px;
+ }
+ .noUi-horizontal .noUi-handle {
+   width: 34px;
+   height: 28px;
+   right: -17px;
+   top: -6px;
+ }
+ .noUi-vertical {
+   width: 18px;
+ }
+ .noUi-vertical .noUi-handle {
+   width: 28px;
+   height: 34px;
+   right: -6px;
+   bottom: -17px;
+ }
+ .noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
+   left: -17px;
+   right: auto;
+ }
+ /* Styling;
+  * Giving the connect element a border radius causes issues with using transform: scale
+  */
+ .noUi-target {
+   background: #FAFAFA;
+   border-radius: 4px;
+   border: 1px solid #D3D3D3;
+   box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB;
+ }
+ .noUi-connects {
+   border-radius: 3px;
+ }
+ .noUi-connect {
+   background: #3FB8AF;
+ }
+ /* Handles and cursors;
+  */
+ .noUi-draggable {
+   cursor: ew-resize;
+ }
+ .noUi-vertical .noUi-draggable {
+   cursor: ns-resize;
+ }
+ .noUi-handle {
+   border: 1px solid #D9D9D9;
+   border-radius: 3px;
+   background: #FFF;
+   cursor: default;
+   box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
+ }
+ .noUi-active {
+   box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;
+ }
+ /* Handle stripes;
+  */
+ .noUi-handle:before,
+ .noUi-handle:after {
+   content: "";
+   display: block;
+   position: absolute;
+   height: 14px;
+   width: 1px;
+   background: #E8E7E6;
+   left: 14px;
+   top: 6px;
+ }
+ .noUi-handle:after {
+   left: 17px;
+ }
+ .noUi-vertical .noUi-handle:before,
+ .noUi-vertical .noUi-handle:after {
+   width: 14px;
+   height: 1px;
+   left: 6px;
+   top: 14px;
+ }
+ .noUi-vertical .noUi-handle:after {
+   top: 17px;
+ }
+ /* Disabled state;
+  */
+ [disabled] .noUi-connect {
+   background: #B8B8B8;
+ }
+ [disabled].noUi-target,
+ [disabled].noUi-handle,
+ [disabled] .noUi-handle {
+   cursor: not-allowed;
+ }
+ /* Base;
+  *
+  */
+ .noUi-pips,
+ .noUi-pips * {
+   -moz-box-sizing: border-box;
+   box-sizing: border-box;
+ }
+ .noUi-pips {
+   position: absolute;
+   color: #999;
+ }
+ /* Values;
+  *
+  */
+ .noUi-value {
+   position: absolute;
+   white-space: nowrap;
+   text-align: center;
+ }
+ .noUi-value-sub {
+   color: #ccc;
+   font-size: 10px;
+ }
+ /* Markings;
+  *
+  */
+ .noUi-marker {
+   position: absolute;
+   background: #CCC;
+ }
+ .noUi-marker-sub {
+   background: #AAA;
+ }
+ .noUi-marker-large {
+   background: #AAA;
+ }
+ /* Horizontal layout;
+  *
+  */
+ .noUi-pips-horizontal {
+   padding: 10px 0;
+   height: 80px;
+   top: 100%;
+   left: 0;
+   width: 100%;
+ }
+ .noUi-value-horizontal {
+   -webkit-transform: translate(-50%, 50%);
+   transform: translate(-50%, 50%);
+ }
+ .noUi-rtl .noUi-value-horizontal {
+   -webkit-transform: translate(50%, 50%);
+   transform: translate(50%, 50%);
+ }
+ .noUi-marker-horizontal.noUi-marker {
+   margin-left: -1px;
+   width: 2px;
+   height: 5px;
+ }
+ .noUi-marker-horizontal.noUi-marker-sub {
+   height: 10px;
+ }
+ .noUi-marker-horizontal.noUi-marker-large {
+   height: 15px;
+ }
+ /* Vertical layout;
+  *
+  */
+ .noUi-pips-vertical {
+   padding: 0 10px;
+   height: 100%;
+   top: 0;
+   left: 100%;
+ }
+ .noUi-value-vertical {
+   -webkit-transform: translate(0, -50%);
+   transform: translate(0, -50%);
+   padding-left: 25px;
+ }
+ .noUi-rtl .noUi-value-vertical {
+   -webkit-transform: translate(0, 50%);
+   transform: translate(0, 50%);
+ }
+ .noUi-marker-vertical.noUi-marker {
+   width: 5px;
+   height: 2px;
+   margin-top: -1px;
+ }
+ .noUi-marker-vertical.noUi-marker-sub {
+   width: 10px;
+ }
+ .noUi-marker-vertical.noUi-marker-large {
+   width: 15px;
+ }
+ .noUi-tooltip {
+   display: block;
+   position: absolute;
+   border: 1px solid #D9D9D9;
+   border-radius: 3px;
+   background: #fff;
+   color: #000;
+   padding: 5px;
+   text-align: center;
+   white-space: nowrap;
+ }
+ .noUi-horizontal .noUi-tooltip {
+   -webkit-transform: translate(-50%, 0);
+   transform: translate(-50%, 0);
+   left: 50%;
+   bottom: 120%;
+ }
+ .noUi-vertical .noUi-tooltip {
+   -webkit-transform: translate(0, -50%);
+   transform: translate(0, -50%);
+   top: 50%;
+   right: 120%;
+ }
+ .noUi-horizontal .noUi-origin > .noUi-tooltip {
+   -webkit-transform: translate(50%, 0);
+   transform: translate(50%, 0);
+   left: auto;
+   bottom: 10px;
+ }
+ .noUi-vertical .noUi-origin > .noUi-tooltip {
+   -webkit-transform: translate(0, -18px);
+   transform: translate(0, -18px);
+   top: auto;
+   right: 28px;
+ }
diff --git a/12/vendor/nouislider/nouislider.js b/12/vendor/nouislider/nouislider.js
new file mode 100644
index 0000000..98863fb
--- /dev/null
+++ b/12/vendor/nouislider/nouislider.js
@@ -0,0 +1,2255 @@
+/*! nouislider - 15.6.0 - 05/01/2022 */
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.noUiSlider = {}));
+})(this, (function (exports) { 'use strict';
+
+  exports.PipsMode = void 0;
+  (function (PipsMode) {
+      PipsMode["Range"] = "range";
+      PipsMode["Steps"] = "steps";
+      PipsMode["Positions"] = "positions";
+      PipsMode["Count"] = "count";
+      PipsMode["Values"] = "values";
+  })(exports.PipsMode || (exports.PipsMode = {}));
+  exports.PipsType = void 0;
+  (function (PipsType) {
+      PipsType[PipsType["None"] = -1] = "None";
+      PipsType[PipsType["NoValue"] = 0] = "NoValue";
+      PipsType[PipsType["LargeValue"] = 1] = "LargeValue";
+      PipsType[PipsType["SmallValue"] = 2] = "SmallValue";
+  })(exports.PipsType || (exports.PipsType = {}));
+  //region Helper Methods
+  function isValidFormatter(entry) {
+      return isValidPartialFormatter(entry) && typeof entry.from === "function";
+  }
+  function isValidPartialFormatter(entry) {
+      // partial formatters only need a to function and not a from function
+      return typeof entry === "object" && typeof entry.to === "function";
+  }
+  function removeElement(el) {
+      el.parentElement.removeChild(el);
+  }
+  function isSet(value) {
+      return value !== null && value !== undefined;
+  }
+  // Bindable version
+  function preventDefault(e) {
+      e.preventDefault();
+  }
+  // Removes duplicates from an array.
+  function unique(array) {
+      return array.filter(function (a) {
+          return !this[a] ? (this[a] = true) : false;
+      }, {});
+  }
+  // Round a value to the closest 'to'.
+  function closest(value, to) {
+      return Math.round(value / to) * to;
+  }
+  // Current position of an element relative to the document.
+  function offset(elem, orientation) {
+      var rect = elem.getBoundingClientRect();
+      var doc = elem.ownerDocument;
+      var docElem = doc.documentElement;
+      var pageOffset = getPageOffset(doc);
+      // getBoundingClientRect contains left scroll in Chrome on Android.
+      // I haven't found a feature detection that proves this. Worst case
+      // scenario on mis-match: the 'tap' feature on horizontal sliders breaks.
+      if (/webkit.*Chrome.*Mobile/i.test(navigator.userAgent)) {
+          pageOffset.x = 0;
+      }
+      return orientation ? rect.top + pageOffset.y - docElem.clientTop : rect.left + pageOffset.x - docElem.clientLeft;
+  }
+  // Checks whether a value is numerical.
+  function isNumeric(a) {
+      return typeof a === "number" && !isNaN(a) && isFinite(a);
+  }
+  // Sets a class and removes it after [duration] ms.
+  function addClassFor(element, className, duration) {
+      if (duration > 0) {
+          addClass(element, className);
+          setTimeout(function () {
+              removeClass(element, className);
+          }, duration);
+      }
+  }
+  // Limits a value to 0 - 100
+  function limit(a) {
+      return Math.max(Math.min(a, 100), 0);
+  }
+  // Wraps a variable as an array, if it isn't one yet.
+  // Note that an input array is returned by reference!
+  function asArray(a) {
+      return Array.isArray(a) ? a : [a];
+  }
+  // Counts decimals
+  function countDecimals(numStr) {
+      numStr = String(numStr);
+      var pieces = numStr.split(".");
+      return pieces.length > 1 ? pieces[1].length : 0;
+  }
+  // http://youmightnotneedjquery.com/#add_class
+  function addClass(el, className) {
+      if (el.classList && !/\s/.test(className)) {
+          el.classList.add(className);
+      }
+      else {
+          el.className += " " + className;
+      }
+  }
+  // http://youmightnotneedjquery.com/#remove_class
+  function removeClass(el, className) {
+      if (el.classList && !/\s/.test(className)) {
+          el.classList.remove(className);
+      }
+      else {
+          el.className = el.className.replace(new RegExp("(^|\\b)" + className.split(" ").join("|") + "(\\b|$)", "gi"), " ");
+      }
+  }
+  // https://plainjs.com/javascript/attributes/adding-removing-and-testing-for-classes-9/
+  function hasClass(el, className) {
+      return el.classList ? el.classList.contains(className) : new RegExp("\\b" + className + "\\b").test(el.className);
+  }
+  // https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY#Notes
+  function getPageOffset(doc) {
+      var supportPageOffset = window.pageXOffset !== undefined;
+      var isCSS1Compat = (doc.compatMode || "") === "CSS1Compat";
+      var x = supportPageOffset
+          ? window.pageXOffset
+          : isCSS1Compat
+              ? doc.documentElement.scrollLeft
+              : doc.body.scrollLeft;
+      var y = supportPageOffset
+          ? window.pageYOffset
+          : isCSS1Compat
+              ? doc.documentElement.scrollTop
+              : doc.body.scrollTop;
+      return {
+          x: x,
+          y: y,
+      };
+  }
+  // we provide a function to compute constants instead
+  // of accessing window.* as soon as the module needs it
+  // so that we do not compute anything if not needed
+  function getActions() {
+      // Determine the events to bind. IE11 implements pointerEvents without
+      // a prefix, which breaks compatibility with the IE10 implementation.
+      return window.navigator.pointerEnabled
+          ? {
+              start: "pointerdown",
+              move: "pointermove",
+              end: "pointerup",
+          }
+          : window.navigator.msPointerEnabled
+              ? {
+                  start: "MSPointerDown",
+                  move: "MSPointerMove",
+                  end: "MSPointerUp",
+              }
+              : {
+                  start: "mousedown touchstart",
+                  move: "mousemove touchmove",
+                  end: "mouseup touchend",
+              };
+  }
+  // https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
+  // Issue #785
+  function getSupportsPassive() {
+      var supportsPassive = false;
+      /* eslint-disable */
+      try {
+          var opts = Object.defineProperty({}, "passive", {
+              get: function () {
+                  supportsPassive = true;
+              },
+          });
+          // @ts-ignore
+          window.addEventListener("test", null, opts);
+      }
+      catch (e) { }
+      /* eslint-enable */
+      return supportsPassive;
+  }
+  function getSupportsTouchActionNone() {
+      return window.CSS && CSS.supports && CSS.supports("touch-action", "none");
+  }
+  //endregion
+  //region Range Calculation
+  // Determine the size of a sub-range in relation to a full range.
+  function subRangeRatio(pa, pb) {
+      return 100 / (pb - pa);
+  }
+  // (percentage) How many percent is this value of this range?
+  function fromPercentage(range, value, startRange) {
+      return (value * 100) / (range[startRange + 1] - range[startRange]);
+  }
+  // (percentage) Where is this value on this range?
+  function toPercentage(range, value) {
+      return fromPercentage(range, range[0] < 0 ? value + Math.abs(range[0]) : value - range[0], 0);
+  }
+  // (value) How much is this percentage on this range?
+  function isPercentage(range, value) {
+      return (value * (range[1] - range[0])) / 100 + range[0];
+  }
+  function getJ(value, arr) {
+      var j = 1;
+      while (value >= arr[j]) {
+          j += 1;
+      }
+      return j;
+  }
+  // (percentage) Input a value, find where, on a scale of 0-100, it applies.
+  function toStepping(xVal, xPct, value) {
+      if (value >= xVal.slice(-1)[0]) {
+          return 100;
+      }
+      var j = getJ(value, xVal);
+      var va = xVal[j - 1];
+      var vb = xVal[j];
+      var pa = xPct[j - 1];
+      var pb = xPct[j];
+      return pa + toPercentage([va, vb], value) / subRangeRatio(pa, pb);
+  }
+  // (value) Input a percentage, find where it is on the specified range.
+  function fromStepping(xVal, xPct, value) {
+      // There is no range group that fits 100
+      if (value >= 100) {
+          return xVal.slice(-1)[0];
+      }
+      var j = getJ(value, xPct);
+      var va = xVal[j - 1];
+      var vb = xVal[j];
+      var pa = xPct[j - 1];
+      var pb = xPct[j];
+      return isPercentage([va, vb], (value - pa) * subRangeRatio(pa, pb));
+  }
+  // (percentage) Get the step that applies at a certain value.
+  function getStep(xPct, xSteps, snap, value) {
+      if (value === 100) {
+          return value;
+      }
+      var j = getJ(value, xPct);
+      var a = xPct[j - 1];
+      var b = xPct[j];
+      // If 'snap' is set, steps are used as fixed points on the slider.
+      if (snap) {
+          // Find the closest position, a or b.
+          if (value - a > (b - a) / 2) {
+              return b;
+          }
+          return a;
+      }
+      if (!xSteps[j - 1]) {
+          return value;
+      }
+      return xPct[j - 1] + closest(value - xPct[j - 1], xSteps[j - 1]);
+  }
+  //endregion
+  //region Spectrum
+  var Spectrum = /** @class */ (function () {
+      function Spectrum(entry, snap, singleStep) {
+          this.xPct = [];
+          this.xVal = [];
+          this.xSteps = [];
+          this.xNumSteps = [];
+          this.xHighestCompleteStep = [];
+          this.xSteps = [singleStep || false];
+          this.xNumSteps = [false];
+          this.snap = snap;
+          var index;
+          var ordered = [];
+          // Map the object keys to an array.
+          Object.keys(entry).forEach(function (index) {
+              ordered.push([asArray(entry[index]), index]);
+          });
+          // Sort all entries by value (numeric sort).
+          ordered.sort(function (a, b) {
+              return a[0][0] - b[0][0];
+          });
+          // Convert all entries to subranges.
+          for (index = 0; index < ordered.length; index++) {
+              this.handleEntryPoint(ordered[index][1], ordered[index][0]);
+          }
+          // Store the actual step values.
+          // xSteps is sorted in the same order as xPct and xVal.
+          this.xNumSteps = this.xSteps.slice(0);
+          // Convert all numeric steps to the percentage of the subrange they represent.
+          for (index = 0; index < this.xNumSteps.length; index++) {
+              this.handleStepPoint(index, this.xNumSteps[index]);
+          }
+      }
+      Spectrum.prototype.getDistance = function (value) {
+          var distances = [];
+          for (var index = 0; index < this.xNumSteps.length - 1; index++) {
+              distances[index] = fromPercentage(this.xVal, value, index);
+          }
+          return distances;
+      };
+      // Calculate the percentual distance over the whole scale of ranges.
+      // direction: 0 = backwards / 1 = forwards
+      Spectrum.prototype.getAbsoluteDistance = function (value, distances, direction) {
+          var xPct_index = 0;
+          // Calculate range where to start calculation
+          if (value < this.xPct[this.xPct.length - 1]) {
+              while (value > this.xPct[xPct_index + 1]) {
+                  xPct_index++;
+              }
+          }
+          else if (value === this.xPct[this.xPct.length - 1]) {
+              xPct_index = this.xPct.length - 2;
+          }
+          // If looking backwards and the value is exactly at a range separator then look one range further
+          if (!direction && value === this.xPct[xPct_index + 1]) {
+              xPct_index++;
+          }
+          if (distances === null) {
+              distances = [];
+          }
+          var start_factor;
+          var rest_factor = 1;
+          var rest_rel_distance = distances[xPct_index];
+          var range_pct = 0;
+          var rel_range_distance = 0;
+          var abs_distance_counter = 0;
+          var range_counter = 0;
+          // Calculate what part of the start range the value is
+          if (direction) {
+              start_factor = (value - this.xPct[xPct_index]) / (this.xPct[xPct_index + 1] - this.xPct[xPct_index]);
+          }
+          else {
+              start_factor = (this.xPct[xPct_index + 1] - value) / (this.xPct[xPct_index + 1] - this.xPct[xPct_index]);
+          }
+          // Do until the complete distance across ranges is calculated
+          while (rest_rel_distance > 0) {
+              // Calculate the percentage of total range
+              range_pct = this.xPct[xPct_index + 1 + range_counter] - this.xPct[xPct_index + range_counter];
+              // Detect if the margin, padding or limit is larger then the current range and calculate
+              if (distances[xPct_index + range_counter] * rest_factor + 100 - start_factor * 100 > 100) {
+                  // If larger then take the percentual distance of the whole range
+                  rel_range_distance = range_pct * start_factor;
+                  // Rest factor of relative percentual distance still to be calculated
+                  rest_factor = (rest_rel_distance - 100 * start_factor) / distances[xPct_index + range_counter];
+                  // Set start factor to 1 as for next range it does not apply.
+                  start_factor = 1;
+              }
+              else {
+                  // If smaller or equal then take the percentual distance of the calculate percentual part of that range
+                  rel_range_distance = ((distances[xPct_index + range_counter] * range_pct) / 100) * rest_factor;
+                  // No rest left as the rest fits in current range
+                  rest_factor = 0;
+              }
+              if (direction) {
+                  abs_distance_counter = abs_distance_counter - rel_range_distance;
+                  // Limit range to first range when distance becomes outside of minimum range
+                  if (this.xPct.length + range_counter >= 1) {
+                      range_counter--;
+                  }
+              }
+              else {
+                  abs_distance_counter = abs_distance_counter + rel_range_distance;
+                  // Limit range to last range when distance becomes outside of maximum range
+                  if (this.xPct.length - range_counter >= 1) {
+                      range_counter++;
+                  }
+              }
+              // Rest of relative percentual distance still to be calculated
+              rest_rel_distance = distances[xPct_index + range_counter] * rest_factor;
+          }
+          return value + abs_distance_counter;
+      };
+      Spectrum.prototype.toStepping = function (value) {
+          value = toStepping(this.xVal, this.xPct, value);
+          return value;
+      };
+      Spectrum.prototype.fromStepping = function (value) {
+          return fromStepping(this.xVal, this.xPct, value);
+      };
+      Spectrum.prototype.getStep = function (value) {
+          value = getStep(this.xPct, this.xSteps, this.snap, value);
+          return value;
+      };
+      Spectrum.prototype.getDefaultStep = function (value, isDown, size) {
+          var j = getJ(value, this.xPct);
+          // When at the top or stepping down, look at the previous sub-range
+          if (value === 100 || (isDown && value === this.xPct[j - 1])) {
+              j = Math.max(j - 1, 1);
+          }
+          return (this.xVal[j] - this.xVal[j - 1]) / size;
+      };
+      Spectrum.prototype.getNearbySteps = function (value) {
+          var j = getJ(value, this.xPct);
+          return {
+              stepBefore: {
+                  startValue: this.xVal[j - 2],
+                  step: this.xNumSteps[j - 2],
+                  highestStep: this.xHighestCompleteStep[j - 2],
+              },
+              thisStep: {
+                  startValue: this.xVal[j - 1],
+                  step: this.xNumSteps[j - 1],
+                  highestStep: this.xHighestCompleteStep[j - 1],
+              },
+              stepAfter: {
+                  startValue: this.xVal[j],
+                  step: this.xNumSteps[j],
+                  highestStep: this.xHighestCompleteStep[j],
+              },
+          };
+      };
+      Spectrum.prototype.countStepDecimals = function () {
+          var stepDecimals = this.xNumSteps.map(countDecimals);
+          return Math.max.apply(null, stepDecimals);
+      };
+      Spectrum.prototype.hasNoSize = function () {
+          return this.xVal[0] === this.xVal[this.xVal.length - 1];
+      };
+      // Outside testing
+      Spectrum.prototype.convert = function (value) {
+          return this.getStep(this.toStepping(value));
+      };
+      Spectrum.prototype.handleEntryPoint = function (index, value) {
+          var percentage;
+          // Covert min/max syntax to 0 and 100.
+          if (index === "min") {
+              percentage = 0;
+          }
+          else if (index === "max") {
+              percentage = 100;
+          }
+          else {
+              percentage = parseFloat(index);
+          }
+          // Check for correct input.
+          if (!isNumeric(percentage) || !isNumeric(value[0])) {
+              throw new Error("noUiSlider: 'range' value isn't numeric.");
+          }
+          // Store values.
+          this.xPct.push(percentage);
+          this.xVal.push(value[0]);
+          var value1 = Number(value[1]);
+          // NaN will evaluate to false too, but to keep
+          // logging clear, set step explicitly. Make sure
+          // not to override the 'step' setting with false.
+          if (!percentage) {
+              if (!isNaN(value1)) {
+                  this.xSteps[0] = value1;
+              }
+          }
+          else {
+              this.xSteps.push(isNaN(value1) ? false : value1);
+          }
+          this.xHighestCompleteStep.push(0);
+      };
+      Spectrum.prototype.handleStepPoint = function (i, n) {
+          // Ignore 'false' stepping.
+          if (!n) {
+              return;
+          }
+          // Step over zero-length ranges (#948);
+          if (this.xVal[i] === this.xVal[i + 1]) {
+              this.xSteps[i] = this.xHighestCompleteStep[i] = this.xVal[i];
+              return;
+          }
+          // Factor to range ratio
+          this.xSteps[i] =
+              fromPercentage([this.xVal[i], this.xVal[i + 1]], n, 0) / subRangeRatio(this.xPct[i], this.xPct[i + 1]);
+          var totalSteps = (this.xVal[i + 1] - this.xVal[i]) / this.xNumSteps[i];
+          var highestStep = Math.ceil(Number(totalSteps.toFixed(3)) - 1);
+          var step = this.xVal[i] + this.xNumSteps[i] * highestStep;
+          this.xHighestCompleteStep[i] = step;
+      };
+      return Spectrum;
+  }());
+  //endregion
+  //region Options
+  /*	Every input option is tested and parsed. This will prevent
+      endless validation in internal methods. These tests are
+      structured with an item for every option available. An
+      option can be marked as required by setting the 'r' flag.
+      The testing function is provided with three arguments:
+          - The provided value for the option;
+          - A reference to the options object;
+          - The name for the option;
+
+      The testing function returns false when an error is detected,
+      or true when everything is OK. It can also modify the option
+      object, to make sure all values can be correctly looped elsewhere. */
+  //region Defaults
+  var defaultFormatter = {
+      to: function (value) {
+          return value === undefined ? "" : value.toFixed(2);
+      },
+      from: Number,
+  };
+  var cssClasses = {
+      target: "target",
+      base: "base",
+      origin: "origin",
+      handle: "handle",
+      handleLower: "handle-lower",
+      handleUpper: "handle-upper",
+      touchArea: "touch-area",
+      horizontal: "horizontal",
+      vertical: "vertical",
+      background: "background",
+      connect: "connect",
+      connects: "connects",
+      ltr: "ltr",
+      rtl: "rtl",
+      textDirectionLtr: "txt-dir-ltr",
+      textDirectionRtl: "txt-dir-rtl",
+      draggable: "draggable",
+      drag: "state-drag",
+      tap: "state-tap",
+      active: "active",
+      tooltip: "tooltip",
+      pips: "pips",
+      pipsHorizontal: "pips-horizontal",
+      pipsVertical: "pips-vertical",
+      marker: "marker",
+      markerHorizontal: "marker-horizontal",
+      markerVertical: "marker-vertical",
+      markerNormal: "marker-normal",
+      markerLarge: "marker-large",
+      markerSub: "marker-sub",
+      value: "value",
+      valueHorizontal: "value-horizontal",
+      valueVertical: "value-vertical",
+      valueNormal: "value-normal",
+      valueLarge: "value-large",
+      valueSub: "value-sub",
+  };
+  // Namespaces of internal event listeners
+  var INTERNAL_EVENT_NS = {
+      tooltips: ".__tooltips",
+      aria: ".__aria",
+  };
+  //endregion
+  function testStep(parsed, entry) {
+      if (!isNumeric(entry)) {
+          throw new Error("noUiSlider: 'step' is not numeric.");
+      }
+      // The step option can still be used to set stepping
+      // for linear sliders. Overwritten if set in 'range'.
+      parsed.singleStep = entry;
+  }
+  function testKeyboardPageMultiplier(parsed, entry) {
+      if (!isNumeric(entry)) {
+          throw new Error("noUiSlider: 'keyboardPageMultiplier' is not numeric.");
+      }
+      parsed.keyboardPageMultiplier = entry;
+  }
+  function testKeyboardMultiplier(parsed, entry) {
+      if (!isNumeric(entry)) {
+          throw new Error("noUiSlider: 'keyboardMultiplier' is not numeric.");
+      }
+      parsed.keyboardMultiplier = entry;
+  }
+  function testKeyboardDefaultStep(parsed, entry) {
+      if (!isNumeric(entry)) {
+          throw new Error("noUiSlider: 'keyboardDefaultStep' is not numeric.");
+      }
+      parsed.keyboardDefaultStep = entry;
+  }
+  function testRange(parsed, entry) {
+      // Filter incorrect input.
+      if (typeof entry !== "object" || Array.isArray(entry)) {
+          throw new Error("noUiSlider: 'range' is not an object.");
+      }
+      // Catch missing start or end.
+      if (entry.min === undefined || entry.max === undefined) {
+          throw new Error("noUiSlider: Missing 'min' or 'max' in 'range'.");
+      }
+      parsed.spectrum = new Spectrum(entry, parsed.snap || false, parsed.singleStep);
+  }
+  function testStart(parsed, entry) {
+      entry = asArray(entry);
+      // Validate input. Values aren't tested, as the public .val method
+      // will always provide a valid location.
+      if (!Array.isArray(entry) || !entry.length) {
+          throw new Error("noUiSlider: 'start' option is incorrect.");
+      }
+      // Store the number of handles.
+      parsed.handles = entry.length;
+      // When the slider is initialized, the .val method will
+      // be called with the start options.
+      parsed.start = entry;
+  }
+  function testSnap(parsed, entry) {
+      if (typeof entry !== "boolean") {
+          throw new Error("noUiSlider: 'snap' option must be a boolean.");
+      }
+      // Enforce 100% stepping within subranges.
+      parsed.snap = entry;
+  }
+  function testAnimate(parsed, entry) {
+      if (typeof entry !== "boolean") {
+          throw new Error("noUiSlider: 'animate' option must be a boolean.");
+      }
+      // Enforce 100% stepping within subranges.
+      parsed.animate = entry;
+  }
+  function testAnimationDuration(parsed, entry) {
+      if (typeof entry !== "number") {
+          throw new Error("noUiSlider: 'animationDuration' option must be a number.");
+      }
+      parsed.animationDuration = entry;
+  }
+  function testConnect(parsed, entry) {
+      var connect = [false];
+      var i;
+      // Map legacy options
+      if (entry === "lower") {
+          entry = [true, false];
+      }
+      else if (entry === "upper") {
+          entry = [false, true];
+      }
+      // Handle boolean options
+      if (entry === true || entry === false) {
+          for (i = 1; i < parsed.handles; i++) {
+              connect.push(entry);
+          }
+          connect.push(false);
+      }
+      // Reject invalid input
+      else if (!Array.isArray(entry) || !entry.length || entry.length !== parsed.handles + 1) {
+          throw new Error("noUiSlider: 'connect' option doesn't match handle count.");
+      }
+      else {
+          connect = entry;
+      }
+      parsed.connect = connect;
+  }
+  function testOrientation(parsed, entry) {
+      // Set orientation to an a numerical value for easy
+      // array selection.
+      switch (entry) {
+          case "horizontal":
+              parsed.ort = 0;
+              break;
+          case "vertical":
+              parsed.ort = 1;
+              break;
+          default:
+              throw new Error("noUiSlider: 'orientation' option is invalid.");
+      }
+  }
+  function testMargin(parsed, entry) {
+      if (!isNumeric(entry)) {
+          throw new Error("noUiSlider: 'margin' option must be numeric.");
+      }
+      // Issue #582
+      if (entry === 0) {
+          return;
+      }
+      parsed.margin = parsed.spectrum.getDistance(entry);
+  }
+  function testLimit(parsed, entry) {
+      if (!isNumeric(entry)) {
+          throw new Error("noUiSlider: 'limit' option must be numeric.");
+      }
+      parsed.limit = parsed.spectrum.getDistance(entry);
+      if (!parsed.limit || parsed.handles < 2) {
+          throw new Error("noUiSlider: 'limit' option is only supported on linear sliders with 2 or more handles.");
+      }
+  }
+  function testPadding(parsed, entry) {
+      var index;
+      if (!isNumeric(entry) && !Array.isArray(entry)) {
+          throw new Error("noUiSlider: 'padding' option must be numeric or array of exactly 2 numbers.");
+      }
+      if (Array.isArray(entry) && !(entry.length === 2 || isNumeric(entry[0]) || isNumeric(entry[1]))) {
+          throw new Error("noUiSlider: 'padding' option must be numeric or array of exactly 2 numbers.");
+      }
+      if (entry === 0) {
+          return;
+      }
+      if (!Array.isArray(entry)) {
+          entry = [entry, entry];
+      }
+      // 'getDistance' returns false for invalid values.
+      parsed.padding = [parsed.spectrum.getDistance(entry[0]), parsed.spectrum.getDistance(entry[1])];
+      for (index = 0; index < parsed.spectrum.xNumSteps.length - 1; index++) {
+          // last "range" can't contain step size as it is purely an endpoint.
+          if (parsed.padding[0][index] < 0 || parsed.padding[1][index] < 0) {
+              throw new Error("noUiSlider: 'padding' option must be a positive number(s).");
+          }
+      }
+      var totalPadding = entry[0] + entry[1];
+      var firstValue = parsed.spectrum.xVal[0];
+      var lastValue = parsed.spectrum.xVal[parsed.spectrum.xVal.length - 1];
+      if (totalPadding / (lastValue - firstValue) > 1) {
+          throw new Error("noUiSlider: 'padding' option must not exceed 100% of the range.");
+      }
+  }
+  function testDirection(parsed, entry) {
+      // Set direction as a numerical value for easy parsing.
+      // Invert connection for RTL sliders, so that the proper
+      // handles get the connect/background classes.
+      switch (entry) {
+          case "ltr":
+              parsed.dir = 0;
+              break;
+          case "rtl":
+              parsed.dir = 1;
+              break;
+          default:
+              throw new Error("noUiSlider: 'direction' option was not recognized.");
+      }
+  }
+  function testBehaviour(parsed, entry) {
+      // Make sure the input is a string.
+      if (typeof entry !== "string") {
+          throw new Error("noUiSlider: 'behaviour' must be a string containing options.");
+      }
+      // Check if the string contains any keywords.
+      // None are required.
+      var tap = entry.indexOf("tap") >= 0;
+      var drag = entry.indexOf("drag") >= 0;
+      var fixed = entry.indexOf("fixed") >= 0;
+      var snap = entry.indexOf("snap") >= 0;
+      var hover = entry.indexOf("hover") >= 0;
+      var unconstrained = entry.indexOf("unconstrained") >= 0;
+      var dragAll = entry.indexOf("drag-all") >= 0;
+      var smoothSteps = entry.indexOf("smooth-steps") >= 0;
+      if (fixed) {
+          if (parsed.handles !== 2) {
+              throw new Error("noUiSlider: 'fixed' behaviour must be used with 2 handles");
+          }
+          // Use margin to enforce fixed state
+          testMargin(parsed, parsed.start[1] - parsed.start[0]);
+      }
+      if (unconstrained && (parsed.margin || parsed.limit)) {
+          throw new Error("noUiSlider: 'unconstrained' behaviour cannot be used with margin or limit");
+      }
+      parsed.events = {
+          tap: tap || snap,
+          drag: drag,
+          dragAll: dragAll,
+          smoothSteps: smoothSteps,
+          fixed: fixed,
+          snap: snap,
+          hover: hover,
+          unconstrained: unconstrained,
+      };
+  }
+  function testTooltips(parsed, entry) {
+      if (entry === false) {
+          return;
+      }
+      if (entry === true || isValidPartialFormatter(entry)) {
+          parsed.tooltips = [];
+          for (var i = 0; i < parsed.handles; i++) {
+              parsed.tooltips.push(entry);
+          }
+      }
+      else {
+          entry = asArray(entry);
+          if (entry.length !== parsed.handles) {
+              throw new Error("noUiSlider: must pass a formatter for all handles.");
+          }
+          entry.forEach(function (formatter) {
+              if (typeof formatter !== "boolean" && !isValidPartialFormatter(formatter)) {
+                  throw new Error("noUiSlider: 'tooltips' must be passed a formatter or 'false'.");
+              }
+          });
+          parsed.tooltips = entry;
+      }
+  }
+  function testHandleAttributes(parsed, entry) {
+      if (entry.length !== parsed.handles) {
+          throw new Error("noUiSlider: must pass a attributes for all handles.");
+      }
+      parsed.handleAttributes = entry;
+  }
+  function testAriaFormat(parsed, entry) {
+      if (!isValidPartialFormatter(entry)) {
+          throw new Error("noUiSlider: 'ariaFormat' requires 'to' method.");
+      }
+      parsed.ariaFormat = entry;
+  }
+  function testFormat(parsed, entry) {
+      if (!isValidFormatter(entry)) {
+          throw new Error("noUiSlider: 'format' requires 'to' and 'from' methods.");
+      }
+      parsed.format = entry;
+  }
+  function testKeyboardSupport(parsed, entry) {
+      if (typeof entry !== "boolean") {
+          throw new Error("noUiSlider: 'keyboardSupport' option must be a boolean.");
+      }
+      parsed.keyboardSupport = entry;
+  }
+  function testDocumentElement(parsed, entry) {
+      // This is an advanced option. Passed values are used without validation.
+      parsed.documentElement = entry;
+  }
+  function testCssPrefix(parsed, entry) {
+      if (typeof entry !== "string" && entry !== false) {
+          throw new Error("noUiSlider: 'cssPrefix' must be a string or `false`.");
+      }
+      parsed.cssPrefix = entry;
+  }
+  function testCssClasses(parsed, entry) {
+      if (typeof entry !== "object") {
+          throw new Error("noUiSlider: 'cssClasses' must be an object.");
+      }
+      if (typeof parsed.cssPrefix === "string") {
+          parsed.cssClasses = {};
+          Object.keys(entry).forEach(function (key) {
+              parsed.cssClasses[key] = parsed.cssPrefix + entry[key];
+          });
+      }
+      else {
+          parsed.cssClasses = entry;
+      }
+  }
+  // Test all developer settings and parse to assumption-safe values.
+  function testOptions(options) {
+      // To prove a fix for #537, freeze options here.
+      // If the object is modified, an error will be thrown.
+      // Object.freeze(options);
+      var parsed = {
+          margin: null,
+          limit: null,
+          padding: null,
+          animate: true,
+          animationDuration: 300,
+          ariaFormat: defaultFormatter,
+          format: defaultFormatter,
+      };
+      // Tests are executed in the order they are presented here.
+      var tests = {
+          step: { r: false, t: testStep },
+          keyboardPageMultiplier: { r: false, t: testKeyboardPageMultiplier },
+          keyboardMultiplier: { r: false, t: testKeyboardMultiplier },
+          keyboardDefaultStep: { r: false, t: testKeyboardDefaultStep },
+          start: { r: true, t: testStart },
+          connect: { r: true, t: testConnect },
+          direction: { r: true, t: testDirection },
+          snap: { r: false, t: testSnap },
+          animate: { r: false, t: testAnimate },
+          animationDuration: { r: false, t: testAnimationDuration },
+          range: { r: true, t: testRange },
+          orientation: { r: false, t: testOrientation },
+          margin: { r: false, t: testMargin },
+          limit: { r: false, t: testLimit },
+          padding: { r: false, t: testPadding },
+          behaviour: { r: true, t: testBehaviour },
+          ariaFormat: { r: false, t: testAriaFormat },
+          format: { r: false, t: testFormat },
+          tooltips: { r: false, t: testTooltips },
+          keyboardSupport: { r: true, t: testKeyboardSupport },
+          documentElement: { r: false, t: testDocumentElement },
+          cssPrefix: { r: true, t: testCssPrefix },
+          cssClasses: { r: true, t: testCssClasses },
+          handleAttributes: { r: false, t: testHandleAttributes },
+      };
+      var defaults = {
+          connect: false,
+          direction: "ltr",
+          behaviour: "tap",
+          orientation: "horizontal",
+          keyboardSupport: true,
+          cssPrefix: "noUi-",
+          cssClasses: cssClasses,
+          keyboardPageMultiplier: 5,
+          keyboardMultiplier: 1,
+          keyboardDefaultStep: 10,
+      };
+      // AriaFormat defaults to regular format, if any.
+      if (options.format && !options.ariaFormat) {
+          options.ariaFormat = options.format;
+      }
+      // Run all options through a testing mechanism to ensure correct
+      // input. It should be noted that options might get modified to
+      // be handled properly. E.g. wrapping integers in arrays.
+      Object.keys(tests).forEach(function (name) {
+          // If the option isn't set, but it is required, throw an error.
+          if (!isSet(options[name]) && defaults[name] === undefined) {
+              if (tests[name].r) {
+                  throw new Error("noUiSlider: '" + name + "' is required.");
+              }
+              return;
+          }
+          tests[name].t(parsed, !isSet(options[name]) ? defaults[name] : options[name]);
+      });
+      // Forward pips options
+      parsed.pips = options.pips;
+      // All recent browsers accept unprefixed transform.
+      // We need -ms- for IE9 and -webkit- for older Android;
+      // Assume use of -webkit- if unprefixed and -ms- are not supported.
+      // https://caniuse.com/#feat=transforms2d
+      var d = document.createElement("div");
+      var msPrefix = d.style.msTransform !== undefined;
+      var noPrefix = d.style.transform !== undefined;
+      parsed.transformRule = noPrefix ? "transform" : msPrefix ? "msTransform" : "webkitTransform";
+      // Pips don't move, so we can place them using left/top.
+      var styles = [
+          ["left", "top"],
+          ["right", "bottom"],
+      ];
+      parsed.style = styles[parsed.dir][parsed.ort];
+      return parsed;
+  }
+  //endregion
+  function scope(target, options, originalOptions) {
+      var actions = getActions();
+      var supportsTouchActionNone = getSupportsTouchActionNone();
+      var supportsPassive = supportsTouchActionNone && getSupportsPassive();
+      // All variables local to 'scope' are prefixed with 'scope_'
+      // Slider DOM Nodes
+      var scope_Target = target;
+      var scope_Base;
+      var scope_Handles;
+      var scope_Connects;
+      var scope_Pips;
+      var scope_Tooltips;
+      // Slider state values
+      var scope_Spectrum = options.spectrum;
+      var scope_Values = [];
+      var scope_Locations = [];
+      var scope_HandleNumbers = [];
+      var scope_ActiveHandlesCount = 0;
+      var scope_Events = {};
+      // Document Nodes
+      var scope_Document = target.ownerDocument;
+      var scope_DocumentElement = options.documentElement || scope_Document.documentElement;
+      var scope_Body = scope_Document.body;
+      // For horizontal sliders in standard ltr documents,
+      // make .noUi-origin overflow to the left so the document doesn't scroll.
+      var scope_DirOffset = scope_Document.dir === "rtl" || options.ort === 1 ? 0 : 100;
+      // Creates a node, adds it to target, returns the new node.
+      function addNodeTo(addTarget, className) {
+          var div = scope_Document.createElement("div");
+          if (className) {
+              addClass(div, className);
+          }
+          addTarget.appendChild(div);
+          return div;
+      }
+      // Append a origin to the base
+      function addOrigin(base, handleNumber) {
+          var origin = addNodeTo(base, options.cssClasses.origin);
+          var handle = addNodeTo(origin, options.cssClasses.handle);
+          addNodeTo(handle, options.cssClasses.touchArea);
+          handle.setAttribute("data-handle", String(handleNumber));
+          if (options.keyboardSupport) {
+              // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
+              // 0 = focusable and reachable
+              handle.setAttribute("tabindex", "0");
+              handle.addEventListener("keydown", function (event) {
+                  return eventKeydown(event, handleNumber);
+              });
+          }
+          if (options.handleAttributes !== undefined) {
+              var attributes_1 = options.handleAttributes[handleNumber];
+              Object.keys(attributes_1).forEach(function (attribute) {
+                  handle.setAttribute(attribute, attributes_1[attribute]);
+              });
+          }
+          handle.setAttribute("role", "slider");
+          handle.setAttribute("aria-orientation", options.ort ? "vertical" : "horizontal");
+          if (handleNumber === 0) {
+              addClass(handle, options.cssClasses.handleLower);
+          }
+          else if (handleNumber === options.handles - 1) {
+              addClass(handle, options.cssClasses.handleUpper);
+          }
+          return origin;
+      }
+      // Insert nodes for connect elements
+      function addConnect(base, add) {
+          if (!add) {
+              return false;
+          }
+          return addNodeTo(base, options.cssClasses.connect);
+      }
+      // Add handles to the slider base.
+      function addElements(connectOptions, base) {
+          var connectBase = addNodeTo(base, options.cssClasses.connects);
+          scope_Handles = [];
+          scope_Connects = [];
+          scope_Connects.push(addConnect(connectBase, connectOptions[0]));
+          // [::::O====O====O====]
+          // connectOptions = [0, 1, 1, 1]
+          for (var i = 0; i < options.handles; i++) {
+              // Keep a list of all added handles.
+              scope_Handles.push(addOrigin(base, i));
+              scope_HandleNumbers[i] = i;
+              scope_Connects.push(addConnect(connectBase, connectOptions[i + 1]));
+          }
+      }
+      // Initialize a single slider.
+      function addSlider(addTarget) {
+          // Apply classes and data to the target.
+          addClass(addTarget, options.cssClasses.target);
+          if (options.dir === 0) {
+              addClass(addTarget, options.cssClasses.ltr);
+          }
+          else {
+              addClass(addTarget, options.cssClasses.rtl);
+          }
+          if (options.ort === 0) {
+              addClass(addTarget, options.cssClasses.horizontal);
+          }
+          else {
+              addClass(addTarget, options.cssClasses.vertical);
+          }
+          var textDirection = getComputedStyle(addTarget).direction;
+          if (textDirection === "rtl") {
+              addClass(addTarget, options.cssClasses.textDirectionRtl);
+          }
+          else {
+              addClass(addTarget, options.cssClasses.textDirectionLtr);
+          }
+          return addNodeTo(addTarget, options.cssClasses.base);
+      }
+      function addTooltip(handle, handleNumber) {
+          if (!options.tooltips || !options.tooltips[handleNumber]) {
+              return false;
+          }
+          return addNodeTo(handle.firstChild, options.cssClasses.tooltip);
+      }
+      function isSliderDisabled() {
+          return scope_Target.hasAttribute("disabled");
+      }
+      // Disable the slider dragging if any handle is disabled
+      function isHandleDisabled(handleNumber) {
+          var handleOrigin = scope_Handles[handleNumber];
+          return handleOrigin.hasAttribute("disabled");
+      }
+      function removeTooltips() {
+          if (scope_Tooltips) {
+              removeEvent("update" + INTERNAL_EVENT_NS.tooltips);
+              scope_Tooltips.forEach(function (tooltip) {
+                  if (tooltip) {
+                      removeElement(tooltip);
+                  }
+              });
+              scope_Tooltips = null;
+          }
+      }
+      // The tooltips option is a shorthand for using the 'update' event.
+      function tooltips() {
+          removeTooltips();
+          // Tooltips are added with options.tooltips in original order.
+          scope_Tooltips = scope_Handles.map(addTooltip);
+          bindEvent("update" + INTERNAL_EVENT_NS.tooltips, function (values, handleNumber, unencoded) {
+              if (!scope_Tooltips || !options.tooltips) {
+                  return;
+              }
+              if (scope_Tooltips[handleNumber] === false) {
+                  return;
+              }
+              var formattedValue = values[handleNumber];
+              if (options.tooltips[handleNumber] !== true) {
+                  formattedValue = options.tooltips[handleNumber].to(unencoded[handleNumber]);
+              }
+              scope_Tooltips[handleNumber].innerHTML = formattedValue;
+          });
+      }
+      function aria() {
+          removeEvent("update" + INTERNAL_EVENT_NS.aria);
+          bindEvent("update" + INTERNAL_EVENT_NS.aria, function (values, handleNumber, unencoded, tap, positions) {
+              // Update Aria Values for all handles, as a change in one changes min and max values for the next.
+              scope_HandleNumbers.forEach(function (index) {
+                  var handle = scope_Handles[index];
+                  var min = checkHandlePosition(scope_Locations, index, 0, true, true, true);
+                  var max = checkHandlePosition(scope_Locations, index, 100, true, true, true);
+                  var now = positions[index];
+                  // Formatted value for display
+                  var text = String(options.ariaFormat.to(unencoded[index]));
+                  // Map to slider range values
+                  min = scope_Spectrum.fromStepping(min).toFixed(1);
+                  max = scope_Spectrum.fromStepping(max).toFixed(1);
+                  now = scope_Spectrum.fromStepping(now).toFixed(1);
+                  handle.children[0].setAttribute("aria-valuemin", min);
+                  handle.children[0].setAttribute("aria-valuemax", max);
+                  handle.children[0].setAttribute("aria-valuenow", now);
+                  handle.children[0].setAttribute("aria-valuetext", text);
+              });
+          });
+      }
+      function getGroup(pips) {
+          // Use the range.
+          if (pips.mode === exports.PipsMode.Range || pips.mode === exports.PipsMode.Steps) {
+              return scope_Spectrum.xVal;
+          }
+          if (pips.mode === exports.PipsMode.Count) {
+              if (pips.values < 2) {
+                  throw new Error("noUiSlider: 'values' (>= 2) required for mode 'count'.");
+              }
+              // Divide 0 - 100 in 'count' parts.
+              var interval = pips.values - 1;
+              var spread = 100 / interval;
+              var values = [];
+              // List these parts and have them handled as 'positions'.
+              while (interval--) {
+                  values[interval] = interval * spread;
+              }
+              values.push(100);
+              return mapToRange(values, pips.stepped);
+          }
+          if (pips.mode === exports.PipsMode.Positions) {
+              // Map all percentages to on-range values.
+              return mapToRange(pips.values, pips.stepped);
+          }
+          if (pips.mode === exports.PipsMode.Values) {
+              // If the value must be stepped, it needs to be converted to a percentage first.
+              if (pips.stepped) {
+                  return pips.values.map(function (value) {
+                      // Convert to percentage, apply step, return to value.
+                      return scope_Spectrum.fromStepping(scope_Spectrum.getStep(scope_Spectrum.toStepping(value)));
+                  });
+              }
+              // Otherwise, we can simply use the values.
+              return pips.values;
+          }
+          return []; // pips.mode = never
+      }
+      function mapToRange(values, stepped) {
+          return values.map(function (value) {
+              return scope_Spectrum.fromStepping(stepped ? scope_Spectrum.getStep(value) : value);
+          });
+      }
+      function generateSpread(pips) {
+          function safeIncrement(value, increment) {
+              // Avoid floating point variance by dropping the smallest decimal places.
+              return Number((value + increment).toFixed(7));
+          }
+          var group = getGroup(pips);
+          var indexes = {};
+          var firstInRange = scope_Spectrum.xVal[0];
+          var lastInRange = scope_Spectrum.xVal[scope_Spectrum.xVal.length - 1];
+          var ignoreFirst = false;
+          var ignoreLast = false;
+          var prevPct = 0;
+          // Create a copy of the group, sort it and filter away all duplicates.
+          group = unique(group.slice().sort(function (a, b) {
+              return a - b;
+          }));
+          // Make sure the range starts with the first element.
+          if (group[0] !== firstInRange) {
+              group.unshift(firstInRange);
+              ignoreFirst = true;
+          }
+          // Likewise for the last one.
+          if (group[group.length - 1] !== lastInRange) {
+              group.push(lastInRange);
+              ignoreLast = true;
+          }
+          group.forEach(function (current, index) {
+              // Get the current step and the lower + upper positions.
+              var step;
+              var i;
+              var q;
+              var low = current;
+              var high = group[index + 1];
+              var newPct;
+              var pctDifference;
+              var pctPos;
+              var type;
+              var steps;
+              var realSteps;
+              var stepSize;
+              var isSteps = pips.mode === exports.PipsMode.Steps;
+              // When using 'steps' mode, use the provided steps.
+              // Otherwise, we'll step on to the next subrange.
+              if (isSteps) {
+                  step = scope_Spectrum.xNumSteps[index];
+              }
+              // Default to a 'full' step.
+              if (!step) {
+                  step = high - low;
+              }
+              // If high is undefined we are at the last subrange. Make sure it iterates once (#1088)
+              if (high === undefined) {
+                  high = low;
+              }
+              // Make sure step isn't 0, which would cause an infinite loop (#654)
+              step = Math.max(step, 0.0000001);
+              // Find all steps in the subrange.
+              for (i = low; i <= high; i = safeIncrement(i, step)) {
+                  // Get the percentage value for the current step,
+                  // calculate the size for the subrange.
+                  newPct = scope_Spectrum.toStepping(i);
+                  pctDifference = newPct - prevPct;
+                  steps = pctDifference / (pips.density || 1);
+                  realSteps = Math.round(steps);
+                  // This ratio represents the amount of percentage-space a point indicates.
+                  // For a density 1 the points/percentage = 1. For density 2, that percentage needs to be re-divided.
+                  // Round the percentage offset to an even number, then divide by two
+                  // to spread the offset on both sides of the range.
+                  stepSize = pctDifference / realSteps;
+                  // Divide all points evenly, adding the correct number to this subrange.
+                  // Run up to <= so that 100% gets a point, event if ignoreLast is set.
+                  for (q = 1; q <= realSteps; q += 1) {
+                      // The ratio between the rounded value and the actual size might be ~1% off.
+                      // Correct the percentage offset by the number of points
+                      // per subrange. density = 1 will result in 100 points on the
+                      // full range, 2 for 50, 4 for 25, etc.
+                      pctPos = prevPct + q * stepSize;
+                      indexes[pctPos.toFixed(5)] = [scope_Spectrum.fromStepping(pctPos), 0];
+                  }
+                  // Determine the point type.
+                  type = group.indexOf(i) > -1 ? exports.PipsType.LargeValue : isSteps ? exports.PipsType.SmallValue : exports.PipsType.NoValue;
+                  // Enforce the 'ignoreFirst' option by overwriting the type for 0.
+                  if (!index && ignoreFirst && i !== high) {
+                      type = 0;
+                  }
+                  if (!(i === high && ignoreLast)) {
+                      // Mark the 'type' of this point. 0 = plain, 1 = real value, 2 = step value.
+                      indexes[newPct.toFixed(5)] = [i, type];
+                  }
+                  // Update the percentage count.
+                  prevPct = newPct;
+              }
+          });
+          return indexes;
+      }
+      function addMarking(spread, filterFunc, formatter) {
+          var _a, _b;
+          var element = scope_Document.createElement("div");
+          var valueSizeClasses = (_a = {},
+              _a[exports.PipsType.None] = "",
+              _a[exports.PipsType.NoValue] = options.cssClasses.valueNormal,
+              _a[exports.PipsType.LargeValue] = options.cssClasses.valueLarge,
+              _a[exports.PipsType.SmallValue] = options.cssClasses.valueSub,
+              _a);
+          var markerSizeClasses = (_b = {},
+              _b[exports.PipsType.None] = "",
+              _b[exports.PipsType.NoValue] = options.cssClasses.markerNormal,
+              _b[exports.PipsType.LargeValue] = options.cssClasses.markerLarge,
+              _b[exports.PipsType.SmallValue] = options.cssClasses.markerSub,
+              _b);
+          var valueOrientationClasses = [options.cssClasses.valueHorizontal, options.cssClasses.valueVertical];
+          var markerOrientationClasses = [options.cssClasses.markerHorizontal, options.cssClasses.markerVertical];
+          addClass(element, options.cssClasses.pips);
+          addClass(element, options.ort === 0 ? options.cssClasses.pipsHorizontal : options.cssClasses.pipsVertical);
+          function getClasses(type, source) {
+              var a = source === options.cssClasses.value;
+              var orientationClasses = a ? valueOrientationClasses : markerOrientationClasses;
+              var sizeClasses = a ? valueSizeClasses : markerSizeClasses;
+              return source + " " + orientationClasses[options.ort] + " " + sizeClasses[type];
+          }
+          function addSpread(offset, value, type) {
+              // Apply the filter function, if it is set.
+              type = filterFunc ? filterFunc(value, type) : type;
+              if (type === exports.PipsType.None) {
+                  return;
+              }
+              // Add a marker for every point
+              var node = addNodeTo(element, false);
+              node.className = getClasses(type, options.cssClasses.marker);
+              node.style[options.style] = offset + "%";
+              // Values are only appended for points marked '1' or '2'.
+              if (type > exports.PipsType.NoValue) {
+                  node = addNodeTo(element, false);
+                  node.className = getClasses(type, options.cssClasses.value);
+                  node.setAttribute("data-value", String(value));
+                  node.style[options.style] = offset + "%";
+                  node.innerHTML = String(formatter.to(value));
+              }
+          }
+          // Append all points.
+          Object.keys(spread).forEach(function (offset) {
+              addSpread(offset, spread[offset][0], spread[offset][1]);
+          });
+          return element;
+      }
+      function removePips() {
+          if (scope_Pips) {
+              removeElement(scope_Pips);
+              scope_Pips = null;
+          }
+      }
+      function pips(pips) {
+          // Fix #669
+          removePips();
+          var spread = generateSpread(pips);
+          var filter = pips.filter;
+          var format = pips.format || {
+              to: function (value) {
+                  return String(Math.round(value));
+              },
+          };
+          scope_Pips = scope_Target.appendChild(addMarking(spread, filter, format));
+          return scope_Pips;
+      }
+      // Shorthand for base dimensions.
+      function baseSize() {
+          var rect = scope_Base.getBoundingClientRect();
+          var alt = ("offset" + ["Width", "Height"][options.ort]);
+          return options.ort === 0 ? rect.width || scope_Base[alt] : rect.height || scope_Base[alt];
+      }
+      // Handler for attaching events trough a proxy.
+      function attachEvent(events, element, callback, data) {
+          // This function can be used to 'filter' events to the slider.
+          // element is a node, not a nodeList
+          var method = function (event) {
+              var e = fixEvent(event, data.pageOffset, data.target || element);
+              // fixEvent returns false if this event has a different target
+              // when handling (multi-) touch events;
+              if (!e) {
+                  return false;
+              }
+              // doNotReject is passed by all end events to make sure released touches
+              // are not rejected, leaving the slider "stuck" to the cursor;
+              if (isSliderDisabled() && !data.doNotReject) {
+                  return false;
+              }
+              // Stop if an active 'tap' transition is taking place.
+              if (hasClass(scope_Target, options.cssClasses.tap) && !data.doNotReject) {
+                  return false;
+              }
+              // Ignore right or middle clicks on start #454
+              if (events === actions.start && e.buttons !== undefined && e.buttons > 1) {
+                  return false;
+              }
+              // Ignore right or middle clicks on start #454
+              if (data.hover && e.buttons) {
+                  return false;
+              }
+              // 'supportsPassive' is only true if a browser also supports touch-action: none in CSS.
+              // iOS safari does not, so it doesn't get to benefit from passive scrolling. iOS does support
+              // touch-action: manipulation, but that allows panning, which breaks
+              // sliders after zooming/on non-responsive pages.
+              // See: https://bugs.webkit.org/show_bug.cgi?id=133112
+              if (!supportsPassive) {
+                  e.preventDefault();
+              }
+              e.calcPoint = e.points[options.ort];
+              // Call the event handler with the event [ and additional data ].
+              callback(e, data);
+              return;
+          };
+          var methods = [];
+          // Bind a closure on the target for every event type.
+          events.split(" ").forEach(function (eventName) {
+              element.addEventListener(eventName, method, supportsPassive ? { passive: true } : false);
+              methods.push([eventName, method]);
+          });
+          return methods;
+      }
+      // Provide a clean event with standardized offset values.
+      function fixEvent(e, pageOffset, eventTarget) {
+          // Filter the event to register the type, which can be
+          // touch, mouse or pointer. Offset changes need to be
+          // made on an event specific basis.
+          var touch = e.type.indexOf("touch") === 0;
+          var mouse = e.type.indexOf("mouse") === 0;
+          var pointer = e.type.indexOf("pointer") === 0;
+          var x = 0;
+          var y = 0;
+          // IE10 implemented pointer events with a prefix;
+          if (e.type.indexOf("MSPointer") === 0) {
+              pointer = true;
+          }
+          // Erroneous events seem to be passed in occasionally on iOS/iPadOS after user finishes interacting with
+          // the slider. They appear to be of type MouseEvent, yet they don't have usual properties set. Ignore
+          // events that have no touches or buttons associated with them. (#1057, #1079, #1095)
+          if (e.type === "mousedown" && !e.buttons && !e.touches) {
+              return false;
+          }
+          // The only thing one handle should be concerned about is the touches that originated on top of it.
+          if (touch) {
+              // Returns true if a touch originated on the target.
+              var isTouchOnTarget = function (checkTouch) {
+                  var target = checkTouch.target;
+                  return (target === eventTarget ||
+                      eventTarget.contains(target) ||
+                      (e.composed && e.composedPath().shift() === eventTarget));
+              };
+              // In the case of touchstart events, we need to make sure there is still no more than one
+              // touch on the target so we look amongst all touches.
+              if (e.type === "touchstart") {
+                  var targetTouches = Array.prototype.filter.call(e.touches, isTouchOnTarget);
+                  // Do not support more than one touch per handle.
+                  if (targetTouches.length > 1) {
+                      return false;
+                  }
+                  x = targetTouches[0].pageX;
+                  y = targetTouches[0].pageY;
+              }
+              else {
+                  // In the other cases, find on changedTouches is enough.
+                  var targetTouch = Array.prototype.find.call(e.changedTouches, isTouchOnTarget);
+                  // Cancel if the target touch has not moved.
+                  if (!targetTouch) {
+                      return false;
+                  }
+                  x = targetTouch.pageX;
+                  y = targetTouch.pageY;
+              }
+          }
+          pageOffset = pageOffset || getPageOffset(scope_Document);
+          if (mouse || pointer) {
+              x = e.clientX + pageOffset.x;
+              y = e.clientY + pageOffset.y;
+          }
+          e.pageOffset = pageOffset;
+          e.points = [x, y];
+          e.cursor = mouse || pointer; // Fix #435
+          return e;
+      }
+      // Translate a coordinate in the document to a percentage on the slider
+      function calcPointToPercentage(calcPoint) {
+          var location = calcPoint - offset(scope_Base, options.ort);
+          var proposal = (location * 100) / baseSize();
+          // Clamp proposal between 0% and 100%
+          // Out-of-bound coordinates may occur when .noUi-base pseudo-elements
+          // are used (e.g. contained handles feature)
+          proposal = limit(proposal);
+          return options.dir ? 100 - proposal : proposal;
+      }
+      // Find handle closest to a certain percentage on the slider
+      function getClosestHandle(clickedPosition) {
+          var smallestDifference = 100;
+          var handleNumber = false;
+          scope_Handles.forEach(function (handle, index) {
+              // Disabled handles are ignored
+              if (isHandleDisabled(index)) {
+                  return;
+              }
+              var handlePosition = scope_Locations[index];
+              var differenceWithThisHandle = Math.abs(handlePosition - clickedPosition);
+              // Initial state
+              var clickAtEdge = differenceWithThisHandle === 100 && smallestDifference === 100;
+              // Difference with this handle is smaller than the previously checked handle
+              var isCloser = differenceWithThisHandle < smallestDifference;
+              var isCloserAfter = differenceWithThisHandle <= smallestDifference && clickedPosition > handlePosition;
+              if (isCloser || isCloserAfter || clickAtEdge) {
+                  handleNumber = index;
+                  smallestDifference = differenceWithThisHandle;
+              }
+          });
+          return handleNumber;
+      }
+      // Fire 'end' when a mouse or pen leaves the document.
+      function documentLeave(event, data) {
+          if (event.type === "mouseout" &&
+              event.target.nodeName === "HTML" &&
+              event.relatedTarget === null) {
+              eventEnd(event, data);
+          }
+      }
+      // Handle movement on document for handle and range drag.
+      function eventMove(event, data) {
+          // Fix #498
+          // Check value of .buttons in 'start' to work around a bug in IE10 mobile (data.buttonsProperty).
+          // https://connect.microsoft.com/IE/feedback/details/927005/mobile-ie10-windows-phone-buttons-property-of-pointermove-event-always-zero
+          // IE9 has .buttons and .which zero on mousemove.
+          // Firefox breaks the spec MDN defines.
+          if (navigator.appVersion.indexOf("MSIE 9") === -1 && event.buttons === 0 && data.buttonsProperty !== 0) {
+              return eventEnd(event, data);
+          }
+          // Check if we are moving up or down
+          var movement = (options.dir ? -1 : 1) * (event.calcPoint - data.startCalcPoint);
+          // Convert the movement into a percentage of the slider width/height
+          var proposal = (movement * 100) / data.baseSize;
+          moveHandles(movement > 0, proposal, data.locations, data.handleNumbers, data.connect);
+      }
+      // Unbind move events on document, call callbacks.
+      function eventEnd(event, data) {
+          // The handle is no longer active, so remove the class.
+          if (data.handle) {
+              removeClass(data.handle, options.cssClasses.active);
+              scope_ActiveHandlesCount -= 1;
+          }
+          // Unbind the move and end events, which are added on 'start'.
+          data.listeners.forEach(function (c) {
+              scope_DocumentElement.removeEventListener(c[0], c[1]);
+          });
+          if (scope_ActiveHandlesCount === 0) {
+              // Remove dragging class.
+              removeClass(scope_Target, options.cssClasses.drag);
+              setZindex();
+              // Remove cursor styles and text-selection events bound to the body.
+              if (event.cursor) {
+                  scope_Body.style.cursor = "";
+                  scope_Body.removeEventListener("selectstart", preventDefault);
+              }
+          }
+          if (options.events.smoothSteps) {
+              data.handleNumbers.forEach(function (handleNumber) {
+                  setHandle(handleNumber, scope_Locations[handleNumber], true, true, false, false);
+              });
+              data.handleNumbers.forEach(function (handleNumber) {
+                  fireEvent("update", handleNumber);
+              });
+          }
+          data.handleNumbers.forEach(function (handleNumber) {
+              fireEvent("change", handleNumber);
+              fireEvent("set", handleNumber);
+              fireEvent("end", handleNumber);
+          });
+      }
+      // Bind move events on document.
+      function eventStart(event, data) {
+          // Ignore event if any handle is disabled
+          if (data.handleNumbers.some(isHandleDisabled)) {
+              return;
+          }
+          var handle;
+          if (data.handleNumbers.length === 1) {
+              var handleOrigin = scope_Handles[data.handleNumbers[0]];
+              handle = handleOrigin.children[0];
+              scope_ActiveHandlesCount += 1;
+              // Mark the handle as 'active' so it can be styled.
+              addClass(handle, options.cssClasses.active);
+          }
+          // A drag should never propagate up to the 'tap' event.
+          event.stopPropagation();
+          // Record the event listeners.
+          var listeners = [];
+          // Attach the move and end events.
+          var moveEvent = attachEvent(actions.move, scope_DocumentElement, eventMove, {
+              // The event target has changed so we need to propagate the original one so that we keep
+              // relying on it to extract target touches.
+              target: event.target,
+              handle: handle,
+              connect: data.connect,
+              listeners: listeners,
+              startCalcPoint: event.calcPoint,
+              baseSize: baseSize(),
+              pageOffset: event.pageOffset,
+              handleNumbers: data.handleNumbers,
+              buttonsProperty: event.buttons,
+              locations: scope_Locations.slice(),
+          });
+          var endEvent = attachEvent(actions.end, scope_DocumentElement, eventEnd, {
+              target: event.target,
+              handle: handle,
+              listeners: listeners,
+              doNotReject: true,
+              handleNumbers: data.handleNumbers,
+          });
+          var outEvent = attachEvent("mouseout", scope_DocumentElement, documentLeave, {
+              target: event.target,
+              handle: handle,
+              listeners: listeners,
+              doNotReject: true,
+              handleNumbers: data.handleNumbers,
+          });
+          // We want to make sure we pushed the listeners in the listener list rather than creating
+          // a new one as it has already been passed to the event handlers.
+          listeners.push.apply(listeners, moveEvent.concat(endEvent, outEvent));
+          // Text selection isn't an issue on touch devices,
+          // so adding cursor styles can be skipped.
+          if (event.cursor) {
+              // Prevent the 'I' cursor and extend the range-drag cursor.
+              scope_Body.style.cursor = getComputedStyle(event.target).cursor;
+              // Mark the target with a dragging state.
+              if (scope_Handles.length > 1) {
+                  addClass(scope_Target, options.cssClasses.drag);
+              }
+              // Prevent text selection when dragging the handles.
+              // In noUiSlider <= 9.2.0, this was handled by calling preventDefault on mouse/touch start/move,
+              // which is scroll blocking. The selectstart event is supported by FireFox starting from version 52,
+              // meaning the only holdout is iOS Safari. This doesn't matter: text selection isn't triggered there.
+              // The 'cursor' flag is false.
+              // See: http://caniuse.com/#search=selectstart
+              scope_Body.addEventListener("selectstart", preventDefault, false);
+          }
+          data.handleNumbers.forEach(function (handleNumber) {
+              fireEvent("start", handleNumber);
+          });
+      }
+      // Move closest handle to tapped location.
+      function eventTap(event) {
+          // The tap event shouldn't propagate up
+          event.stopPropagation();
+          var proposal = calcPointToPercentage(event.calcPoint);
+          var handleNumber = getClosestHandle(proposal);
+          // Tackle the case that all handles are 'disabled'.
+          if (handleNumber === false) {
+              return;
+          }
+          // Flag the slider as it is now in a transitional state.
+          // Transition takes a configurable amount of ms (default 300). Re-enable the slider after that.
+          if (!options.events.snap) {
+              addClassFor(scope_Target, options.cssClasses.tap, options.animationDuration);
+          }
+          setHandle(handleNumber, proposal, true, true);
+          setZindex();
+          fireEvent("slide", handleNumber, true);
+          fireEvent("update", handleNumber, true);
+          if (!options.events.snap) {
+              fireEvent("change", handleNumber, true);
+              fireEvent("set", handleNumber, true);
+          }
+          else {
+              eventStart(event, { handleNumbers: [handleNumber] });
+          }
+      }
+      // Fires a 'hover' event for a hovered mouse/pen position.
+      function eventHover(event) {
+          var proposal = calcPointToPercentage(event.calcPoint);
+          var to = scope_Spectrum.getStep(proposal);
+          var value = scope_Spectrum.fromStepping(to);
+          Object.keys(scope_Events).forEach(function (targetEvent) {
+              if ("hover" === targetEvent.split(".")[0]) {
+                  scope_Events[targetEvent].forEach(function (callback) {
+                      callback.call(scope_Self, value);
+                  });
+              }
+          });
+      }
+      // Handles keydown on focused handles
+      // Don't move the document when pressing arrow keys on focused handles
+      function eventKeydown(event, handleNumber) {
+          if (isSliderDisabled() || isHandleDisabled(handleNumber)) {
+              return false;
+          }
+          var horizontalKeys = ["Left", "Right"];
+          var verticalKeys = ["Down", "Up"];
+          var largeStepKeys = ["PageDown", "PageUp"];
+          var edgeKeys = ["Home", "End"];
+          if (options.dir && !options.ort) {
+              // On an right-to-left slider, the left and right keys act inverted
+              horizontalKeys.reverse();
+          }
+          else if (options.ort && !options.dir) {
+              // On a top-to-bottom slider, the up and down keys act inverted
+              verticalKeys.reverse();
+              largeStepKeys.reverse();
+          }
+          // Strip "Arrow" for IE compatibility. https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key
+          var key = event.key.replace("Arrow", "");
+          var isLargeDown = key === largeStepKeys[0];
+          var isLargeUp = key === largeStepKeys[1];
+          var isDown = key === verticalKeys[0] || key === horizontalKeys[0] || isLargeDown;
+          var isUp = key === verticalKeys[1] || key === horizontalKeys[1] || isLargeUp;
+          var isMin = key === edgeKeys[0];
+          var isMax = key === edgeKeys[1];
+          if (!isDown && !isUp && !isMin && !isMax) {
+              return true;
+          }
+          event.preventDefault();
+          var to;
+          if (isUp || isDown) {
+              var direction = isDown ? 0 : 1;
+              var steps = getNextStepsForHandle(handleNumber);
+              var step = steps[direction];
+              // At the edge of a slider, do nothing
+              if (step === null) {
+                  return false;
+              }
+              // No step set, use the default of 10% of the sub-range
+              if (step === false) {
+                  step = scope_Spectrum.getDefaultStep(scope_Locations[handleNumber], isDown, options.keyboardDefaultStep);
+              }
+              if (isLargeUp || isLargeDown) {
+                  step *= options.keyboardPageMultiplier;
+              }
+              else {
+                  step *= options.keyboardMultiplier;
+              }
+              // Step over zero-length ranges (#948);
+              step = Math.max(step, 0.0000001);
+              // Decrement for down steps
+              step = (isDown ? -1 : 1) * step;
+              to = scope_Values[handleNumber] + step;
+          }
+          else if (isMax) {
+              // End key
+              to = options.spectrum.xVal[options.spectrum.xVal.length - 1];
+          }
+          else {
+              // Home key
+              to = options.spectrum.xVal[0];
+          }
+          setHandle(handleNumber, scope_Spectrum.toStepping(to), true, true);
+          fireEvent("slide", handleNumber);
+          fireEvent("update", handleNumber);
+          fireEvent("change", handleNumber);
+          fireEvent("set", handleNumber);
+          return false;
+      }
+      // Attach events to several slider parts.
+      function bindSliderEvents(behaviour) {
+          // Attach the standard drag event to the handles.
+          if (!behaviour.fixed) {
+              scope_Handles.forEach(function (handle, index) {
+                  // These events are only bound to the visual handle
+                  // element, not the 'real' origin element.
+                  attachEvent(actions.start, handle.children[0], eventStart, {
+                      handleNumbers: [index],
+                  });
+              });
+          }
+          // Attach the tap event to the slider base.
+          if (behaviour.tap) {
+              attachEvent(actions.start, scope_Base, eventTap, {});
+          }
+          // Fire hover events
+          if (behaviour.hover) {
+              attachEvent(actions.move, scope_Base, eventHover, {
+                  hover: true,
+              });
+          }
+          // Make the range draggable.
+          if (behaviour.drag) {
+              scope_Connects.forEach(function (connect, index) {
+                  if (connect === false || index === 0 || index === scope_Connects.length - 1) {
+                      return;
+                  }
+                  var handleBefore = scope_Handles[index - 1];
+                  var handleAfter = scope_Handles[index];
+                  var eventHolders = [connect];
+                  var handlesToDrag = [handleBefore, handleAfter];
+                  var handleNumbersToDrag = [index - 1, index];
+                  addClass(connect, options.cssClasses.draggable);
+                  // When the range is fixed, the entire range can
+                  // be dragged by the handles. The handle in the first
+                  // origin will propagate the start event upward,
+                  // but it needs to be bound manually on the other.
+                  if (behaviour.fixed) {
+                      eventHolders.push(handleBefore.children[0]);
+                      eventHolders.push(handleAfter.children[0]);
+                  }
+                  if (behaviour.dragAll) {
+                      handlesToDrag = scope_Handles;
+                      handleNumbersToDrag = scope_HandleNumbers;
+                  }
+                  eventHolders.forEach(function (eventHolder) {
+                      attachEvent(actions.start, eventHolder, eventStart, {
+                          handles: handlesToDrag,
+                          handleNumbers: handleNumbersToDrag,
+                          connect: connect,
+                      });
+                  });
+              });
+          }
+      }
+      // Attach an event to this slider, possibly including a namespace
+      function bindEvent(namespacedEvent, callback) {
+          scope_Events[namespacedEvent] = scope_Events[namespacedEvent] || [];
+          scope_Events[namespacedEvent].push(callback);
+          // If the event bound is 'update,' fire it immediately for all handles.
+          if (namespacedEvent.split(".")[0] === "update") {
+              scope_Handles.forEach(function (a, index) {
+                  fireEvent("update", index);
+              });
+          }
+      }
+      function isInternalNamespace(namespace) {
+          return namespace === INTERNAL_EVENT_NS.aria || namespace === INTERNAL_EVENT_NS.tooltips;
+      }
+      // Undo attachment of event
+      function removeEvent(namespacedEvent) {
+          var event = namespacedEvent && namespacedEvent.split(".")[0];
+          var namespace = event ? namespacedEvent.substring(event.length) : namespacedEvent;
+          Object.keys(scope_Events).forEach(function (bind) {
+              var tEvent = bind.split(".")[0];
+              var tNamespace = bind.substring(tEvent.length);
+              if ((!event || event === tEvent) && (!namespace || namespace === tNamespace)) {
+                  // only delete protected internal event if intentional
+                  if (!isInternalNamespace(tNamespace) || namespace === tNamespace) {
+                      delete scope_Events[bind];
+                  }
+              }
+          });
+      }
+      // External event handling
+      function fireEvent(eventName, handleNumber, tap) {
+          Object.keys(scope_Events).forEach(function (targetEvent) {
+              var eventType = targetEvent.split(".")[0];
+              if (eventName === eventType) {
+                  scope_Events[targetEvent].forEach(function (callback) {
+                      callback.call(
+                      // Use the slider public API as the scope ('this')
+                      scope_Self,
+                      // Return values as array, so arg_1[arg_2] is always valid.
+                      scope_Values.map(options.format.to),
+                      // Handle index, 0 or 1
+                      handleNumber,
+                      // Un-formatted slider values
+                      scope_Values.slice(),
+                      // Event is fired by tap, true or false
+                      tap || false,
+                      // Left offset of the handle, in relation to the slider
+                      scope_Locations.slice(),
+                      // add the slider public API to an accessible parameter when this is unavailable
+                      scope_Self);
+                  });
+              }
+          });
+      }
+      // Split out the handle positioning logic so the Move event can use it, too
+      function checkHandlePosition(reference, handleNumber, to, lookBackward, lookForward, getValue, smoothSteps) {
+          var distance;
+          // For sliders with multiple handles, limit movement to the other handle.
+          // Apply the margin option by adding it to the handle positions.
+          if (scope_Handles.length > 1 && !options.events.unconstrained) {
+              if (lookBackward && handleNumber > 0) {
+                  distance = scope_Spectrum.getAbsoluteDistance(reference[handleNumber - 1], options.margin, false);
+                  to = Math.max(to, distance);
+              }
+              if (lookForward && handleNumber < scope_Handles.length - 1) {
+                  distance = scope_Spectrum.getAbsoluteDistance(reference[handleNumber + 1], options.margin, true);
+                  to = Math.min(to, distance);
+              }
+          }
+          // The limit option has the opposite effect, limiting handles to a
+          // maximum distance from another. Limit must be > 0, as otherwise
+          // handles would be unmovable.
+          if (scope_Handles.length > 1 && options.limit) {
+              if (lookBackward && handleNumber > 0) {
+                  distance = scope_Spectrum.getAbsoluteDistance(reference[handleNumber - 1], options.limit, false);
+                  to = Math.min(to, distance);
+              }
+              if (lookForward && handleNumber < scope_Handles.length - 1) {
+                  distance = scope_Spectrum.getAbsoluteDistance(reference[handleNumber + 1], options.limit, true);
+                  to = Math.max(to, distance);
+              }
+          }
+          // The padding option keeps the handles a certain distance from the
+          // edges of the slider. Padding must be > 0.
+          if (options.padding) {
+              if (handleNumber === 0) {
+                  distance = scope_Spectrum.getAbsoluteDistance(0, options.padding[0], false);
+                  to = Math.max(to, distance);
+              }
+              if (handleNumber === scope_Handles.length - 1) {
+                  distance = scope_Spectrum.getAbsoluteDistance(100, options.padding[1], true);
+                  to = Math.min(to, distance);
+              }
+          }
+          if (!smoothSteps) {
+              to = scope_Spectrum.getStep(to);
+          }
+          // Limit percentage to the 0 - 100 range
+          to = limit(to);
+          // Return false if handle can't move
+          if (to === reference[handleNumber] && !getValue) {
+              return false;
+          }
+          return to;
+      }
+      // Uses slider orientation to create CSS rules. a = base value;
+      function inRuleOrder(v, a) {
+          var o = options.ort;
+          return (o ? a : v) + ", " + (o ? v : a);
+      }
+      // Moves handle(s) by a percentage
+      // (bool, % to move, [% where handle started, ...], [index in scope_Handles, ...])
+      function moveHandles(upward, proposal, locations, handleNumbers, connect) {
+          var proposals = locations.slice();
+          // Store first handle now, so we still have it in case handleNumbers is reversed
+          var firstHandle = handleNumbers[0];
+          var smoothSteps = options.events.smoothSteps;
+          var b = [!upward, upward];
+          var f = [upward, !upward];
+          // Copy handleNumbers so we don't change the dataset
+          handleNumbers = handleNumbers.slice();
+          // Check to see which handle is 'leading'.
+          // If that one can't move the second can't either.
+          if (upward) {
+              handleNumbers.reverse();
+          }
+          // Step 1: get the maximum percentage that any of the handles can move
+          if (handleNumbers.length > 1) {
+              handleNumbers.forEach(function (handleNumber, o) {
+                  var to = checkHandlePosition(proposals, handleNumber, proposals[handleNumber] + proposal, b[o], f[o], false, smoothSteps);
+                  // Stop if one of the handles can't move.
+                  if (to === false) {
+                      proposal = 0;
+                  }
+                  else {
+                      proposal = to - proposals[handleNumber];
+                      proposals[handleNumber] = to;
+                  }
+              });
+          }
+          // If using one handle, check backward AND forward
+          else {
+              b = f = [true];
+          }
+          var state = false;
+          // Step 2: Try to set the handles with the found percentage
+          handleNumbers.forEach(function (handleNumber, o) {
+              state =
+                  setHandle(handleNumber, locations[handleNumber] + proposal, b[o], f[o], false, smoothSteps) || state;
+          });
+          // Step 3: If a handle moved, fire events
+          if (state) {
+              handleNumbers.forEach(function (handleNumber) {
+                  fireEvent("update", handleNumber);
+                  fireEvent("slide", handleNumber);
+              });
+              // If target is a connect, then fire drag event
+              if (connect != undefined) {
+                  fireEvent("drag", firstHandle);
+              }
+          }
+      }
+      // Takes a base value and an offset. This offset is used for the connect bar size.
+      // In the initial design for this feature, the origin element was 1% wide.
+      // Unfortunately, a rounding bug in Chrome makes it impossible to implement this feature
+      // in this manner: https://bugs.chromium.org/p/chromium/issues/detail?id=798223
+      function transformDirection(a, b) {
+          return options.dir ? 100 - a - b : a;
+      }
+      // Updates scope_Locations and scope_Values, updates visual state
+      function updateHandlePosition(handleNumber, to) {
+          // Update locations.
+          scope_Locations[handleNumber] = to;
+          // Convert the value to the slider stepping/range.
+          scope_Values[handleNumber] = scope_Spectrum.fromStepping(to);
+          var translation = transformDirection(to, 0) - scope_DirOffset;
+          var translateRule = "translate(" + inRuleOrder(translation + "%", "0") + ")";
+          scope_Handles[handleNumber].style[options.transformRule] = translateRule;
+          updateConnect(handleNumber);
+          updateConnect(handleNumber + 1);
+      }
+      // Handles before the slider middle are stacked later = higher,
+      // Handles after the middle later is lower
+      // [[7] [8] .......... | .......... [5] [4]
+      function setZindex() {
+          scope_HandleNumbers.forEach(function (handleNumber) {
+              var dir = scope_Locations[handleNumber] > 50 ? -1 : 1;
+              var zIndex = 3 + (scope_Handles.length + dir * handleNumber);
+              scope_Handles[handleNumber].style.zIndex = String(zIndex);
+          });
+      }
+      // Test suggested values and apply margin, step.
+      // if exactInput is true, don't run checkHandlePosition, then the handle can be placed in between steps (#436)
+      function setHandle(handleNumber, to, lookBackward, lookForward, exactInput, smoothSteps) {
+          if (!exactInput) {
+              to = checkHandlePosition(scope_Locations, handleNumber, to, lookBackward, lookForward, false, smoothSteps);
+          }
+          if (to === false) {
+              return false;
+          }
+          updateHandlePosition(handleNumber, to);
+          return true;
+      }
+      // Updates style attribute for connect nodes
+      function updateConnect(index) {
+          // Skip connects set to false
+          if (!scope_Connects[index]) {
+              return;
+          }
+          var l = 0;
+          var h = 100;
+          if (index !== 0) {
+              l = scope_Locations[index - 1];
+          }
+          if (index !== scope_Connects.length - 1) {
+              h = scope_Locations[index];
+          }
+          // We use two rules:
+          // 'translate' to change the left/top offset;
+          // 'scale' to change the width of the element;
+          // As the element has a width of 100%, a translation of 100% is equal to 100% of the parent (.noUi-base)
+          var connectWidth = h - l;
+          var translateRule = "translate(" + inRuleOrder(transformDirection(l, connectWidth) + "%", "0") + ")";
+          var scaleRule = "scale(" + inRuleOrder(connectWidth / 100, "1") + ")";
+          scope_Connects[index].style[options.transformRule] =
+              translateRule + " " + scaleRule;
+      }
+      // Parses value passed to .set method. Returns current value if not parse-able.
+      function resolveToValue(to, handleNumber) {
+          // Setting with null indicates an 'ignore'.
+          // Inputting 'false' is invalid.
+          if (to === null || to === false || to === undefined) {
+              return scope_Locations[handleNumber];
+          }
+          // If a formatted number was passed, attempt to decode it.
+          if (typeof to === "number") {
+              to = String(to);
+          }
+          to = options.format.from(to);
+          if (to !== false) {
+              to = scope_Spectrum.toStepping(to);
+          }
+          // If parsing the number failed, use the current value.
+          if (to === false || isNaN(to)) {
+              return scope_Locations[handleNumber];
+          }
+          return to;
+      }
+      // Set the slider value.
+      function valueSet(input, fireSetEvent, exactInput) {
+          var values = asArray(input);
+          var isInit = scope_Locations[0] === undefined;
+          // Event fires by default
+          fireSetEvent = fireSetEvent === undefined ? true : fireSetEvent;
+          // Animation is optional.
+          // Make sure the initial values were set before using animated placement.
+          if (options.animate && !isInit) {
+              addClassFor(scope_Target, options.cssClasses.tap, options.animationDuration);
+          }
+          // First pass, without lookAhead but with lookBackward. Values are set from left to right.
+          scope_HandleNumbers.forEach(function (handleNumber) {
+              setHandle(handleNumber, resolveToValue(values[handleNumber], handleNumber), true, false, exactInput);
+          });
+          var i = scope_HandleNumbers.length === 1 ? 0 : 1;
+          // Spread handles evenly across the slider if the range has no size (min=max)
+          if (isInit && scope_Spectrum.hasNoSize()) {
+              exactInput = true;
+              scope_Locations[0] = 0;
+              if (scope_HandleNumbers.length > 1) {
+                  var space_1 = 100 / (scope_HandleNumbers.length - 1);
+                  scope_HandleNumbers.forEach(function (handleNumber) {
+                      scope_Locations[handleNumber] = handleNumber * space_1;
+                  });
+              }
+          }
+          // Secondary passes. Now that all base values are set, apply constraints.
+          // Iterate all handles to ensure constraints are applied for the entire slider (Issue #1009)
+          for (; i < scope_HandleNumbers.length; ++i) {
+              scope_HandleNumbers.forEach(function (handleNumber) {
+                  setHandle(handleNumber, scope_Locations[handleNumber], true, true, exactInput);
+              });
+          }
+          setZindex();
+          scope_HandleNumbers.forEach(function (handleNumber) {
+              fireEvent("update", handleNumber);
+              // Fire the event only for handles that received a new value, as per #579
+              if (values[handleNumber] !== null && fireSetEvent) {
+                  fireEvent("set", handleNumber);
+              }
+          });
+      }
+      // Reset slider to initial values
+      function valueReset(fireSetEvent) {
+          valueSet(options.start, fireSetEvent);
+      }
+      // Set value for a single handle
+      function valueSetHandle(handleNumber, value, fireSetEvent, exactInput) {
+          // Ensure numeric input
+          handleNumber = Number(handleNumber);
+          if (!(handleNumber >= 0 && handleNumber < scope_HandleNumbers.length)) {
+              throw new Error("noUiSlider: invalid handle number, got: " + handleNumber);
+          }
+          // Look both backward and forward, since we don't want this handle to "push" other handles (#960);
+          // The exactInput argument can be used to ignore slider stepping (#436)
+          setHandle(handleNumber, resolveToValue(value, handleNumber), true, true, exactInput);
+          fireEvent("update", handleNumber);
+          if (fireSetEvent) {
+              fireEvent("set", handleNumber);
+          }
+      }
+      // Get the slider value.
+      function valueGet(unencoded) {
+          if (unencoded === void 0) { unencoded = false; }
+          if (unencoded) {
+              // return a copy of the raw values
+              return scope_Values.length === 1 ? scope_Values[0] : scope_Values.slice(0);
+          }
+          var values = scope_Values.map(options.format.to);
+          // If only one handle is used, return a single value.
+          if (values.length === 1) {
+              return values[0];
+          }
+          return values;
+      }
+      // Removes classes from the root and empties it.
+      function destroy() {
+          // remove protected internal listeners
+          removeEvent(INTERNAL_EVENT_NS.aria);
+          removeEvent(INTERNAL_EVENT_NS.tooltips);
+          Object.keys(options.cssClasses).forEach(function (key) {
+              removeClass(scope_Target, options.cssClasses[key]);
+          });
+          while (scope_Target.firstChild) {
+              scope_Target.removeChild(scope_Target.firstChild);
+          }
+          delete scope_Target.noUiSlider;
+      }
+      function getNextStepsForHandle(handleNumber) {
+          var location = scope_Locations[handleNumber];
+          var nearbySteps = scope_Spectrum.getNearbySteps(location);
+          var value = scope_Values[handleNumber];
+          var increment = nearbySteps.thisStep.step;
+          var decrement = null;
+          // If snapped, directly use defined step value
+          if (options.snap) {
+              return [
+                  value - nearbySteps.stepBefore.startValue || null,
+                  nearbySteps.stepAfter.startValue - value || null,
+              ];
+          }
+          // If the next value in this step moves into the next step,
+          // the increment is the start of the next step - the current value
+          if (increment !== false) {
+              if (value + increment > nearbySteps.stepAfter.startValue) {
+                  increment = nearbySteps.stepAfter.startValue - value;
+              }
+          }
+          // If the value is beyond the starting point
+          if (value > nearbySteps.thisStep.startValue) {
+              decrement = nearbySteps.thisStep.step;
+          }
+          else if (nearbySteps.stepBefore.step === false) {
+              decrement = false;
+          }
+          // If a handle is at the start of a step, it always steps back into the previous step first
+          else {
+              decrement = value - nearbySteps.stepBefore.highestStep;
+          }
+          // Now, if at the slider edges, there is no in/decrement
+          if (location === 100) {
+              increment = null;
+          }
+          else if (location === 0) {
+              decrement = null;
+          }
+          // As per #391, the comparison for the decrement step can have some rounding issues.
+          var stepDecimals = scope_Spectrum.countStepDecimals();
+          // Round per #391
+          if (increment !== null && increment !== false) {
+              increment = Number(increment.toFixed(stepDecimals));
+          }
+          if (decrement !== null && decrement !== false) {
+              decrement = Number(decrement.toFixed(stepDecimals));
+          }
+          return [decrement, increment];
+      }
+      // Get the current step size for the slider.
+      function getNextSteps() {
+          return scope_HandleNumbers.map(getNextStepsForHandle);
+      }
+      // Updatable: margin, limit, padding, step, range, animate, snap
+      function updateOptions(optionsToUpdate, fireSetEvent) {
+          // Spectrum is created using the range, snap, direction and step options.
+          // 'snap' and 'step' can be updated.
+          // If 'snap' and 'step' are not passed, they should remain unchanged.
+          var v = valueGet();
+          var updateAble = [
+              "margin",
+              "limit",
+              "padding",
+              "range",
+              "animate",
+              "snap",
+              "step",
+              "format",
+              "pips",
+              "tooltips",
+          ];
+          // Only change options that we're actually passed to update.
+          updateAble.forEach(function (name) {
+              // Check for undefined. null removes the value.
+              if (optionsToUpdate[name] !== undefined) {
+                  originalOptions[name] = optionsToUpdate[name];
+              }
+          });
+          var newOptions = testOptions(originalOptions);
+          // Load new options into the slider state
+          updateAble.forEach(function (name) {
+              if (optionsToUpdate[name] !== undefined) {
+                  options[name] = newOptions[name];
+              }
+          });
+          scope_Spectrum = newOptions.spectrum;
+          // Limit, margin and padding depend on the spectrum but are stored outside of it. (#677)
+          options.margin = newOptions.margin;
+          options.limit = newOptions.limit;
+          options.padding = newOptions.padding;
+          // Update pips, removes existing.
+          if (options.pips) {
+              pips(options.pips);
+          }
+          else {
+              removePips();
+          }
+          // Update tooltips, removes existing.
+          if (options.tooltips) {
+              tooltips();
+          }
+          else {
+              removeTooltips();
+          }
+          // Invalidate the current positioning so valueSet forces an update.
+          scope_Locations = [];
+          valueSet(isSet(optionsToUpdate.start) ? optionsToUpdate.start : v, fireSetEvent);
+      }
+      // Initialization steps
+      function setupSlider() {
+          // Create the base element, initialize HTML and set classes.
+          // Add handles and connect elements.
+          scope_Base = addSlider(scope_Target);
+          addElements(options.connect, scope_Base);
+          // Attach user events.
+          bindSliderEvents(options.events);
+          // Use the public value method to set the start values.
+          valueSet(options.start);
+          if (options.pips) {
+              pips(options.pips);
+          }
+          if (options.tooltips) {
+              tooltips();
+          }
+          aria();
+      }
+      setupSlider();
+      var scope_Self = {
+          destroy: destroy,
+          steps: getNextSteps,
+          on: bindEvent,
+          off: removeEvent,
+          get: valueGet,
+          set: valueSet,
+          setHandle: valueSetHandle,
+          reset: valueReset,
+          // Exposed for unit testing, don't use this in your application.
+          __moveHandles: function (upward, proposal, handleNumbers) {
+              moveHandles(upward, proposal, scope_Locations, handleNumbers);
+          },
+          options: originalOptions,
+          updateOptions: updateOptions,
+          target: scope_Target,
+          removePips: removePips,
+          removeTooltips: removeTooltips,
+          getPositions: function () {
+              return scope_Locations.slice();
+          },
+          getTooltips: function () {
+              return scope_Tooltips;
+          },
+          getOrigins: function () {
+              return scope_Handles;
+          },
+          pips: pips, // Issue #594
+      };
+      return scope_Self;
+  }
+  // Run the standard initializer
+  function initialize(target, originalOptions) {
+      if (!target || !target.nodeName) {
+          throw new Error("noUiSlider: create requires a single element, got: " + target);
+      }
+      // Throw an error if the slider was already initialized.
+      if (target.noUiSlider) {
+          throw new Error("noUiSlider: Slider was already initialized.");
+      }
+      // Test the options and create the slider environment;
+      var options = testOptions(originalOptions);
+      var api = scope(target, options, originalOptions);
+      target.noUiSlider = api;
+      return api;
+  }
+  var nouislider = {
+      // Exposed for unit testing, don't use this in your application.
+      __spectrum: Spectrum,
+      // A reference to the default classes, allows global changes.
+      // Use the cssClasses option for changes to one slider.
+      cssClasses: cssClasses,
+      create: initialize,
+  };
+
+  exports.create = initialize;
+  exports.cssClasses = cssClasses;
+  exports["default"] = nouislider;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+}));
diff --git a/12/vendor/pristine/pristine.min.js b/12/vendor/pristine/pristine.min.js
new file mode 100644
index 0000000..75030ff
--- /dev/null
+++ b/12/vendor/pristine/pristine.min.js
@@ -0,0 +1 @@
+!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?module.exports=r():"function"==typeof define&&define.amd?define(r):(e="undefined"!=typeof globalThis?globalThis:e||self).Pristine=r()}(this,(function(){"use strict";var e={en:{required:"This field is required",email:"This field requires a valid e-mail address",number:"This field requires a number",integer:"This field requires an integer value",url:"This field requires a valid website URL",tel:"This field requires a valid telephone number",maxlength:"This fields length must be < ${1}",minlength:"This fields length must be > ${1}",min:"Minimum value for this field is ${1}",max:"Maximum value for this field is ${1}",pattern:"Please match the requested format",equals:"The two fields do not match"}};function r(e){var r=arguments;return this.replace(/\${([^{}]*)}/g,(function(e,t){return r[t]}))}function t(e){return e.pristine.self.form.querySelectorAll('input[name="'+e.getAttribute("name")+'"]:checked').length}var n={classTo:"form-group",errorClass:"has-danger",successClass:"has-success",errorTextParent:"form-group",errorTextTag:"div",errorTextClass:"text-help"},i=["required","min","max","minlength","maxlength","pattern"],s=/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,a=/-message(?:-([a-z]{2}(?:_[A-Z]{2})?))?/,o="en",l={},u=function(e,r){r.name=e,void 0===r.priority&&(r.priority=1),l[e]=r};function f(t,s,u){var f=this;function c(e,r,t,n){var i=l[t];if(i&&(e.push(i),n)){var s="pattern"===t?[n]:n.split(",");s.unshift(null),r[t]=s}}function p(t){for(var n=[],i=!0,s=0;t.validators[s];s++){var a=t.validators[s],l=t.params[a.name]?t.params[a.name]:[];if(l[0]=t.input.value,!a.fn.apply(t.input,l)&&(i=!1,"function"==typeof a.msg?n.push(a.msg(t.input.value,l)):"string"==typeof a.msg?n.push(r.apply(a.msg,l)):a.msg===Object(a.msg)&&a.msg[o]?n.push(r.apply(a.msg[o],l)):t.messages[o]&&t.messages[o][a.name]?n.push(r.apply(t.messages[o][a.name],l)):e[o]&&e[o][a.name]&&n.push(r.apply(e[o][a.name],l)),!0===a.halt))break}return t.errors=n,i}function m(e){if(e.errorElements)return e.errorElements;var r=function(e,r){for(;(e=e.parentElement)&&!e.classList.contains(r););return e}(e.input,f.config.classTo),t=null,n=null;return(t=f.config.classTo===f.config.errorTextParent?r:r.querySelector("."+f.config.errorTextParent))&&((n=t.querySelector(".pristine-error"))||((n=document.createElement(f.config.errorTextTag)).className="pristine-error "+f.config.errorTextClass,t.appendChild(n),n.pristineDisplay=n.style.display)),e.errorElements=[r,n]}function d(e){var r=m(e),t=r[0],n=r[1];t&&(t.classList.remove(f.config.successClass),t.classList.add(f.config.errorClass)),n&&(n.innerHTML=e.errors.join("<br/>"),n.style.display=n.pristineDisplay||"")}function h(e){var r=function(e){var r=m(e),t=r[0],n=r[1];return t&&(t.classList.remove(f.config.errorClass),t.classList.remove(f.config.successClass)),n&&(n.innerHTML="",n.style.display="none"),r}(e)[0];r&&r.classList.add(f.config.successClass)}return function(e,r,t){e.setAttribute("novalidate","true"),f.form=e,f.config=function(e,r){for(var t in r)t in e||(e[t]=r[t]);return e}(r||{},n),f.live=!(!1===t),f.fields=Array.from(e.querySelectorAll("input:not([type^=hidden]):not([type^=submit]), select, textarea")).map(function(e){var r=[],t={},n={};return[].forEach.call(e.attributes,(function(e){if(/^data-pristine-/.test(e.name)){var s=e.name.substr(14),o=s.match(a);if(null!==o){var l=void 0===o[1]?"en":o[1];return n.hasOwnProperty(l)||(n[l]={}),void(n[l][s.slice(0,s.length-o[0].length)]=e.value)}"type"===s&&(s=e.value),c(r,t,s,e.value)}else~i.indexOf(e.name)?c(r,t,e.name,e.value):"type"===e.name&&c(r,t,e.value)})),r.sort((function(e,r){return r.priority-e.priority})),f.live&&e.addEventListener(~["radio","checkbox"].indexOf(e.getAttribute("type"))?"change":"input",function(e){f.validate(e.target)}.bind(f)),e.pristine={input:e,validators:r,params:t,messages:n,self:f}}.bind(f))}(t,s,u),f.validate=function(e,r){r=e&&!0===r||!0===e;var t=f.fields;!0!==e&&!1!==e&&(e instanceof HTMLElement?t=[e.pristine]:(e instanceof NodeList||e instanceof(window.$||Array)||e instanceof Array)&&(t=Array.from(e).map((function(e){return e.pristine}))));for(var n=!0,i=0;t[i];i++){var s=t[i];p(s)?!r&&h(s):(n=!1,!r&&d(s))}return n},f.getErrors=function(e){if(!e){for(var r=[],t=0;t<f.fields.length;t++){var n=f.fields[t];n.errors.length&&r.push({input:n.input,errors:n.errors})}return r}return e.tagName&&"select"===e.tagName.toLowerCase()?e.pristine.errors:e.length?e[0].pristine.errors:e.pristine.errors},f.addValidator=function(e,r,t,n,i){e instanceof HTMLElement?(e.pristine.validators.push({fn:r,msg:t,priority:n,halt:i}),e.pristine.validators.sort((function(e,r){return r.priority-e.priority}))):console.warn("The parameter elem must be a dom element")},f.addError=function(e,r){(e=e.length?e[0]:e).pristine.errors.push(r),d(e.pristine)},f.reset=function(){for(var e=0;f.fields[e];e++)f.fields[e].errorElements=null;Array.from(f.form.querySelectorAll(".pristine-error")).map((function(e){e.parentNode.removeChild(e)})),Array.from(f.form.querySelectorAll("."+f.config.classTo)).map((function(e){e.classList.remove(f.config.successClass),e.classList.remove(f.config.errorClass)}))},f.destroy=function(){f.reset(),f.fields.forEach((function(e){delete e.input.pristine})),f.fields=[]},f.setGlobalConfig=function(e){n=e},f}return u("text",{fn:function(e){return!0},priority:0}),u("required",{fn:function(e){return"radio"===this.type||"checkbox"===this.type?t(this):void 0!==e&&""!==e},priority:99,halt:!0}),u("email",{fn:function(e){return!e||s.test(e)}}),u("number",{fn:function(e){return!e||!isNaN(parseFloat(e))},priority:2}),u("integer",{fn:function(e){return!e||/^\d+$/.test(e)}}),u("minlength",{fn:function(e,r){return!e||e.length>=parseInt(r)}}),u("maxlength",{fn:function(e,r){return!e||e.length<=parseInt(r)}}),u("min",{fn:function(e,r){return!e||("checkbox"===this.type?t(this)>=parseInt(r):parseFloat(e)>=parseFloat(r))}}),u("max",{fn:function(e,r){return!e||("checkbox"===this.type?t(this)<=parseInt(r):parseFloat(e)<=parseFloat(r))}}),u("pattern",{fn:function(e,r){var t=r.match(new RegExp("^/(.*?)/([gimy]*)$"));return!e||new RegExp(t[1],t[2]).test(e)}}),u("equals",{fn:function(e,r){var t=document.querySelector(r);return t&&(!e&&!t.value||t.value===e)}}),f.addValidator=function(e,r,t,n,i){u(e,{fn:r,msg:t,priority:n,halt:i})},f.addMessages=function(r,t){var n=e.hasOwnProperty(r)?e[r]:e[r]={};Object.keys(t).forEach((function(e,r){n[e]=t[e]}))},f.setLocale=function(e){o=e},f}));